File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
div[related-links-footer] |
| styleUrls |
./related-links-footer.component.scss |
| templateUrl |
./related-links-footer.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
HostBindings
|
|
|
Methods
|
parseJson
|
parseJson(data: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| data |
any
|
No
|
|
import { Component, OnInit, Input, ChangeDetectionStrategy, 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';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { ComponentLink } from 'src/app/core/interfaces/interfaces.component';
interface IRelatedLinks {
icon: string;
title: string;
linkTargets: ComponentLink[];
id: string;
}
@Component({
selector: 'div[related-links-footer]',
templateUrl: './related-links-footer.component.html',
styleUrls: ['./related-links-footer.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RelatedLinksFooterComponent implements OnInit {
@Input() entity;
data: IRelatedLinks;
@HostBinding('class') get class() { return 'col-md-4'; }
constructor(
private util: UtilService,
private linkService: ComponentLinkService,
private idService: IdGeneratorService
) { }
ngOnInit() {
if (this.entity) {
this.data = this.parseJson(this.entity);
}
}
parseJson(data: any): IRelatedLinks {
return {
icon: this.util.extract(data, 'Icon'),
title: this.util.extract(data, 'Title'),
linkTargets: this.util.extract(data, 'LinkTargets').map(link => this.linkService.parseLink(link)),
id: this.idService.getId()
};
}
}
<div class="card" *ngIf="data">
<div class="card-header">
{{data.title}}
</div>
<div class="list-group list-group-flush">
<a component-link [linkObject]="link.linkObject" class="list-group-item list-group-item-action" *ngFor="let link of data.linkTargets">
<div class="card-title mb-1">
<i *ngIf="link.linkObject?.LinkModelTarget?.MimeType === 'application/zip' " class="icon-link-download"></i>
{{link.title}}
<i class="icon-link-openNewWindow" *ngIf="link.newWindow"></i>
</div>
</a>
</div>
</div>
<ngb-accordion class="footer-links-mobile" *ngIf="data">
<ngb-panel [id]="data.id">
<ng-template ngbPanelTitle>
{{data.title}}
<i class="icon-chevronDown"> </i>
<i class="icon-chevronUp"> </i>
</ng-template>
<ng-template ngbPanelContent>
<div class="list-group list-group-flush">
<a component-link [linkObject]="link.linkObject" class="list-group-item list-group-item-action" *ngFor="let link of data.linkTargets">
<div class="card-title mb-1">
<i *ngIf="link.linkObject?.LinkModelTarget?.MimeType === 'application/zip' " class="icon-link-download"></i>
{{link.title}}
<i class="icon-link-openNewWindow" *ngIf="link.newWindow"></i>
</div>
</a>
</div>
</ng-template>
</ngb-panel>
</ngb-accordion>
@import "src/app/styles/helpers";
:host {
padding: calc-rem(24) 0;
@include media-breakpoint-down(sm) {
padding: 0;
padding-top: calc-rem(12);
}
}
:host .card {
display: none;
border: none;
background-color: transparent;
@include media-breakpoint-up(md) {
display: flex;
}
&-header, ::ng-deep .list-group-item {
background-color: transparent;
}
&-header {
@include font-scale(14, uppercase);
padding-top: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: calc-rem(24);
border: none;
text-transform: uppercase;
}
.list-group-item {
border: none;
padding-top: 0;
padding-left: 0;
padding-right: 0;
@include font-scale(12, medium);
color: $blue;
&[target=_blank]:after {
content: none;
}
&:hover {
text-decoration: underline;
}
}
}
::ng-deep .footer-links-mobile {
@include media-breakpoint-up(md) {
display: none;
}
.card {
border: none;
border-bottom: 1px solid $light-slate !important;
background-color: transparent;
&-header,
&-body,
.list-group-item {
padding-left: 0;
padding-right: 0;
background-color: transparent;
}
&-header {
[class*="icon-icon_"] {
margin-top: calc-rem(3);
@include font-size(10);
}
}
&-body {
@include font-scale(12, medium);
}
.btn {
display: flex;
justify-content: space-between;
text-transform: uppercase;
padding-left: 0;
color: $cool-grey;
width: 100%;
@include font-scale(14, uppercase);
&[aria-expanded=true] .icon-chevronDown {
display: none;
}
&[aria-expanded=false] .icon-chevronUp {
display: none;
}
&:hover,
&:focus {
text-decoration: none;
}
}
.list-group {
&-item {
color: $blue;
border: none;
padding-top: 0;
&[target=_blank]:after {
content: none;
}
}
}
}
}
Legend
Html element with directive