File
Implements
|
case
|
Type : any
|
Default value : {subTitle:'titleCase', description:'titleCase'}
|
|
|
|
ellipsis
|
Type : Boolean
|
Default value : false
|
|
|
|
selectedEvidenceIndex
|
Type : any
|
|
|
Outputs
|
cardSelect
|
Type : EventEmitter
|
|
|
Methods
|
ngOnChanges
|
ngOnChanges(changes: SimpleChanges)
|
|
|
Parameters :
| Name |
Type |
Optional |
| changes |
SimpleChanges
|
No
|
|
|
programDetails
|
programDetails(id)
|
|
|
|
|
import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { CommonUtilService } from '@app/services';
@Component({
selector: 'app-item-list-card',
templateUrl: './item-list-card.component.html',
styleUrls: ['./item-list-card.component.scss'],
})
export class ItemListCardComponent implements OnChanges {
@Input() title: any;
@Input() code: any;
@Input() subTitle: any;
@Input() description:any;
@Input() case:any ={subTitle:'titleCase', description:'titleCase'}
@Input() id: any;
@Output() cardSelect = new EventEmitter();
@Input() ellipsis:Boolean =false
@Input() arrIndex:any;
@Input() selectedEvidenceIndex:any;
constructor(private commonUtilService: CommonUtilService) {}
ngOnChanges(changes: SimpleChanges): void {
}
isNumber(val): boolean {
return typeof val === 'number';
}
programDetails(id){
this.cardSelect.emit(id);
}
}
<ion-card (click)="programDetails(id)" class="sb--card card-container" [ngClass]="{alterCard: selectedEvidenceIndex !== undefined && arrIndex !== undefined && arrIndex === selectedEvidenceIndex}">
<ion-card-content>
<div class="d-flex flex-jc-ai-center">
<div>
<ng-content select="[color]"></ng-content>
</div>
<div class="flex-dc d-flex flex-basis-1">
<div class="d-flex flex-ai-center flex-jc-space-between">
<div class="title w-90 sb--card__title" [class.ellipsis]="ellipsis">
{{ title }} <span *ngIf="code">
, {{code}}
</span>
</div>
<ng-content select="[certificate]"></ng-content>
<ng-content select="[arrow]"></ng-content>
<ng-content select="[report]"></ng-content>
</div>
<div class="info">
<span *ngIf="isNumber(subTitle)">{{ subTitle | titlecase }}</span>
<div *ngIf="!isNumber(subTitle)" class="d-flex flex-ai-center">
<span>{{ case?.subTitle ? (subTitle | titlecase) : subTitle}}</span> <ng-content select="[info]" class="ml-5"></ng-content>
</div>
<div class="d-flex flex-ai-center">
<span>{{ case?.description ? (description | titlecase) : description }}</span>
<ng-content select="[info]" class="ml-5"></ng-content>
</div>
</div>
</div>
</div>
</ion-card-content>
</ion-card>
@import "src/assets/styles/base/_variables.scss";
@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/_variables.scss";
.title{
font-size: 1rem;
font-weight: bold;
color: #{$blue};
word-break: break-all;
}
.ellipsis{
text-overflow: ellipsis;
overflow: hidden;
width: 1rem;
height: 1.4rem;
white-space: nowrap;
flex-grow: 1;
}
ion-card-header {
padding-bottom: 2px;
}
.card-container{
padding-top: 8px;
padding-bottom: 8px;
background: #ffffff;
ion-card-content{
word-break: break-all;
}
}
.alterCard{
border-bottom-left-radius: initial !important;
border-bottom-right-radius: initial !important;
margin-bottom: 2px;
}
Legend
Html element with directive