File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
data
|
Type : ICard
|
|
|
content is used to render IContents value on the view
|
|
singleContentRedirect
|
Type : string
|
|
|
Outputs
|
clickEvent
|
Type : EventEmitter
|
|
|
Methods
|
Public
onAction
|
onAction(data, action)
|
|
|
Parameters :
| Name |
Optional |
| data |
No
|
| action |
No
|
|
import { Component, Input, EventEmitter, Output, OnInit } from '@angular/core';
import { ResourceService, ICard } from '@sunbird/shared';
@Component({
selector: 'app-dial-code-card',
templateUrl: './dial-code-card.component.html',
styleUrls: ['./dial-code-card.component.scss']
})
export class DialCodeCardComponent implements OnInit {
/**
* content is used to render IContents value on the view
*/
@Input() data: ICard;
@Input() dialCode: string;
@Input() customClass: string;
@Output() clickEvent = new EventEmitter<any>();
@Input() singleContentRedirect: string;
telemetryCdata: Array<{}> = [];
constructor(public resourceService: ResourceService) {
this.resourceService = resourceService;
}
ngOnInit() {
if (this.dialCode) {
this.telemetryCdata = [{ 'type': 'DialCode', 'id': this.dialCode }];
}
if (this.singleContentRedirect === this.data.name) {
this.onAction(this.data, this.data.action.onImage);
}
}
public onAction(data, action) {
this.clickEvent.emit({ 'action': action, 'data': data });
}
}
<div class="sb-card bs-0 sb-card-qr" *ngIf="data" (click)="onAction(data,data.action.onImage)" appTelemetryInteract
[telemetryInteractObject]="{id:data.metaData.identifier,type:data.contentType,ver:data.metaData.pkgVersion ? data.metaData.pkgVersion.toString():'1.0'}"
[telemetryInteractEdata]="data.telemetryInteractEdata" [telemetryInteractCdata]="telemetryCdata" tabindex="0">
<!--Body-->
<div class="sb-card-body br-top">
<!--Metas-->
<div class="sb-card-metas">
<!--Image-->
<div class="sb-card-image mr-15" *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="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 ml-auto"
*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}}
</div>
<!--Org-->
</div>
<!--/Body-->
<!--Progress Bar-->
<div class="sb-card-progressbar" *ngIf="data.progress > 0">
<mat-progress-bar mode="determinate" [value]="data.progress" class="ui progress"></mat-progress-bar>
</div>
<!--/Progress Bar-->
<div class="btn-div play-btn" *ngIf="!data.metaData.childTextbookUnit">
<button class="sb-btn p-0 sb-btn-secondary"
*ngIf="data.metaData.mimeType !== 'application/vnd.ekstep.content-collection'">
<i class="caret right icon"></i> {{resourceService?.frmelmnts?.lbl?.play}}
</button>
</div>
<div class="sb-card-secrtion" *ngIf="data.metaData.childTextbookUnit">
<div class="d-inline-flex">
<span class="sb-label-name">{{resourceService?.frmelmnts?.lbl?.section}}:</span>
<span class="sb-label-value ml-4 sb__ellipsis">{{data?.metaData?.childTextbookUnit?.name}}</span>
</div>
</div>
</div>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.btn-div .button {
display: flex;
justify-content: center;
align-items: center;
border-radius: 0;
border-bottom-right-radius: calculateRem(4px);
border-bottom-left-radius: calculateRem(4px);
outline: none;
width: 100%;
font-size: calculateRem(12px);
}
.btn-div .button .icon {
line-height: normal;
font-size: calculateRem(20px);
margin-right: calculateRem(8px) !important;
opacity: 1 !important;
padding-left: calculateRem(3px);
}
.play-btn{
height: calculateRem(32px);
line-height: calculateRem(32px);
font-size: calculateRem(14px);
.sb-btn{
font-weight: 700;
text-transform: uppercase;
line-height: inherit;
width: 100%;
.caret{
height: calculateRem(16px);
width: calculateRem(16px);
background: var(--white);
color: var(--secondary-100);
border-radius: 50%;
font-size: calculateRem(14px);
margin-right: calculateRem(8px);
padding-left: calculateRem(2px);
line-height: calculateRem(16px);
}
}
}
.sb-card-secrtion{
padding: 0.45rem 1rem;
background: var(--gray-0);
border-top: calculateRem(1px) solid var(--rc-e2e3e5);
.sb-label-value{
font-weight: bold;
word-break: break-all;
}
}
Legend
Html element with directive