File
Implements
Metadata
| selector |
tridion-document |
| styleUrls |
./tridion-document.component.scss |
| templateUrl |
./tridion-document.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
import { OnInit, Component, Input } from '@angular/core';
@Component({
selector: 'tridion-document',
templateUrl: './tridion-document.component.html',
styleUrls: ['./tridion-document.component.scss']
})
export class TridionDocumentComponent implements OnInit {
@Input() document;
imageUrl: string;
pdpUrl: string;
constructor() {}
ngOnInit(): void {
this.imageUrl = this.document.image_url;
this.imageUrl = this.imageUrl ? `/content${this.imageUrl}` : null;
if (!this.imageUrl || this.imageUrl === '/content') { this.imageUrl = 'v2/assets/img/no-image.png'; }
}
}
<div class="card">
<div class="doc-image" *ngIf="imageUrl">
<a [routerLink]="document.url">
<img [src]="imageUrl" class="card-img-top" [alt]="document.title">
</a>
</div>
<div class="card-body" *ngIf="document">
<div class="card-title" *ngIf="document.title">
<a [routerLink]="document.url">{{document.title}}</a>
</div>
<div class="card-text" *ngIf="document.description">{{document.description | truncatetext: 150}}</div>
</div>
</div>
@import "src/app/styles/helpers";
.card {
height: 100%;
box-shadow: $box-shadow-sm;
border-radius: calc-rem(2);
border: none;
&:hover {
box-shadow: $box-shadow-sm-hover;
transition: 0.3s;
}
.doc-image {
display: flex;
border-bottom: 1px solid $off-white;
@include aspect-ratio(1 1, 'a > img');
.card-img-top {
object-fit: cover;
}
}
&-body {
background-color: $off-white;
}
&-title {
@include font-scale(18, bold);
color: $blue;
word-wrap: break-word;
}
&-text {
@include font-size(16);
color: $cool-grey;
word-wrap: break-word;
}
}
Legend
Html element with directive