File
Implements
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
|
|
import { ResourceService } from '../../services/index';
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { ICard } from '../../interfaces';
import {IInteractEventObject, IInteractEventEdata } from '@sunbird/telemetry';
import * as _ from 'lodash-es';
@Component({
selector: 'app-card-creation',
templateUrl: './card-creation.component.html',
styleUrls: ['./card-creation.component.scss']
})
export class CardCreationComponent implements OnInit {
/**
* content is used to render IContents value on the view
*/
@Input() data: ICard;
@Input() customClass: string;
@Output() clickEvent = new EventEmitter<any>();
telemetryInteractEdata: IInteractEventEdata;
telemetryInteractObject: IInteractEventObject;
constructor(public resourceService: ResourceService) {
}
ngOnInit() {
this.telemetryInteractObject = {
id: this.data.metaData.identifier,
type: this.data.metaData.contentType,
ver: '1.0'
};
this.telemetryInteractEdata = {
id: 'delete',
type: 'click',
pageid: _.get(this.data, 'telemetryObjectType')
};
}
public onAction(data, action) {
this.clickEvent.emit({ 'action': action, 'data': data });
}
}
<div class="ui link cards mb-0" *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" >
<div class="ui fluid card mt-10" [ngClass]="customClass">
<div class="top attached indicating active" *ngIf="data.progress > 0">
<mat-progress-bar mode="determinate" [value]="data.progress" class="top attached active orange ui progress"></mat-progress-bar>
</div>
<div class="ui image" >
<a class="{{data.ribbon.left.class}}" *ngIf="data.ribbon && data.ribbon.left && data.ribbon.left.name">{{data.ribbon.left.name}}</a>
<a class="{{data.ribbon.left.class}}" *ngIf="data.ribbon && data.ribbon.left && data.ribbon.left.image">
<img src="{{data.ribbon.left.image }}" class="ui small avatar image mr-0">
</a>
<a class="{{data.ribbon.right.class}}" *ngIf="data.ribbon && data.ribbon.right && data.ribbon.right.name">{{(data?.ribbon?.right?.name).toLowerCase() === 'selfassess' ? resourceService?.frmelmnts?.lbl?.courseassessment : data?.ribbon?.right?.name }}</a>
<img *ngIf="data.showImage? false : true" src="{{ data.image || 'assets/images/default.png' | cdnprefixurl}}">
<div class="cardImageText center aligned " matTooltip="{{data.name}}" [matTooltipPosition]="'left'" >
<span class="sliderCardHeading text-cencapitalize" >{{data.name | slice:0:20}}
<i class="ellipsis horizontal icon" *ngIf="data.name && data.name.length >= 20" ></i>
</span>
</div>
</div>
<div class="content">
<div class="card-component-description">
<div *ngIf="data.description && data.description.length > 0">
{{data.description | slice:0:40}}
<i class="ellipsis horizontal icon" *ngIf="data.description && data.description.length >= 40" matTooltip="{{data.description}}" [matTooltipPosition]="'left'"></i>
</div>
</div>
</div>
<div *ngIf="data.action && (data.action.right || data.action.left || data.rating)" class="extra data">
<div *ngIf=" data.action.right" class="right floated">
<a [ngSwitch]="data.action.right.displayType">
<span *ngSwitchCase="'button'">
<button class="{{data.action.right.class}}" tabindex="0" (click)="onAction(data,data.action.right); $event.stopPropagation()">
<span *ngIf="data.action.right.text">{{data.action.right.text}}</span>
</button>
</span>
<span *ngSwitchCase="'icon'">
<span [ngClass]="{disable:data.metaData.pkgVersion && data.metaData.pkgVersion > 0 && data.metaData.status === 'Draft'}">
<i class="{{data.action.right.class}}" appTelemetryInteract [telemetryInteractObject]="telemetryInteractObject" [telemetryInteractEdata]="telemetryInteractEdata" tabindex="0" (click)="onAction(data,data.action.right); $event.stopPropagation()">
</i>
</span>
<span *ngIf="data.action.right.text">{{data.action.right.text}}</span>
</span>
</a>
</div>
<div *ngIf=" data.action.left" class="left floated">
<a [ngSwitch]="data.action.right.displayType">
<span *ngSwitchCase="'button'">
<button class="{{data.action.left.class}}" tabindex="0" (click)="onAction(data,data.action.left); $event.stopPropagation()">
<span *ngIf="data.action.left.text">{{data.action.left.text}}</span>
</button>
</span>
<span *ngSwitchCase="'icon'">
<i class="{{data.action.left.class}}" tabindex="0" (click)="onAction(data,data.action.left); $event.stopPropagation()">
</i>
<span *ngIf="data.action.left.text">{{data.action.left.text}}</span>
</span>
</a>
</div>
<span *ngIf="data.lockInfo" matTooltip="{{resourceService?.frmelmnts?.lbl?.lockPopupTitle | interpolate:'{collaborator}':data?.lockInfo?.creatorInfo?.name | interpolate:'{contentName}':data?.name}}" [matTooltipPosition]="'left'">
<i class="lock icon large" ></i>
</span>
<span *ngIf="data.rating">
<sui-rating class="courseHeader-rating star left floated" [ngModel]="data.rating | number:0" [maximum]="5" [isReadonly]="true">
</sui-rating>
</span>
</div>
</div>
</div>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.ui.image {
height: calculateRem(150px);
overflow: hidden;
}
.card-component-description {
color: var(--rc-7c7b7b);
font-size: 1em;
height: 2.8em;
max-height: 2.8em;
overflow: hidden;
overflow-wrap: break-word;
}
.ui.cards>.card.workspace-card {
width: calculateRem(240px);
}
.ui.cards {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: -.875em -.5em -.875em 0;
}
.ui.cards>.card {
margin: .875em .5em .875em 0.1em;
}
.ui.circular.label.card-badges-image {
left: calculateRem(10px);
position: absolute;
top: calculateRem(9px);
}
.ui.card:hover {
box-shadow: 0 calculateRem(1px) calculateRem(3px) 0 var(--gray-100), 0 0 0 calculateRem(1px) var(--gray-100);
}
.disable {
visibility: hidden;
}
.sliderCardHeading {
font-weight: bold;
font-size: 1.1875em;
float: left;
padding-left: calculateRem(10px);
}
.courseHeader-rating.ui.star.rating .active.icon {
background: 0 0 !important;
color: var(--primary-color) !important;
text-shadow: none !important;
}
.cardImageText {
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(var(--rc-rgba-black), 0.2);
color: var(--white);
width: 100%;
margin: 0;
max-height: calculateRem(70px);
padding-top: calculateRem(10px);
padding-bottom: calculateRem(10px);
text-align: center;
}
Legend
Html element with directive