File
C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts
Description
Renders case summary cards
Extends
Implements
OnInit
OnChanges
AfterViewInit
Example
<tcla-live-apps-case-summary></tcla-live-apps-case-summary>Metadata
| selector | tcla-live-apps-case-summary |
| styleUrls | ./live-apps-case-summary.component.css |
| templateUrl | ./live-apps-case-summary.component.html |
Index
Properties |
|
Methods |
Inputs |
Outputs |
HostListeners |
Constructor
constructor(liveapps: LiveAppsService, caseCardConfigService: TcCaseCardConfigService, sanitizer: DomSanitizer)
|
||||||||||||
|
Parameters :
|
Inputs
| borderCard | |
Type : boolean
|
|
|
Whether to display a border around the card |
|
| caseRef | |
Type : string
|
|
|
The case reference |
|
| configMode | |
Type : boolean
|
|
|
Whether to use static data (ie. when in app config box) |
|
| configModeAppTypeLabel | |
Type : string
|
|
|
static data for app config box |
|
| configModeCaseTypeColor | |
Type : string
|
|
|
static data for app config box |
|
| configModeCaseTypeIcon | |
Type : string
|
|
|
static data for app config box |
|
| configModeColor | |
Type : string
|
|
|
static data for app config box |
|
| configModeIcon | |
Type : string
|
|
|
static data for app config box |
|
| configModeUseCaseTypeColor | |
Type : boolean
|
|
|
whether to use case type color for header bar |
|
| description | |
Type : string
|
|
|
Card Description |
|
| displayType | |
Type : string
|
|
|
case card format - list, card, miniCard, staticList (no click event) |
|
| highlight | |
Type : string
|
|
|
Text to highlight in the list of cases (normall text that was searched) |
|
| sandboxId | |
Type : number
|
|
|
sandboxId - this comes from claims resolver |
|
| typeBar | |
Type : boolean
|
|
|
Whether to display the colored "bar" on a summary card (on left or top) |
|
| uiAppId | |
Type : string
|
|
|
The Application ID of the UI (should ideally be unique as it is shared state key) |
|
| workitemId | |
Type : string
|
|
|
Workitem Id |
|
| workitemName | |
Type : string
|
|
|
Workitem Name |
|
Outputs
| clickCase | |
Type : EventEmitter<CaseRoute>
|
|
|
~event clickCase : Case clicked ~payload CaseRoute : CaseRoute object output when case is clicked so calling component can route accordingly - ie. route to case |
|
HostListeners
| window:resize |
Arguments : '$event'
|
window:resize(event)
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:45
|
Methods
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:91
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:99
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:104
|
|
Returns :
void
|
| setupWidthObserver |
setupWidthObserver()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:70
|
|
Returns :
void
|
Properties
| Public appId |
Type : string
|
| Public appStateConfig |
Type : CardConfig
|
| Public casedata |
Type : any
|
| caseTypeIconComponent |
Type : LiveAppsStateIconComponent
|
Decorators :
@ViewChild('caseTypeIcon', {static: false})
|
| Public clickCaseAction |
Default value : () => {...}
|
| color |
Type : string
|
| componentDiv |
Type : ElementRef
|
Decorators :
@ViewChild('componentDiv', {static: false})
|
| Public errorMessage |
| Public metadata |
Type : Metadata
|
| Public refresh |
Default value : () => {...}
|
| Public restylePreview |
Default value : () => {...}
|
| Public restylePreviewCaseType |
Default value : () => {...}
|
| stateIconComponent |
Type : LiveAppsStateIconComponent
|
Decorators :
@ViewChild('caseStateIcon', {static: false})
|
| Public summary |
Type : any
|
| Public summaryKeys |
Type : string[]
|
| Public summaryValues |
Type : string[]
|
| Public togglePreviewUseCaseTypeColor |
Default value : () => {...}
|
| Public typeId |
Type : string
|
| Protected _destroyed$ |
Default value : new Subject()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:39
|
| componentChildDivs |
Type : LiveAppsComponent[]
|
Decorators :
@ViewChildren('componentChildDiv')
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:36
|
| componentDiv |
Type : ElementRef
|
Decorators :
@ViewChild('componentDiv', {static: false})
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:35
|
| Protected containerChanges$ |
Type : Observable<TcComponent>
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:40
|
| Private observer |
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:42
|
| Public resize |
Default value : () => {...}
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:56
|
| Public widget |
Type : TcComponent
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:41
|
import {
AfterViewInit,
Component, ElementRef,
EventEmitter,
Input, OnChanges,
OnDestroy,
OnInit,
Output,
QueryList, SimpleChanges,
ViewChild,
ViewChildren,
ViewEncapsulation
} from '@angular/core';
import {LiveAppsService} from '../../services/live-apps.service';
import {CardConfig, CaseInfo, CaseRoute, Metadata} from '../../models/liveappsdata';
import {map, take, takeUntil} from 'rxjs/operators';
import {Subject} from 'rxjs';
import {DomSanitizer, Meta, SafeHtml} from '@angular/platform-browser';
import {LiveAppsStateIconComponent} from '../live-apps-state-icon/live-apps-state-icon.component';
import {LiveAppsComponent} from '../live-apps-component/live-apps-component.component';
import {TcCaseCardConfigService} from '../../services/tc-case-card-config.service';
import {TcComponent, TcCoreCommonFunctions} from '@tibco-tcstk/tc-core-lib';
import {ActivatedRoute, Router} from '@angular/router';
/**
* Renders case summary cards
*
* 
*
* 
*
*@example <tcla-live-apps-case-summary></tcla-live-apps-case-summary>
*/
@Component({
selector: 'tcla-live-apps-case-summary',
templateUrl: './live-apps-case-summary.component.html',
styleUrls: ['./live-apps-case-summary.component.css']
})
export class LiveAppsCaseSummaryComponent extends LiveAppsComponent implements OnInit, OnChanges, AfterViewInit {
// The ViewChild declarations give access to components marked on the template so that I can call public functions like refresh
@ViewChild('caseStateIcon', {static: false}) stateIconComponent: LiveAppsStateIconComponent;
@ViewChild('caseTypeIcon', {static: false}) caseTypeIconComponent: LiveAppsStateIconComponent;
@ViewChild('componentDiv', {static: false}) componentDiv: ElementRef;
/**
* Whether to use static data (ie. when in app config box)
*/
@Input() configMode: boolean;
/**
* static data for app config box
*/
@Input() configModeColor: string;
/**
* static data for app config box
*/
@Input() configModeIcon: string;
/**
* static data for app config box
*/
@Input() configModeCaseTypeColor: string;
/**
* static data for app config box
*/
@Input() configModeCaseTypeIcon: string;
/**
* static data for app config box
*/
@Input() configModeAppTypeLabel: string;
/**
* whether to use case type color for header bar
*/
@Input() configModeUseCaseTypeColor: boolean;
/**
* The case reference
*/
@Input() caseRef: string;
/**
* Card Description
*/
@Input() description: string;
/**
* Workitem Id
*/
@Input() workitemId: string;
/**
* Workitem Name
*/
@Input() workitemName: string;
/**
* sandboxId - this comes from claims resolver
*/
@Input() sandboxId: number;
/**
* case card format - list, card, miniCard, staticList (no click event)
*/
@Input() displayType: string; // miniCard, card, list
/**
* Whether to display a border around the card
*/
@Input() borderCard: boolean;
/**
* Whether to display the colored "bar" on a summary card (on left or top)
*/
@Input() typeBar: boolean;
/**
* The Application ID of the UI (should ideally be unique as it is shared state key)
*/
@Input() uiAppId: string;
/**
* Text to highlight in the list of cases (normall text that was searched)
*/
@Input() highlight: string;
/**
* ~event clickCase : Case clicked
* ~payload CaseRoute : CaseRoute object output when case is clicked so calling component can route accordingly - ie. route to case
*/
@Output() clickCase: EventEmitter<CaseRoute> = new EventEmitter<CaseRoute>();
/**
* ~event deleted : Case Displayed has been deleted
* ~payload string : string emitted when summary tries to load data for a case that has been deleted (so it can be hidden.removed from - for example recent cases list)
*/
@Output() deleted: EventEmitter<string> = new EventEmitter<string>();
public casedata: any;
public summary: any;
public summaryKeys: string[];
public summaryValues: string[];
public metadata: Metadata;
public appStateConfig: CardConfig;
public errorMessage;
public appId: string;
public typeId: string;
color: string;
public clickCaseAction = () => {
const caseRoute = new CaseRoute().deserialize({ caseRef: this.caseRef, appId: this.appId, typeId: this.typeId, workitemId: this.workitemId, workitemName: this.workitemName});
this.clickCase.emit(caseRoute);
}
public restylePreview = (icon, fill) => {
this.metadata.stateIcon = icon;
this.metadata.stateColor = fill;
this.stateIconComponent.refresh(icon, fill);
}
public restylePreviewCaseType = (icon, fill) => {
this.metadata.caseTypeIcon = icon;
this.metadata.caseTypeColor = fill;
this.caseTypeIconComponent.refresh(icon, fill);
}
public togglePreviewUseCaseTypeColor = (useCaseTypeColor: boolean) => {
this.metadata.useCaseTypeColor = useCaseTypeColor;
}
public refresh = () => {
if (!this.configMode) {
this.caseCardConfigService.getCaseWithSummary(this.caseRef, this.sandboxId, this.uiAppId)
.pipe(
take(1),
takeUntil(this._destroyed$),
).subscribe(
caseinfo => {
if (!caseinfo.deleted) {
this.appId = caseinfo.metadata.applicationId;
this.typeId = caseinfo.metadata.typeId;
this.casedata = caseinfo.untaggedCasedataObj;
this.metadata = caseinfo.metadata;
this.summary = caseinfo.summaryObj;
this.summaryKeys = Object.keys(this.summary);
this.summaryValues = Object.values(this.summary);
} else {
// notify parent case has been deleted
this.deleted.emit(this.caseRef);
}
}, error => {
this.errorMessage = 'Error retrieving case data: ' + error.error.errorMsg;
});
} else {
const sampleCaseInfoJSON = '{\n' +
' "untaggedCasedata": "",\n' +
' "summary": "{\\"state\\":\\"Current State\\",\\"Summary1\\":\\"000001\\",\\"Summary2\\":\\"summary data\\",\\"Summary3\\":\\"summary data\\"}",\n' +
' "metadata": {\n' +
' "createdBy": "-1",\n' +
' "creationTimestamp": "2018-11-27T08:40:03.404Z",\n' +
' "createdByDetails": {\n' +
' "username": "creator@mycompany.com"\n' +
' },\n' +
' "modifiedBy": "-1",\n' +
' "modificationTimestamp": "2018-11-27T08:40:22.010Z",\n' +
' "lockType": "1",\n' +
' "msLockExpiry": "1543308022271",\n' +
' "msSystemTime": "1545127800839",\n' +
' "applicationId": "934",\n' +
' "typeId": "1"\n' +
' },\n' +
' "summaryObj": {\n' +
' "state": "Current State",\n' +
' "Summary 1": "000001",\n' +
' "Summary 2": "The case name",\n' +
' "Summary 3": "The case description"\n' +
' },\n' +
' "untaggedCasedataObj": {\n' +
' }\n' +
'}'
const caseinfo = new CaseInfo().deserialize(JSON.parse(sampleCaseInfoJSON));
this.casedata = caseinfo.untaggedCasedataObj;
this.metadata = caseinfo.metadata;
this.summary = caseinfo.summaryObj;
this.summaryKeys = Object.keys(this.summary);
this.summaryValues = Object.values(this.summary);
this.metadata.stateIcon = this.configModeIcon;
this.metadata.stateColor = this.configModeColor;
this.metadata.caseTypeColor = this.configModeCaseTypeColor;
this.metadata.caseTypeIcon = this.configModeCaseTypeIcon;
this.metadata.applicationLabel = this.configModeAppTypeLabel;
this.metadata.useCaseTypeColor = this.configModeUseCaseTypeColor;
}
}
constructor(protected liveapps: LiveAppsService, protected caseCardConfigService: TcCaseCardConfigService, protected sanitizer: DomSanitizer) {
super();
}
ngAfterViewInit() {
super.ngAfterViewInit();
this.containerChanges$.subscribe();
}
ngOnInit() {
super.ngOnInit();
this.refresh();
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.configModeAppTypeLabel && !changes.configModeAppTypeLabel.isFirstChange() && (changes.configModeAppTypeLabel.currentValue !== changes.configModeAppTypeLabel.previousValue)) {
this.refresh();
} else if (changes.configModelColor && changes.configModeColor.currentValue && !changes.configModeColor.isFirstChange()) {
this.refresh();
}
}
}
<div #componentDiv fxFill>
<div *ngIf="displayType === 'miniCard'" (click)="clickCaseAction()" style="height: 100%">
<mat-card *ngIf="configMode || (metadata && metadata.applicationLabel && metadata.createdByDetails && metadata.stateColor && metadata.stateIcon && metadata.caseTypeIcon && metadata.caseTypeColor)" class="tcs-case-summary-mini-card" [ngClass]="{border: borderCard}" fxLayout="row" fxLayoutAlign="start stretch">
<div *ngIf="typeBar" class="tcs-case-summary-mini-card-side-bar" [style.background-color]="metadata.useCaseTypeColor ? metadata.caseTypeColor : metadata.stateColor"></div>
<div class="tcs-case-summary-mini-card-right-content" fxFlex>
<div class="tcs-case-summary-mini-card-left" fxLayout="column" fxLayoutAlign="space-between start" fxFlex>
<div *ngIf="description" class="tcs-case-summary-summary1-text mini" matTooltip="{{description}}" matTooltipShowDelay="1000" matTooltipPosition="above">{{description | ellipsis: 45}}</div>
<div *ngIf="!description && summaryValues[1]" class="tcs-case-summary-summary1-text mini" matTooltip="{{summaryKeys[1]}}" matTooltipShowDelay="1000" matTooltipPosition="above">{{summaryValues[1] | ellipsis: 45}}</div>
<div class="tcs-case-summary-creation-text" fxLayout="row">
<div *ngIf="metadata.createdByDetails">Created {{metadata.creationTimestamp | durationSince}} by {{metadata.createdByDetails.username ? metadata.createdByDetails.username: 'system'}}</div>
</div>
<div *ngIf="summaryValues[2]" class="tcs-case-summary-summary2-text mini" matTooltip="{{summaryValues[2]}}" matTooltipShowDelay="1000" matTooltipPosition="below">{{summaryValues[2] | ellipsis: 45}}</div>
<div class="tcs-case-summary-mini-card-state-box" fxLayout="row" fxLayoutAlign="start center">
<tcla-live-apps-state-icon #caseTypeIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.caseTypeIcon" [color]="metadata.caseTypeColor" matTooltipShowDelay="1000" matTooltip="Case type: {{metadata.applicationLabel}}"></tcla-live-apps-state-icon>
<div class="tcs-case-summary-state-text" matTooltip="{{summaryValues[1]}}" matTooltipShowDelay="1000" matTooltipPosition="above">{{metadata.applicationLabel}}</div>
<div fxLayout="row" fxLayoutAlign="end center" fxFlex>
<tcla-live-apps-state-icon #caseStateIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.stateIcon" [color]="metadata.stateColor" [appId]="appId"></tcla-live-apps-state-icon>
<div class="tcs-case-summary-state-text">{{summaryValues[0]}}</div>
</div>
</div>
</div>
<div class="tcs-case-summary-mini-card-right" fxLayout="row" fxLayoutAlign="end center" matTooltipPosition="left" matTooltipShowDelay="1000" matTooltip="Open Case">
<mat-icon class="tcs-icon tcs-case-summary-details-icon" svgIcon="tcs-summary-details-button"></mat-icon>
</div>
</div>
</mat-card>
</div>
<div *ngIf="displayType === 'wiMiniCard'" (click)="clickCaseAction()" style="height: 100%">
<mat-card *ngIf="configMode || (metadata && metadata.applicationLabel && metadata.createdByDetails && metadata.stateColor && metadata.stateIcon && metadata.caseTypeIcon && metadata.caseTypeColor)" class="tcs-case-summary-mini-card" [ngClass]="{border: borderCard}" fxLayout="row" fxLayoutAlign="start stretch">
<div *ngIf="typeBar" class="tcs-case-summary-mini-card-side-bar" [style.background-color]="metadata.useCaseTypeColor ? metadata.caseTypeColor : metadata.stateColor"></div>
<div class="tcs-case-summary-mini-card-right-content" fxFlex>
<div class="tcs-case-summary-mini-card-left" fxLayout="column" fxLayoutAlign="space-between start" fxFlex>
<div fxLayout="row">
<div *ngIf="workitemId" class="tcs-case-summary-summary1-text mini">{{workitemId}}: </div>
<div *ngIf="description" class="tcs-case-summary-summary1-text mini" matTooltip="{{description}}" matTooltipShowDelay="1000" matTooltipPosition="above">{{description | ellipsis: 45}}</div>
</div>
<div class="tcs-case-summary-creation-text" fxLayout="row">
<div *ngIf="metadata.createdByDetails">Created {{metadata.creationTimestamp | durationSince}} by {{metadata.createdByDetails.username ? metadata.createdByDetails.username: 'system'}}</div>
</div>
<div *ngIf="summaryValues[2]" class="tcs-case-summary-summary2-text mini" matTooltip="{{summaryValues[2]}}" matTooltipShowDelay="1000" matTooltipPosition="below">{{summaryValues[2] | ellipsis: 45}}</div>
<div class="tcs-case-summary-mini-card-state-box" fxLayout="row" fxLayoutAlign="start center">
<tcla-live-apps-state-icon #caseTypeIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.caseTypeIcon" [color]="metadata.caseTypeColor" matTooltipShowDelay="1000" matTooltip="Case type: {{metadata.applicationLabel}}"></tcla-live-apps-state-icon>
<div class="tcs-case-summary-state-text" matTooltip="{{summaryValues[1]}}" matTooltipShowDelay="1000" matTooltipPosition="above">{{metadata.applicationLabel}}</div>
<div fxLayout="row" fxLayoutAlign="end center" fxFlex>
<tcla-live-apps-state-icon #caseStateIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.stateIcon" [color]="metadata.stateColor" [appId]="appId"></tcla-live-apps-state-icon>
<div class="tcs-case-summary-state-text">{{summaryValues[0]}}</div>
</div>
</div>
</div>
<div class="tcs-case-summary-mini-card-right" fxLayout="row" fxLayoutAlign="end center" matTooltipPosition="left" matTooltipShowDelay="1000" matTooltip="Open Case">
<mat-icon class="tcs-icon tcs-case-summary-details-icon" svgIcon="tcs-summary-details-button"></mat-icon>
</div>
</div>
</mat-card>
</div>
<div *ngIf="displayType === 'card'" style="height: 100%">
<mat-card *ngIf="configMode || (metadata && metadata.applicationLabel && metadata.createdByDetails && metadata.stateColor && metadata.stateIcon && metadata.caseTypeIcon && metadata.caseTypeColor)" class="tcs-case-summary-card" fxLayout="column" fxLayoutAlign="start start" (click)="clickCaseAction()">
<div *ngIf="typeBar" class="tcs-case-summary-header" [style.background-color]="metadata.useCaseTypeColor ? metadata.caseTypeColor : metadata.stateColor"></div>
<div class="tcs-case-summary-card-contents" fxFlex fxLayout="column" fxLayoutAlign="center center">
<div fxFlex>
<div class="tcs-case-summary-case-type-text">{{metadata.applicationLabel}}</div>
</div>
<div fxFlex>
<div *ngIf="summaryValues[1]" class="tcs-case-summary-summary1-text" matTooltip="{{summaryKeys[1]}}" matTooltipShowDelay="1000" matTooltipPosition="above">{{summaryValues[1] | ellipsis: 45}}</div>
</div>
<div fxFlex>
<div class="tcs-case-summary-creation-text">
<div *ngIf="metadata.createdByDetails">Created {{metadata.creationTimestamp | durationSince}} by {{metadata.createdByDetails.username ? metadata.createdByDetails.username : 'system'}}</div>
</div>
</div>
<div fxFlex>
<div class="tcs-case-summary-line"></div>
</div>
<div fxFlex>
<div *ngIf="summaryValues[2]" class="tcs-case-summary-summary2-text">{{summaryValues[2]}}</div>
</div>
</div>
<div class="tcs-case-summary-case-footer" fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="start center">
<tcla-live-apps-state-icon #caseTypeIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.caseTypeIcon" [color]="metadata.caseTypeColor" matTooltipShowDelay="1000" matTooltip="Case type: {{metadata.applicationLabel}}"></tcla-live-apps-state-icon>
<tcla-live-apps-state-icon #caseStateIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.stateIcon" [color]="metadata.stateColor" [appId]="appId"></tcla-live-apps-state-icon>
<div class="tcs-case-summary-state-text">{{summaryValues[0]}}</div>
</div>
<div class="tcs-case-summary-view-details" fxLayout="row" fxLayoutAlign="end center" matTooltipPosition="above" matTooltip="Open Case" matTooltipShowDelay="1000">
<div class="tcs-case-summary-view-details-text">View Details</div>
<mat-icon class="tcs-icon tcs-case-summary-details-icon" svgIcon="tcs-summary-details-button"></mat-icon>
</div>
</div>
</mat-card>
</div>
<div class="summary-card-list-format" *ngIf="displayType === 'list'" style="min-height: 50px; height: 100%; background-color: white">
<mat-card *ngIf="configMode || (metadata && metadata.applicationLabel && metadata.createdByDetails && metadata.stateColor && metadata.stateIcon && metadata.caseTypeIcon && metadata.caseTypeColor)" class="tcs-case-summary-list-card" [ngClass]="{border: borderCard}" fxLayout="row" fxLayoutAlign="start stretch" (click)="clickCaseAction()">
<div *ngIf="typeBar" class="tcs-case-summary-mini-card-side-bar" [style.background-color]="metadata.useCaseTypeColor ? metadata.caseTypeColor : metadata.stateColor"></div>
<div class="tcs-case-summary-mini-card-right-content" fxFlex>
<div class="tcs-case-summary-list-card-left" fxLayout="row" fxLayoutAlign="start center" fxFlex fxLayoutGap="10px">
<div class="tcs-case-summary-list-summary1-text tcs-case-summary-list-details-box">
<div fxFlex="nogrow" *ngIf="summaryValues[1]" matTooltipShowDelay="1000" matTooltipPosition="above" [innerHTML]="summaryValues[1] | ellipsis : 20 | highlight : highlight : 'Multi-Match' : false : 'tcs-case-summary-highlight'" matTooltipShowDelay="1000" matTooltip="{{summaryValues[1]}}"></div>
</div>
<div *ngIf="widget.gtXs">
<div *ngIf="widget.ltMd" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="5px">
<!-- App Icon and label -->
<div fxFlex fxLayout="row" fxLayoutAlign="start center" class="tcs-case-summary-list-details-box">
<tcla-live-apps-state-icon #caseTypeIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.caseTypeIcon" [color]="metadata.caseTypeColor" matTooltipShowDelay="1000" matTooltip="Case type: {{metadata.applicationLabel}}"></tcla-live-apps-state-icon>
<div class="tcs-case-summary-state-text">{{metadata.applicationLabel | ellipsis: 20}}</div>
</div>
<!-- State Icon and Label -->
<div fxFlex fxLayout="row" fxLayoutAlign="start center" class="tcs-case-summary-list-details-box">
<tcla-live-apps-state-icon #caseStateIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.stateIcon" [color]="metadata.stateColor" [appId]="appId"></tcla-live-apps-state-icon>
<div class="tcs-case-summary-state-text">{{summaryValues[0]}}</div>
</div>
</div>
<div *ngIf="widget.gtSm" fxFlex fxLayout="row" fxLayoutAlign="start center" class="tcs-case-summary-list-details-box">
<tcla-live-apps-state-icon #caseTypeIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.caseTypeIcon" [color]="metadata.caseTypeColor" matTooltipShowDelay="1000" matTooltip="Case type: {{metadata.applicationLabel}}"></tcla-live-apps-state-icon>
<div class="tcs-case-summary-state-text">{{metadata.applicationLabel | ellipsis: 20}}</div>
</div>
<div *ngIf="widget.gtSm" fxFlex fxLayout="row" fxLayoutAlign="start center" class="tcs-case-summary-list-details-box">
<tcla-live-apps-state-icon #caseStateIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.stateIcon" [color]="metadata.stateColor" [appId]="appId"></tcla-live-apps-state-icon>
<div class="tcs-case-summary-state-text">{{summaryValues[0]}}</div>
</div>
</div>
<div *ngIf="widget.ltMd" class="summary-text-ltmd" fxLayout="column" fxLayoutAlign="center start" fxLayoutGap="5px" style="max-width: 180px;width: 180px">
<div class="tcs-case-summary-list-summary2-text tcs-case-summary-list-large-details-box">
<div fxFlex *ngIf="summaryValues[2]" [innerHTML]="summaryValues[2] | highlight : highlight : 'Multi-Match' : false : 'tcs-case-summary-highlight'" matTooltipShowDelay="1000" matTooltip="{{summaryValues[2]}}"></div>
</div>
<div class="tcs-case-summary-list-summary3-text tcs-case-summary-list-details-box">
<div fxFlex="nogrow" *ngIf="summaryValues[3]" [innerHTML]="summaryValues[3] | ellipsis : 20 | highlight : highlight : 'Multi-Match' : false : 'tcs-case-summary-highlight'" matTooltipShowDelay="1000" matTooltip="{{summaryValues[3]}}"></div>
</div>
</div>
<div *ngIf="widget.gtSm" class="tcs-case-summary-list-summary2-text tcs-case-summary-list-large-details-box">
<div fxFlex *ngIf="summaryValues[2]" [innerHTML]="summaryValues[2] | highlight : highlight : 'Multi-Match' : false : 'tcs-case-summary-highlight'" matTooltipShowDelay="1000" matTooltip="{{summaryValues[2]}}"></div>
</div>
<div *ngIf="widget.gtSm" fxFlex="nogrow" class="tcs-case-summary-list-summary3-text tcs-case-summary-list-details-box">
<div fxFlex="nogrow" *ngIf="summaryValues[3]" [innerHTML]="summaryValues[3] | ellipsis : 20 | highlight : highlight : 'Multi-Match' : false : 'tcs-case-summary-highlight'" matTooltipShowDelay="1000" matTooltip="{{summaryValues[3]}}"></div>
</div>
<div fxFlex class="tcs-case-summary-list-details-box tcs-case-summary-creation-text" fxLayoutAlign="center center">
<div *ngIf="metadata.createdByDetails">Created {{metadata.creationTimestamp | durationSince}} by {{metadata.createdByDetails.username ? metadata.createdByDetails.username : 'system'}}</div>
</div>
</div>
<div class="tcs-case-summary-mini-card-right" fxLayout="row" fxLayoutAlign="end center" matTooltipPosition="left" matTooltipShowDelay="1000" matTooltip="Open Case">
<mat-icon class="tcs-icon tcs-case-summary-details-icon" svgIcon="tcs-summary-details-button"></mat-icon>
</div>
</div>
</mat-card>
</div>
<div *ngIf="displayType === 'miniList'" style="min-height: 50px; background-color: white">
<mat-card *ngIf="configMode || (metadata && metadata.applicationLabel && metadata.createdByDetails && metadata.stateColor && metadata.stateIcon && metadata.caseTypeIcon && metadata.caseTypeColor)" class="tcs-case-summary-list-card" [ngClass]="{border: borderCard}" fxLayout="row" fxLayoutAlign="start stretch" (click)="clickCaseAction()">
<div *ngIf="typeBar" class="tcs-case-summary-mini-card-side-bar" [style.background-color]="metadata.useCaseTypeColor ? metadata.caseTypeColor : metadata.stateColor"></div>
<div class="tcs-case-summary-mini-card-right-content" fxFlex>
<div class="tcs-case-summary-list-card-left" fxLayout="row" fxLayoutAlign="start center" fxFlex fxLayoutGap="10px">
<div class="tcs-case-summary-list-summary1-text tcs-case-summary-list-details-box">
<div fxFlex="nogrow" *ngIf="summaryValues[1]" matTooltipShowDelay="1000" matTooltipPosition="above" [innerHTML]="summaryValues[1] | ellipsis : 20 | highlight : highlight : 'Multi-Match' : false : 'tcs-case-summary-highlight'" matTooltipShowDelay="1000" matTooltip="{{summaryValues[1]}}"></div>
</div>
</div>
<div class="tcs-case-summary-mini-card-right" fxLayout="row" fxLayoutAlign="end center" matTooltipPosition="left" matTooltipShowDelay="1000" matTooltip="Open Case">
<mat-icon class="tcs-icon tcs-case-summary-details-icon" svgIcon="tcs-summary-details-button"></mat-icon>
</div>
</div>
</mat-card>
</div>
<div *ngIf="displayType === 'staticlist'" style="min-height: 50px; height: 100%; background-color: white">
<mat-card *ngIf="configMode || (metadata && metadata.applicationLabel && metadata.createdByDetails && metadata.stateColor && metadata.stateIcon && metadata.caseTypeIcon && metadata.caseTypeColor)" class="tcs-case-summary-static-list-card" [ngClass]="{border: borderCard}" fxLayout="row" fxLayoutAlign="start stretch">
<div *ngIf="typeBar" class="tcs-case-summary-mini-card-side-bar" [style.background-color]="metadata.useCaseTypeColor ? metadata.caseTypeColor : metadata.stateColor"></div>
<div class="tcs-case-summary-mini-card-right-content" fxFlex>
<div class="tcs-case-summary-list-card-left" fxLayout="row" fxLayoutAlign="start center" fxFlex fxLayoutGap="10px">
<div class="tcs-case-summary-list-summary1-text tcs-case-summary-list-details-box">
<div fxFlex="nogrow" *ngIf="summaryValues[1]" matTooltipShowDelay="1000" matTooltipPosition="above" [innerHTML]="summaryValues[1] | ellipsis : 20 | highlight : highlight : 'Multi-Match' : false : 'tcs-case-summary-highlight'" matTooltipShowDelay="1000" matTooltip="{{summaryValues[1]}}"></div>
</div>
<div *ngIf="widget.ltMd" class="summary-text-ltmd" fxLayout="column" fxLayoutAlign="center start" fxLayoutGap="5px" style="max-width: 180px;width: 180px">
<div class="tcs-case-summary-list-summary2-text tcs-case-summary-list-large-details-box">
<div fxFlex *ngIf="summaryValues[2]" [innerHTML]="summaryValues[2] | highlight : highlight : 'Multi-Match' : false : 'tcs-case-summary-highlight'" matTooltipShowDelay="1000" matTooltip="{{summaryValues[2]}}"></div>
</div>
<div class="tcs-case-summary-list-summary3-text tcs-case-summary-list-details-box">
<div fxFlex="nogrow" *ngIf="summaryValues[3]" [innerHTML]="summaryValues[3] | ellipsis : 20 | highlight : highlight : 'Multi-Match' : false : 'tcs-case-summary-highlight'" matTooltipShowDelay="1000" matTooltip="{{summaryValues[3]}}"></div>
</div>
</div>
<div *ngIf="widget.gtSm" class="tcs-case-summary-list-summary2-text tcs-case-summary-list-large-details-box">
<div fxFlex *ngIf="summaryValues[2]" [innerHTML]="summaryValues[2] | highlight : highlight : 'Multi-Match' : false : 'tcs-case-summary-highlight'" matTooltipShowDelay="1000" matTooltip="{{summaryValues[2]}}"></div>
</div>
<div *ngIf="widget.gtSm" fxFlex="nogrow" class="tcs-case-summary-list-summary3-text tcs-case-summary-list-details-box">
<div fxFlex="nogrow" *ngIf="summaryValues[3]" [innerHTML]="summaryValues[3] | ellipsis : 20 | highlight : highlight : 'Multi-Match' : false : 'tcs-case-summary-highlight'" matTooltipShowDelay="1000" matTooltip="{{summaryValues[3]}}"></div>
</div>
<div *ngIf="widget.gtXs">
<div *ngIf="widget.ltMd" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="5px">
<!-- App Icon and label -->
<div fxFlex fxLayout="row" fxLayoutAlign="start center" class="tcs-case-summary-list-details-box">
<tcla-live-apps-state-icon #caseTypeIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.caseTypeIcon" [color]="metadata.caseTypeColor" matTooltipShowDelay="1000" matTooltip="Case type: {{metadata.applicationLabel}}"></tcla-live-apps-state-icon>
<div class="tcs-case-summary-state-text">{{metadata.applicationLabel | ellipsis: 20}}</div>
</div>
<!-- State Icon and Label -->
<div fxFlex fxLayout="row" fxLayoutAlign="start center" class="tcs-case-summary-list-details-box">
<tcla-live-apps-state-icon #caseStateIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.stateIcon" [color]="metadata.stateColor" [appId]="appId"></tcla-live-apps-state-icon>
<div class="tcs-case-summary-state-text">{{summaryValues[0]}}</div>
</div>
</div>
<div *ngIf="widget.gtSm" fxFlex fxLayout="row" fxLayoutAlign="start center" class="tcs-case-summary-list-details-box">
<tcla-live-apps-state-icon #caseTypeIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.caseTypeIcon" [color]="metadata.caseTypeColor" matTooltipShowDelay="1000" matTooltip="Case type: {{metadata.applicationLabel}}"></tcla-live-apps-state-icon>
<div class="tcs-case-summary-state-text">{{metadata.applicationLabel | ellipsis: 20}}</div>
</div>
<div *ngIf="widget.gtSm" fxFlex fxLayout="row" fxLayoutAlign="start center" class="tcs-case-summary-list-details-box">
<tcla-live-apps-state-icon #caseStateIcon class="tcs-case-summary-state-icon" [iconPath]="metadata.stateIcon" [color]="metadata.stateColor" [appId]="appId"></tcla-live-apps-state-icon>
<div class="tcs-case-summary-state-text">{{summaryValues[0]}}</div>
</div>
</div>
<div fxFlex class="tcs-case-summary-list-details-box tcs-case-summary-creation-text" fxLayoutAlign="center center">
<div *ngIf="metadata.createdByDetails">Created {{metadata.creationTimestamp | durationSince}} by {{metadata.createdByDetails.username ? metadata.createdByDetails.username : 'system'}}</div>
</div>
</div>
</div>
</mat-card>
</div>
</div>
./live-apps-case-summary.component.css
.tcs-case-summary-list {
width: 100%;
height: 190px;
border-radius: 3px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
background-color: #ffffff;
padding: 0px;
}
.tcs-case-summary-card {
width: 100%;
height: 100%;
border-radius: 3px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
background-color: #ffffff;
padding: 0px;
}
.tcs-case-summary-mini-card {
padding: 0px;
height: 100%;
min-width: 285px;
/* max-width: 297px;*/
min-height: 91px;
background-color: #ffffff;
/*padding-left: 5px;
padding-right: 5px;
padding-top: 7px;
padding-bottom: 7px;*/
box-shadow: none;
border-radius: 3px;
}
.tcs-case-summary-list-card {
padding: 0px;
height: 100%;
min-height: 50px;
overflow: hidden;
background-color: #ffffff;
/*padding-left: 5px;
padding-right: 5px;
padding-top: 7px;
padding-bottom: 7px;*/
box-shadow: none;
border-radius: 3px;
}
.tcs-case-summary-static-list-card {
padding: 0px;
height: 50px;
min-height: 50px;
background-color: #ffffff;
/*padding-left: 5px;
padding-right: 5px;
padding-top: 7px;
padding-bottom: 7px;*/
box-shadow: none;
border-radius: 3px;
}
.tcs-case-summary-mini-card-right-content {
padding-left: 5px;
padding-right: 5px;
padding-top: 7px;
padding-bottom: 7px;
}
.tcs-case-summary-mini-card.border {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
border-radius: 3px;
}
.tcs-case-summary-mini-card:hover {
box-shadow: 0px 3px 8px 4px rgba(0, 0, 0, 0.33);
border-radius: 3px;
cursor: pointer;
}
.tcs-case-summary-card:hover {
box-shadow: 0px 3px 8px 4px rgba(0, 0, 0, 0.33);
cursor: pointer;
}
.tcs-case-summary-list-card:hover {
box-shadow: 0px 3px 8px 4px rgba(0, 0, 0, 0.33);
border-radius: 3px;
cursor: pointer;
}
.tcs-case-summary-static-list-card:hover {
/* box-shadow: 0px 3px 8px 4px rgba(0, 0, 0, 0.33);
border-radius: 3px; */
}
.tcs-case-summary-header {
width: 100%;
height: 20px;
border-radius: 3px 3px 0px 0px;
/* background-color: #0285a1;*/
}
.tcs-case-summary-mini-card-side-bar {
border-radius: 3px 0px 0px 3px;
/* background-color: #0285a1; */
width: 20px;
}
.tcs-case-summary-card-contents {
width: 100%;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 4px;
padding-top: 4px;
}
.tcs-case-summary-case-footer {
width: 100%;
height: 36px;
border-radius: 0px 0px 3px 3px;
background-color: #ffffff;
padding-left: 12px;
padding-right: 12px;
}
.tcs-case-summary-case-type-text {
font-family: Source Sans Pro;
font-size: 12px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #727272;
}
.tcs-case-summary-summary1-text {
font-family: Source Sans Pro;
font-size: 16px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #212121;
margin-top: 12px;
height: 18px;
min-height: 18px;
}
.tcs-case-summary-summary1-text.mini {
margin-top: 0px;
}
.tcs-case-summary-creation-text {
/* height: 15px; */
min-height: 15px;
}
.tcs-case-summary-creation-text div {
font-family: Source Sans Pro;
font-size: 10px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
/*text-align: center;*/
color: #727272;
}
.tcs-case-summary-line {
margin-left: 20px;
padding: 0px;
margin-top: 12px;
margin-right: 20px;
margin-bottom: 0px;
border-bottom-color: #f4f4f4;
border-bottom-width: 1.1px;
border-bottom-style: solid;
width: 100%;
}
.tcs-case-summary-summary2-text {
font-family: Source Sans Pro;
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #000000;
margin-top: 8px;
}
.tcs-case-summary-list-summary2-text {
font-family: Source Sans Pro;
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #000000;
padding-right:10px;
}
.tcs-case-summary-list-summary3-text {
font-family: Source Sans Pro;
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #000000;
}
.tcs-case-summary-summary2-text.mini {
margin-top: 0px;
}
.tcs-case-summary-mini-card-right:hover {
cursor: pointer;
}
.tcs-case-summary-case-footer:hover {
cursor: pointer;
}
.tcs-case-summary-view-details-text {
font-family: Source Sans Pro;
font-size: 10px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: right;
color:#0081cb;
}
.tcs-case-summary-state-text {
font-family: Source Sans Pro;
font-size: 10px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #727272;
}
.tcs-case-summary-details-icon {
height: 14px;
width: 14px;
margin-left: 5px;
}
.tcs-case-summary-mini-card-state-box {
width: 100%;
}
.tcs-case-summary-state-icon {
margin-right: 5px;
}
.tcs-case-summary-list-card-left {
margin-left: 10px;
margin-right: 10px;
overflow: hidden;
}
.tcs-case-summary-list-details-box {
min-width: 130px;
}
.tcs-case-summary-list-details-box.tcs-case-summary-creation-text {
min-width: 110px;
}
.tcs-case-summary-list-summary1-text {
min-width: 100px;
font-family: Source Sans Pro;
font-size: 16px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #212121;
height: 18px;
min-height: 18px;
}
.tcs-case-summary-list-large-details-box {
min-width: 30%;
}
:host ::ng-deep .tcs-case-summary-highlight {
color: black;
font-weight: 900;
}
Legend
Html element
Component
Html element with directive