bpm-core 0.0.137 → 0.0.139
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/bpm-core.mjs
CHANGED
|
@@ -4406,6 +4406,9 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
|
|
|
4406
4406
|
this.displayedFiles.splice(index, 1);
|
|
4407
4407
|
this.allAttachments.splice(index, 1);
|
|
4408
4408
|
this.lengthError = this.displayedFiles?.length >= +this.maxLength;
|
|
4409
|
+
if (this.displayedFiles?.length == 0) {
|
|
4410
|
+
this.reset();
|
|
4411
|
+
}
|
|
4409
4412
|
}
|
|
4410
4413
|
downloadFileNew(fileData) {
|
|
4411
4414
|
const fileType = this.getFileType(fileData);
|
|
@@ -5612,11 +5615,11 @@ class TableComponent {
|
|
|
5612
5615
|
}
|
|
5613
5616
|
}
|
|
5614
5617
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.MatDialog }, { token: CoreI18nService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
5615
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: "columns", isError: "isError", isLoading: "isLoading", customMessage: "customMessage", columnsConfig: "columnsConfig", loadData: "loadData", actions: "actions", className: "className", totalElements: "totalElements", showPagination: "showPagination", pageIndex: "pageIndex", pageSize: "pageSize", sortDisabled: "sortDisabled", useScroll: "useScroll", hasPaginator: "hasPaginator", currentPage: "currentPage", keyWord: "keyWord", rows: "rows" }, outputs: { serviceRowSelect: "serviceRowSelect", selectPage: "selectPage", rowClicked: "rowClicked", autoCompleteValueSelected: "autoCompleteValueSelected", selectValueSelected: "selectValueSelected", sortChanged: "sortChanged", inputCellChanged: "inputCellChanged", pageScroll: "pageScroll", toggleChanged: "toggleChanged", eventClicked: "eventClicked", pageChange: "pageChange" }, viewQueries: [{ propertyName: "matTableRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "tableSort", first: true, predicate: ["tableSort"], descendants: true }], ngImport: i0, template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n @if (!isLoading) {\r\n <ng-container>\r\n @if (dataSource.filteredData?.length! > 0) {\r\n <table #tableSort=\"matSort\" (matSortChange)=\"sortChange($event)\" [dataSource]=\"dataSource\" class=\"primary-table {{ className }}\" mat-table matSort>\r\n @for (column of columns; track $index; let i = $index) {\r\n <ng-container>\r\n <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n @if (columnsConfig && columnsConfig[i]) {\r\n <ng-container>\r\n <ng-container [matColumnDef]=\"column\" [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\">\r\n @if (!columnsConfig[i].notSortable) {\r\n <ng-container>\r\n <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell mat-sort-header>\r\n @if (columnsConfig[i].type !== 'checkbox' || ( this.columnsConfig[i]?.type! == 'actions' && this.columnsConfig[i]?.actions?.length === 0)) {\r\n <ng-container>\r\n @if (!(this.columnsConfig[i].type == 'actions' && this.columnsConfig[i].actions.length === 0)) {\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n {{ columnsConfig[i].label | translate }}\r\n </div>\r\n @if (columnsConfig[i].slaMax) {\r\n <ds-sla\r\n [canvasScale]=\"'40'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"columnsConfig[i].slaMax\"\r\n [outerLineColor]=\"'limegreen'\"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"columnsConfig[i].slaValue\"\r\n class=\"table-header-sla my-1\"\r\n ></ds-sla>\r\n }\r\n </div>\r\n }\r\n </ng-container>\r\n } @if (columnsConfig[i].type == 'checkbox') {\r\n <mat-checkbox class=\"checkbox\"></mat-checkbox>\r\n }\r\n </th>\r\n </ng-container>\r\n } @if (columnsConfig[i].notSortable) {\r\n <ng-container>\r\n <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"mx-1\">\r\n {{ columnsConfig[i].label | translate }}\r\n </div>\r\n @if (columnsConfig[i].slaMax) {\r\n <ds-sla\r\n [canvasScale]=\"'50'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"columnsConfig[i].slaMax\"\r\n [outerLineColor]=\"'limegreen'\"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"columnsConfig[i].slaValue\"\r\n class=\"table-header-sla my-1\"\r\n ></ds-sla>\r\n }\r\n </div>\r\n </th>\r\n </ng-container>\r\n }\r\n\r\n <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n <!-- <a target=\"_blank\"-->\r\n <!-- routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n <!-- class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n <!-- {{ element[column] }}-->\r\n <!-- </a>-->\r\n <span *ngSwitchCase=\"'serial'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral fw-medium\">\r\n {{ j+1 }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'formId'\" (click)=\"viewForm(element[column])\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral cursor-pointer text-decoration-underline fw-medium\">\r\n {{ element[column] }}\r\n </span>\r\n <!-- <span\r\n *ngSwitchCase=\"'link'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"fc-black text-decoration-underline fw-medium\"\r\n >\r\n {{ element[column] }}\r\n </span>-->\r\n\r\n <span *ngSwitchCase=\"'linkWithIcon'\" [appSkipLocation]=\"columnsConfig[i].link\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n </span>\r\n <span *ngSwitchCase=\"'underLineWithIcon'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n </span>\r\n <mat-checkbox *ngSwitchCase=\"'checkbox'\" checked=\"{{ columnsConfig[i].checked }}\" class=\"checkbox\" disabled=\"{{ columnsConfig[i].disabled }}\"> </mat-checkbox>\r\n <span *ngSwitchCase=\"'ServiceDetails'\" [ngClass]=\"columnsConfig[i].type\" class=\"cursor-pointer\">\r\n {{ element[column] }}\r\n </span>\r\n <span *ngSwitchCase=\"'dateOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-2 text-nowrap\">\r\n <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n {{ element[column] | date : \"MMM d, y\" }}\r\n </span>\r\n <span *ngSwitchCase=\"'Search'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <app-input [formControl]=\"ctrl\" [placeholder]=\"'Search for item '\" [showLabel]=\"false\" class=\"\" className=\"no-padding \" prefix=\"sfi-search fs-16\" type=\"text\"> </app-input>\r\n </span>\r\n <span *ngSwitchCase=\"'Number'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <app-input [formControl]=\"ctrl\" [placeholder]=\"'number'\" [showLabel]=\"false\" class=\"\" className=\"no-padding\" type=\"text\"> </app-input>\r\n </span>\r\n <span *ngSwitchCase=\"'dateFromTo'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <span class=\"sfi sfi-clock fc-coral\"></span>\r\n <span class=\"mx-2\">\r\n {{ element?.date.from }} @if (element?.date.to) {\r\n <ng-container> : {{ element?.date.to }} </ng-container>\r\n }\r\n </span>\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'dateTime'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'singleTimeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n {{ element[column] | date : \"h:mm a\" }}\r\n </span>\r\n <!--dir=\"ltr\" and text-left for English text on ar page -->\r\n <span *ngSwitchCase=\"'timeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\" dir=\"ltr\">\r\n <!-- -->\r\n {{ mapText(columnsConfig[i].firstVal, element[column]) | date : \"h:mm a\" }} @if (mapText(columnsConfig[i].secondVal, element[column])) {\r\n <ng-container>\r\n - {{ mapText(columnsConfig[i].secondVal, element[column]) | date : \"h:mm a\" }}\r\n </ng-container>\r\n }\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'multipleRows'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n <!-- -->\r\n @if (!element[column].monthlyFineEscalation) {\r\n <div>\r\n {{ element[column].fixedFineValue }} {{ \"global.SAR\" | translate }}\r\n </div>\r\n } @if (element[column].monthlyFineEscalation) {\r\n <div>\r\n <br />\r\n {{ element[column].firstTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n <br />\r\n {{ element[column].secondTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n <br />\r\n {{ element[column].thirdTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n <br />\r\n </div>\r\n }\r\n </span>\r\n\r\n <div *ngSwitchCase=\"'sla'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <!-- <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n <!-- class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n <!-- </app-sla>-->\r\n\r\n <ds-sla\r\n [attr.outerLineColor]=\"\r\n getSlaColor(element?.SLA.value, element?.SLA.max)\r\n \"\r\n [canvasScale]=\"'55'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"element?.SLA?.max\"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"element?.SLA?.value\"\r\n ></ds-sla>\r\n </div>\r\n <div *ngSwitchCase=\"'slaProgress'\">\r\n <!-- <mat-sp-->\r\n\r\n @if (element[column]?.percentage >= 0) {\r\n <ds-sla\r\n [canvasScale]=\"'55'\"\r\n [customValue]=\"element[column]?.percentage + '%'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"'100'\"\r\n [outerLineColor]=\"\r\n getSlaColor(element[column]?.percentage, 100)\r\n \"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"element[column]?.percentage\"\r\n ></ds-sla>\r\n } @else {\r\n <ng-template>Not started</ng-template>\r\n }\r\n </div>\r\n <div *ngSwitchCase=\"'Priority'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n {{ element[column] }}\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'serviceStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n <span [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\" class=\"dot-status\"></span>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"columnsConfig[i].type\" class=\"img-card table-img\">\r\n <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'employee'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2 text-nowrap\">\r\n <ds-avatar [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\" size=\"x-small\"> </ds-avatar>\r\n <span>{{ (element[column]?.['name']) }}</span>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'progress_group'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex gap-1\">\r\n <ng-container *ngFor=\"let item of element[column]\">\r\n <div class=\"progress-container default-progress medium radius-0\" matTooltip=\"Team assignment {{ item.value }}%\" matTooltipPosition=\"below\">\r\n <div [style.width.%]=\"item.value\" class=\"progress-bar bg-color-{{ item.color }}\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngSwitchCase=\"'input'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n <app-input\r\n (input)=\"inputCellChanged.emit({element,column,i})\"\r\n [(ngModel)]=\"element[column]\"\r\n [min]=\"0\"\r\n [placeholder]=\"element[column]\"\r\n class=\"w-100\"\r\n className=\" no-padding w-100\"\r\n type=\"number\"\r\n value=\"{{ element[column] }}\"\r\n >\r\n </app-input>\r\n </div>\r\n <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n <div *ngSwitchCase=\"'select'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n <app-custom-searchable\r\n (selectedValue)=\"selectValueSelected.emit($event)\"\r\n [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n [key]=\"columnsConfig[i]?.key\"\r\n [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n [options]=\"columnsConfig[i]?.options\"\r\n [postKey]=\"columnsConfig[i]?.postKey\"\r\n [showLabel]=\"false\"\r\n className=\"no-padding w-100\"\r\n >\r\n </app-custom-searchable>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'status'\" [ngClass]=\"'New' + columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n @if (element[column]) {\r\n <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n {{ element[column]?.title | translate }}\r\n </ds-status>\r\n } @if (element[column]?.reason) {\r\n <span\r\n (click)=\"$event.stopPropagation()\"\r\n [matMenuTriggerFor]=\"reasonMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-red underline cursor-pointer\"\r\n >\r\n Show reason\r\n </span>\r\n }\r\n\r\n <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column]?.reason }}\r\n </span>\r\n </mat-menu>\r\n </div>\r\n <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 1\" [disabled]=\"false\"></mat-slide-toggle>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'customToggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 7\" [disabled]=\"element[column] != 1\"></mat-slide-toggle>\r\n </div>\r\n <div *ngSwitchCase=\"'meetingStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n @if (element[column].label == 'Finished') {\r\n <span class=\" {{ element[column].label }} status \">\r\n {{ element[column].label }}\r\n </span>\r\n } @if (element[column].label != 'Finished') {\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].hours }}</span>\r\n <span class=\"fs-10 fw-light\">HRS</span>\r\n </div>\r\n <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].min }}</span>\r\n <span class=\"fs-10 fw-light\">MINS</span>\r\n </div>\r\n <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].sec }}</span>\r\n <span class=\"fs-10 fw-light\">SECS</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <span\r\n *ngSwitchCase=\"'number'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }} {{\r\n element[column] ? 'underline' : ''\r\n }}\"\r\n >\r\n {{ element[column] ? element[column] : 0 }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'currency'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n {{ element[column] ? parseInt(element[column]).toFixed(2) + (columnsConfig[i].currency | translate) : \"-\" }}\r\n </span>\r\n <span *ngSwitchCase=\"'active'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n <ds-icon [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\" icon=\"check-circle-f fs-30\"></ds-icon>\r\n </span>\r\n <div\r\n *ngSwitchCase=\"'sync'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} d-flex align-items-center gap-2\"\r\n >\r\n <svg fill=\"none\" height=\"19\" viewBox=\"0 0 18 19\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n fill=\"#FF375E\"\r\n />\r\n </svg>\r\n {{ element[column] }}\r\n </div>\r\n\r\n <ng-container *ngSwitchCase=\"'clickable'\">\r\n @if (element?.[column]) {\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n [matMenuTriggerFor]=\"descMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n {{ columnsConfig[i].clickableText | translate }}\r\n </span>\r\n }\r\n\r\n <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngSwitchCase=\"'translatedClickable'\"\r\n [matMenuTriggerFor]=\"descMenuTranslated\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n {{ columnsConfig[i].clickableText | translate }}\r\n <!-- {{ 'global.view' | translate}} -->\r\n </span>\r\n\r\n <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n element[column] : \"-\" }}\r\n </span>\r\n </mat-menu>\r\n\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngSwitchCase=\"'conditionalClickable'\"\r\n [matMenuTriggerFor]=\"descConditionalMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n @if (element[column] && element[column] != 'null') {\r\n <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n }\r\n <!-- {{ 'global.view' | translate}} -->\r\n </span>\r\n\r\n <mat-menu #descConditionalMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n\r\n <span (click)=\"$event.stopPropagation()\" *ngSwitchCase=\"'dropdown'\" [matMenuTriggerFor]=\"dropdownMenu\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }} cursor-pointer\">\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n \"-\" }}\r\n <!-- <span *ngFor=\"let item of element[column]\">\r\n {{item.id}}\r\n </span> -->\r\n\r\n <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n </span>\r\n\r\n <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <ng-container *ngSwitchCase=\"'dropdown'\">\r\n <span class=\"fs-12 fc-black\" mat-menu-item>\r\n <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n element[column] : \"-\" }}\r\n </span>\r\n </ng-container>\r\n </mat-menu>\r\n\r\n <span\r\n *ngSwitchCase=\"'formatNumber'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n matTooltip=\"{{\r\n element[column] > 1000 ? element[column] : ''\r\n }}\"\r\n >\r\n {{ element[column] }}\r\n </span>\r\n\r\n <div *ngSwitchCase=\"'group'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap d-flex align-items-center\"></div>\r\n\r\n <div *ngSwitchCase=\"'company'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center\">\r\n <span class=\"img-card circled-img\">\r\n <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n </span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"full-name\">{{ element[column] }}</span>\r\n </div>\r\n\r\n <span *ngSwitchCase=\"'translated'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n {{ element[column] }}\r\n </span>\r\n <span *ngSwitchCase=\"'title'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'maxWidth'\" [ngClass]=\"columnsConfig[i].type\">\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'progress'\" [ngClass]=\"columnsConfig[i].type\">\r\n <div class=\"Progress\">\r\n <div class=\"progress-container default-progress\">\r\n <div\r\n [style.width.%]=\"\r\n (element[column].consumed! / element[column].total!) *\r\n 100\r\n \"\r\n class=\"progress-bar\"\r\n ></div>\r\n </div>\r\n <div class=\"Progress__footer\">\r\n <div></div>\r\n <div>\r\n <span class=\"fs-12\">\r\n <span>{{ element[column].consumed }}</span>\r\n <span>/</span>\r\n <span class=\"fc-silver\">{{ element[column].total }}</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </span>\r\n\r\n <div *ngSwitchCase=\"'subsidiary'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n <img [alt]=\"element[column]?.title\" src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\" />\r\n <!-- <span class=\"full-name\">{{element[column]}}</span>-->\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'Service'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n <svg fill=\"none\" height=\"35\" viewBox=\"0 0 34 35\" width=\"34\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect fill=\"#FF375E\" fill-opacity=\"0.1\" height=\"33.5\" rx=\"4\" width=\"33.5\" y=\"0.75\" />\r\n <path\r\n d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n fill=\"#FF375E\"\r\n />\r\n </svg>\r\n\r\n <span class=\"fs-12 fw-normal fc-black\">{{ element?.Service.name }}</span>\r\n </div>\r\n <div *ngSwitchCase=\"'Color'\" class=\"d-flex align-items-center gap-2\">\r\n <span\r\n [ngClass]=\"columnsConfig[i].type\"\r\n [style.background]=\"\r\n element[column]?.colorCode\r\n ? element[column]?.colorCode\r\n : element[column]\r\n \"\r\n ></span>\r\n {{ element[column].title }}\r\n </div>\r\n <div\r\n *ngSwitchCase=\"'colorBg'\"\r\n [style.background]=\"\r\n 'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n \"\r\n class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n >\r\n <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n {{ element[column].title }}\r\n </div>\r\n <div *ngSwitchCase=\"'assigned'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex align-items-center\">\r\n <div class=\"img-card x-small circled-img\">\r\n <img [src]=\"element?.AssignedTo.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n </div>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-black\">{{ element?.AssignedTo.name }}</span>\r\n <!--\r\n <span class=\"sfi sfi-close fc-coral\"></span>\r\n -->\r\n </div>\r\n\r\n <span *ngSwitchCase=\"'coloredText'\" [style.color]=\"element[column]?.['color']\">{{ element[column]?.['title'] }}</span>\r\n <div *ngSwitchCase=\"'survey'\" [style.color]=\"element[column]?.['color']\" class=\"d-flex align-items-center gap-1 text-nowrap\">\r\n <span class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"></span>\r\n {{ element[column]?.['title'] }}\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'Satisfaction'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex gap-2 align-items-center\">\r\n <!--\r\n <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n -->\r\n\r\n <span class=\"fs-12 fc-black\">{{ element[column].percentage }}%</span>\r\n <ds-status class=\"auto-status\" size=\"small\" status=\"{{ element[column].status }}\">\r\n <span class=\"fs-10\">\r\n {{ element[column].percentageTrend }}%\r\n </span>\r\n @if (element[column].trendStatus == 'up') {\r\n <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\"> </ds-icon>\r\n } @if (element[column].trendStatus != 'up') {\r\n <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\"> </ds-icon>\r\n }\r\n </ds-status>\r\n </div>\r\n\r\n <ng-container *ngSwitchCase=\"'actions'\">\r\n <div class=\"d-flex justify-content-start gap-2\">\r\n <ng-container *ngIf=\"columnsConfig[i]?.actions?.length <= 6\">\r\n <ng-container *ngFor=\"let action of columnsConfig[i]?.actions\">\r\n <ds-button (click)=\"$event.stopPropagation()\" *ngIf=\"action.viewMode === Actions.ALLOCATE\" shape=\"outline\" size=\"small\">\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action === Actions.ALLOCATE\"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n </ds-button>\r\n <ng-container\r\n *ngIf=\"\r\n action.viewMode != Actions.VIEW ||\r\n action.viewMode != Actions.COPY\r\n \"\r\n >\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.VIEW &&\r\n !action?.isHidden\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n </ds-button>\r\n <ds-button (click)=\"$event.stopPropagation(); action?.onClick(element)\"\r\n *ngIf=\"action?.action === Actions.CLOSE && !action?.isHidden\"\r\n icon size=\"small\">\r\n <ds-icon class=\"fs-15 fc-coral\" icon=\"close\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.COPY &&\r\n !action?.isHidden\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n </ds-button>\r\n <!-- @if(element.hasOwnProperty('canUpdate')){\r\n <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n </ds-button>\r\n }@else { -->\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\"\r\n *ngIf=\"\r\n action?.action === Actions.EDIT &&\r\n ![4, 7].includes(element?.contractStatus?.id)\"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n </ds-button>\r\n <!-- } -->\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.DELETE &&\r\n !action?.isHidden &&\r\n ![4, 7].includes(element?.contractStatus?.id)\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.DELETEPENDING &&\r\n !action?.isHidden &&\r\n element?.contractStatus?.id == 1\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action?.action === Actions.CHART\"\r\n color=\"transparent\"\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fc-coral fs-15\" icon=\"chart-o\"></ds-icon>\r\n </ds-button>\r\n\r\n @if (element.hasOwnProperty('canTakeAction')) {\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"\r\n action?.action === Actions.APPROVE &&\r\n element.canTakeAction == true\r\n \"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.approve\" | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n shape=\"outline\"\r\n color=\"dark-gray\"\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"\r\n action?.action === Actions.REJECT &&\r\n element.canTakeAction == true\r\n \"\r\n shape=\"outline\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.reject\" | translate }}\r\n </span>\r\n </ds-button>\r\n } @else {\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"action?.action === Actions.APPROVE\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.approve\" | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n shape=\"outline\"\r\n color=\"dark-gray\"\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"action?.action === Actions.REJECT\"\r\n shape=\"outline\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.reject\" | translate }}\r\n </span>\r\n </ds-button>\r\n }\r\n\r\n <ds-button *ngIf=\"action?.action === Actions.DETAILS\" shape=\"text\" size=\"small\">\r\n <span class=\"fs-12 underline\"> View Details </span>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.START &&\r\n element?.isFinalize\r\n \"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action?.action === Actions.PREPARE\"\r\n color=\"light-gray\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-black\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n <ds-icon class=\"fs-12 fc-black\" icon=\"settings\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.START &&\r\n element?.isFinalize\r\n \"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n\r\n <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n *ngIf=\"action?.action === 'customAction'\"\r\n (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n ></ds-button> -->\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n (element.contractStatus.id == 7 ||\r\n element.contractStatus.id == 1)\r\n \"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n element.contractStatus.id == 7\r\n \"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.CUSTOMACTIONDETAILS\r\n \"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-status *ngIf=\"action?.action === Actions.STATUS\" [status]=\"action?.Status.status\" class=\"fs-12 statusAction w-100\">\r\n <span class=\"fc-black\">\r\n {{ action?.Status.title | translate }}\r\n </span>\r\n </ds-status>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n <ds-button\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n [matMenuTriggerFor]=\"statusMenu\"\r\n class=\"dots\"\r\n shape=\"text\"\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-20 fc-dark-gray\" icon=\"dots\"></ds-icon>\r\n </ds-button>\r\n\r\n <mat-menu #statusMenu=\"matMenu\">\r\n <button (click)=\"action?.onClick(element)\" *ngFor=\"let action of columnsConfig[i]?.actions\" mat-menu-item>\r\n <span class=\"fs-12 fc-black\">{{ action?.actionName | translate }} </span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'specs'\">\r\n @if (element?.[column]) {\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n [matMenuTriggerFor]=\"specsMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n {{ columnsConfig[i].clickableText | translate }}\r\n </span>\r\n }\r\n\r\n <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <!--<div\r\n *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex gap-1\">\r\n {{ element[column] | json }}\r\n <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n <div\r\n class=\"progress-container default-progress medium radius-0 \"\r\n matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n <div\r\n [style.width.%]=\"item.value\"\r\n class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>-->\r\n\r\n <span\r\n *ngSwitchDefault\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"text-nowrap\"\r\n matTooltip=\" {{\r\n columnsConfig[i].arKey\r\n ? i18Service.language == 'ar'\r\n ? mapText(columnsConfig[i].arKey, element[column])\r\n : mapText(columnsConfig[i].enKey, element[column])\r\n : element[column]\r\n ? element[column]\r\n : '-'\r\n }}\"\r\n matTooltipPosition=\"below\"\r\n >\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n \"-\" }}\r\n </span>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n }\r\n\r\n <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n <tr (click)=\"clickRow(row)\" *matRowDef=\"let row; columns: columns\" [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\" mat-row role=\"button\"></tr>\r\n </table>\r\n }\r\n </ng-container>\r\n } @if (isLoading) {\r\n <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n } @if (!isLoading && dataSource.filteredData?.length == 0) {\r\n <ds-message [label]=\" customMessage?? 'NoData' | translate\" type=\"emptyList\"></ds-message>\r\n }\r\n</div>\r\n@if (dataSource.filteredData?.length && hasPaginator) {\r\n<mat-paginator #paginator (page)=\"pageChanged($event)\" [length]=\"totalElements\" [pageIndex]=\"currentPage\" [pageSizeOptions]=\"[5, 10, 15, 20, 100]\" [pageSize]=\"pageSize\" aria-label=\"Select page\" showFirstLastButtons> </mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "maxLength", "mapFn", "filterFn"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: SkipLocationDirective, selector: "[appSkipLocation]", inputs: ["appSkipLocation"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
5618
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableComponent, isStandalone: true, selector: "app-table", inputs: { columns: "columns", isError: "isError", isLoading: "isLoading", customMessage: "customMessage", columnsConfig: "columnsConfig", loadData: "loadData", actions: "actions", className: "className", totalElements: "totalElements", showPagination: "showPagination", pageIndex: "pageIndex", pageSize: "pageSize", sortDisabled: "sortDisabled", useScroll: "useScroll", hasPaginator: "hasPaginator", currentPage: "currentPage", keyWord: "keyWord", rows: "rows" }, outputs: { serviceRowSelect: "serviceRowSelect", selectPage: "selectPage", rowClicked: "rowClicked", autoCompleteValueSelected: "autoCompleteValueSelected", selectValueSelected: "selectValueSelected", sortChanged: "sortChanged", inputCellChanged: "inputCellChanged", pageScroll: "pageScroll", toggleChanged: "toggleChanged", eventClicked: "eventClicked", pageChange: "pageChange" }, viewQueries: [{ propertyName: "matTableRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "tableSort", first: true, predicate: ["tableSort"], descendants: true }], ngImport: i0, template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n @if (!isLoading) {\r\n <ng-container>\r\n @if (dataSource.filteredData?.length! > 0) {\r\n <table #tableSort=\"matSort\" (matSortChange)=\"sortChange($event)\" [dataSource]=\"dataSource\" class=\"primary-table {{ className }}\" mat-table matSort>\r\n @for (column of columns; track $index; let i = $index) {\r\n <ng-container>\r\n <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n @if (columnsConfig && columnsConfig[i]) {\r\n <ng-container>\r\n <ng-container [matColumnDef]=\"column\" [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\">\r\n @if (!columnsConfig[i].notSortable) {\r\n <ng-container>\r\n <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell mat-sort-header>\r\n @if (columnsConfig[i].type !== 'checkbox' || ( this.columnsConfig[i]?.type! == 'actions' && this.columnsConfig[i]?.actions?.length === 0)) {\r\n <ng-container>\r\n @if (!(this.columnsConfig[i].type == 'actions' && this.columnsConfig[i].actions.length === 0)) {\r\n <div class=\"d-flex align-items-center th-center\">\r\n <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n {{ columnsConfig[i].label | translate }}\r\n </div>\r\n @if (columnsConfig[i].slaMax) {\r\n <ds-sla\r\n [canvasScale]=\"'40'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"columnsConfig[i].slaMax\"\r\n [outerLineColor]=\"'limegreen'\"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"columnsConfig[i].slaValue\"\r\n class=\"table-header-sla my-1\"\r\n ></ds-sla>\r\n }\r\n </div>\r\n }\r\n </ng-container>\r\n } @if (columnsConfig[i].type == 'checkbox') {\r\n <mat-checkbox class=\"checkbox\"></mat-checkbox>\r\n }\r\n </th>\r\n </ng-container>\r\n } @if (columnsConfig[i].notSortable) {\r\n <ng-container>\r\n <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell>\r\n <div class=\"d-flex align-items-center th-center\">\r\n <div class=\"mx-1\">\r\n {{ columnsConfig[i].label | translate }}\r\n </div>\r\n @if (columnsConfig[i].slaMax) {\r\n <ds-sla\r\n [canvasScale]=\"'50'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"columnsConfig[i].slaMax\"\r\n [outerLineColor]=\"'limegreen'\"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"columnsConfig[i].slaValue\"\r\n class=\"table-header-sla my-1\"\r\n ></ds-sla>\r\n }\r\n </div>\r\n </th>\r\n </ng-container>\r\n }\r\n\r\n <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n <!-- <a target=\"_blank\"-->\r\n <!-- routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n <!-- class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n <!-- {{ element[column] }}-->\r\n <!-- </a>-->\r\n <span *ngSwitchCase=\"'serial'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral fw-medium\">\r\n {{ j+1 }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'formId'\" (click)=\"viewForm(element[column])\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral cursor-pointer text-decoration-underline fw-medium\">\r\n {{ element[column] }}\r\n </span>\r\n <!-- <span\r\n *ngSwitchCase=\"'link'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"fc-black text-decoration-underline fw-medium\"\r\n >\r\n {{ element[column] }}\r\n </span>-->\r\n\r\n <span *ngSwitchCase=\"'linkWithIcon'\" [appSkipLocation]=\"columnsConfig[i].link\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n </span>\r\n <span *ngSwitchCase=\"'underLineWithIcon'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n </span>\r\n <mat-checkbox *ngSwitchCase=\"'checkbox'\" checked=\"{{ columnsConfig[i].checked }}\" class=\"checkbox\" disabled=\"{{ columnsConfig[i].disabled }}\"> </mat-checkbox>\r\n <span *ngSwitchCase=\"'ServiceDetails'\" [ngClass]=\"columnsConfig[i].type\" class=\"cursor-pointer\">\r\n {{ element[column] }}\r\n </span>\r\n <span *ngSwitchCase=\"'dateOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-2 text-nowrap\">\r\n <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n {{ element[column] | date : \"MMM d, y\" }}\r\n </span>\r\n <span *ngSwitchCase=\"'Search'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <app-input [formControl]=\"ctrl\" [placeholder]=\"'Search for item '\" [showLabel]=\"false\" class=\"\" className=\"no-padding \" prefix=\"sfi-search fs-16\" type=\"text\"> </app-input>\r\n </span>\r\n <span *ngSwitchCase=\"'Number'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <app-input [formControl]=\"ctrl\" [placeholder]=\"'number'\" [showLabel]=\"false\" class=\"\" className=\"no-padding\" type=\"text\"> </app-input>\r\n </span>\r\n <span *ngSwitchCase=\"'dateFromTo'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <span class=\"sfi sfi-clock fc-coral\"></span>\r\n <span class=\"mx-2\">\r\n {{ element?.date.from }} @if (element?.date.to) {\r\n <ng-container> : {{ element?.date.to }} </ng-container>\r\n }\r\n </span>\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'dateTime'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'singleTimeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n {{ element[column] | date : \"h:mm a\" }}\r\n </span>\r\n <!--dir=\"ltr\" and text-left for English text on ar page -->\r\n <span *ngSwitchCase=\"'timeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\" dir=\"ltr\">\r\n <!-- -->\r\n {{ mapText(columnsConfig[i].firstVal, element[column]) | date : \"h:mm a\" }} @if (mapText(columnsConfig[i].secondVal, element[column])) {\r\n <ng-container>\r\n - {{ mapText(columnsConfig[i].secondVal, element[column]) | date : \"h:mm a\" }}\r\n </ng-container>\r\n }\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'multipleRows'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n <!-- -->\r\n @if (!element[column].monthlyFineEscalation) {\r\n <div>\r\n {{ element[column].fixedFineValue }} {{ \"global.SAR\" | translate }}\r\n </div>\r\n } @if (element[column].monthlyFineEscalation) {\r\n <div>\r\n <br />\r\n {{ element[column].firstTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n <br />\r\n {{ element[column].secondTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n <br />\r\n {{ element[column].thirdTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n <br />\r\n </div>\r\n }\r\n </span>\r\n\r\n <div *ngSwitchCase=\"'sla'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <!-- <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n <!-- class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n <!-- </app-sla>-->\r\n\r\n <ds-sla\r\n [attr.outerLineColor]=\"\r\n getSlaColor(element?.SLA.value, element?.SLA.max)\r\n \"\r\n [canvasScale]=\"'55'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"element?.SLA?.max\"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"element?.SLA?.value\"\r\n ></ds-sla>\r\n </div>\r\n <div *ngSwitchCase=\"'slaProgress'\">\r\n <!-- <mat-sp-->\r\n\r\n @if (element[column]?.percentage >= 0) {\r\n <ds-sla\r\n [canvasScale]=\"'55'\"\r\n [customValue]=\"element[column]?.percentage + '%'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"'100'\"\r\n [outerLineColor]=\"\r\n getSlaColor(element[column]?.percentage, 100)\r\n \"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"element[column]?.percentage\"\r\n ></ds-sla>\r\n } @else {\r\n <ng-template>Not started</ng-template>\r\n }\r\n </div>\r\n <div *ngSwitchCase=\"'Priority'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n {{ element[column] }}\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'serviceStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n <span [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\" class=\"dot-status\"></span>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"columnsConfig[i].type\" class=\"img-card table-img\">\r\n <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'employee'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2 text-nowrap\">\r\n <ds-avatar [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\" size=\"x-small\"> </ds-avatar>\r\n <span>{{ (element[column]?.['name']) }}</span>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'progress_group'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex gap-1\">\r\n <ng-container *ngFor=\"let item of element[column]\">\r\n <div class=\"progress-container default-progress medium radius-0\" matTooltip=\"Team assignment {{ item.value }}%\" matTooltipPosition=\"below\">\r\n <div [style.width.%]=\"item.value\" class=\"progress-bar bg-color-{{ item.color }}\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngSwitchCase=\"'input'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n <app-input\r\n (input)=\"inputCellChanged.emit({element,column,i})\"\r\n [(ngModel)]=\"element[column]\"\r\n [min]=\"0\"\r\n [placeholder]=\"element[column]\"\r\n class=\"w-100\"\r\n className=\" no-padding w-100\"\r\n type=\"number\"\r\n value=\"{{ element[column] }}\"\r\n >\r\n </app-input>\r\n </div>\r\n <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n <div *ngSwitchCase=\"'select'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n <app-custom-searchable\r\n (selectedValue)=\"selectValueSelected.emit($event)\"\r\n [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n [key]=\"columnsConfig[i]?.key\"\r\n [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n [options]=\"columnsConfig[i]?.options\"\r\n [postKey]=\"columnsConfig[i]?.postKey\"\r\n [showLabel]=\"false\"\r\n className=\"no-padding w-100\"\r\n >\r\n </app-custom-searchable>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'status'\" [ngClass]=\"'New' + columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n @if (element[column]) {\r\n <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n {{ element[column]?.title | translate }}\r\n </ds-status>\r\n } @if (element[column]?.reason) {\r\n <span\r\n (click)=\"$event.stopPropagation()\"\r\n [matMenuTriggerFor]=\"reasonMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-red underline cursor-pointer\"\r\n >\r\n Show reason\r\n </span>\r\n }\r\n\r\n <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column]?.reason }}\r\n </span>\r\n </mat-menu>\r\n </div>\r\n <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 1\" [disabled]=\"false\"></mat-slide-toggle>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'customToggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 7\" [disabled]=\"element[column] != 1\"></mat-slide-toggle>\r\n </div>\r\n <div *ngSwitchCase=\"'meetingStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n @if (element[column].label == 'Finished') {\r\n <span class=\" {{ element[column].label }} status \">\r\n {{ element[column].label }}\r\n </span>\r\n } @if (element[column].label != 'Finished') {\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].hours }}</span>\r\n <span class=\"fs-10 fw-light\">HRS</span>\r\n </div>\r\n <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].min }}</span>\r\n <span class=\"fs-10 fw-light\">MINS</span>\r\n </div>\r\n <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].sec }}</span>\r\n <span class=\"fs-10 fw-light\">SECS</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <span\r\n *ngSwitchCase=\"'number'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }} {{\r\n element[column] ? 'underline' : ''\r\n }}\"\r\n >\r\n {{ element[column] ? element[column] : 0 }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'currency'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n {{ element[column] ? parseInt(element[column]).toFixed(2) + (columnsConfig[i].currency | translate) : \"-\" }}\r\n </span>\r\n <span *ngSwitchCase=\"'active'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n <ds-icon [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\" icon=\"check-circle-f fs-30\"></ds-icon>\r\n </span>\r\n <div\r\n *ngSwitchCase=\"'sync'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} d-flex align-items-center gap-2\"\r\n >\r\n <svg fill=\"none\" height=\"19\" viewBox=\"0 0 18 19\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n fill=\"#FF375E\"\r\n />\r\n </svg>\r\n {{ element[column] }}\r\n </div>\r\n\r\n <ng-container *ngSwitchCase=\"'clickable'\">\r\n @if (element?.[column]) {\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n [matMenuTriggerFor]=\"descMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n {{ columnsConfig[i].clickableText | translate }}\r\n </span>\r\n }\r\n\r\n <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngSwitchCase=\"'translatedClickable'\"\r\n [matMenuTriggerFor]=\"descMenuTranslated\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n {{ columnsConfig[i].clickableText | translate }}\r\n <!-- {{ 'global.view' | translate}} -->\r\n </span>\r\n\r\n <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n element[column] : \"-\" }}\r\n </span>\r\n </mat-menu>\r\n\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngSwitchCase=\"'conditionalClickable'\"\r\n [matMenuTriggerFor]=\"descConditionalMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n @if (element[column] && element[column] != 'null') {\r\n <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n }\r\n <!-- {{ 'global.view' | translate}} -->\r\n </span>\r\n\r\n <mat-menu #descConditionalMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n\r\n <span (click)=\"$event.stopPropagation()\" *ngSwitchCase=\"'dropdown'\" [matMenuTriggerFor]=\"dropdownMenu\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }} cursor-pointer\">\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n \"-\" }}\r\n <!-- <span *ngFor=\"let item of element[column]\">\r\n {{item.id}}\r\n </span> -->\r\n\r\n <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n </span>\r\n\r\n <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <ng-container *ngSwitchCase=\"'dropdown'\">\r\n <span class=\"fs-12 fc-black\" mat-menu-item>\r\n <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n element[column] : \"-\" }}\r\n </span>\r\n </ng-container>\r\n </mat-menu>\r\n\r\n <span\r\n *ngSwitchCase=\"'formatNumber'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n matTooltip=\"{{\r\n element[column] > 1000 ? element[column] : ''\r\n }}\"\r\n >\r\n {{ element[column] }}\r\n </span>\r\n\r\n <div *ngSwitchCase=\"'group'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap d-flex align-items-center\"></div>\r\n\r\n <div *ngSwitchCase=\"'company'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center\">\r\n <span class=\"img-card circled-img\">\r\n <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n </span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"full-name\">{{ element[column] }}</span>\r\n </div>\r\n\r\n <span *ngSwitchCase=\"'translated'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n {{ element[column] }}\r\n </span>\r\n <span *ngSwitchCase=\"'title'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'maxWidth'\" [ngClass]=\"columnsConfig[i].type\">\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'progress'\" [ngClass]=\"columnsConfig[i].type\">\r\n <div class=\"Progress\">\r\n <div class=\"progress-container default-progress\">\r\n <div\r\n [style.width.%]=\"\r\n (element[column].consumed! / element[column].total!) *\r\n 100\r\n \"\r\n class=\"progress-bar\"\r\n ></div>\r\n </div>\r\n <div class=\"Progress__footer\">\r\n <div></div>\r\n <div>\r\n <span class=\"fs-12\">\r\n <span>{{ element[column].consumed }}</span>\r\n <span>/</span>\r\n <span class=\"fc-silver\">{{ element[column].total }}</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </span>\r\n\r\n <div *ngSwitchCase=\"'subsidiary'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n <img [alt]=\"element[column]?.title\" src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\" />\r\n <!-- <span class=\"full-name\">{{element[column]}}</span>-->\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'Service'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n <svg fill=\"none\" height=\"35\" viewBox=\"0 0 34 35\" width=\"34\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect fill=\"#FF375E\" fill-opacity=\"0.1\" height=\"33.5\" rx=\"4\" width=\"33.5\" y=\"0.75\" />\r\n <path\r\n d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n fill=\"#FF375E\"\r\n />\r\n </svg>\r\n\r\n <span class=\"fs-12 fw-normal fc-black\">{{ element?.Service.name }}</span>\r\n </div>\r\n <div *ngSwitchCase=\"'Color'\" class=\"d-flex align-items-center gap-2\">\r\n <span\r\n [ngClass]=\"columnsConfig[i].type\"\r\n [style.background]=\"\r\n element[column]?.colorCode\r\n ? element[column]?.colorCode\r\n : element[column]\r\n \"\r\n ></span>\r\n {{ element[column].title }}\r\n </div>\r\n <div\r\n *ngSwitchCase=\"'colorBg'\"\r\n [style.background]=\"\r\n 'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n \"\r\n class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n >\r\n <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n {{ element[column].title }}\r\n </div>\r\n <div *ngSwitchCase=\"'assigned'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex align-items-center\">\r\n <div class=\"img-card x-small circled-img\">\r\n <img [src]=\"element?.AssignedTo.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n </div>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-black\">{{ element?.AssignedTo.name }}</span>\r\n <!--\r\n <span class=\"sfi sfi-close fc-coral\"></span>\r\n -->\r\n </div>\r\n\r\n <span *ngSwitchCase=\"'coloredText'\" [style.color]=\"element[column]?.['color']\">{{ element[column]?.['title'] }}</span>\r\n <div *ngSwitchCase=\"'survey'\" [style.color]=\"element[column]?.['color']\" class=\"d-flex align-items-center gap-1 text-nowrap\">\r\n <span class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"></span>\r\n {{ element[column]?.['title'] }}\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'Satisfaction'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex gap-2 align-items-center\">\r\n <!--\r\n <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n -->\r\n\r\n <span class=\"fs-12 fc-black\">{{ element[column].percentage }}%</span>\r\n <ds-status class=\"auto-status\" size=\"small\" status=\"{{ element[column].status }}\">\r\n <span class=\"fs-10\">\r\n {{ element[column].percentageTrend }}%\r\n </span>\r\n @if (element[column].trendStatus == 'up') {\r\n <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\"> </ds-icon>\r\n } @if (element[column].trendStatus != 'up') {\r\n <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\"> </ds-icon>\r\n }\r\n </ds-status>\r\n </div>\r\n\r\n <ng-container *ngSwitchCase=\"'actions'\">\r\n <div class=\"d-flex justify-content-start gap-2\">\r\n <ng-container *ngIf=\"columnsConfig[i]?.actions?.length <= 6\">\r\n <ng-container *ngFor=\"let action of columnsConfig[i]?.actions\">\r\n <ds-button (click)=\"$event.stopPropagation()\" *ngIf=\"action.viewMode === Actions.ALLOCATE\" shape=\"outline\" size=\"small\">\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action === Actions.ALLOCATE\"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n </ds-button>\r\n <ng-container\r\n *ngIf=\"\r\n action.viewMode != Actions.VIEW ||\r\n action.viewMode != Actions.COPY\r\n \"\r\n >\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.VIEW &&\r\n !action?.isHidden\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n </ds-button>\r\n <ds-button (click)=\"$event.stopPropagation(); action?.onClick(element)\"\r\n *ngIf=\"action?.action === Actions.CLOSE && !action?.isHidden\"\r\n icon size=\"small\">\r\n <ds-icon class=\"fs-15 fc-coral\" icon=\"close\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.COPY &&\r\n !action?.isHidden\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n </ds-button>\r\n <!-- @if(element.hasOwnProperty('canUpdate')){\r\n <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n </ds-button>\r\n }@else { -->\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\"\r\n *ngIf=\"\r\n action?.action === Actions.EDIT &&\r\n ![4, 7].includes(element?.contractStatus?.id)\"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n </ds-button>\r\n <!-- } -->\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.DELETE &&\r\n !action?.isHidden &&\r\n ![4, 7].includes(element?.contractStatus?.id)\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.DELETEPENDING &&\r\n !action?.isHidden &&\r\n element?.contractStatus?.id == 1\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action?.action === Actions.CHART\"\r\n color=\"transparent\"\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fc-coral fs-15\" icon=\"chart-o\"></ds-icon>\r\n </ds-button>\r\n\r\n @if (element.hasOwnProperty('canTakeAction')) {\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"\r\n action?.action === Actions.APPROVE &&\r\n element.canTakeAction == true\r\n \"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.approve\" | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n shape=\"outline\"\r\n color=\"dark-gray\"\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"\r\n action?.action === Actions.REJECT &&\r\n element.canTakeAction == true\r\n \"\r\n shape=\"outline\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.reject\" | translate }}\r\n </span>\r\n </ds-button>\r\n } @else {\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"action?.action === Actions.APPROVE\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.approve\" | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n shape=\"outline\"\r\n color=\"dark-gray\"\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"action?.action === Actions.REJECT\"\r\n shape=\"outline\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.reject\" | translate }}\r\n </span>\r\n </ds-button>\r\n }\r\n\r\n <ds-button *ngIf=\"action?.action === Actions.DETAILS\" shape=\"text\" size=\"small\">\r\n <span class=\"fs-12 underline\"> View Details </span>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.START &&\r\n element?.isFinalize\r\n \"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action?.action === Actions.PREPARE\"\r\n color=\"light-gray\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-black\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n <ds-icon class=\"fs-12 fc-black\" icon=\"settings\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.START &&\r\n element?.isFinalize\r\n \"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n\r\n <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n *ngIf=\"action?.action === 'customAction'\"\r\n (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n ></ds-button> -->\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n (element.contractStatus.id == 7 ||\r\n element.contractStatus.id == 1)\r\n \"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n element.contractStatus.id == 7\r\n \"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.CUSTOMACTIONDETAILS\r\n \"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-status *ngIf=\"action?.action === Actions.STATUS\" [status]=\"action?.Status.status\" class=\"fs-12 statusAction w-100\">\r\n <span class=\"fc-black\">\r\n {{ action?.Status.title | translate }}\r\n </span>\r\n </ds-status>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n <ds-button\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n [matMenuTriggerFor]=\"statusMenu\"\r\n class=\"dots\"\r\n shape=\"text\"\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-20 fc-dark-gray\" icon=\"dots\"></ds-icon>\r\n </ds-button>\r\n\r\n <mat-menu #statusMenu=\"matMenu\">\r\n <button (click)=\"action?.onClick(element)\" *ngFor=\"let action of columnsConfig[i]?.actions\" mat-menu-item>\r\n <span class=\"fs-12 fc-black\">{{ action?.actionName | translate }} </span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'specs'\">\r\n @if (element?.[column]) {\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n [matMenuTriggerFor]=\"specsMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n {{ columnsConfig[i].clickableText | translate }}\r\n </span>\r\n }\r\n\r\n <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <!--<div\r\n *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex gap-1\">\r\n {{ element[column] | json }}\r\n <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n <div\r\n class=\"progress-container default-progress medium radius-0 \"\r\n matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n <div\r\n [style.width.%]=\"item.value\"\r\n class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>-->\r\n\r\n <span\r\n *ngSwitchDefault\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"text-nowrap\"\r\n matTooltip=\" {{\r\n columnsConfig[i].arKey\r\n ? i18Service.language == 'ar'\r\n ? mapText(columnsConfig[i].arKey, element[column])\r\n : mapText(columnsConfig[i].enKey, element[column])\r\n : element[column]\r\n ? element[column]\r\n : '-'\r\n }}\"\r\n matTooltipPosition=\"below\"\r\n >\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n \"-\" }}\r\n </span>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n }\r\n\r\n <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n <tr (click)=\"clickRow(row)\" *matRowDef=\"let row; columns: columns\" [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\" mat-row role=\"button\"></tr>\r\n </table>\r\n }\r\n </ng-container>\r\n } @if (isLoading) {\r\n <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n } @if (!isLoading && dataSource.filteredData?.length == 0) {\r\n <ds-message [label]=\" customMessage?? 'NoData' | translate\" type=\"emptyList\"></ds-message>\r\n }\r\n</div>\r\n@if (dataSource.filteredData?.length && hasPaginator) {\r\n<mat-paginator #paginator (page)=\"pageChanged($event)\" [length]=\"totalElements\" [pageIndex]=\"currentPage\" [pageSizeOptions]=\"[5, 10, 15, 20, 100]\" [pageSize]=\"pageSize\" aria-label=\"Select page\" showFirstLastButtons> </mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}.th-center{justify-content:center!important;text-align:center!important}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "maxLength", "mapFn", "filterFn"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: SkipLocationDirective, selector: "[appSkipLocation]", inputs: ["appSkipLocation"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
5616
5619
|
}
|
|
5617
5620
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableComponent, decorators: [{
|
|
5618
5621
|
type: Component,
|
|
5619
|
-
args: [{ selector: 'app-table', standalone: true, imports: [NgFor, NgIf, matModules, FormsModule, NgSwitchDefault, SkipLocationDirective, MatPaginator, TranslatePipe], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n @if (!isLoading) {\r\n <ng-container>\r\n @if (dataSource.filteredData?.length! > 0) {\r\n <table #tableSort=\"matSort\" (matSortChange)=\"sortChange($event)\" [dataSource]=\"dataSource\" class=\"primary-table {{ className }}\" mat-table matSort>\r\n @for (column of columns; track $index; let i = $index) {\r\n <ng-container>\r\n <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n @if (columnsConfig && columnsConfig[i]) {\r\n <ng-container>\r\n <ng-container [matColumnDef]=\"column\" [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\">\r\n @if (!columnsConfig[i].notSortable) {\r\n <ng-container>\r\n <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell mat-sort-header>\r\n @if (columnsConfig[i].type !== 'checkbox' || ( this.columnsConfig[i]?.type! == 'actions' && this.columnsConfig[i]?.actions?.length === 0)) {\r\n <ng-container>\r\n @if (!(this.columnsConfig[i].type == 'actions' && this.columnsConfig[i].actions.length === 0)) {\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n {{ columnsConfig[i].label | translate }}\r\n </div>\r\n @if (columnsConfig[i].slaMax) {\r\n <ds-sla\r\n [canvasScale]=\"'40'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"columnsConfig[i].slaMax\"\r\n [outerLineColor]=\"'limegreen'\"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"columnsConfig[i].slaValue\"\r\n class=\"table-header-sla my-1\"\r\n ></ds-sla>\r\n }\r\n </div>\r\n }\r\n </ng-container>\r\n } @if (columnsConfig[i].type == 'checkbox') {\r\n <mat-checkbox class=\"checkbox\"></mat-checkbox>\r\n }\r\n </th>\r\n </ng-container>\r\n } @if (columnsConfig[i].notSortable) {\r\n <ng-container>\r\n <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"mx-1\">\r\n {{ columnsConfig[i].label | translate }}\r\n </div>\r\n @if (columnsConfig[i].slaMax) {\r\n <ds-sla\r\n [canvasScale]=\"'50'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"columnsConfig[i].slaMax\"\r\n [outerLineColor]=\"'limegreen'\"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"columnsConfig[i].slaValue\"\r\n class=\"table-header-sla my-1\"\r\n ></ds-sla>\r\n }\r\n </div>\r\n </th>\r\n </ng-container>\r\n }\r\n\r\n <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n <!-- <a target=\"_blank\"-->\r\n <!-- routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n <!-- class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n <!-- {{ element[column] }}-->\r\n <!-- </a>-->\r\n <span *ngSwitchCase=\"'serial'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral fw-medium\">\r\n {{ j+1 }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'formId'\" (click)=\"viewForm(element[column])\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral cursor-pointer text-decoration-underline fw-medium\">\r\n {{ element[column] }}\r\n </span>\r\n <!-- <span\r\n *ngSwitchCase=\"'link'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"fc-black text-decoration-underline fw-medium\"\r\n >\r\n {{ element[column] }}\r\n </span>-->\r\n\r\n <span *ngSwitchCase=\"'linkWithIcon'\" [appSkipLocation]=\"columnsConfig[i].link\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n </span>\r\n <span *ngSwitchCase=\"'underLineWithIcon'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n </span>\r\n <mat-checkbox *ngSwitchCase=\"'checkbox'\" checked=\"{{ columnsConfig[i].checked }}\" class=\"checkbox\" disabled=\"{{ columnsConfig[i].disabled }}\"> </mat-checkbox>\r\n <span *ngSwitchCase=\"'ServiceDetails'\" [ngClass]=\"columnsConfig[i].type\" class=\"cursor-pointer\">\r\n {{ element[column] }}\r\n </span>\r\n <span *ngSwitchCase=\"'dateOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-2 text-nowrap\">\r\n <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n {{ element[column] | date : \"MMM d, y\" }}\r\n </span>\r\n <span *ngSwitchCase=\"'Search'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <app-input [formControl]=\"ctrl\" [placeholder]=\"'Search for item '\" [showLabel]=\"false\" class=\"\" className=\"no-padding \" prefix=\"sfi-search fs-16\" type=\"text\"> </app-input>\r\n </span>\r\n <span *ngSwitchCase=\"'Number'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <app-input [formControl]=\"ctrl\" [placeholder]=\"'number'\" [showLabel]=\"false\" class=\"\" className=\"no-padding\" type=\"text\"> </app-input>\r\n </span>\r\n <span *ngSwitchCase=\"'dateFromTo'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <span class=\"sfi sfi-clock fc-coral\"></span>\r\n <span class=\"mx-2\">\r\n {{ element?.date.from }} @if (element?.date.to) {\r\n <ng-container> : {{ element?.date.to }} </ng-container>\r\n }\r\n </span>\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'dateTime'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'singleTimeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n {{ element[column] | date : \"h:mm a\" }}\r\n </span>\r\n <!--dir=\"ltr\" and text-left for English text on ar page -->\r\n <span *ngSwitchCase=\"'timeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\" dir=\"ltr\">\r\n <!-- -->\r\n {{ mapText(columnsConfig[i].firstVal, element[column]) | date : \"h:mm a\" }} @if (mapText(columnsConfig[i].secondVal, element[column])) {\r\n <ng-container>\r\n - {{ mapText(columnsConfig[i].secondVal, element[column]) | date : \"h:mm a\" }}\r\n </ng-container>\r\n }\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'multipleRows'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n <!-- -->\r\n @if (!element[column].monthlyFineEscalation) {\r\n <div>\r\n {{ element[column].fixedFineValue }} {{ \"global.SAR\" | translate }}\r\n </div>\r\n } @if (element[column].monthlyFineEscalation) {\r\n <div>\r\n <br />\r\n {{ element[column].firstTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n <br />\r\n {{ element[column].secondTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n <br />\r\n {{ element[column].thirdTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n <br />\r\n </div>\r\n }\r\n </span>\r\n\r\n <div *ngSwitchCase=\"'sla'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <!-- <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n <!-- class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n <!-- </app-sla>-->\r\n\r\n <ds-sla\r\n [attr.outerLineColor]=\"\r\n getSlaColor(element?.SLA.value, element?.SLA.max)\r\n \"\r\n [canvasScale]=\"'55'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"element?.SLA?.max\"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"element?.SLA?.value\"\r\n ></ds-sla>\r\n </div>\r\n <div *ngSwitchCase=\"'slaProgress'\">\r\n <!-- <mat-sp-->\r\n\r\n @if (element[column]?.percentage >= 0) {\r\n <ds-sla\r\n [canvasScale]=\"'55'\"\r\n [customValue]=\"element[column]?.percentage + '%'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"'100'\"\r\n [outerLineColor]=\"\r\n getSlaColor(element[column]?.percentage, 100)\r\n \"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"element[column]?.percentage\"\r\n ></ds-sla>\r\n } @else {\r\n <ng-template>Not started</ng-template>\r\n }\r\n </div>\r\n <div *ngSwitchCase=\"'Priority'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n {{ element[column] }}\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'serviceStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n <span [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\" class=\"dot-status\"></span>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"columnsConfig[i].type\" class=\"img-card table-img\">\r\n <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'employee'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2 text-nowrap\">\r\n <ds-avatar [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\" size=\"x-small\"> </ds-avatar>\r\n <span>{{ (element[column]?.['name']) }}</span>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'progress_group'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex gap-1\">\r\n <ng-container *ngFor=\"let item of element[column]\">\r\n <div class=\"progress-container default-progress medium radius-0\" matTooltip=\"Team assignment {{ item.value }}%\" matTooltipPosition=\"below\">\r\n <div [style.width.%]=\"item.value\" class=\"progress-bar bg-color-{{ item.color }}\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngSwitchCase=\"'input'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n <app-input\r\n (input)=\"inputCellChanged.emit({element,column,i})\"\r\n [(ngModel)]=\"element[column]\"\r\n [min]=\"0\"\r\n [placeholder]=\"element[column]\"\r\n class=\"w-100\"\r\n className=\" no-padding w-100\"\r\n type=\"number\"\r\n value=\"{{ element[column] }}\"\r\n >\r\n </app-input>\r\n </div>\r\n <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n <div *ngSwitchCase=\"'select'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n <app-custom-searchable\r\n (selectedValue)=\"selectValueSelected.emit($event)\"\r\n [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n [key]=\"columnsConfig[i]?.key\"\r\n [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n [options]=\"columnsConfig[i]?.options\"\r\n [postKey]=\"columnsConfig[i]?.postKey\"\r\n [showLabel]=\"false\"\r\n className=\"no-padding w-100\"\r\n >\r\n </app-custom-searchable>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'status'\" [ngClass]=\"'New' + columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n @if (element[column]) {\r\n <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n {{ element[column]?.title | translate }}\r\n </ds-status>\r\n } @if (element[column]?.reason) {\r\n <span\r\n (click)=\"$event.stopPropagation()\"\r\n [matMenuTriggerFor]=\"reasonMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-red underline cursor-pointer\"\r\n >\r\n Show reason\r\n </span>\r\n }\r\n\r\n <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column]?.reason }}\r\n </span>\r\n </mat-menu>\r\n </div>\r\n <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 1\" [disabled]=\"false\"></mat-slide-toggle>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'customToggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 7\" [disabled]=\"element[column] != 1\"></mat-slide-toggle>\r\n </div>\r\n <div *ngSwitchCase=\"'meetingStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n @if (element[column].label == 'Finished') {\r\n <span class=\" {{ element[column].label }} status \">\r\n {{ element[column].label }}\r\n </span>\r\n } @if (element[column].label != 'Finished') {\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].hours }}</span>\r\n <span class=\"fs-10 fw-light\">HRS</span>\r\n </div>\r\n <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].min }}</span>\r\n <span class=\"fs-10 fw-light\">MINS</span>\r\n </div>\r\n <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].sec }}</span>\r\n <span class=\"fs-10 fw-light\">SECS</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <span\r\n *ngSwitchCase=\"'number'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }} {{\r\n element[column] ? 'underline' : ''\r\n }}\"\r\n >\r\n {{ element[column] ? element[column] : 0 }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'currency'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n {{ element[column] ? parseInt(element[column]).toFixed(2) + (columnsConfig[i].currency | translate) : \"-\" }}\r\n </span>\r\n <span *ngSwitchCase=\"'active'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n <ds-icon [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\" icon=\"check-circle-f fs-30\"></ds-icon>\r\n </span>\r\n <div\r\n *ngSwitchCase=\"'sync'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} d-flex align-items-center gap-2\"\r\n >\r\n <svg fill=\"none\" height=\"19\" viewBox=\"0 0 18 19\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n fill=\"#FF375E\"\r\n />\r\n </svg>\r\n {{ element[column] }}\r\n </div>\r\n\r\n <ng-container *ngSwitchCase=\"'clickable'\">\r\n @if (element?.[column]) {\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n [matMenuTriggerFor]=\"descMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n {{ columnsConfig[i].clickableText | translate }}\r\n </span>\r\n }\r\n\r\n <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngSwitchCase=\"'translatedClickable'\"\r\n [matMenuTriggerFor]=\"descMenuTranslated\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n {{ columnsConfig[i].clickableText | translate }}\r\n <!-- {{ 'global.view' | translate}} -->\r\n </span>\r\n\r\n <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n element[column] : \"-\" }}\r\n </span>\r\n </mat-menu>\r\n\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngSwitchCase=\"'conditionalClickable'\"\r\n [matMenuTriggerFor]=\"descConditionalMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n @if (element[column] && element[column] != 'null') {\r\n <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n }\r\n <!-- {{ 'global.view' | translate}} -->\r\n </span>\r\n\r\n <mat-menu #descConditionalMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n\r\n <span (click)=\"$event.stopPropagation()\" *ngSwitchCase=\"'dropdown'\" [matMenuTriggerFor]=\"dropdownMenu\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }} cursor-pointer\">\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n \"-\" }}\r\n <!-- <span *ngFor=\"let item of element[column]\">\r\n {{item.id}}\r\n </span> -->\r\n\r\n <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n </span>\r\n\r\n <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <ng-container *ngSwitchCase=\"'dropdown'\">\r\n <span class=\"fs-12 fc-black\" mat-menu-item>\r\n <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n element[column] : \"-\" }}\r\n </span>\r\n </ng-container>\r\n </mat-menu>\r\n\r\n <span\r\n *ngSwitchCase=\"'formatNumber'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n matTooltip=\"{{\r\n element[column] > 1000 ? element[column] : ''\r\n }}\"\r\n >\r\n {{ element[column] }}\r\n </span>\r\n\r\n <div *ngSwitchCase=\"'group'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap d-flex align-items-center\"></div>\r\n\r\n <div *ngSwitchCase=\"'company'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center\">\r\n <span class=\"img-card circled-img\">\r\n <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n </span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"full-name\">{{ element[column] }}</span>\r\n </div>\r\n\r\n <span *ngSwitchCase=\"'translated'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n {{ element[column] }}\r\n </span>\r\n <span *ngSwitchCase=\"'title'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'maxWidth'\" [ngClass]=\"columnsConfig[i].type\">\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'progress'\" [ngClass]=\"columnsConfig[i].type\">\r\n <div class=\"Progress\">\r\n <div class=\"progress-container default-progress\">\r\n <div\r\n [style.width.%]=\"\r\n (element[column].consumed! / element[column].total!) *\r\n 100\r\n \"\r\n class=\"progress-bar\"\r\n ></div>\r\n </div>\r\n <div class=\"Progress__footer\">\r\n <div></div>\r\n <div>\r\n <span class=\"fs-12\">\r\n <span>{{ element[column].consumed }}</span>\r\n <span>/</span>\r\n <span class=\"fc-silver\">{{ element[column].total }}</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </span>\r\n\r\n <div *ngSwitchCase=\"'subsidiary'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n <img [alt]=\"element[column]?.title\" src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\" />\r\n <!-- <span class=\"full-name\">{{element[column]}}</span>-->\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'Service'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n <svg fill=\"none\" height=\"35\" viewBox=\"0 0 34 35\" width=\"34\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect fill=\"#FF375E\" fill-opacity=\"0.1\" height=\"33.5\" rx=\"4\" width=\"33.5\" y=\"0.75\" />\r\n <path\r\n d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n fill=\"#FF375E\"\r\n />\r\n </svg>\r\n\r\n <span class=\"fs-12 fw-normal fc-black\">{{ element?.Service.name }}</span>\r\n </div>\r\n <div *ngSwitchCase=\"'Color'\" class=\"d-flex align-items-center gap-2\">\r\n <span\r\n [ngClass]=\"columnsConfig[i].type\"\r\n [style.background]=\"\r\n element[column]?.colorCode\r\n ? element[column]?.colorCode\r\n : element[column]\r\n \"\r\n ></span>\r\n {{ element[column].title }}\r\n </div>\r\n <div\r\n *ngSwitchCase=\"'colorBg'\"\r\n [style.background]=\"\r\n 'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n \"\r\n class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n >\r\n <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n {{ element[column].title }}\r\n </div>\r\n <div *ngSwitchCase=\"'assigned'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex align-items-center\">\r\n <div class=\"img-card x-small circled-img\">\r\n <img [src]=\"element?.AssignedTo.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n </div>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-black\">{{ element?.AssignedTo.name }}</span>\r\n <!--\r\n <span class=\"sfi sfi-close fc-coral\"></span>\r\n -->\r\n </div>\r\n\r\n <span *ngSwitchCase=\"'coloredText'\" [style.color]=\"element[column]?.['color']\">{{ element[column]?.['title'] }}</span>\r\n <div *ngSwitchCase=\"'survey'\" [style.color]=\"element[column]?.['color']\" class=\"d-flex align-items-center gap-1 text-nowrap\">\r\n <span class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"></span>\r\n {{ element[column]?.['title'] }}\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'Satisfaction'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex gap-2 align-items-center\">\r\n <!--\r\n <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n -->\r\n\r\n <span class=\"fs-12 fc-black\">{{ element[column].percentage }}%</span>\r\n <ds-status class=\"auto-status\" size=\"small\" status=\"{{ element[column].status }}\">\r\n <span class=\"fs-10\">\r\n {{ element[column].percentageTrend }}%\r\n </span>\r\n @if (element[column].trendStatus == 'up') {\r\n <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\"> </ds-icon>\r\n } @if (element[column].trendStatus != 'up') {\r\n <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\"> </ds-icon>\r\n }\r\n </ds-status>\r\n </div>\r\n\r\n <ng-container *ngSwitchCase=\"'actions'\">\r\n <div class=\"d-flex justify-content-start gap-2\">\r\n <ng-container *ngIf=\"columnsConfig[i]?.actions?.length <= 6\">\r\n <ng-container *ngFor=\"let action of columnsConfig[i]?.actions\">\r\n <ds-button (click)=\"$event.stopPropagation()\" *ngIf=\"action.viewMode === Actions.ALLOCATE\" shape=\"outline\" size=\"small\">\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action === Actions.ALLOCATE\"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n </ds-button>\r\n <ng-container\r\n *ngIf=\"\r\n action.viewMode != Actions.VIEW ||\r\n action.viewMode != Actions.COPY\r\n \"\r\n >\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.VIEW &&\r\n !action?.isHidden\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n </ds-button>\r\n <ds-button (click)=\"$event.stopPropagation(); action?.onClick(element)\"\r\n *ngIf=\"action?.action === Actions.CLOSE && !action?.isHidden\"\r\n icon size=\"small\">\r\n <ds-icon class=\"fs-15 fc-coral\" icon=\"close\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.COPY &&\r\n !action?.isHidden\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n </ds-button>\r\n <!-- @if(element.hasOwnProperty('canUpdate')){\r\n <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n </ds-button>\r\n }@else { -->\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\"\r\n *ngIf=\"\r\n action?.action === Actions.EDIT &&\r\n ![4, 7].includes(element?.contractStatus?.id)\"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n </ds-button>\r\n <!-- } -->\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.DELETE &&\r\n !action?.isHidden &&\r\n ![4, 7].includes(element?.contractStatus?.id)\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.DELETEPENDING &&\r\n !action?.isHidden &&\r\n element?.contractStatus?.id == 1\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action?.action === Actions.CHART\"\r\n color=\"transparent\"\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fc-coral fs-15\" icon=\"chart-o\"></ds-icon>\r\n </ds-button>\r\n\r\n @if (element.hasOwnProperty('canTakeAction')) {\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"\r\n action?.action === Actions.APPROVE &&\r\n element.canTakeAction == true\r\n \"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.approve\" | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n shape=\"outline\"\r\n color=\"dark-gray\"\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"\r\n action?.action === Actions.REJECT &&\r\n element.canTakeAction == true\r\n \"\r\n shape=\"outline\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.reject\" | translate }}\r\n </span>\r\n </ds-button>\r\n } @else {\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"action?.action === Actions.APPROVE\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.approve\" | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n shape=\"outline\"\r\n color=\"dark-gray\"\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"action?.action === Actions.REJECT\"\r\n shape=\"outline\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.reject\" | translate }}\r\n </span>\r\n </ds-button>\r\n }\r\n\r\n <ds-button *ngIf=\"action?.action === Actions.DETAILS\" shape=\"text\" size=\"small\">\r\n <span class=\"fs-12 underline\"> View Details </span>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.START &&\r\n element?.isFinalize\r\n \"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action?.action === Actions.PREPARE\"\r\n color=\"light-gray\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-black\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n <ds-icon class=\"fs-12 fc-black\" icon=\"settings\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.START &&\r\n element?.isFinalize\r\n \"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n\r\n <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n *ngIf=\"action?.action === 'customAction'\"\r\n (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n ></ds-button> -->\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n (element.contractStatus.id == 7 ||\r\n element.contractStatus.id == 1)\r\n \"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n element.contractStatus.id == 7\r\n \"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.CUSTOMACTIONDETAILS\r\n \"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-status *ngIf=\"action?.action === Actions.STATUS\" [status]=\"action?.Status.status\" class=\"fs-12 statusAction w-100\">\r\n <span class=\"fc-black\">\r\n {{ action?.Status.title | translate }}\r\n </span>\r\n </ds-status>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n <ds-button\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n [matMenuTriggerFor]=\"statusMenu\"\r\n class=\"dots\"\r\n shape=\"text\"\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-20 fc-dark-gray\" icon=\"dots\"></ds-icon>\r\n </ds-button>\r\n\r\n <mat-menu #statusMenu=\"matMenu\">\r\n <button (click)=\"action?.onClick(element)\" *ngFor=\"let action of columnsConfig[i]?.actions\" mat-menu-item>\r\n <span class=\"fs-12 fc-black\">{{ action?.actionName | translate }} </span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'specs'\">\r\n @if (element?.[column]) {\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n [matMenuTriggerFor]=\"specsMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n {{ columnsConfig[i].clickableText | translate }}\r\n </span>\r\n }\r\n\r\n <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <!--<div\r\n *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex gap-1\">\r\n {{ element[column] | json }}\r\n <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n <div\r\n class=\"progress-container default-progress medium radius-0 \"\r\n matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n <div\r\n [style.width.%]=\"item.value\"\r\n class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>-->\r\n\r\n <span\r\n *ngSwitchDefault\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"text-nowrap\"\r\n matTooltip=\" {{\r\n columnsConfig[i].arKey\r\n ? i18Service.language == 'ar'\r\n ? mapText(columnsConfig[i].arKey, element[column])\r\n : mapText(columnsConfig[i].enKey, element[column])\r\n : element[column]\r\n ? element[column]\r\n : '-'\r\n }}\"\r\n matTooltipPosition=\"below\"\r\n >\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n \"-\" }}\r\n </span>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n }\r\n\r\n <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n <tr (click)=\"clickRow(row)\" *matRowDef=\"let row; columns: columns\" [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\" mat-row role=\"button\"></tr>\r\n </table>\r\n }\r\n </ng-container>\r\n } @if (isLoading) {\r\n <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n } @if (!isLoading && dataSource.filteredData?.length == 0) {\r\n <ds-message [label]=\" customMessage?? 'NoData' | translate\" type=\"emptyList\"></ds-message>\r\n }\r\n</div>\r\n@if (dataSource.filteredData?.length && hasPaginator) {\r\n<mat-paginator #paginator (page)=\"pageChanged($event)\" [length]=\"totalElements\" [pageIndex]=\"currentPage\" [pageSizeOptions]=\"[5, 10, 15, 20, 100]\" [pageSize]=\"pageSize\" aria-label=\"Select page\" showFirstLastButtons> </mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}\n"] }]
|
|
5622
|
+
args: [{ selector: 'app-table', standalone: true, imports: [NgFor, NgIf, matModules, FormsModule, NgSwitchDefault, SkipLocationDirective, MatPaginator, TranslatePipe], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div #table class=\"table-container table-responsive sticky-table\">\r\n @if (!isLoading) {\r\n <ng-container>\r\n @if (dataSource.filteredData?.length! > 0) {\r\n <table #tableSort=\"matSort\" (matSortChange)=\"sortChange($event)\" [dataSource]=\"dataSource\" class=\"primary-table {{ className }}\" mat-table matSort>\r\n @for (column of columns; track $index; let i = $index) {\r\n <ng-container>\r\n <!-- Add a check to ensure 'columnsConfig' and 'columnsConfig[i]' are defined before using them -->\r\n\r\n @if (columnsConfig && columnsConfig[i]) {\r\n <ng-container>\r\n <ng-container [matColumnDef]=\"column\" [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\">\r\n @if (!columnsConfig[i].notSortable) {\r\n <ng-container>\r\n <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell mat-sort-header>\r\n @if (columnsConfig[i].type !== 'checkbox' || ( this.columnsConfig[i]?.type! == 'actions' && this.columnsConfig[i]?.actions?.length === 0)) {\r\n <ng-container>\r\n @if (!(this.columnsConfig[i].type == 'actions' && this.columnsConfig[i].actions.length === 0)) {\r\n <div class=\"d-flex align-items-center th-center\">\r\n <div class=\"mx-1 fc-{{ columnsConfig[i].fontColor }}\">\r\n {{ columnsConfig[i].label | translate }}\r\n </div>\r\n @if (columnsConfig[i].slaMax) {\r\n <ds-sla\r\n [canvasScale]=\"'40'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"columnsConfig[i].slaMax\"\r\n [outerLineColor]=\"'limegreen'\"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"columnsConfig[i].slaValue\"\r\n class=\"table-header-sla my-1\"\r\n ></ds-sla>\r\n }\r\n </div>\r\n }\r\n </ng-container>\r\n } @if (columnsConfig[i].type == 'checkbox') {\r\n <mat-checkbox class=\"checkbox\"></mat-checkbox>\r\n }\r\n </th>\r\n </ng-container>\r\n } @if (columnsConfig[i].notSortable) {\r\n <ng-container>\r\n <th *matHeaderCellDef [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\" mat-header-cell>\r\n <div class=\"d-flex align-items-center th-center\">\r\n <div class=\"mx-1\">\r\n {{ columnsConfig[i].label | translate }}\r\n </div>\r\n @if (columnsConfig[i].slaMax) {\r\n <ds-sla\r\n [canvasScale]=\"'50'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"columnsConfig[i].slaMax\"\r\n [outerLineColor]=\"'limegreen'\"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"columnsConfig[i].slaValue\"\r\n class=\"table-header-sla my-1\"\r\n ></ds-sla>\r\n }\r\n </div>\r\n </th>\r\n </ng-container>\r\n }\r\n\r\n <td *matCellDef=\"let element; let j = index\" mat-cell>\r\n <ng-container [ngSwitch]=\"columnsConfig[i].type\">\r\n <!-- <a target=\"_blank\"-->\r\n <!-- routerLink=\"/inbox\" [queryParams]=\"{ id: element[column] }\"-->\r\n <!-- class=\"fc-black text-decoration-underline fw-medium\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'link'\">-->\r\n <!-- {{ element[column] }}-->\r\n <!-- </a>-->\r\n <span *ngSwitchCase=\"'serial'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral fw-medium\">\r\n {{ j+1 }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'formId'\" (click)=\"viewForm(element[column])\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-coral cursor-pointer text-decoration-underline fw-medium\">\r\n {{ element[column] }}\r\n </span>\r\n <!-- <span\r\n *ngSwitchCase=\"'link'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"fc-black text-decoration-underline fw-medium\"\r\n >\r\n {{ element[column] }}\r\n </span>-->\r\n\r\n <span *ngSwitchCase=\"'linkWithIcon'\" [appSkipLocation]=\"columnsConfig[i].link\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n </span>\r\n <span *ngSwitchCase=\"'underLineWithIcon'\" [ngClass]=\"columnsConfig[i].type\" class=\"fc-black text-decoration-underline fw-medium\">\r\n <ds-icon class=\"fs-20 fc-black\" icon=\" {{ columnsConfig[i].icon }}\"></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{ element[column] }}</span>\r\n </span>\r\n <mat-checkbox *ngSwitchCase=\"'checkbox'\" checked=\"{{ columnsConfig[i].checked }}\" class=\"checkbox\" disabled=\"{{ columnsConfig[i].disabled }}\"> </mat-checkbox>\r\n <span *ngSwitchCase=\"'ServiceDetails'\" [ngClass]=\"columnsConfig[i].type\" class=\"cursor-pointer\">\r\n {{ element[column] }}\r\n </span>\r\n <span *ngSwitchCase=\"'dateOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-2 text-nowrap\">\r\n <span class=\"sfi sfi-calendar-o fc-coral fs-18\"></span>\r\n {{ element[column] | date : \"MMM d, y\" }}\r\n </span>\r\n <span *ngSwitchCase=\"'Search'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <app-input [formControl]=\"ctrl\" [placeholder]=\"'Search for item '\" [showLabel]=\"false\" class=\"\" className=\"no-padding \" prefix=\"sfi-search fs-16\" type=\"text\"> </app-input>\r\n </span>\r\n <span *ngSwitchCase=\"'Number'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <app-input [formControl]=\"ctrl\" [placeholder]=\"'number'\" [showLabel]=\"false\" class=\"\" className=\"no-padding\" type=\"text\"> </app-input>\r\n </span>\r\n <span *ngSwitchCase=\"'dateFromTo'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <span class=\"sfi sfi-clock fc-coral\"></span>\r\n <span class=\"mx-2\">\r\n {{ element?.date.from }} @if (element?.date.to) {\r\n <ng-container> : {{ element?.date.to }} </ng-container>\r\n }\r\n </span>\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'dateTime'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n <span class=\"sfi sfi-calendar-o fc-dark-gray fs-20\"></span>\r\n {{ element[column] | date : \"MMM d, y, h:mm a\" }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'singleTimeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n {{ element[column] | date : \"h:mm a\" }}\r\n </span>\r\n <!--dir=\"ltr\" and text-left for English text on ar page -->\r\n <span *ngSwitchCase=\"'timeOnly'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\" dir=\"ltr\">\r\n <!-- -->\r\n {{ mapText(columnsConfig[i].firstVal, element[column]) | date : \"h:mm a\" }} @if (mapText(columnsConfig[i].secondVal, element[column])) {\r\n <ng-container>\r\n - {{ mapText(columnsConfig[i].secondVal, element[column]) | date : \"h:mm a\" }}\r\n </ng-container>\r\n }\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'multipleRows'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center gap-1 flex-wrap\">\r\n <!-- -->\r\n @if (!element[column].monthlyFineEscalation) {\r\n <div>\r\n {{ element[column].fixedFineValue }} {{ \"global.SAR\" | translate }}\r\n </div>\r\n } @if (element[column].monthlyFineEscalation) {\r\n <div>\r\n <br />\r\n {{ element[column].firstTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n <br />\r\n {{ element[column].secondTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n <br />\r\n {{ element[column].thirdTimeFine }} {{ \"global.SAR\" | translate }} <br />\r\n <br />\r\n </div>\r\n }\r\n </span>\r\n\r\n <div *ngSwitchCase=\"'sla'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-inline-flex align-items-center\">\r\n <!-- <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"38\" -->\r\n <!-- class=\"font-9 fw-medium\" [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\">-->\r\n <!-- </app-sla>-->\r\n\r\n <ds-sla\r\n [attr.outerLineColor]=\"\r\n getSlaColor(element?.SLA.value, element?.SLA.max)\r\n \"\r\n [canvasScale]=\"'55'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"element?.SLA?.max\"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"element?.SLA?.value\"\r\n ></ds-sla>\r\n </div>\r\n <div *ngSwitchCase=\"'slaProgress'\">\r\n <!-- <mat-sp-->\r\n\r\n @if (element[column]?.percentage >= 0) {\r\n <ds-sla\r\n [canvasScale]=\"'55'\"\r\n [customValue]=\"element[column]?.percentage + '%'\"\r\n [innerLineWidth]=\"'3'\"\r\n [maxValue]=\"'100'\"\r\n [outerLineColor]=\"\r\n getSlaColor(element[column]?.percentage, 100)\r\n \"\r\n [outerLineWidth]=\"'3'\"\r\n [value]=\"element[column]?.percentage\"\r\n ></ds-sla>\r\n } @else {\r\n <ng-template>Not started</ng-template>\r\n }\r\n </div>\r\n <div *ngSwitchCase=\"'Priority'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n {{ element[column] }}\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'serviceStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ element[column] }}\">\r\n <span [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\" class=\"dot-status\"></span>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'image'\" [ngClass]=\"columnsConfig[i].type\" class=\"img-card table-img\">\r\n <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'employee'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2 text-nowrap\">\r\n <ds-avatar [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\" size=\"x-small\"> </ds-avatar>\r\n <span>{{ (element[column]?.['name']) }}</span>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'progress_group'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex gap-1\">\r\n <ng-container *ngFor=\"let item of element[column]\">\r\n <div class=\"progress-container default-progress medium radius-0\" matTooltip=\"Team assignment {{ item.value }}%\" matTooltipPosition=\"below\">\r\n <div [style.width.%]=\"item.value\" class=\"progress-bar bg-color-{{ item.color }}\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngSwitchCase=\"'input'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n <app-input\r\n (input)=\"inputCellChanged.emit({element,column,i})\"\r\n [(ngModel)]=\"element[column]\"\r\n [min]=\"0\"\r\n [placeholder]=\"element[column]\"\r\n class=\"w-100\"\r\n className=\" no-padding w-100\"\r\n type=\"number\"\r\n value=\"{{ element[column] }}\"\r\n >\r\n </app-input>\r\n </div>\r\n <div *ngSwitchCase=\"'autoComplete'\"></div>\r\n <div *ngSwitchCase=\"'select'\" [ngClass]=\"columnsConfig[i].type\" class=\"\">\r\n <app-custom-searchable\r\n (selectedValue)=\"selectValueSelected.emit($event)\"\r\n [isSearchable]=\"columnsConfig[i].config?.isSearchable\"\r\n [key]=\"columnsConfig[i]?.key\"\r\n [displayedLabel]=\"columnsConfig[i]?.displayedLable\"\r\n [options]=\"columnsConfig[i]?.options\"\r\n [postKey]=\"columnsConfig[i]?.postKey\"\r\n [showLabel]=\"false\"\r\n className=\"no-padding w-100\"\r\n >\r\n </app-custom-searchable>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'status'\" [ngClass]=\"'New' + columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n @if (element[column]) {\r\n <ds-status [status]=\"element[column]?.status\" class=\"fs-12\">\r\n {{ element[column]?.title | translate }}\r\n </ds-status>\r\n } @if (element[column]?.reason) {\r\n <span\r\n (click)=\"$event.stopPropagation()\"\r\n [matMenuTriggerFor]=\"reasonMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-red underline cursor-pointer\"\r\n >\r\n Show reason\r\n </span>\r\n }\r\n\r\n <mat-menu #reasonMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column]?.reason }}\r\n </span>\r\n </mat-menu>\r\n </div>\r\n <div *ngSwitchCase=\"'toggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 1\" [disabled]=\"false\"></mat-slide-toggle>\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'customToggle'\" [ngClass]=\"columnsConfig[i].type\">\r\n <mat-slide-toggle (change)=\"toggleValueChange($event, element)\" [checked]=\"element[column] == 7\" [disabled]=\"element[column] != 1\"></mat-slide-toggle>\r\n </div>\r\n <div *ngSwitchCase=\"'meetingStatus'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n @if (element[column].label == 'Finished') {\r\n <span class=\" {{ element[column].label }} status \">\r\n {{ element[column].label }}\r\n </span>\r\n } @if (element[column].label != 'Finished') {\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].hours }}</span>\r\n <span class=\"fs-10 fw-light\">HRS</span>\r\n </div>\r\n <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].min }}</span>\r\n <span class=\"fs-10 fw-light\">MINS</span>\r\n </div>\r\n <div class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\">\r\n <span class=\"fs-11 fw-medium mb-1\"> {{ element[column].sec }}</span>\r\n <span class=\"fs-10 fw-light\">SECS</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <span\r\n *ngSwitchCase=\"'number'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }} {{\r\n element[column] ? 'underline' : ''\r\n }}\"\r\n >\r\n {{ element[column] ? element[column] : 0 }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'currency'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n {{ element[column] ? parseInt(element[column]).toFixed(2) + (columnsConfig[i].currency | translate) : \"-\" }}\r\n </span>\r\n <span *ngSwitchCase=\"'active'\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }}\">\r\n <ds-icon [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\" icon=\"check-circle-f fs-30\"></ds-icon>\r\n </span>\r\n <div\r\n *ngSwitchCase=\"'sync'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} d-flex align-items-center gap-2\"\r\n >\r\n <svg fill=\"none\" height=\"19\" viewBox=\"0 0 18 19\" width=\"18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M14.25 13.2604C13.9425 13.2604 13.6875 12.9913 13.6875 12.6667V5.14583C13.6875 4.59958 13.2675 4.15625 12.75 4.15625H8.625C8.3175 4.15625 8.0625 3.88708 8.0625 3.5625C8.0625 3.23792 8.3175 2.96875 8.625 2.96875H12.75C13.89 2.96875 14.8125 3.9425 14.8125 5.14583V12.6667C14.8125 12.9913 14.5575 13.2604 14.25 13.2604Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M10.5 6.13549C10.3725 6.13549 10.245 6.088 10.14 6.00092L7.88999 4.02175C7.76249 3.91092 7.6875 3.74465 7.6875 3.56257C7.6875 3.38048 7.76249 3.22214 7.88999 3.10339L10.14 1.12422C10.38 0.910471 10.7325 0.950084 10.935 1.20342C11.1375 1.45675 11.1 1.82883 10.86 2.04258L9.12751 3.56257L10.86 5.08255C11.1 5.29631 11.13 5.66839 10.935 5.92172C10.8225 6.06422 10.6575 6.13549 10.5 6.13549Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M14.25 18.0105C12.6975 18.0105 11.4375 16.6805 11.4375 15.0417C11.4375 13.403 12.6975 12.073 14.25 12.073C15.8025 12.073 17.0625 13.403 17.0625 15.0417C17.0625 16.6805 15.8025 18.0105 14.25 18.0105ZM14.25 13.2605C13.32 13.2605 12.5625 14.0601 12.5625 15.0417C12.5625 16.0234 13.32 16.823 14.25 16.823C15.18 16.823 15.9375 16.0234 15.9375 15.0417C15.9375 14.0601 15.18 13.2605 14.25 13.2605Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M9.375 16.0312H5.25C4.11 16.0312 3.1875 15.0574 3.1875 13.8541V6.33325C3.1875 6.00867 3.4425 5.7395 3.75 5.7395C4.0575 5.7395 4.3125 6.00867 4.3125 6.33325V13.8541C4.3125 14.4003 4.7325 14.8437 5.25 14.8437H9.375C9.6825 14.8437 9.9375 15.1128 9.9375 15.4374C9.9375 15.762 9.6825 16.0312 9.375 16.0312Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M7.4997 18.0104C7.3422 18.0104 7.17721 17.9391 7.06471 17.7966C6.86221 17.5433 6.89969 17.1712 7.13969 16.9574L8.87219 15.4375L7.13969 13.9175C6.89969 13.7037 6.86971 13.3316 7.06471 13.0783C7.26721 12.825 7.61971 12.7933 7.85971 12.9991L10.1097 14.9783C10.2372 15.0891 10.3122 15.2554 10.3122 15.4375C10.3122 15.6195 10.2372 15.7779 10.1097 15.8966L7.85971 17.8758C7.75471 17.9629 7.6272 18.0104 7.4997 18.0104Z\"\r\n fill=\"#FF375E\"\r\n />\r\n <path\r\n d=\"M3.75 6.927C2.1975 6.927 0.9375 5.597 0.9375 3.95825C0.9375 2.3195 2.1975 0.989502 3.75 0.989502C5.3025 0.989502 6.5625 2.3195 6.5625 3.95825C6.5625 5.597 5.3025 6.927 3.75 6.927ZM3.75 2.177C2.82 2.177 2.0625 2.97659 2.0625 3.95825C2.0625 4.93992 2.82 5.7395 3.75 5.7395C4.68 5.7395 5.4375 4.93992 5.4375 3.95825C5.4375 2.97659 4.68 2.177 3.75 2.177Z\"\r\n fill=\"#FF375E\"\r\n />\r\n </svg>\r\n {{ element[column] }}\r\n </div>\r\n\r\n <ng-container *ngSwitchCase=\"'clickable'\">\r\n @if (element?.[column]) {\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n [matMenuTriggerFor]=\"descMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n {{ columnsConfig[i].clickableText | translate }}\r\n </span>\r\n }\r\n\r\n <mat-menu #descMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngSwitchCase=\"'translatedClickable'\"\r\n [matMenuTriggerFor]=\"descMenuTranslated\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n {{ columnsConfig[i].clickableText | translate }}\r\n <!-- {{ 'global.view' | translate}} -->\r\n </span>\r\n\r\n <mat-menu #descMenuTranslated=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n element[column] : \"-\" }}\r\n </span>\r\n </mat-menu>\r\n\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngSwitchCase=\"'conditionalClickable'\"\r\n [matMenuTriggerFor]=\"descConditionalMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n @if (element[column] && element[column] != 'null') {\r\n <span>{{ columnsConfig[i].clickableText | translate }}</span>\r\n }\r\n <!-- {{ 'global.view' | translate}} -->\r\n </span>\r\n\r\n <mat-menu #descConditionalMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n\r\n <span (click)=\"$event.stopPropagation()\" *ngSwitchCase=\"'dropdown'\" [matMenuTriggerFor]=\"dropdownMenu\" [ngClass]=\"columnsConfig[i].type\" class=\"{{ columnsConfig[i].type }} cursor-pointer\">\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n \"-\" }}\r\n <!-- <span *ngFor=\"let item of element[column]\">\r\n {{item.id}}\r\n </span> -->\r\n\r\n <ds-icon class=\"fc-black fw-medium\" icon=\"arrow\"></ds-icon>\r\n </span>\r\n\r\n <mat-menu #dropdownMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <ng-container *ngSwitchCase=\"'dropdown'\">\r\n <span class=\"fs-12 fc-black\" mat-menu-item>\r\n <!-- {{translateService.currentLang == 'ar' ? item.groupNameAr : item.groupNameEn}} -->\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ?\r\n element[column] : \"-\" }}\r\n </span>\r\n </ng-container>\r\n </mat-menu>\r\n\r\n <span\r\n *ngSwitchCase=\"'formatNumber'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n matTooltip=\"{{\r\n element[column] > 1000 ? element[column] : ''\r\n }}\"\r\n >\r\n {{ element[column] }}\r\n </span>\r\n\r\n <div *ngSwitchCase=\"'group'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap d-flex align-items-center\"></div>\r\n\r\n <div *ngSwitchCase=\"'company'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center\">\r\n <span class=\"img-card circled-img\">\r\n <img [src]=\"element?.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n </span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"full-name\">{{ element[column] }}</span>\r\n </div>\r\n\r\n <span *ngSwitchCase=\"'translated'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n {{ element[column] }}\r\n </span>\r\n <span *ngSwitchCase=\"'title'\" [ngClass]=\"columnsConfig[i].type\" class=\"text-nowrap\">\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'maxWidth'\" [ngClass]=\"columnsConfig[i].type\">\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span *ngSwitchCase=\"'progress'\" [ngClass]=\"columnsConfig[i].type\">\r\n <div class=\"Progress\">\r\n <div class=\"progress-container default-progress\">\r\n <div\r\n [style.width.%]=\"\r\n (element[column].consumed! / element[column].total!) *\r\n 100\r\n \"\r\n class=\"progress-bar\"\r\n ></div>\r\n </div>\r\n <div class=\"Progress__footer\">\r\n <div></div>\r\n <div>\r\n <span class=\"fs-12\">\r\n <span>{{ element[column].consumed }}</span>\r\n <span>/</span>\r\n <span class=\"fc-silver\">{{ element[column].total }}</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </span>\r\n\r\n <div *ngSwitchCase=\"'subsidiary'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n <img [alt]=\"element[column]?.title\" src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\" />\r\n <!-- <span class=\"full-name\">{{element[column]}}</span>-->\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'Service'\" [ngClass]=\"columnsConfig[i].type\" class=\"d-flex align-items-center gap-2\">\r\n <svg fill=\"none\" height=\"35\" viewBox=\"0 0 34 35\" width=\"34\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect fill=\"#FF375E\" fill-opacity=\"0.1\" height=\"33.5\" rx=\"4\" width=\"33.5\" y=\"0.75\" />\r\n <path\r\n d=\"M24.213 17.0338H22.1448L21.4532 15.1884C21.2221 14.5845 20.649 14.1622 19.9761 14.1592H13.5315C12.8586 14.1622 12.2847 14.5838 12.0582 15.1771L12.0544 15.1876L11.3628 17.033H9.29312C9.05532 17.033 8.86328 17.2258 8.86328 17.4629V19.1845C8.86328 19.4223 9.05607 19.6143 9.29312 19.6143H10.2076L9.69896 20.378C9.53242 20.6233 9.4334 20.9263 9.4334 21.2519C9.4334 21.2527 9.4334 21.2527 9.4334 21.2534V26.0702C9.4334 26.308 9.62619 26.5 9.86324 26.5H12.1595C12.3973 26.5 12.5893 26.3072 12.5893 26.0702V24.7791H20.91V26.0702C20.91 26.308 21.1028 26.5 21.3399 26.5H23.6361C23.8739 26.5 24.066 26.3072 24.066 26.0702V21.2519C24.066 21.2512 24.066 21.2512 24.066 21.2504C24.066 20.9248 23.9669 20.6218 23.7974 20.3705L23.8011 20.3757L23.2925 19.6121H24.207C24.4448 19.6121 24.6368 19.4193 24.6368 19.1822V17.4606C24.6361 17.2258 24.4478 17.036 24.2145 17.0315L24.213 17.0338ZM12.8654 15.4915C12.9711 15.2176 13.2314 15.0271 13.5368 15.0264H19.9798C20.2852 15.0271 20.5455 15.2184 20.649 15.487L20.6505 15.4922L21.8747 18.7569H11.6359L12.8654 15.4915ZM23.2138 23.9202H10.2983V21.2542C10.2983 21.2534 10.2983 21.2534 10.2983 21.2527C10.2983 21.1049 10.3433 20.9676 10.4199 20.8536L10.4184 20.8558L11.245 19.6151H22.2618L23.0885 20.8558C23.1635 20.9668 23.2085 21.1049 23.2085 21.2519C23.2085 21.2527 23.2085 21.2527 23.2085 21.2534L23.2138 23.9202ZM9.72896 17.895H11.0357L10.7132 18.7561H9.72071L9.72896 17.895ZM11.7379 25.6411H10.2983V24.7799H11.7334L11.7379 25.6411ZM23.2153 25.6411H21.775V24.7799H23.21L23.2153 25.6411ZM23.7869 18.7546H22.7899L22.4674 17.8935H23.7831L23.7869 18.7546ZM12.1632 20.4762C11.2915 20.4762 10.5856 21.1829 10.5856 22.0538C10.5856 22.9248 11.2923 23.6314 12.1632 23.6314C13.0349 23.6314 13.7408 22.9248 13.7408 22.0538C13.7408 21.1821 13.0342 20.4762 12.1632 20.4762V20.4762ZM12.1632 22.7725C11.7671 22.7725 11.4461 22.4514 11.4461 22.0553C11.4461 21.6592 11.7671 21.3382 12.1632 21.3382C12.5593 21.3382 12.8804 21.6592 12.8804 22.0553C12.8804 22.4514 12.5593 22.7725 12.1632 22.7725V22.7725ZM21.3444 20.4762C20.4727 20.4762 19.7668 21.1829 19.7668 22.0538C19.7668 22.9248 20.4735 23.6314 21.3444 23.6314C22.2161 23.6314 22.922 22.9248 22.922 22.0538C22.922 21.1821 22.2153 20.4762 21.3444 20.4762ZM21.3444 22.7725C20.9483 22.7725 20.6272 22.4514 20.6272 22.0553C20.6272 21.6592 20.9483 21.3382 21.3444 21.3382C21.7405 21.3382 22.0615 21.6592 22.0615 22.0553C22.0615 22.4514 21.7405 22.7725 21.3444 22.7725ZM19.0489 21.0509H14.4579C14.2201 21.0509 14.0274 21.2437 14.0274 21.4815C14.0274 21.7193 14.2201 21.912 14.4579 21.912H19.0489C19.2867 21.912 19.4795 21.7193 19.4795 21.4815C19.4795 21.2437 19.2867 21.0509 19.0489 21.0509ZM19.0489 22.1986H14.4579C14.2201 22.1986 14.0274 22.3914 14.0274 22.6292C14.0274 22.867 14.2201 23.0598 14.4579 23.0598H19.0489C19.2867 23.0598 19.4795 22.867 19.4795 22.6292C19.4795 22.3914 19.2867 22.1986 19.0489 22.1986ZM15.2321 12.5703C15.1541 12.6484 15.1061 12.7556 15.1061 12.8742C15.1061 13.112 15.2989 13.304 15.5359 13.304C15.6544 13.304 15.7625 13.256 15.8397 13.178C16.0738 12.9439 16.3971 12.7991 16.7542 12.7991C17.1113 12.7991 17.4346 12.9439 17.6686 13.178C17.7466 13.256 17.8539 13.304 17.9724 13.304C18.2102 13.304 18.4023 13.1112 18.4023 12.8742C18.4023 12.7556 18.3543 12.6476 18.2762 12.5703C17.8862 12.181 17.3483 11.9395 16.7534 11.9395C16.1586 11.9395 15.6199 12.1803 15.2306 12.5703H15.2321ZM19.1877 12.0865C19.1884 12.0865 19.1884 12.0865 19.1892 12.0865C19.427 12.0865 19.619 11.8937 19.619 11.6567C19.619 11.5374 19.5703 11.4294 19.4915 11.3513C18.7909 10.6507 17.8224 10.2171 16.7527 10.2171C15.683 10.2171 14.7145 10.6507 14.0139 11.3513C13.9358 11.4294 13.8878 11.5366 13.8878 11.6552C13.8878 11.893 14.0806 12.085 14.3177 12.085C14.4362 12.085 14.5442 12.037 14.6215 11.959C15.1668 11.4136 15.92 11.0768 16.7519 11.0768C17.5838 11.0768 18.337 11.4136 18.8824 11.959C18.9604 12.037 19.0677 12.0857 19.1869 12.0857H19.1877V12.0865ZM13.4062 10.743C14.2637 9.88704 15.4467 9.35818 16.7542 9.35818C18.0617 9.35818 19.2447 9.88704 20.1021 10.743C20.1801 10.821 20.2874 10.869 20.4059 10.869C20.6437 10.869 20.8358 10.6762 20.8358 10.4392C20.8358 10.3206 20.7878 10.2126 20.7098 10.1353C19.6963 9.12488 18.298 8.5 16.7534 8.5C15.2089 8.5 13.8106 9.12488 12.7971 10.1353C12.7191 10.2134 12.6711 10.3206 12.6711 10.4392C12.6711 10.677 12.8639 10.869 13.1009 10.869C13.2194 10.869 13.3275 10.821 13.4047 10.743H13.4062Z\"\r\n fill=\"#FF375E\"\r\n />\r\n </svg>\r\n\r\n <span class=\"fs-12 fw-normal fc-black\">{{ element?.Service.name }}</span>\r\n </div>\r\n <div *ngSwitchCase=\"'Color'\" class=\"d-flex align-items-center gap-2\">\r\n <span\r\n [ngClass]=\"columnsConfig[i].type\"\r\n [style.background]=\"\r\n element[column]?.colorCode\r\n ? element[column]?.colorCode\r\n : element[column]\r\n \"\r\n ></span>\r\n {{ element[column].title }}\r\n </div>\r\n <div\r\n *ngSwitchCase=\"'colorBg'\"\r\n [style.background]=\"\r\n 'rgba(var(--rgb-' + element[column]?.colorName + '), 0.1)'\r\n \"\r\n class=\"d-flex align-items-center gap-2 Colorbg p-2\"\r\n >\r\n <span class=\"bc-{{ element[column]?.colorName }}\"></span>\r\n {{ element[column].title }}\r\n </div>\r\n <div *ngSwitchCase=\"'assigned'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex align-items-center\">\r\n <div class=\"img-card x-small circled-img\">\r\n <img [src]=\"element?.AssignedTo.image\" alt=\"\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" />\r\n </div>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-black\">{{ element?.AssignedTo.name }}</span>\r\n <!--\r\n <span class=\"sfi sfi-close fc-coral\"></span>\r\n -->\r\n </div>\r\n\r\n <span *ngSwitchCase=\"'coloredText'\" [style.color]=\"element[column]?.['color']\">{{ element[column]?.['title'] }}</span>\r\n <div *ngSwitchCase=\"'survey'\" [style.color]=\"element[column]?.['color']\" class=\"d-flex align-items-center gap-1 text-nowrap\">\r\n <span class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"></span>\r\n {{ element[column]?.['title'] }}\r\n </div>\r\n\r\n <div *ngSwitchCase=\"'Satisfaction'\" [ngClass]=\"columnsConfig[i].type\" class=\"delegate d-flex gap-2 align-items-center\">\r\n <!--\r\n <ds-icon icon=\"star-f\" class=\"fc-dark-gray\"></ds-icon>\r\n -->\r\n\r\n <span class=\"fs-12 fc-black\">{{ element[column].percentage }}%</span>\r\n <ds-status class=\"auto-status\" size=\"small\" status=\"{{ element[column].status }}\">\r\n <span class=\"fs-10\">\r\n {{ element[column].percentageTrend }}%\r\n </span>\r\n @if (element[column].trendStatus == 'up') {\r\n <ds-icon class=\"fs-13 mx-1 growthIcon\" icon=\"up-growth\"> </ds-icon>\r\n } @if (element[column].trendStatus != 'up') {\r\n <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\"> </ds-icon>\r\n }\r\n </ds-status>\r\n </div>\r\n\r\n <ng-container *ngSwitchCase=\"'actions'\">\r\n <div class=\"d-flex justify-content-start gap-2\">\r\n <ng-container *ngIf=\"columnsConfig[i]?.actions?.length <= 6\">\r\n <ng-container *ngFor=\"let action of columnsConfig[i]?.actions\">\r\n <ds-button (click)=\"$event.stopPropagation()\" *ngIf=\"action.viewMode === Actions.ALLOCATE\" shape=\"outline\" size=\"small\">\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action === Actions.ALLOCATE\"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n </ds-button>\r\n <ng-container\r\n *ngIf=\"\r\n action.viewMode != Actions.VIEW ||\r\n action.viewMode != Actions.COPY\r\n \"\r\n >\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.VIEW &&\r\n !action?.isHidden\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"eye\"></ds-icon>\r\n </ds-button>\r\n <ds-button (click)=\"$event.stopPropagation(); action?.onClick(element)\"\r\n *ngIf=\"action?.action === Actions.CLOSE && !action?.isHidden\"\r\n icon size=\"small\">\r\n <ds-icon class=\"fs-15 fc-coral\" icon=\"close\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.COPY &&\r\n !action?.isHidden\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"files-copy\"></ds-icon>\r\n </ds-button>\r\n <!-- @if(element.hasOwnProperty('canUpdate')){\r\n <ds-button (click)=\"$event.stopPropagation();action?.onClick(element)\" icon size=\"small\"\r\n *ngIf=\"action?.action === 'edit' && !action?.isHidden && element.canUpdate == true\">\r\n <ds-icon icon=\"pen\" class=\"fs-15\"></ds-icon>\r\n </ds-button>\r\n }@else { -->\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\"\r\n *ngIf=\"\r\n action?.action === Actions.EDIT &&\r\n ![4, 7].includes(element?.contractStatus?.id)\"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-15\" icon=\"pen\"></ds-icon>\r\n </ds-button>\r\n <!-- } -->\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.DELETE &&\r\n !action?.isHidden &&\r\n ![4, 7].includes(element?.contractStatus?.id)\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.DELETEPENDING &&\r\n !action?.isHidden &&\r\n element?.contractStatus?.id == 1\r\n \"\r\n icon\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fc-coral fs-15\" icon=\"trash\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action?.action === Actions.CHART\"\r\n color=\"transparent\"\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fc-coral fs-15\" icon=\"chart-o\"></ds-icon>\r\n </ds-button>\r\n\r\n @if (element.hasOwnProperty('canTakeAction')) {\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"\r\n action?.action === Actions.APPROVE &&\r\n element.canTakeAction == true\r\n \"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.approve\" | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n shape=\"outline\"\r\n color=\"dark-gray\"\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"\r\n action?.action === Actions.REJECT &&\r\n element.canTakeAction == true\r\n \"\r\n shape=\"outline\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.reject\" | translate }}\r\n </span>\r\n </ds-button>\r\n } @else {\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"action?.action === Actions.APPROVE\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.approve\" | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n shape=\"outline\"\r\n color=\"dark-gray\"\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n size=\"small\"\r\n *ngIf=\"action?.action === Actions.REJECT\"\r\n shape=\"outline\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ \"global.reject\" | translate }}\r\n </span>\r\n </ds-button>\r\n }\r\n\r\n <ds-button *ngIf=\"action?.action === Actions.DETAILS\" shape=\"text\" size=\"small\">\r\n <span class=\"fs-12 underline\"> View Details </span>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.START &&\r\n element?.isFinalize\r\n \"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action?.action === Actions.PREPARE\"\r\n color=\"light-gray\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-black\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n <ds-icon class=\"fs-12 fc-black\" icon=\"settings\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.START &&\r\n element?.isFinalize\r\n \"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n <ds-icon class=\"fs-16\" icon=\"media-play\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n\r\n <!-- <ds-button [color]=\"action?.actionColor\" size=\"small\"\r\n *ngIf=\"action?.action === 'customAction'\"\r\n (click)=\"$event.stopPropagation();action?.onClick(element)\" shape=\"{{action?.actionShape}}\" [class]=\"action?.actionColor\"\r\n ></ds-button> -->\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"action?.action === Actions.CUSTOMACTION\"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.CUSTOMACTIONMANAGE &&\r\n (element.contractStatus.id == 7 ||\r\n element.contractStatus.id == 1)\r\n \"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.CUSTOMACTIONEXTEND &&\r\n element.contractStatus.id == 7\r\n \"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-button\r\n (click)=\"\r\n $event.stopPropagation(); action?.onClick(element)\r\n \"\r\n *ngIf=\"\r\n action?.action === Actions.CUSTOMACTIONDETAILS\r\n \"\r\n [class]=\"action?.actionColor\"\r\n [color]=\"action?.actionColor\"\r\n shape=\"{{ action?.actionShape }}\"\r\n size=\"small\"\r\n >\r\n <span class=\"fs-12 fc-{{ action?.actionFontColor }}\">\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-status *ngIf=\"action?.action === Actions.STATUS\" [status]=\"action?.Status.status\" class=\"fs-12 statusAction w-100\">\r\n <span class=\"fc-black\">\r\n {{ action?.Status.title | translate }}\r\n </span>\r\n </ds-status>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"columnsConfig[i]?.actions?.length > 6\">\r\n <ds-button\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n *ngIf=\"columnsConfig[i]?.actions?.length > 1\"\r\n [matMenuTriggerFor]=\"statusMenu\"\r\n class=\"dots\"\r\n shape=\"text\"\r\n size=\"small\"\r\n >\r\n <ds-icon class=\"fs-20 fc-dark-gray\" icon=\"dots\"></ds-icon>\r\n </ds-button>\r\n\r\n <mat-menu #statusMenu=\"matMenu\">\r\n <button (click)=\"action?.onClick(element)\" *ngFor=\"let action of columnsConfig[i]?.actions\" mat-menu-item>\r\n <span class=\"fs-12 fc-black\">{{ action?.actionName | translate }} </span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'specs'\">\r\n @if (element?.[column]) {\r\n <span\r\n #statusMenuTrigger=\"matMenuTrigger\"\r\n (click)=\"$event.stopPropagation()\"\r\n [matMenuTriggerFor]=\"specsMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{\r\n columnsConfig[i].type\r\n }} fc-coral underline cursor-pointer\"\r\n >\r\n {{ columnsConfig[i].clickableText | translate }}\r\n </span>\r\n }\r\n\r\n <mat-menu #specsMenu=\"matMenu\" class=\"p-4 text-center\">\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n\r\n <!--<div\r\n *ngSwitchCase=\"'specs'\" [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex gap-1\">\r\n {{ element[column] | json }}\r\n <ng-container *ngFor=\"let item of element[column]\">\r\n\r\n <div\r\n class=\"progress-container default-progress medium radius-0 \"\r\n matTooltip=\"Team assignment {{item.value}}%\" matTooltipPosition=\"below\">\r\n <div\r\n [style.width.%]=\"item.value\"\r\n class=\"progress-bar bg-color-{{item.color}}\"></div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>-->\r\n\r\n <span\r\n *ngSwitchDefault\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"text-nowrap\"\r\n matTooltip=\" {{\r\n columnsConfig[i].arKey\r\n ? i18Service.language == 'ar'\r\n ? mapText(columnsConfig[i].arKey, element[column])\r\n : mapText(columnsConfig[i].enKey, element[column])\r\n : element[column]\r\n ? element[column]\r\n : '-'\r\n }}\"\r\n matTooltipPosition=\"below\"\r\n >\r\n {{ columnsConfig[i].arKey ? i18Service.language == \"ar\" ? mapText(columnsConfig[i].arKey, element[column]) : mapText(columnsConfig[i].enKey, element[column]) : element[column] ? element[column] :\r\n \"-\" }}\r\n </span>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n }\r\n\r\n <tr *matHeaderRowDef=\"columns; sticky: true\" mat-header-row></tr>\r\n <tr (click)=\"clickRow(row)\" *matRowDef=\"let row; columns: columns\" [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\" mat-row role=\"button\"></tr>\r\n </table>\r\n }\r\n </ng-container>\r\n } @if (isLoading) {\r\n <ds-loading-table [cols]=\"columns.length\" [rows]=\"5\"></ds-loading-table>\r\n } @if (!isLoading && dataSource.filteredData?.length == 0) {\r\n <ds-message [label]=\" customMessage?? 'NoData' | translate\" type=\"emptyList\"></ds-message>\r\n }\r\n</div>\r\n@if (dataSource.filteredData?.length && hasPaginator) {\r\n<mat-paginator #paginator (page)=\"pageChanged($event)\" [length]=\"totalElements\" [pageIndex]=\"currentPage\" [pageSizeOptions]=\"[5, 10, 15, 20, 100]\" [pageSize]=\"pageSize\" aria-label=\"Select page\" showFirstLastButtons> </mat-paginator>\r\n}\r\n", styles: [":host ::ng-deep .table-responsive table{--th-height: 32px;--th-bg: var(--purple);--th-fc: var(--white);--td-height: 75px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--white);--tr-odd-bc: var(--white);--tr-border: 1px solid var(--light-gray);--th-border: none;--cell-pading: 0 24px;--th-fs: 11px}:host ::ng-deep .table-responsive table tr.selected-row,:host ::ng-deep .table-responsive table tr.selected-row:hover{background-color:#ecfeff;border-inline-start:3px solid var(--sea-light)}:host ::ng-deep .table-responsive table td.mat-mdc-cell.mat-mdc-table-sticky{box-shadow:-10px 0 10px #00000012}:host ::ng-deep .table-responsive table mat-form-field,:host ::ng-deep .table-responsive table .e-control,:host ::ng-deep .table-responsive table .mdc-form-field{--input-height: 35px}:host ::ng-deep .Color{width:13px;height:13px;border-radius:50%}:host ::ng-deep .Colorbg{width:fit-content;min-width:102px}:host ::ng-deep .Colorbg span{width:9px;height:9px;border-radius:50%}:host ::ng-deep span.number{color:var(--coral)}:host ::ng-deep .subsidiary img{height:22px;max-width:initial}:host ::ng-deep .sla svg{width:37px}:host ::ng-deep tr th{top:-1px!important}:host ::ng-deep ds-status.statusAction::part(base){min-height:35px;--status-width: 100%}:host ::ng-deep .dropdown{border-radius:3px;background:var(--Grays-Off-white, #f3f3f1);display:flex;height:35px;padding:10px;align-items:center;gap:5px;justify-content:center;width:fit-content}:host ::ng-deep .dropdown ds-icon span{font-weight:700}:host ::ng-deep ds-status::part(base){min-height:23px}:host ::ng-deep .Category span{border-radius:3px;width:97px;height:23px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mat-checkbox .mat-checkbox-ripple{left:calc(50% - 17px);top:calc(50% - 17px);height:30px;width:30px}:host ::ng-deep .mat-checkbox .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-frame{width:20px;height:20px;border-width:1px;border-style:solid;border-color:#909a9f4d}:host ::ng-deep .mat-checkbox-checked .mat-checkbox-checkmark{width:20px}:host ::ng-deep .idea a:hover{text-decoration:underline;color:var(--coral)}.paginator{width:800px}.table-container{max-height:400px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out}@media (max-width: 768px){.table-container{max-height:65vh;height:65vh}}[dir=rtl] .table-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){.table-container--name,.table-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] .table-container--name{max-width:initial}}.table-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){.table-container--item h4{max-width:calc(100% - 200px);display:inline-block}}.table-container--item:not(:last-child){margin-bottom:.75rem}.table-container--item ds-status::part(base){--status-width: 60px}.table-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}.table-container--info span:not(:first-of-type):before{content:\"\";min-width:3px;width:3px;height:3px;border-radius:50%;background-color:var(--black)}@media (min-width: 991px){.table-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .max-width-150{max-width:150px}:host ::ng-deep .text-align-custom{unicode-bidi:plaintext}:host ::ng-deep .table-responsive table{--th-height: var(--default-size-sm);--th-bg: var(--purple);--th-fc: var(--white);--td-height: 48px;--td-radius: 0;--border-spacing: 0;--border-collapse: collapse;--tr-even-bc: var(--off-white);--tr-odd-bc: var(--white)}:host ::ng-deep .ServiceDetails{display:inline-block;max-width:230px;white-space:normal}:host ::ng-deep .progress_group{width:100px}:host ::ng-deep .progress_group .progress-container.default-progress{min-width:25px;background-color:#cdd0d1}:host ::ng-deep .sla svg{width:36px}:host ::ng-deep .sla text{font-size:10px}:host ::ng-deep .Periority.High{color:var(--red)}:host ::ng-deep .Periority.Medium{color:var(--orange)}:host ::ng-deep .Periority.Low,:host ::ng-deep .Periority.Yes{color:var(--green)}:host ::ng-deep tr:nth-child(odd) .history,:host ::ng-deep tr:nth-child(odd) .Finished{background-color:var(--light-gray)}:host ::ng-deep tr:nth-child(2n) .history,:host ::ng-deep tr:nth-child(2n) .Finished{background-color:var(--white)}:host ::ng-deep .Finished{min-width:27px}:host ::ng-deep ds-button.coral:hover svg path{fill:var(--coral)}:host ::ng-deep .controls-tabel .mat-sort-header-container{justify-content:center!important}.dot-status{height:20px;width:20px;border-radius:50%;display:inline-block}.dot-status.red{background-color:var(--red)}.dot-status.green{background-color:var(--green)}.sticky-table{max-height:100vh}.dimCheckbox{background:var(--gray);pointer-events:none}.th-center{justify-content:center!important;text-align:center!important}\n"] }]
|
|
5620
5623
|
}], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: CoreI18nService }, { type: i4.FormBuilder }], propDecorators: { matTableRef: [{
|
|
5621
5624
|
type: ViewChild,
|
|
5622
5625
|
args: ['table', { read: ElementRef }]
|