File
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
data
|
Type : ICard
|
|
|
content is used to render IContents value on the view
|
Outputs
|
clickEvent
|
Type : EventEmitter
|
|
|
Methods
|
Public
onAction
|
onAction(data, action)
|
|
|
Parameters :
| Name |
Optional |
| data |
No
|
| action |
No
|
|
|
isConnected
|
Type : Boolean
|
Default value : navigator.onLine
|
|
|
import { ResourceService } from '../../services/index';
import { Component, Input, EventEmitter, Output } from '@angular/core';
import { ICard } from '../../interfaces';
import { Router } from '@angular/router';
@Component({
selector: 'app-card',
templateUrl: './card.component.html'
})
export class CardComponent {
/**
* content is used to render IContents value on the view
*/
@Input() data: ICard;
@Input() dialCode: string;
@Input() customClass: string;
@Input() hideProgress: boolean;
@Output() clickEvent = new EventEmitter<any>();
telemetryCdata: Array<{}> = [];
hover: Boolean;
isConnected: Boolean = navigator.onLine;
route: string;
constructor(public resourceService: ResourceService, private router: Router) {
this.resourceService = resourceService;
if (this.dialCode) {
this.telemetryCdata = [{ 'type': 'DialCode', 'id': this.dialCode }];
}
this.route = this.router.url;
}
public onAction(data, action) {
this.clickEvent.emit({ 'action': action, 'data': data });
}
}
<div class="sb-card" *ngIf="data" tabindex="0" (click)="onAction(data,data.action.onImage)" appTelemetryInteract
[telemetryInteractObject]="{id:data.metaData.identifier,type:data.telemetryObjectType,ver:data.metaData.pkgVersion ? data.metaData.pkgVersion.toString():'1.0'}"
[telemetryInteractEdata]="data.telemetryInteractEdata" [telemetryInteractCdata]="telemetryCdata" tabindex="0">
<!--Body-->
<div class="sb-card-body">
<!--Metas-->
<div class="sb-card-metas">
<!--Image-->
<div class="sb-card-image" *ngIf="data.showImage? false : true">
<img src="{{data.image || 'assets/images/book.png' | cdnprefixurl}}" alt="{{data.name}}">
</div>
<!--/Image-->
<!--Meta Details - Course-->
<div class="sb-card-meta course" *ngIf="data.contentType && data.contentType.toLowerCase() === 'course'">
<div class="d-flex mb-auto">
<div class="sb-card-label" *ngIf="data.ribbon && data.ribbon.right && data.ribbon.right.name">{{data.ribbon.right.name}}</div>
</div>
<div class="sb-card-meta-item mb-15" *ngIf="data.topic" title="{{data.topic}}">
{{data.topic | slice:0:40}}
<span *ngIf="data.topic && data.topic.length > 40">...</span>
</div>
<div class="sb-card-meta-item" *ngIf="data.subTopic" title="{{data.subTopic}}">
{{data.subTopic | slice:0:40}}
<span *ngIf="data.subTopic && data.subTopic.length > 40">...</span>
</div>
</div>
<!--/Meta Details - Course-->
<!--Meta Details - Non-Course-->
<div class="sb-card-meta non-course" *ngIf="!data.contentType || data.contentType.toLowerCase() !== 'course'">
<div class="d-flex mb-auto">
<div class="sb-card-label" *ngIf="data.ribbon && data.ribbon.right && data.ribbon.right.name">
{{data.ribbon.right.name}}</div>
<img src="{{data.ribbon.left.image}}" class="sb-card-badge"
*ngIf="data.ribbon && data.ribbon.left && data.ribbon.left.image" alt="{{data.ribbon.left.name}}">
</div>
<div class="sb-card-meta-item ellipsis" *ngIf="data.subject" title="{{data.subject}}">
{{resourceService.frmelmnts.lbl.subject | transposeTerms: 'frmelmnts.lbl.subject' : resourceService?.selectedLang}} : {{data.subject}}
</div>
<div class="sb-card-meta-item ellipsis mt-4" *ngIf="data.gradeLevel" title="{{data.gradeLevel}}">
{{resourceService.frmelmnts.lbl.class | transposeTerms: 'frmelmnts.lbl.class' : resourceService?.selectedLang}} : {{data.gradeLevel}}
</div>
<div class="sb-card-meta-item ellipsis mt-4" *ngIf="data.medium" title="{{data.medium}}">
{{resourceService.frmelmnts.lbl.medium | transposeTerms: 'frmelmnts.lbl.medium' : resourceService?.selectedLang}} : {{data.medium}}
</div>
</div>
<!--/Meta Details - Non-Course-->
</div>
<!--Metas-->
<!--Card Title-->
<h4 class="sb-card-title">
{{data.name | slice:0:60 }}
<span *ngIf="data.name && data.name.length > 60">...</span>
</h4>
<!--/Card Title-->
<!--Org-->
<div class="sb-card-org ellipsis">
{{data.orgDetails?.orgName ? data.orgDetails?.orgName : data?.organisation}}
</div>
<!--Org-->
</div>
<!--/Body-->
<!--Progress Bar-->
<div class="sb-card-progressbar" *ngIf="!hideProgress">
<mat-progress-bar *ngIf="data.completionPercentage > 0" mode="determinate" [value]="data.completionPercentage" class="ui progress"></mat-progress-bar>
</div>
<!--/Progress Bar-->
</div>
Legend
Html element with directive