File
Implements
Metadata
| selector |
div[highlighted-content-main-without-image] |
| styleUrls |
./highlighted-content-main-without-image.component.scss |
| templateUrl |
./highlighted-content-main-without-image.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
HostBindings
|
|
|
import { Component, OnInit, Input, Inject, HostBinding } from '@angular/core';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { HighlightedContentData } from 'src/app/core/interfaces/interfaces.component';
import { HighlightedContentService } from '../highlighted-content.service';
@Component({
selector: 'div[highlighted-content-main-without-image]',
templateUrl: './highlighted-content-main-without-image.component.html',
styleUrls: ['./highlighted-content-main-without-image.component.scss']
})
export class HighlightedContentMainWithoutImageComponent implements OnInit {
@Input() entity;
data: HighlightedContentData;
@HostBinding('class') get class() {
if (this.entity && this.entity.Entities) {
switch (Object.keys(this.entity.Entities).length) {
case 1:
return 'col-md-4 card-100 space-between';
case 2:
return 'col-md-8 card-50 space-between';
default:
return 'col-md-12 space-between';
}
}
}
constructor(
private util: UtilService,
private highlightedContentService: HighlightedContentService
) { }
ngOnInit() {
if (this.entity && this.entity.Entities) {
this.data = this.entity.Entities.map((entity: any) => this.highlightedContentService.parseJson(entity));
}
}
}
<div class="container">
<div class="card-deck" *ngIf="data">
<ng-container *ngFor="let card of data">
<div class="card" [id]="card.id" [ngClass]="card.colorScheme">
<div class="card-header">
{{card.descriptionTitle}}
</div>
<div class="card-body">
{{card.description}}
</div>
<div class="card-footer">
<a component-link [linkObject]="card.link.linkObject" [ngClass]="{'btn btn-green button': card.isButtonLink}"
[showChevron]="!card.isButtonLink" *ngIf="card.link?.linkObject">
{{card.link.title | uppercase }}
</a>
</div>
</div>
</ng-container>
</div>
</div>
@import "../highlighted-content.component.scss";
.card-deck {
.card {
border: none;
color: $white;
padding-top: calc-rem(25);
padding-bottom: calc-rem(20);
@include media-breakpoint-up(sm) {
flex: 0 0 calc(50% - 30px);
margin-bottom: calc-rem(50);
}
@include media-breakpoint-up(lg) {
flex: 0 0 calc(33% - 30px);
}
&-header,
&-body,
&-footer
{
padding-left: calc-rem(32);
padding-right: calc-rem(32);
}
&-header
{
padding-bottom: calc-rem(24);
background-color: transparent;
border: none;
@include font-scale(32, light);
}
&-body {
@include font-scale(16, light);
}
&-footer {
border: none;
background-color: transparent;
}
}
:host(.card-100) & {
.card {
flex: 0 0 calc(100% - 30px);
}
}
:host(.card-50) & {
.card {
flex: 0 0 calc(50% - 30px);
}
}
}
Legend
Html element with directive