File
Implements
Metadata
| selector |
div[social-media-footer-side] |
| styleUrls |
./social-media-footer-side.component.scss |
| templateUrl |
./social-media-footer-side.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
parseJson
|
parseJson(json: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| json |
any
|
No
|
|
|
parseSocialMediaIcon
|
parseSocialMediaIcon(json)
|
|
|
|
|
|
Readonly
appStoreIconName
|
Type : string
|
Default value : 'icon-app-store-apple'
|
|
|
|
Readonly
googlePlayIconName
|
Type : string
|
Default value : 'icon-app-store-google'
|
|
|
import { Component, OnInit, Input, HostBinding } from '@angular/core';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { ComponentLinkService } from 'src/app/core/services/component-link-service/component-link.service';
interface SocialMediaFooter {
title: string;
icons: SocialMediaIcon[];
}
interface SocialMediaIcon {
name: string;
type: iconType;
link: any;
url: string;
}
type iconType = 'icon' | 'apple-app-store' | 'google-play';
@Component({
selector: 'div[social-media-footer-side]',
templateUrl: './social-media-footer-side.component.html',
styleUrls: ['./social-media-footer-side.component.scss']
})
export class SocialMediaFooterSideComponent implements OnInit {
@Input() entity;
data: SocialMediaFooter;
constructor(private util: UtilService, private linkService: ComponentLinkService) { }
readonly appStoreIconName = 'icon-app-store-apple';
readonly googlePlayIconName = 'icon-app-store-google';
ngOnInit() {
this.data = this.parseJson(this.entity);
}
parseJson(json: any): SocialMediaFooter {
const title: string = this.util.extract(json, 'Title');
const socialMediaIcons: SocialMediaIcon[] = (this.util.extract(json, 'SocialMedia') || []).map(e => this.parseSocialMediaIcon(e));
return {
title: title,
icons: socialMediaIcons
};
}
parseSocialMediaIcon(json): SocialMediaIcon {
const iconName = this.util.extract(json, 'Icon');
const link = this.util.extract(json, 'Link');
const url = this.linkService.getUrl(link)
let type: iconType = 'icon';
if (this.appStoreIconName === iconName) {
type = 'apple-app-store';
} else if (this.googlePlayIconName === iconName) {
type = 'google-play';
}
return {
name: iconName,
type: type,
link: link,
url: url
};
}
}
<div class="card" *ngIf="data">
<div class="card-header">
{{data.title}}
</div>
<div class="card-body">
<ul class="list-group list-group-horizontal">
<li *ngFor="let icon of data.icons" class="list-group-item">
<a component-link [linkObject]="icon.link" *ngIf="icon.type === 'icon'">
<i [ngClass]="icon.name"></i>
</a>
<a class="apple-app-store" *ngIf="icon.type === 'apple-app-store'" [href]="icon.url">
<img src="v2/assets/img/App-store-black.svg">
</a>
<a class="google-play" *ngIf="icon.type === 'google-play'" [href]="icon.url">
<img alt='Get it on Google Play' src='v2/assets/img/google-play-badge.png'/>
</a>
</li>
</ul>
</div>
</div>
@import "src/app/styles/helpers";
:host {
padding: calc-rem(24) 0;
}
.card {
border: none;
background-color: transparent;
&-header {
padding-left: calc-rem(5);
padding-right: 0;
padding-top: 0;
border: none;
text-transform: uppercase;
@include font-scale(14, uppercase);
background-color: transparent;
}
&-body {
padding: 0;
background-color: transparent;
.list-group {
flex-wrap: wrap;
align-items: center;
&-item {
padding: 0 calc-rem(5);
border: none !important;
background-color: transparent;
}
}
}
}
:host ::ng-deep a {
text-decoration: none;
i {
@include font-size(40);
color: $slate;
margin-left: 0;
margin-right: 0;
}
&[target=_blank]:after {
content: none;
}
}
.apple-app-store {
img {
height: 40px;
}
}
.google-play {
img {
height: 58px;
@include media-breakpoint-only(md) {
margin-left: calc-rem(-13);
}
}
}
Legend
Html element with directive