File
Implements
Metadata
| selector |
div[media-kit-vertical-main] |
| styleUrls |
./media-kit-vertical-main.component.scss |
| templateUrl |
./media-kit-vertical-main.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
HostBindings
|
|
|
import { Component, OnInit, Input, HostBinding } from '@angular/core';
import { MediaKitService } from 'src/app/core/services/mediaKit-service/media-kit.service';
import { MediaKit } from 'src/app/core/interfaces/interfaces.component';
@Component({
selector: 'div[media-kit-vertical-main]',
templateUrl: './media-kit-vertical-main.component.html',
styleUrls: ['./media-kit-vertical-main.component.scss']
})
export class MediaKitVerticalMainComponent implements OnInit {
@Input() entity;
data: MediaKit;
zipfileUrl: string;
buttonDisabled: boolean;
@HostBinding('class') get class() { return 'col-md-4 space-between'; }
constructor(private mediaKit: MediaKitService) { }
ngOnInit() {
this.data = this.mediaKit.parseMediaKit(this.entity);
this.zipfileUrl = this.mediaKit.buildQueryString(this.data);
this.buttonDisabled = this.zipfileUrl.startsWith('#');
}
}
<div class="card">
<div class="card-header">
{{data.title}}
</div>
<ul class="list-group list-group-flush">
<li *ngFor="let mediaItem of data.mediaItems" class="list-group-item">
<i *ngIf="mediaItem.mimeType === 'application/pdf' " class="icon-related-pdf"></i>
<span *ngIf="!mediaItem.isVideo">{{mediaItem.title + ' ' + mediaItem.size}}</span>
</li>
</ul>
<div class="card-footer">
<a [href]="zipfileUrl" class="btn btn-green" [ngClass]="{'disabled': buttonDisabled}">{{data.buttonTitle}}</a>
</div>
</div>
@import "src/app/styles/helpers";
.card {
background-color: $off-white;
border: none;
&-header,
&-footer,
.list-group-item {
background-color: $off-white;
padding-left: calc-rem(32);
padding-right: calc-rem(32);
}
&-header {
@include font-scale(32, light);
padding-top: calc-rem(45);
padding-bottom: calc-rem(24);
border: none;
}
.list-group-item {
@include font-scale(16, light);
padding-top: calc-rem(6);
padding-bottom: calc-rem(6);
font-weight: 600;
border: none;
}
&-footer {
padding-top: calc-rem(24);
padding-bottom: calc-rem(32);
border: none;
.btn {
padding: calc-rem(10) calc-rem(35);
}
.disabled {
color: $white;
opacity: .3;
}
}
}
Legend
Html element with directive