TIBCO Cloud Starters Toolkit - Live Apps Library
  1. Components
  2. LiveAppsCaseSummaryComponent

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

alt-text

alt-text

Extends

LiveAppsComponent

Implements

OnInit OnChanges AfterViewInit

Example

<tcla-live-apps-case-summary></tcla-live-apps-case-summary>
Copy

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)
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:240
Parameters :
Name Type Optional
liveapps LiveAppsService No
caseCardConfigService TcCaseCardConfigService No
sanitizer DomSanitizer No

Inputs

borderCard
Type : boolean
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:115

Whether to display a border around the card
caseRef
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:85

The case reference
configMode
Type : boolean
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:50

Whether to use static data (ie. when in app config box)
configModeAppTypeLabel
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:75

static data for app config box
configModeCaseTypeColor
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:65

static data for app config box
configModeCaseTypeIcon
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:70

static data for app config box
configModeColor
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:55

static data for app config box
configModeIcon
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:60

static data for app config box
configModeUseCaseTypeColor
Type : boolean
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:80

whether to use case type color for header bar
description
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:90

Card Description
displayType
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:110

case card format - list, card, miniCard, staticList (no click event)
highlight
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:130

Text to highlight in the list of cases (normall text that was searched)
sandboxId
Type : number
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:105

sandboxId - this comes from claims resolver
typeBar
Type : boolean
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:120

Whether to display the colored "bar" on a summary card (on left or top)
uiAppId
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:125

The Application ID of the UI (should ideally be unique as it is shared state key)
workitemId
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:95

Workitem Id
workitemName
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:100

Workitem Name

Outputs

clickCase
Type : EventEmitter<CaseRoute>
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:137

~event clickCase : Case clicked ~payload CaseRoute : CaseRoute object output when case is clicked so calling component can route accordingly - ie. route to case
deleted
Type : EventEmitter<string>
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:143

~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)

HostListeners

window:resize
Arguments : '$event'
window:resize(event)
Inherited from LiveAppsComponent
Defined in LiveAppsComponent:45

Methods

ngAfterViewInit
ngAfterViewInit()
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:246
Returns : void
ngOnChanges
ngOnChanges(changes: SimpleChanges)
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:256
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
ngOnInit
ngOnInit()
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:251
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
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:152
Public appStateConfig
Type : CardConfig
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:150
Public casedata
Type : any
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:145
caseTypeIconComponent
Type : LiveAppsStateIconComponent
Decorators :
@ViewChild('caseTypeIcon', {static: false})
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:44
Public clickCaseAction
Default value : () => {...}
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:156
color
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:154
componentDiv
Type : ElementRef
Decorators :
@ViewChild('componentDiv', {static: false})
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:45
Public errorMessage
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:151
Public metadata
Type : Metadata
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:149
Public refresh
Default value : () => {...}
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:177
Public restylePreview
Default value : () => {...}
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:161
Public restylePreviewCaseType
Default value : () => {...}
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:167
stateIconComponent
Type : LiveAppsStateIconComponent
Decorators :
@ViewChild('caseStateIcon', {static: false})
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:43
Public summary
Type : any
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:146
Public summaryKeys
Type : string[]
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:147
Public summaryValues
Type : string[]
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:148
Public togglePreviewUseCaseTypeColor
Default value : () => {...}
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:173
Public typeId
Type : string
Defined in C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-summary/live-apps-case-summary.component.ts:153
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
 *
 * ![alt-text](../live-apps-case-summary.png "Image")
 *
 * ![alt-text](../live-apps-case-summary-2.png "Image")
 *
 *@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();
    }
  }

}
Copy
<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}}:&nbsp;</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>
Copy

./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;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""