bpm-core 0.0.117 → 0.0.123
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/README.md +2 -1
- package/fesm2022/bpm-core.mjs +151 -46
- package/fesm2022/bpm-core.mjs.map +1 -1
- package/lib/components/shared-components/form-field/index.d.ts +1 -0
- package/lib/components/shared-components/form-field/time-picker/time-picker.component.d.ts +39 -0
- package/lib/testComponent/request-details-section/request-details-section.component.d.ts +2 -0
- package/package.json +1 -1
package/fesm2022/bpm-core.mjs
CHANGED
|
@@ -10,15 +10,15 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
|
10
10
|
import * as i5 from '@angular/common';
|
|
11
11
|
import { NgIf, CommonModule, NgSwitchCase, DecimalPipe, DatePipe, NgClass, NgSwitchDefault, NgSwitch, NgForOf, NgTemplateOutlet, SlicePipe, NgFor, NgComponentOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
|
|
12
12
|
import * as i2 from '@angular/material/core';
|
|
13
|
-
import { MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
|
|
13
|
+
import { MAT_DATE_FORMATS, MatNativeDateModule, provideNativeDateAdapter } from '@angular/material/core';
|
|
14
14
|
import * as i4 from '@angular/forms';
|
|
15
15
|
import { NG_VALUE_ACCESSOR, FormControl, NgForm, ControlContainer, Validators, NgControl, NgModel, FormControlName, FormGroupDirective, ReactiveFormsModule, FormsModule, FormGroup, FormArray } from '@angular/forms';
|
|
16
16
|
import * as i3 from '@angular/platform-browser';
|
|
17
17
|
import { MatCheckbox } from '@angular/material/checkbox';
|
|
18
18
|
import * as i2$1 from 'ngx-toastr';
|
|
19
|
-
import * as i1$
|
|
19
|
+
import * as i1$4 from '@angular/material/datepicker';
|
|
20
20
|
import { MatDatepickerToggle, MatDatepickerInput, MatDatepickerModule, MatDatepicker } from '@angular/material/datepicker';
|
|
21
|
-
import * as
|
|
21
|
+
import * as i1$3 from '@angular/material/form-field';
|
|
22
22
|
import { MatError, MatFormFieldModule, MatFormField, MatHint } from '@angular/material/form-field';
|
|
23
23
|
import * as i7 from '@angular/material/input';
|
|
24
24
|
import { MatInput, MatInputModule } from '@angular/material/input';
|
|
@@ -27,7 +27,7 @@ import { SatPopoverModule } from '@ncstate/sat-popover';
|
|
|
27
27
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
28
28
|
import { MatSlideToggle } from '@angular/material/slide-toggle';
|
|
29
29
|
import { format } from 'date-fns';
|
|
30
|
-
import * as i1$
|
|
30
|
+
import * as i1$5 from '@angular/material/autocomplete';
|
|
31
31
|
import { MatAutocomplete, MatOption, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
32
32
|
import { NgxMaskDirective } from 'ngx-mask';
|
|
33
33
|
import * as i2$2 from 'ngx-intl-tel-input-gg';
|
|
@@ -35,13 +35,13 @@ import { CountryISO, SearchCountryField, NgxIntlTelInputModule } from 'ngx-intl-
|
|
|
35
35
|
import * as i2$4 from '@angular/material/select';
|
|
36
36
|
import { MatSelect, MatOption as MatOption$1, MatLabel, MatError as MatError$1, MatFormField as MatFormField$1, MatSelectModule } from '@angular/material/select';
|
|
37
37
|
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
38
|
-
import * as i6
|
|
38
|
+
import * as i6 from '@angular/material/button-toggle';
|
|
39
39
|
import { MatButtonToggleGroup, MatButtonToggle, MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
40
40
|
import * as i2$3 from '@angular/material/table';
|
|
41
41
|
import { MatTableDataSource, MatTableModule, MatTable, MatColumnDef, MatCell, MatCellDef, MatHeaderCellDef, MatHeaderCell, MatRow, MatHeaderRow, MatHeaderRowDef, MatRowDef } from '@angular/material/table';
|
|
42
|
-
import * as i1$
|
|
42
|
+
import * as i1$6 from '@angular/material/paginator';
|
|
43
43
|
import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
|
|
44
|
-
import * as i2$
|
|
44
|
+
import * as i2$6 from '@angular/router';
|
|
45
45
|
import { RouterLink, RouterModule, RouterLinkActive, RouterOutlet } from '@angular/router';
|
|
46
46
|
import { MatButton } from '@angular/material/button';
|
|
47
47
|
import * as i4$1 from '@angular/material/menu';
|
|
@@ -52,10 +52,12 @@ import * as i3$2 from '@angular/material/tooltip';
|
|
|
52
52
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
53
53
|
import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
54
54
|
import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
|
|
55
|
+
import * as i2$5 from '@angular/material/timepicker';
|
|
56
|
+
import { MatTimepickerModule } from '@angular/material/timepicker';
|
|
55
57
|
import { MatSort } from '@angular/material/sort';
|
|
56
|
-
import * as i2$
|
|
58
|
+
import * as i2$7 from '@ngx-translate/core';
|
|
57
59
|
import { TranslateModule } from '@ngx-translate/core';
|
|
58
|
-
import * as i2$
|
|
60
|
+
import * as i2$8 from '@angular/material/expansion';
|
|
59
61
|
import { MatAccordion, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
|
|
60
62
|
import { MatDivider } from '@angular/material/divider';
|
|
61
63
|
import * as i3$1 from 'ng-dynamic-component';
|
|
@@ -2048,6 +2050,10 @@ class ValidationErrorsComponent {
|
|
|
2048
2050
|
validatePhoneNumber: {
|
|
2049
2051
|
en: "Please enter valid number",
|
|
2050
2052
|
ar: "برجاء إدخال رقم صحيح"
|
|
2053
|
+
},
|
|
2054
|
+
invalidTimeFormat: {
|
|
2055
|
+
en: "Invalid time format",
|
|
2056
|
+
ar: "صيغة الوقت غير صحيحة"
|
|
2051
2057
|
}
|
|
2052
2058
|
};
|
|
2053
2059
|
}
|
|
@@ -2121,7 +2127,7 @@ class InfoItemComponent {
|
|
|
2121
2127
|
return format(new Date(date), "dd/MM/yyyy");
|
|
2122
2128
|
}
|
|
2123
2129
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InfoItemComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2124
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: InfoItemComponent, isStandalone: true, selector: "app-info-item", inputs: { label: "label", value: "value", name: "name", type: "type", dateType: "dateType", multiple: "multiple", insideTable: "insideTable", hasLabel: "hasLabel", arrayList: "arrayList", actionType: "actionType", download: "download" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\r\n @if(label){\r\n <span class=\"name \">{{ label }}</span>\r\n }\r\n\r\n <!-- class=\"disc\" -->\r\n <span *ngSwitchCase=\"'attach'\">\r\n<!-- <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n </span>\r\n <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n @if(!multiple){\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"img-card circled-img small\">\r\n <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n </div>\r\n <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if(multiple){\r\n @if(multiple){\r\n <ng-container>\r\n @for (emails of arrayList; track $index; let ind = $index) {\r\n <div class=\"d-flex flex-wrap\">\r\n <ng-container>\r\n <div class=\"img-card circled-img small mb-3\">\r\n <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n </div>\r\n <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n }\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n <span>{{value}}</span>\r\n </span>\r\n <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n <div class=\"d-flex align-items-center\">\r\n <bdi>{{ value }}</bdi>\r\n </div>\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n <span>{{value | number:'1.2-2'}}</span>\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n @if(dateType === 'hijri'){\r\n <span>\r\n {{ value }}\r\n </span>\r\n }\r\n @if(dateType === 'yearOnly'){\r\n <span>\r\n {{ value }}\r\n </span>\r\n }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n <span>\r\n {{value | date :'dd/MM/yyyy' : 'GMT+3'}}\r\n<!-- {{ getDate(value) }}-->\r\n </span>\r\n}\r\n @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n <span>\r\n {{value?.['startDate'] | date :'dd/MM/yyyy'}}\r\n -\r\n {{value?.['endDate'] | date :'dd/MM/yyyy'}}\r\n </span>\r\n }\r\n\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n {{ value }}\r\n </span>\r\n\r\n <span class=\"disc breakLine fc-coral cursor-pointer\" *ngSwitchCase=\"'link'\">\r\n <a [href]=\"value\" target=\"_blank\">{{'View' | translate}} {{ label }} </a>\r\n </span>\r\n <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n {{ value }}\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'multipleSelect'\">\r\n @for(item of value; track $index; let i =$index){\r\n <span>{{item.value}}\r\n @if(!(i === value.length-1)){\r\n <span>, </span>\r\n }\r\n </span>\r\n }\r\n\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"], dependencies: [{ 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: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
2130
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: InfoItemComponent, isStandalone: true, selector: "app-info-item", inputs: { label: "label", value: "value", name: "name", type: "type", dateType: "dateType", multiple: "multiple", insideTable: "insideTable", hasLabel: "hasLabel", arrayList: "arrayList", actionType: "actionType", download: "download" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\r\n @if(label){\r\n <span class=\"name \">{{ label }}</span>\r\n }\r\n\r\n <!-- class=\"disc\" -->\r\n <span *ngSwitchCase=\"'attach'\">\r\n<!-- <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n </span>\r\n <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n @if(!multiple){\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"img-card circled-img small\">\r\n <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n </div>\r\n <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if(multiple){\r\n @if(multiple){\r\n <ng-container>\r\n @for (emails of arrayList; track $index; let ind = $index) {\r\n <div class=\"d-flex flex-wrap\">\r\n <ng-container>\r\n <div class=\"img-card circled-img small mb-3\">\r\n <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n </div>\r\n <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n }\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n <span>{{value}}</span>\r\n </span>\r\n <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n <div class=\"d-flex align-items-center\">\r\n <bdi>{{ value }}</bdi>\r\n </div>\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n <span>{{value | number:'1.2-2'}}</span>\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n @if(dateType === 'hijri'){\r\n <span>\r\n {{ value }}\r\n </span>\r\n }\r\n @if(dateType === 'yearOnly'){\r\n <span>\r\n {{ value }}\r\n </span>\r\n }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n <span>\r\n {{value | date :'dd/MM/yyyy' : 'GMT+3'}}\r\n<!-- {{ getDate(value) }}-->\r\n </span>\r\n}\r\n @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n <span>\r\n {{value?.['startDate'] | date :'dd/MM/yyyy'}}\r\n -\r\n {{value?.['endDate'] | date :'dd/MM/yyyy'}}\r\n </span>\r\n }\r\n\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n {{ value }}\r\n </span>\r\n\r\n <span class=\"disc breakLine fc-coral cursor-pointer\" *ngSwitchCase=\"'link'\">\r\n <a [href]=\"value\" target=\"_blank\">{{'View' | translate}} {{ label }} </a>\r\n </span>\r\n <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n {{ value }}\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'multipleSelect'\">\r\n @for(item of value; track $index; let i =$index){\r\n <span>{{item.value}}\r\n @if(!(i === value.length-1)){\r\n <span>, </span>\r\n }\r\n </span>\r\n }\r\n\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'time'\">\r\n {{ value | date : 'shortTime' : 'GMT+3' }}\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"], dependencies: [{ 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: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
2125
2131
|
}
|
|
2126
2132
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InfoItemComponent, decorators: [{
|
|
2127
2133
|
type: Component,
|
|
@@ -2134,7 +2140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
2134
2140
|
NgSwitchDefault,
|
|
2135
2141
|
NgSwitch,
|
|
2136
2142
|
TranslatePipe
|
|
2137
|
-
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container [ngSwitch]=\"type\">\r\n @if(label){\r\n <span class=\"name \">{{ label }}</span>\r\n }\r\n\r\n <!-- class=\"disc\" -->\r\n <span *ngSwitchCase=\"'attach'\">\r\n<!-- <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n </span>\r\n <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n @if(!multiple){\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"img-card circled-img small\">\r\n <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n </div>\r\n <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if(multiple){\r\n @if(multiple){\r\n <ng-container>\r\n @for (emails of arrayList; track $index; let ind = $index) {\r\n <div class=\"d-flex flex-wrap\">\r\n <ng-container>\r\n <div class=\"img-card circled-img small mb-3\">\r\n <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n </div>\r\n <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n }\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n <span>{{value}}</span>\r\n </span>\r\n <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n <div class=\"d-flex align-items-center\">\r\n <bdi>{{ value }}</bdi>\r\n </div>\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n <span>{{value | number:'1.2-2'}}</span>\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n @if(dateType === 'hijri'){\r\n <span>\r\n {{ value }}\r\n </span>\r\n }\r\n @if(dateType === 'yearOnly'){\r\n <span>\r\n {{ value }}\r\n </span>\r\n }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n <span>\r\n {{value | date :'dd/MM/yyyy' : 'GMT+3'}}\r\n<!-- {{ getDate(value) }}-->\r\n </span>\r\n}\r\n @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n <span>\r\n {{value?.['startDate'] | date :'dd/MM/yyyy'}}\r\n -\r\n {{value?.['endDate'] | date :'dd/MM/yyyy'}}\r\n </span>\r\n }\r\n\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n {{ value }}\r\n </span>\r\n\r\n <span class=\"disc breakLine fc-coral cursor-pointer\" *ngSwitchCase=\"'link'\">\r\n <a [href]=\"value\" target=\"_blank\">{{'View' | translate}} {{ label }} </a>\r\n </span>\r\n <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n {{ value }}\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'multipleSelect'\">\r\n @for(item of value; track $index; let i =$index){\r\n <span>{{item.value}}\r\n @if(!(i === value.length-1)){\r\n <span>, </span>\r\n }\r\n </span>\r\n }\r\n\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"] }]
|
|
2143
|
+
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container [ngSwitch]=\"type\">\r\n @if(label){\r\n <span class=\"name \">{{ label }}</span>\r\n }\r\n\r\n <!-- class=\"disc\" -->\r\n <span *ngSwitchCase=\"'attach'\">\r\n<!-- <app-docs-uploader [field]=\"value\" styleHeight=\"mini\" display=\"only-files\"></app-docs-uploader>-->\r\n </span>\r\n <span class=\"disc mt-2 \" *ngSwitchCase=\"'user-picker'\">\r\n @if(!multiple){\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"img-card circled-img small\">\r\n <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n </div>\r\n <div class=\"line-height-1 mx-2\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n <h6 class=\"fs-14 fw-bold fc-onyx mb-0\">{{name}}</h6>\r\n <span class=\"fs-12 fc-dark-gray\">{{value}}</span>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if(multiple){\r\n @if(multiple){\r\n <ng-container>\r\n @for (emails of arrayList; track $index; let ind = $index) {\r\n <div class=\"d-flex flex-wrap\">\r\n <ng-container>\r\n <div class=\"img-card circled-img small mb-3\">\r\n <img [src]=\"getImage(value)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n </div>\r\n <div class=\"line-height-1 mx-2 mb-3\" [ngClass]=\"{'flex-grow-1': actionType === 'delete'}\">\r\n <h6 class=\"fs-14 fw-bold fc-onyx mb-0\"> {{(emails?.['personName'])}}</h6>\r\n <span class=\"fs-12 fc-dark-gray\"> {{emails?.['personEmail']}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n }\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'toggle'\">\r\n <mat-slide-toggle [checked]=\"value\"></mat-slide-toggle>\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'toggleBtn'\">\r\n <span>{{value}}</span>\r\n </span>\r\n <span class=\"disc\" *ngSwitchCase=\"'telephone'\">\r\n <div class=\"d-flex align-items-center\">\r\n <bdi>{{ value }}</bdi>\r\n </div>\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'currency'\">\r\n <span>{{value | number:'1.2-2'}}</span>\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'date'\">\r\n @if(dateType === 'hijri'){\r\n <span>\r\n {{ value }}\r\n </span>\r\n }\r\n @if(dateType === 'yearOnly'){\r\n <span>\r\n {{ value }}\r\n </span>\r\n }\r\n@if(dateType !== 'hijri' && dateType !== 'yearOnly' && !value?.startDate){\r\n <span>\r\n {{value | date :'dd/MM/yyyy' : 'GMT+3'}}\r\n<!-- {{ getDate(value) }}-->\r\n </span>\r\n}\r\n @if(dateType !== 'hijri' && dateType !== 'yearOnly' && value?.startDate){\r\n <span>\r\n {{value?.['startDate'] | date :'dd/MM/yyyy'}}\r\n -\r\n {{value?.['endDate'] | date :'dd/MM/yyyy'}}\r\n </span>\r\n }\r\n\r\n </span>\r\n\r\n <span class=\"disc\" *ngSwitchCase=\"'dateHijri'\">\r\n {{ value }}\r\n </span>\r\n\r\n <span class=\"disc breakLine fc-coral cursor-pointer\" *ngSwitchCase=\"'link'\">\r\n <a [href]=\"value\" target=\"_blank\">{{'View' | translate}} {{ label }} </a>\r\n </span>\r\n <span class=\"disc breakLine\" *ngSwitchCase=\"'formIdLink'\">\r\n <a (click)=\"viewForm(value)\">{{ value }} </a>\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'text'\">\r\n {{ value }}\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'multipleSelect'\">\r\n @for(item of value; track $index; let i =$index){\r\n <span>{{item.value}}\r\n @if(!(i === value.length-1)){\r\n <span>, </span>\r\n }\r\n </span>\r\n }\r\n\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" *ngSwitchCase=\"'time'\">\r\n {{ value | date : 'shortTime' : 'GMT+3' }}\r\n </span>\r\n <span [ngClass]=\"{'breakLine': !insideTable}\" class=\"disc \" [innerHTML]=\"value\" *ngSwitchDefault>\r\n </span>\r\n</ng-container>\r\n", styles: [":host.slide-end .disc{text-align:end}:host.user-picker{border-radius:4px;padding:1rem;background-color:var(--light-gray);max-width:320px;width:100%}:host.user-picker .name{display:none}:host.user-picker .disc{width:100%}.name{width:270px;font-size:.875rem;font-weight:var(--font-medium);color:var(--dark-gray);margin-bottom:0;display:inline-block}.disc{width:calc(100% - 270px);font-size:.875rem;font-weight:var(--font-regular);color:var(--black);display:inline-block}@media (max-width: 768px){.name,.disc{width:100%!important}}.breakLine{line-break:anywhere}a{color:#0d6efd!important}a:hover{cursor:pointer}\n"] }]
|
|
2138
2144
|
}], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { label: [{
|
|
2139
2145
|
type: Input
|
|
2140
2146
|
}], value: [{
|
|
@@ -2440,7 +2446,7 @@ class CustomSearchableComponent extends ControlValueAccessorDirective {
|
|
|
2440
2446
|
useExisting: forwardRef(() => CustomSearchableComponent),
|
|
2441
2447
|
multi: true,
|
|
2442
2448
|
},
|
|
2443
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(isReadOnly && control?.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [value]=\"control?.value.value\"\r\n ></app-info-item>\r\n</ng-container>\r\n} @if(!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': disabled || loading,\r\n 'custom-validation': !control.hasValidator(Validators['required'])\r\n }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n <span class=\"sfi sfi-search fc-coral fs-18\" matPrefix></span>\r\n <label class=\"mat-form-content\">\r\n <input\r\n #autocompleteInput\r\n type=\"text\"\r\n (keydown)=\"onKeyDown($event, autocompleteInput)\"\r\n [attr.disabled]=\"disabled\"\r\n [placeholder]=\"label\"\r\n aria-label=\"Number\"\r\n matInput\r\n (input)=\"onValueChange($event)\"\r\n [formControl]=\"searchControl\"\r\n [name]=\"name\"\r\n [matAutocomplete]=\"auto\"\r\n [value]=\"value?.key\"\r\n (focusout)=\"onFocusOut()\"\r\n />\r\n </label>\r\n\r\n @if(loading) {\r\n <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n } @if(!loading && searchControl?.value) {\r\n <span\r\n class=\"sfi sfi-close d-inline-block fc-coral cursor-pointer fs-12\"\r\n (click)=\"clearInput()\"\r\n matSuffix\r\n ></span>\r\n }\r\n\r\n <mat-autocomplete\r\n autoActiveFirstOption\r\n #auto=\"matAutocomplete\"\r\n [displayWith]=\"displayFn\"\r\n (optionSelected)=\"getAutoComplete($event.option.value)\">\r\n\r\n\r\n\r\n\r\n @if(!noData) {\r\n <ng-container>\r\n @for(option of filteredOptions; track option) {\r\n <mat-option [value]=\"option\">\r\n <div class=\"d-flex align-items-center\">\r\n @if(option['avatar_url']) {\r\n <figure class=\"img-card small circled-img p-0 m-0\">\r\n <img [src]=\"option['avatar_url']\" alt=\"\" />\r\n </figure>\r\n } @if(option['avatar_url']) {\r\n <span class=\"mx-2\"></span>\r\n }\r\n\r\n {{ option[displayedLabel] }}\r\n </div>\r\n </mat-option>\r\n }\r\n </ng-container>\r\n } @if(noData) {\r\n <ng-container>\r\n <mat-option [disabled]=\"true\" class=\"text-center\">No Data</mat-option>\r\n </ng-container>\r\n }\r\n </mat-autocomplete>\r\n\r\n <!-- <mat-error class=\"mb-2\" *ngIf=\"(!control?.valid)\">{{ 'validSelectError' | translate }}{{ label }}</mat-error> -->\r\n\r\n @if(showHint) {\r\n <mat-hint>\r\n <span\r\n class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (control.touched) {\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n }\r\n</ng-container>\r\n}\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type:
|
|
2449
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(isReadOnly && control?.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [value]=\"control?.value.value\"\r\n ></app-info-item>\r\n</ng-container>\r\n} @if(!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': disabled || loading,\r\n 'custom-validation': !control.hasValidator(Validators['required'])\r\n }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n <span class=\"sfi sfi-search fc-coral fs-18\" matPrefix></span>\r\n <label class=\"mat-form-content\">\r\n <input\r\n #autocompleteInput\r\n type=\"text\"\r\n (keydown)=\"onKeyDown($event, autocompleteInput)\"\r\n [attr.disabled]=\"disabled\"\r\n [placeholder]=\"label\"\r\n aria-label=\"Number\"\r\n matInput\r\n (input)=\"onValueChange($event)\"\r\n [formControl]=\"searchControl\"\r\n [name]=\"name\"\r\n [matAutocomplete]=\"auto\"\r\n [value]=\"value?.key\"\r\n (focusout)=\"onFocusOut()\"\r\n />\r\n </label>\r\n\r\n @if(loading) {\r\n <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n } @if(!loading && searchControl?.value) {\r\n <span\r\n class=\"sfi sfi-close d-inline-block fc-coral cursor-pointer fs-12\"\r\n (click)=\"clearInput()\"\r\n matSuffix\r\n ></span>\r\n }\r\n\r\n <mat-autocomplete\r\n autoActiveFirstOption\r\n #auto=\"matAutocomplete\"\r\n [displayWith]=\"displayFn\"\r\n (optionSelected)=\"getAutoComplete($event.option.value)\">\r\n\r\n\r\n\r\n\r\n @if(!noData) {\r\n <ng-container>\r\n @for(option of filteredOptions; track option) {\r\n <mat-option [value]=\"option\">\r\n <div class=\"d-flex align-items-center\">\r\n @if(option['avatar_url']) {\r\n <figure class=\"img-card small circled-img p-0 m-0\">\r\n <img [src]=\"option['avatar_url']\" alt=\"\" />\r\n </figure>\r\n } @if(option['avatar_url']) {\r\n <span class=\"mx-2\"></span>\r\n }\r\n\r\n {{ option[displayedLabel] }}\r\n </div>\r\n </mat-option>\r\n }\r\n </ng-container>\r\n } @if(noData) {\r\n <ng-container>\r\n <mat-option [disabled]=\"true\" class=\"text-center\">No Data</mat-option>\r\n </ng-container>\r\n }\r\n </mat-autocomplete>\r\n\r\n <!-- <mat-error class=\"mb-2\" *ngIf=\"(!control?.valid)\">{{ 'validSelectError' | translate }}{{ label }}</mat-error> -->\r\n\r\n @if(showHint) {\r\n <mat-hint>\r\n <span\r\n class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (control.touched) {\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n }\r\n</ng-container>\r\n}\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
2444
2450
|
}
|
|
2445
2451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CustomSearchableComponent, decorators: [{
|
|
2446
2452
|
type: Component,
|
|
@@ -2591,7 +2597,7 @@ class DatePickerComponent extends ControlValueAccessorDirective {
|
|
|
2591
2597
|
provide: MAT_DATE_FORMATS,
|
|
2592
2598
|
useClass: CustomDateFormat,
|
|
2593
2599
|
},
|
|
2594
|
-
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly) {\r\n <ng-container>\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n <div class=\"datePicker justify-content-between\">\r\n <mat-form-field\r\n [ngClass]=\"{ 'input-disabled': isDisabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n <label class=\"mat-form-content\">\r\n <input\r\n matInput\r\n (dateInput)=\"dateChange($event)\"\r\n [placeholder]=\"label ? ('select' | translate) + ' ' + label : ''\"\r\n (click)=\"focusPicker(dp)\"\r\n [min]=\"minDateValue\"\r\n [max]=\"maxDateValue\"\r\n readonly\r\n [matDatepicker]=\"dp\"\r\n [formControl]=\"control\"\r\n />\r\n </label>\r\n\r\n @if(control?.value) {\r\n <ds-icon\r\n matSuffix\r\n icon=\"close\"\r\n class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n (click)=\"clearDateValue($event)\"\r\n ></ds-icon>\r\n }\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"dp\">\r\n <ds-icon\r\n icon=\"calendar-o\"\r\n class=\"fc-black fs-18\"\r\n matDatepickerToggleIcon\r\n ></ds-icon>\r\n </mat-datepicker-toggle>\r\n\r\n <mat-datepicker #dp></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n @if (control.touched) {\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n }\r\n\r\n </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control.value) {\r\n <ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n type=\"date\"\r\n [insideTable]=\"insideTable\"\r\n [dateType]=\"calendarType\"\r\n [label]=\"label\"\r\n [value]=\"control.value\"\r\n [hasLabel]=\"!!label\"\r\n >\r\n </app-info-item>\r\n </ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}::ng-deep .year-only .mat-calendar-period-button{pointer-events:none}::ng-deep .year-only .mat-calendar-arrow{display:none}\n"], dependencies: [{ kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: i1$
|
|
2600
|
+
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly) {\r\n <ng-container>\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n <div class=\"datePicker justify-content-between\">\r\n <mat-form-field\r\n [ngClass]=\"{ 'input-disabled': isDisabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n <label class=\"mat-form-content\">\r\n <input\r\n matInput\r\n (dateInput)=\"dateChange($event)\"\r\n [placeholder]=\"label ? ('select' | translate) + ' ' + label : ''\"\r\n (click)=\"focusPicker(dp)\"\r\n [min]=\"minDateValue\"\r\n [max]=\"maxDateValue\"\r\n readonly\r\n [matDatepicker]=\"dp\"\r\n [formControl]=\"control\"\r\n />\r\n </label>\r\n\r\n @if(control?.value) {\r\n <ds-icon\r\n matSuffix\r\n icon=\"close\"\r\n class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n (click)=\"clearDateValue($event)\"\r\n ></ds-icon>\r\n }\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"dp\">\r\n <ds-icon\r\n icon=\"calendar-o\"\r\n class=\"fc-black fs-18\"\r\n matDatepickerToggleIcon\r\n ></ds-icon>\r\n </mat-datepicker-toggle>\r\n\r\n <mat-datepicker #dp></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n @if (control.touched) {\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n }\r\n\r\n </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control.value) {\r\n <ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n type=\"date\"\r\n [insideTable]=\"insideTable\"\r\n [dateType]=\"calendarType\"\r\n [label]=\"label\"\r\n [value]=\"control.value\"\r\n [hasLabel]=\"!!label\"\r\n >\r\n </app-info-item>\r\n </ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}::ng-deep .year-only .mat-calendar-period-button{pointer-events:none}::ng-deep .year-only .mat-calendar-arrow{display:none}\n"], dependencies: [{ kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: i1$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i1$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: i1$4.MatDatepickerModule }, { kind: "directive", type: i1$4.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: i2.MatNativeDateModule }, { kind: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
2595
2601
|
}
|
|
2596
2602
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
2597
2603
|
type: Component,
|
|
@@ -2765,7 +2771,7 @@ class DateRangePickerComponent extends ControlValueAccessorDirective {
|
|
|
2765
2771
|
provide: MAT_DATE_FORMATS,
|
|
2766
2772
|
useClass: CustomDateFormat,
|
|
2767
2773
|
},
|
|
2768
|
-
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly) {\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n<div class=\"datePicker\">\r\n <mat-form-field class=\"date-range primary-form {{ className }}\"\r\n [ngClass]=\"{\r\n 'custom-validation-error': !startDateControl.value && !endDateControl.value && startDateControl.touched\r\n }\">\r\n <label class=\"mat-form-content\">\r\n <mat-date-range-input\r\n [rangePicker]=\"picker\"\r\n [min]=\"minDateValue\"\r\n [max]=\"maxDateValue\"\r\n >\r\n <input\r\n matStartDate\r\n placeholder=\"{{ 'startDate' | translate }}\"\r\n [formControl]=\"startDateControl\"\r\n (dateInput)=\"startDateChange($event)\"\r\n (click)=\"focusPicker(picker)\"\r\n readonly\r\n />\r\n <input\r\n matEndDate\r\n placeholder=\"{{ 'endDate' | translate }}\"\r\n [formControl]=\"endDateControl\"\r\n (dateInput)=\"endDateChange($event)\"\r\n (click)=\"focusPicker(picker)\"\r\n readonly\r\n />\r\n </mat-date-range-input>\r\n </label>\r\n\r\n @if(control?.value) {\r\n <ds-icon\r\n matSuffix\r\n icon=\"close\"\r\n class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n (click)=\"clearDateValue($event)\"\r\n ></ds-icon>\r\n }\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n <i class=\"sfi sfi-calendar-o fc-black font-18\" matDatepickerToggleIcon></i>\r\n </mat-datepicker-toggle>\r\n\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n </mat-form-field>\r\n</div>\r\n@if (control.touched) {\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n}\r\n\r\n\r\n} @else if(isReadOnly && control.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n type=\"date\"\r\n [insideTable]=\"insideTable\"\r\n [dateType]=\"calendarType\"\r\n [label]=\"label\"\r\n [value]=\"{\r\n startDate: control?.value?.startDate,\r\n endDate: control?.value?.endDate\r\n }\"\r\n [hasLabel]=\"!!label\"\r\n >\r\n </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: i1$
|
|
2774
|
+
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly) {\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n<div class=\"datePicker\">\r\n <mat-form-field class=\"date-range primary-form {{ className }}\"\r\n [ngClass]=\"{\r\n 'custom-validation-error': !startDateControl.value && !endDateControl.value && startDateControl.touched\r\n }\">\r\n <label class=\"mat-form-content\">\r\n <mat-date-range-input\r\n [rangePicker]=\"picker\"\r\n [min]=\"minDateValue\"\r\n [max]=\"maxDateValue\"\r\n >\r\n <input\r\n matStartDate\r\n placeholder=\"{{ 'startDate' | translate }}\"\r\n [formControl]=\"startDateControl\"\r\n (dateInput)=\"startDateChange($event)\"\r\n (click)=\"focusPicker(picker)\"\r\n readonly\r\n />\r\n <input\r\n matEndDate\r\n placeholder=\"{{ 'endDate' | translate }}\"\r\n [formControl]=\"endDateControl\"\r\n (dateInput)=\"endDateChange($event)\"\r\n (click)=\"focusPicker(picker)\"\r\n readonly\r\n />\r\n </mat-date-range-input>\r\n </label>\r\n\r\n @if(control?.value) {\r\n <ds-icon\r\n matSuffix\r\n icon=\"close\"\r\n class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n (click)=\"clearDateValue($event)\"\r\n ></ds-icon>\r\n }\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n <i class=\"sfi sfi-calendar-o fc-black font-18\" matDatepickerToggleIcon></i>\r\n </mat-datepicker-toggle>\r\n\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n </mat-form-field>\r\n</div>\r\n@if (control.touched) {\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n}\r\n\r\n\r\n} @else if(isReadOnly && control.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n type=\"date\"\r\n [insideTable]=\"insideTable\"\r\n [dateType]=\"calendarType\"\r\n [label]=\"label\"\r\n [value]=\"{\r\n startDate: control?.value?.startDate,\r\n endDate: control?.value?.endDate\r\n }\"\r\n [hasLabel]=\"!!label\"\r\n >\r\n </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: i1$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i1$4.MatDatepickerModule }, { kind: "directive", type: i1$4.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i1$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: i2.MatNativeDateModule }, { kind: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
2769
2775
|
}
|
|
2770
2776
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DateRangePickerComponent, decorators: [{
|
|
2771
2777
|
type: Component,
|
|
@@ -2822,7 +2828,7 @@ class InputComponent extends ControlValueAccessorDirective {
|
|
|
2822
2828
|
useExisting: forwardRef(() => InputComponent),
|
|
2823
2829
|
multi: true,
|
|
2824
2830
|
},
|
|
2825
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n}\r\n<mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n>\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n @if(type === 'arOnly'){\r\n <input\r\n arOnly\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n } @else if(type === 'enOnly'){\r\n <input\r\n enOnly\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n }\r\n @else{\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n }\r\n </label>\r\n\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n</mat-form-field>\r\n\r\n} @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n<ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"type\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type:
|
|
2831
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n}\r\n<mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n>\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n @if(type === 'arOnly'){\r\n <input\r\n arOnly\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n } @else if(type === 'enOnly'){\r\n <input\r\n enOnly\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n }\r\n @else{\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n }\r\n </label>\r\n\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n</mat-form-field>\r\n\r\n} @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n<ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"type\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
|
|
2826
2832
|
}
|
|
2827
2833
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputComponent, decorators: [{
|
|
2828
2834
|
type: Component,
|
|
@@ -2945,7 +2951,7 @@ class InputNumberComponent extends ControlValueAccessorDirective {
|
|
|
2945
2951
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
2946
2952
|
multi: true,
|
|
2947
2953
|
},
|
|
2948
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n @if(loading){<span\r\n class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n matSuffix\r\n ></span\r\n >}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n numberOnly\r\n />\r\n </label>\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n </mat-form-field>\r\n } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"type\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n </ng-container>\r\n }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "directive", type: NumberDirective, selector: "[numberOnly]", inputs: ["decimals"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type:
|
|
2954
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n @if(loading){<span\r\n class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n matSuffix\r\n ></span\r\n >}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n numberOnly\r\n />\r\n </label>\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n </mat-form-field>\r\n } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"type\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n </ng-container>\r\n }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "directive", type: NumberDirective, selector: "[numberOnly]", inputs: ["decimals"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
|
|
2949
2955
|
}
|
|
2950
2956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
2951
2957
|
type: Component,
|
|
@@ -3004,7 +3010,7 @@ class InputEmailComponent extends ControlValueAccessorDirective {
|
|
|
3004
3010
|
useExisting: forwardRef(() => InputEmailComponent),
|
|
3005
3011
|
multi: true,
|
|
3006
3012
|
},
|
|
3007
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n @if(loading){<span\r\n class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n matSuffix\r\n ></span\r\n >}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n (change)=\"displayErrors($event)\"\r\n />\r\n </label>\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n </mat-form-field>\r\n } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"type\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n </ng-container>\r\n }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type:
|
|
3013
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n @if(loading){<span\r\n class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n matSuffix\r\n ></span\r\n >}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n (change)=\"displayErrors($event)\"\r\n />\r\n </label>\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n </mat-form-field>\r\n } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"type\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n </ng-container>\r\n }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
|
|
3008
3014
|
}
|
|
3009
3015
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputEmailComponent, decorators: [{
|
|
3010
3016
|
type: Component,
|
|
@@ -3197,7 +3203,7 @@ class InputCurrencyComponent extends ControlValueAccessorDirective {
|
|
|
3197
3203
|
multi: true,
|
|
3198
3204
|
},
|
|
3199
3205
|
MycurrencyPipe
|
|
3200
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n @if(loading){<span\r\n class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n matSuffix\r\n ></span\r\n >}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n appMycurrency\r\n />\r\n </label>\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n </mat-form-field>\r\n } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"'currency'\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n </ng-container>\r\n }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MycurrencyDirective, selector: "[appMycurrency]", inputs: ["decimals"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type:
|
|
3206
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n @if(loading){<span\r\n class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n matSuffix\r\n ></span\r\n >}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n appMycurrency\r\n />\r\n </label>\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n </mat-form-field>\r\n } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"'currency'\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n </ng-container>\r\n }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MycurrencyDirective, selector: "[appMycurrency]", inputs: ["decimals"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
|
|
3201
3207
|
}
|
|
3202
3208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InputCurrencyComponent, decorators: [{
|
|
3203
3209
|
type: Component,
|
|
@@ -3384,6 +3390,8 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
|
|
|
3384
3390
|
return '/group/i-gate/wm-bpm/forms/-/proxy/portrait?email=' + id;
|
|
3385
3391
|
}
|
|
3386
3392
|
selectOption(object, ev) {
|
|
3393
|
+
if (!this.control.touched)
|
|
3394
|
+
this.onTouchedFn();
|
|
3387
3395
|
this.userAlreadyExist = false;
|
|
3388
3396
|
this.selected = true;
|
|
3389
3397
|
this.data = [];
|
|
@@ -3423,7 +3431,7 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
|
|
|
3423
3431
|
useExisting: forwardRef(() => SearchEmployeeComponent),
|
|
3424
3432
|
multi: true,
|
|
3425
3433
|
},
|
|
3426
|
-
], usesInheritance: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [floatLabel]=\"floatLabel\"\r\n [ngClass]=\"{\r\n 'custom-validation': !control.errors\r\n }\"\r\n >\r\n <mat-label>{{ label }}</mat-label>\r\n <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n <label class=\"mat-form-content\">\r\n <input\r\n type=\"text\"\r\n aria-label=\"Number\"\r\n (input)=\"onLoadOptions($event)\"\r\n matInput\r\n [disabled]=\"isDisabled\"\r\n [matAutocomplete]=\"auto\"\r\n [formControl]=\"employeeSearchControl\"\r\n />\r\n </label>\r\n @if (loading) {\r\n <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n }\r\n <mat-autocomplete #auto=\"matAutocomplete\">\r\n @for (option of data; track option) {\r\n <mat-option\r\n [value]=\"option?.['personName']\"\r\n (onSelectionChange)=\"selectOption(option, $event)\"\r\n >\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div class=\"dropdown-img\">\r\n <ds-avatar\r\n [image]=\"getImage(option?.email)\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n slot=\"prefix\"\r\n class=\"avatar\"\r\n size=\"small\"\r\n >\r\n </ds-avatar>\r\n </div>\r\n <div class=\"line-height-1\">\r\n <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n {{ option?.name }}\r\n </h6>\r\n <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n option?.description\r\n }}</span>\r\n </div>\r\n </div>\r\n </mat-option>\r\n\r\n }\r\n </mat-autocomplete>\r\n @if (showHint) {\r\n <mat-hint>\r\n <span\r\n class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n @if (userAlreadyExist) {\r\n <mat-error class=\"mb-2\">{{ \"userAlreadyExist\" | translate }}</mat-error>\r\n } @if (arrayList?.length && !isReadOnly && multiple) {\r\n <div class=\"col-12 mt-2\">\r\n <div class=\"example-list n-results\">\r\n @for (emails of arrayList; track $index) {\r\n <div class=\"example-box n-col px-3\" [ngClass]=\"{ 'mt-0': $index === 0 }\">\r\n <div class=\"d-flex flex-grow-1 w-100\">\r\n <div class=\"user-info flex-grow-1\">\r\n <ds-avatar\r\n [image]=\"getImage(emails?.['personEmail'])\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n slot=\"prefix\"\r\n class=\"avatar prof-img\"\r\n >\r\n </ds-avatar>\r\n @if (emails?.['personName']) {\r\n <label>\r\n {{ emails?.['personName'] }}\r\n <span class=\"title\">{{ emails?.['personEmail'] }}</span>\r\n </label>\r\n }\r\n </div>\r\n @if (!isReadOnly) {\r\n <ds-button\r\n class=\"ds-btn-action\"\r\n size=\"small\"\r\n (click)=\"deleteRow($index, emails)\"\r\n icon\r\n >\r\n <ds-icon icon=\"trash\" class=\"fc-coral fs-20\"></ds-icon>\r\n </ds-button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-container>\r\n} @if (isReadOnly && control.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item\"\r\n type=\"user-picker\"\r\n [hasLabel]=\"!!label\"\r\n [multiple]=\"multiple\"\r\n [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n [label]=\"label\"\r\n [name]=\"control.value['personName']\"\r\n [value]=\"control.value['personEmail']\"\r\n [arrayList]=\"arrayList\"\r\n >\r\n </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"default-popover p-3\">\r\n <ol class=\"px-3 m-0\">\r\n <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n </ol>\r\n </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
3434
|
+
], usesInheritance: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [floatLabel]=\"floatLabel\"\r\n [ngClass]=\"{\r\n 'custom-validation': !control.errors\r\n }\"\r\n >\r\n <mat-label>{{ label }}</mat-label>\r\n <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n <label class=\"mat-form-content\">\r\n <input\r\n type=\"text\"\r\n aria-label=\"Number\"\r\n (input)=\"onLoadOptions($event)\"\r\n matInput\r\n [disabled]=\"isDisabled\"\r\n [matAutocomplete]=\"auto\"\r\n [formControl]=\"employeeSearchControl\"\r\n />\r\n </label>\r\n @if (loading) {\r\n <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n }\r\n <mat-autocomplete #auto=\"matAutocomplete\">\r\n @for (option of data; track option) {\r\n <mat-option\r\n [value]=\"option?.['personName']\"\r\n (onSelectionChange)=\"selectOption(option, $event)\"\r\n >\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div class=\"dropdown-img\">\r\n <ds-avatar\r\n [image]=\"getImage(option?.email)\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n slot=\"prefix\"\r\n class=\"avatar\"\r\n size=\"small\"\r\n >\r\n </ds-avatar>\r\n </div>\r\n <div class=\"line-height-1\">\r\n <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n {{ option?.name }}\r\n </h6>\r\n <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n option?.description\r\n }}</span>\r\n </div>\r\n </div>\r\n </mat-option>\r\n\r\n }\r\n </mat-autocomplete>\r\n @if (showHint) {\r\n <mat-hint>\r\n <span\r\n class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (control.touched) {\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n }\r\n\r\n @if (userAlreadyExist) {\r\n <mat-error class=\"mb-2\">{{ \"userAlreadyExist\" | translate }}</mat-error>\r\n } @if (arrayList?.length && !isReadOnly && multiple) {\r\n <div class=\"col-12 mt-2\">\r\n <div class=\"example-list n-results\">\r\n @for (emails of arrayList; track $index) {\r\n <div class=\"example-box n-col px-3\" [ngClass]=\"{ 'mt-0': $index === 0 }\">\r\n <div class=\"d-flex flex-grow-1 w-100\">\r\n <div class=\"user-info flex-grow-1\">\r\n <ds-avatar\r\n [image]=\"getImage(emails?.['personEmail'])\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n slot=\"prefix\"\r\n class=\"avatar prof-img\"\r\n >\r\n </ds-avatar>\r\n @if (emails?.['personName']) {\r\n <label>\r\n {{ emails?.['personName'] }}\r\n <span class=\"title\">{{ emails?.['personEmail'] }}</span>\r\n </label>\r\n }\r\n </div>\r\n @if (!isReadOnly) {\r\n <ds-button\r\n class=\"ds-btn-action\"\r\n size=\"small\"\r\n (click)=\"deleteRow($index, emails)\"\r\n icon\r\n >\r\n <ds-icon icon=\"trash\" class=\"fc-coral fs-20\"></ds-icon>\r\n </ds-button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-container>\r\n} @if (isReadOnly && control.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item\"\r\n type=\"user-picker\"\r\n [hasLabel]=\"!!label\"\r\n [multiple]=\"multiple\"\r\n [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n [label]=\"label\"\r\n [name]=\"control.value['personName']\"\r\n [value]=\"control.value['personEmail']\"\r\n [arrayList]=\"arrayList\"\r\n >\r\n </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"default-popover p-3\">\r\n <ol class=\"px-3 m-0\">\r\n <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n </ol>\r\n </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
3427
3435
|
}
|
|
3428
3436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SearchEmployeeComponent, decorators: [{
|
|
3429
3437
|
type: Component,
|
|
@@ -3442,7 +3450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
3442
3450
|
useExisting: forwardRef(() => SearchEmployeeComponent),
|
|
3443
3451
|
multi: true,
|
|
3444
3452
|
},
|
|
3445
|
-
], template: "@if (!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [floatLabel]=\"floatLabel\"\r\n [ngClass]=\"{\r\n 'custom-validation': !control.errors\r\n }\"\r\n >\r\n <mat-label>{{ label }}</mat-label>\r\n <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n <label class=\"mat-form-content\">\r\n <input\r\n type=\"text\"\r\n aria-label=\"Number\"\r\n (input)=\"onLoadOptions($event)\"\r\n matInput\r\n [disabled]=\"isDisabled\"\r\n [matAutocomplete]=\"auto\"\r\n [formControl]=\"employeeSearchControl\"\r\n />\r\n </label>\r\n @if (loading) {\r\n <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n }\r\n <mat-autocomplete #auto=\"matAutocomplete\">\r\n @for (option of data; track option) {\r\n <mat-option\r\n [value]=\"option?.['personName']\"\r\n (onSelectionChange)=\"selectOption(option, $event)\"\r\n >\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div class=\"dropdown-img\">\r\n <ds-avatar\r\n [image]=\"getImage(option?.email)\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n slot=\"prefix\"\r\n class=\"avatar\"\r\n size=\"small\"\r\n >\r\n </ds-avatar>\r\n </div>\r\n <div class=\"line-height-1\">\r\n <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n {{ option?.name }}\r\n </h6>\r\n <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n option?.description\r\n }}</span>\r\n </div>\r\n </div>\r\n </mat-option>\r\n\r\n }\r\n </mat-autocomplete>\r\n @if (showHint) {\r\n <mat-hint>\r\n <span\r\n class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n
|
|
3453
|
+
], template: "@if (!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [floatLabel]=\"floatLabel\"\r\n [ngClass]=\"{\r\n 'custom-validation': !control.errors\r\n }\"\r\n >\r\n <mat-label>{{ label }}</mat-label>\r\n <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n <label class=\"mat-form-content\">\r\n <input\r\n type=\"text\"\r\n aria-label=\"Number\"\r\n (input)=\"onLoadOptions($event)\"\r\n matInput\r\n [disabled]=\"isDisabled\"\r\n [matAutocomplete]=\"auto\"\r\n [formControl]=\"employeeSearchControl\"\r\n />\r\n </label>\r\n @if (loading) {\r\n <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n }\r\n <mat-autocomplete #auto=\"matAutocomplete\">\r\n @for (option of data; track option) {\r\n <mat-option\r\n [value]=\"option?.['personName']\"\r\n (onSelectionChange)=\"selectOption(option, $event)\"\r\n >\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div class=\"dropdown-img\">\r\n <ds-avatar\r\n [image]=\"getImage(option?.email)\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n slot=\"prefix\"\r\n class=\"avatar\"\r\n size=\"small\"\r\n >\r\n </ds-avatar>\r\n </div>\r\n <div class=\"line-height-1\">\r\n <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n {{ option?.name }}\r\n </h6>\r\n <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n option?.description\r\n }}</span>\r\n </div>\r\n </div>\r\n </mat-option>\r\n\r\n }\r\n </mat-autocomplete>\r\n @if (showHint) {\r\n <mat-hint>\r\n <span\r\n class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (control.touched) {\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n }\r\n\r\n @if (userAlreadyExist) {\r\n <mat-error class=\"mb-2\">{{ \"userAlreadyExist\" | translate }}</mat-error>\r\n } @if (arrayList?.length && !isReadOnly && multiple) {\r\n <div class=\"col-12 mt-2\">\r\n <div class=\"example-list n-results\">\r\n @for (emails of arrayList; track $index) {\r\n <div class=\"example-box n-col px-3\" [ngClass]=\"{ 'mt-0': $index === 0 }\">\r\n <div class=\"d-flex flex-grow-1 w-100\">\r\n <div class=\"user-info flex-grow-1\">\r\n <ds-avatar\r\n [image]=\"getImage(emails?.['personEmail'])\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n slot=\"prefix\"\r\n class=\"avatar prof-img\"\r\n >\r\n </ds-avatar>\r\n @if (emails?.['personName']) {\r\n <label>\r\n {{ emails?.['personName'] }}\r\n <span class=\"title\">{{ emails?.['personEmail'] }}</span>\r\n </label>\r\n }\r\n </div>\r\n @if (!isReadOnly) {\r\n <ds-button\r\n class=\"ds-btn-action\"\r\n size=\"small\"\r\n (click)=\"deleteRow($index, emails)\"\r\n icon\r\n >\r\n <ds-icon icon=\"trash\" class=\"fc-coral fs-20\"></ds-icon>\r\n </ds-button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</ng-container>\r\n} @if (isReadOnly && control.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item\"\r\n type=\"user-picker\"\r\n [hasLabel]=\"!!label\"\r\n [multiple]=\"multiple\"\r\n [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n [label]=\"label\"\r\n [name]=\"control.value['personName']\"\r\n [value]=\"control.value['personEmail']\"\r\n [arrayList]=\"arrayList\"\r\n >\r\n </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"default-popover p-3\">\r\n <ol class=\"px-3 m-0\">\r\n <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n </ol>\r\n </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"] }]
|
|
3446
3454
|
}], propDecorators: { valueName: [{
|
|
3447
3455
|
type: Input
|
|
3448
3456
|
}], className: [{
|
|
@@ -3672,7 +3680,7 @@ class TextareaComponent extends ControlValueAccessorDirective {
|
|
|
3672
3680
|
useExisting: forwardRef(() => TextareaComponent),
|
|
3673
3681
|
multi: true,
|
|
3674
3682
|
},
|
|
3675
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field class=\"custom-textarea bordered-input {{className}}\">\r\n <mat-label>{{ label }}</mat-label>\r\n <label class=\"mat-form-content\">\r\n @if (type === 'arOnly'){\r\n <textarea \r\n arOnly\r\n #textarea \r\n [placeholder]=\"placeholder\"\r\n [value]=\"value\"\r\n (input)=\"setValue(textarea.value)\" \r\n (blur)=\"onTouchedFn()\" \r\n [attr.maxlength]=\"maxLength\"\r\n matInput>\r\n </textarea>\r\n } @else if (type === 'enOnly'){\r\n <textarea \r\n enOnly\r\n #textarea \r\n [placeholder]=\"placeholder\"\r\n [value]=\"value\"\r\n (input)=\"setValue(textarea.value)\" \r\n (blur)=\"onTouchedFn()\" \r\n [attr.maxlength]=\"maxLength\"\r\n matInput>\r\n </textarea>\r\n } @else {\r\n <textarea \r\n #textarea \r\n [placeholder]=\"placeholder\"\r\n [value]=\"value\"\r\n (input)=\"setValue(textarea.value)\" \r\n (blur)=\"onTouchedFn()\" \r\n [attr.maxlength]=\"maxLength\"\r\n matInput>\r\n </textarea>\r\n }\r\n\r\n </label>\r\n @if (showHint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (control.touched) {\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n }\r\n\r\n </ng-container>\r\n}\r\n@if (isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container>\r\n <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n </ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type:
|
|
3683
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field class=\"custom-textarea bordered-input {{className}}\">\r\n <mat-label>{{ label }}</mat-label>\r\n <label class=\"mat-form-content\">\r\n @if (type === 'arOnly'){\r\n <textarea \r\n arOnly\r\n #textarea \r\n [placeholder]=\"placeholder\"\r\n [value]=\"value\"\r\n (input)=\"setValue(textarea.value)\" \r\n (blur)=\"onTouchedFn()\" \r\n [attr.maxlength]=\"maxLength\"\r\n matInput>\r\n </textarea>\r\n } @else if (type === 'enOnly'){\r\n <textarea \r\n enOnly\r\n #textarea \r\n [placeholder]=\"placeholder\"\r\n [value]=\"value\"\r\n (input)=\"setValue(textarea.value)\" \r\n (blur)=\"onTouchedFn()\" \r\n [attr.maxlength]=\"maxLength\"\r\n matInput>\r\n </textarea>\r\n } @else {\r\n <textarea \r\n #textarea \r\n [placeholder]=\"placeholder\"\r\n [value]=\"value\"\r\n (input)=\"setValue(textarea.value)\" \r\n (blur)=\"onTouchedFn()\" \r\n [attr.maxlength]=\"maxLength\"\r\n matInput>\r\n </textarea>\r\n }\r\n\r\n </label>\r\n @if (showHint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span class=\"sfi sfi-info fs-17 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (control.touched) {\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n }\r\n\r\n </ng-container>\r\n}\r\n@if (isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container>\r\n <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n </ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i1$3.MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }] });
|
|
3676
3684
|
}
|
|
3677
3685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
3678
3686
|
type: Component,
|
|
@@ -3862,7 +3870,7 @@ class TableListComponent extends BaseComponent {
|
|
|
3862
3870
|
sentBack() {
|
|
3863
3871
|
}
|
|
3864
3872
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3865
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: TableListComponent, isStandalone: true, selector: "app-table-list", inputs: { columns: "columns", columnsConfig: "columnsConfig", rows: "rows", actions: "actions", totalRecords: "totalRecords", className: "className" }, outputs: { pageChanged: "pageChanged", buttonAction: "buttonAction", emitDataRow: "emitDataRow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"overflow-auto\">\r\n <!-- #table (scroll)=\"onPageChange($event)\" -->\r\n <ng-container >\r\n <!-- (matSortChange)=\"sortData($event)\" -->\r\n <table mat-table [dataSource]=\"dataSource\" class=\"primary-table {{className}}\" matSort >\r\n <ng-container *ngFor=\"let column of columns; let i = index;\">\r\n <ng-container [matColumnDef]=\"column\">\r\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'last-column' : columnsConfig[i].type === 'actions', 'sortArrow': columnsConfig[i]?.sortName?.length }\" mat-sort-header>\r\n {{i18n.translate(columnsConfig[i].label)}} </th>\r\n \r\n <td mat-cell [ngClass]=\"{'account-disabled': element?.user?.disabledCleanUp===true}\" *matCellDef=\"let element\">\r\n <ng-container [ngSwitch]=\"columnsConfig[i].type\" *ngIf=\"rows.length\">\r\n <a [ngClass]=\"columnsConfig[i].type\" [href]=\"element[column]\" *ngSwitchCase=\"'link'\">\r\n {{ element[column] }}\r\n </a>\r\n \r\n <a [ngClass]=\"columnsConfig[i].type\" [routerLink]=\"[element.id]\" [href]=\"element[column]\"\r\n *ngSwitchCase=\"'rout'\">\r\n {{ element[column] }}\r\n </a>\r\n \r\n <span class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'date'\">\r\n <span class=\"sfi sfi-clock text-color-coral\" *ngIf=\"!loading\"></span>\r\n <span class=\"mx-2\">\r\n <!-- {{ element?.Date.from }}\r\n <ng-container *ngIf=\"element?.Date.to\">\r\n : {{ element?.Date.to }}\r\n </ng-container> -->\r\n {{ element[column] | date: 'dd/MM/YYYY' }}\r\n </span>\r\n </span>\r\n \r\n <div class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'sla'\">\r\n <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"45\"\r\n [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\"></app-sla>\r\n </div>\r\n \r\n <div class=\"img-card table-img\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'image'\">\r\n <img [src]=\"element?.image\" alt=\"\">\r\n </div>\r\n \r\n <span class=\"{{ element[column].type }}\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'status'\">\r\n {{ element[column].label }}\r\n </span>\r\n \r\n \r\n <div class=\"d-flex mx-n1\" *ngSwitchCase=\"'RequestType'\">\r\n <div class=\"request-type mx-1 {{item.status}}\" *ngFor=\"let item of element?.RequestType\">\r\n {{ item.label }}\r\n <span class=\"mx-1\" *ngIf=\"item.status === 'need-action'\"></span>\r\n <span class=\"sfi sfi-info \" *ngIf=\"item.status === 'need-action'\"></span>\r\n </div>\r\n </div>\r\n \r\n \r\n <span class=\"{{ element[column].type }} {{ element[column] ? 'text-color-coral underline' : '' }}\"\r\n [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'number'\">\r\n {{ element[column] ? element[column] : '-' }}\r\n </span>\r\n \r\n <div class=\"text-nowrap d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n *ngSwitchCase=\"'group'\">\r\n <span>{{element?.Group.groupName}}</span>\r\n <span class=\"mx-2\"></span>\r\n <app-repeated-list type=\"users-avatar\" [listOfItems]=\"element?.Group.users\"></app-repeated-list>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center gap-2\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'user'\">\r\n <span class=\"img-card circled-img small\" *ngIf=\"!loading\">\r\n <img src=\"{{'data:image/png;base64,' + element?.user?.personalPhoto}}\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n </span>\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"font-14 font-weight-medium\">{{element?.user?.name}}</span>\r\n <span class=\"font-12 font-weight-normal text-color-dark-gray mt-1\">{{element?.user?.email}}</span>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"delegate d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n *ngSwitchCase=\"'assigned'\">\r\n <div class=\"img-card x-small circled-img\">\r\n <img [src]=\"element?.AssignedTo.image\" alt=\"\">\r\n </div>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"font-14 font-weight-medium text-color-onyx\">{{element?.AssignedTo.name}}</span>\r\n <span class=\"sfi sfi-close text-color-coral\"></span>\r\n </div>\r\n \r\n \r\n <ng-container *ngSwitchCase=\"'statusAction'\">\r\n <div class=\"table-action\">\r\n \r\n <div class=\"count-down mx-n1\" *ngIf=\"element[column] === 'need-action'\">\r\n <div class=\"item mx-1\">\r\n <span class=\"font-12 font-weight-medium text-color-onyx d-block\">01</span>\r\n <span class=\"font-8 font-weight-light text-color-onyx d-block\">Days</span>\r\n </div>\r\n <div class=\"item mx-1\">\r\n <span class=\"font-12 font-weight-medium text-color-onyx d-block\">18</span>\r\n <span class=\"font-8 font-weight-light text-color-onyx d-block\">Hours</span>\r\n </div>\r\n <div class=\"item mx-1\">\r\n <span class=\"font-12 font-weight-medium text-color-onyx d-block\">44</span>\r\n <span class=\"font-8 font-weight-light text-color-onyx d-block\">Mins</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'approved'\">\r\n <span class=\"status approved\">\r\n Approved\r\n </span>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'sent-back'\">\r\n <span class=\"status rejected\">\r\n Sent Back\r\n </span>\r\n <span class=\"mx-2\"></span>\r\n <button mat-stroked-button class=\"btn button-primary square br-w-1 font-14 font-weight-medium\"\r\n (click)=\"sentBack()\">\r\n <span class=\"sfi sfi-chat-o\"></span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'pending'\">\r\n <span class=\"status pending\">\r\n Pending\r\n </span>\r\n <span class=\"mx-2\"></span>\r\n \r\n <div class=\"d-flex align-items-center mx-n1\">\r\n <div class=\"img-card circled-img x-small mx-1\">\r\n <img [src]=\"element?.pendingWith.image\" alt=\"\">\r\n </div>\r\n \r\n <div class=\"d-flex flex-column mx-1\">\r\n <span class=\"font-8 font-weight-medium text-color-yellow text-nowrap\">Pending With</span>\r\n <span class=\"font-11 font-weight-medium text-nowrap\">{{element?.pendingWith.name}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n </ng-container>\r\n \r\n \r\n <ng-container *ngSwitchCase=\"'actions'\">\r\n \r\n <div class=\"d-flex justify-content-between mx-n2\">\r\n <ng-container *ngFor=\"let action of element[column]\">\r\n \r\n <div class=\"flex-grow-1\">\r\n <ng-container *ngIf=\"action.type.buttonType === 'stroked'\">\r\n <button mat-stroked-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n {{action.label}}\r\n </button>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"action.type.buttonType === 'flat'\">\r\n <button mat-flat-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n {{action.label}}\r\n </button>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"action.type.buttonType === 'icon'\">\r\n <button mat-icon-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n <span class=\"sfi sfi-{{action.type.icon}}\"></span>\r\n </button>\r\n </ng-container>\r\n </div>\r\n \r\n <ng-container *ngIf=\"action.type.buttonType === 'all'\">\r\n <button mat-icon-button class=\"btn button-transparent square medium mx-2 text-end\"\r\n [matMenuTriggerFor]=\"menuAction\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"sfi sfi-dots text-color-onyx\"></span>\r\n </button>\r\n <mat-menu #menuAction=\"matMenu\" xPosition=\"before\" class=\"actions-menu\">\r\n <button *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n (click)=\"buttonClicked(element,'CreateEmail', $event)\">\r\n {{i18n.translate('createEmail')}} \r\n </button>\r\n <button *ngIf=\"element?.user?.email && element?.user?.enabled==='true'\" mat-menu-item class=\"text-color-red font-12\"\r\n (click)=\"buttonClicked(element,'DisableEmail', $event)\">\r\n {{ i18n.translate('disableEmail')}}\r\n </button>\r\n <button *ngIf=\"element?.user?.email && element?.user?.disabledCleanUp===true\" mat-menu-item class=\"text-color-red font-12\"\r\n (click)=\"buttonClicked(element,'EnableEmail', $event)\">\r\n {{ i18n.translate('enableEmail')}}\r\n </button>\r\n <button *ngIf=\"element?.user!==null && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n (click)=\"buttonClicked(element,'CreateEntryPermission', $event)\">\r\n {{ i18n.translate('createCEP')}}\r\n </button>\r\n <!-- <button *ngIf=\"!element?.user?.email\" mat-menu-item class=\"text-color-red font-12\"\r\n (click)=\"buttonClicked(element,'DisableEntryPermission', $event)\">\r\n {{i18n.translate('disableEntryPermission')}}\r\n </button> -->\r\n <button *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-red font-12\"\r\n (click)=\"buttonClicked(element,'DeleteAccount', $event)\">\r\n {{i18n.translate('deleteAccount')}}\r\n </button>\r\n\r\n <button *ngIf=\"element?.user?.email && element?.user?.disabledCleanUp!==true\" [disabled]=\"!element?.mailExtensionAllowed\" mat-menu-item class=\"text-color-onyx font-12\"\r\n (click)=\"buttonClicked(element,'ExtendAccount', $event)\">\r\n {{ i18n.translate('extendAccount')}}\r\n </button>\r\n <button mat-menu-item class=\"text-color-onyx font-12\" *ngIf=\"element?.user?.disabledCleanUp!==true\" (click)=\"buttonClicked(element,'update', $event)\">\r\n {{ i18n.translate('updateEmploymentInformation')}}\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n \r\n <span class=\"text-nowrap\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchDefault>\r\n {{ element[column] }}\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"loading\">\r\n <span class=\" d-block loading-bg\"></span>\r\n </ng-container>\r\n \r\n </td>\r\n \r\n \r\n </ng-container>\r\n </ng-container>\r\n \r\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: columns;\" class=\"cursor-pointer\" (click)=\"selectedRow(row)\"></tr>\r\n </table>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"loading\">\r\n <span>loading...</span>\r\n </ng-container> -->\r\n <!-- <ng-container *ngIf=\"loading\">-->\r\n <!-- <td *matCellDef=\"let element\" >loading....</td>-->\r\n <!-- </ng-container>-->\r\n <!--{{this.rows | json}}-->\r\n \r\n<!-- <app-no-data-placeholder *ngIf=\"noData && !loading\" [noDataPlaceholder]=\"noDataObj\"></app-no-data-placeholder> -->\r\n\r\n <mat-paginator [pageSize]=\"10\" [length]=\"totalRecords\" (page)=\"onPageChange($event)\" \r\n [pageSizeOptions]=\"[5, 10, 25, 100]\" aria-label=\"Select page of users\"></mat-paginator>\r\n <!-- style-paginator -->\r\n <!-- showFirstLastButtons -->\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: RepeatedListComponent, selector: "app-repeated-list", inputs: ["listOfItems", "type"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { 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: "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: NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
|
|
3873
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: TableListComponent, isStandalone: true, selector: "app-table-list", inputs: { columns: "columns", columnsConfig: "columnsConfig", rows: "rows", actions: "actions", totalRecords: "totalRecords", className: "className" }, outputs: { pageChanged: "pageChanged", buttonAction: "buttonAction", emitDataRow: "emitDataRow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"overflow-auto\">\r\n <!-- #table (scroll)=\"onPageChange($event)\" -->\r\n <ng-container >\r\n <!-- (matSortChange)=\"sortData($event)\" -->\r\n <table mat-table [dataSource]=\"dataSource\" class=\"primary-table {{className}}\" matSort >\r\n <ng-container *ngFor=\"let column of columns; let i = index;\">\r\n <ng-container [matColumnDef]=\"column\">\r\n <th mat-header-cell *matHeaderCellDef [ngClass]=\"{'last-column' : columnsConfig[i].type === 'actions', 'sortArrow': columnsConfig[i]?.sortName?.length }\" mat-sort-header>\r\n {{i18n.translate(columnsConfig[i].label)}} </th>\r\n \r\n <td mat-cell [ngClass]=\"{'account-disabled': element?.user?.disabledCleanUp===true}\" *matCellDef=\"let element\">\r\n <ng-container [ngSwitch]=\"columnsConfig[i].type\" *ngIf=\"rows.length\">\r\n <a [ngClass]=\"columnsConfig[i].type\" [href]=\"element[column]\" *ngSwitchCase=\"'link'\">\r\n {{ element[column] }}\r\n </a>\r\n \r\n <a [ngClass]=\"columnsConfig[i].type\" [routerLink]=\"[element.id]\" [href]=\"element[column]\"\r\n *ngSwitchCase=\"'rout'\">\r\n {{ element[column] }}\r\n </a>\r\n \r\n <span class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'date'\">\r\n <span class=\"sfi sfi-clock text-color-coral\" *ngIf=\"!loading\"></span>\r\n <span class=\"mx-2\">\r\n <!-- {{ element?.Date.from }}\r\n <ng-container *ngIf=\"element?.Date.to\">\r\n : {{ element?.Date.to }}\r\n </ng-container> -->\r\n {{ element[column] | date: 'dd/MM/YYYY' }}\r\n </span>\r\n </span>\r\n \r\n <div class=\"d-inline-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'sla'\">\r\n <app-sla [value]=\"element?.SLA.value\" [maxValue]=\"element?.SLA.max\" [canvasScale]=\"45\"\r\n [outerLineColor]=\"getSlaColor(element?.SLA.value, element?.SLA.max)\"></app-sla>\r\n </div>\r\n \r\n <div class=\"img-card table-img\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'image'\">\r\n <img [src]=\"element?.image\" alt=\"\">\r\n </div>\r\n \r\n <span class=\"{{ element[column].type }}\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'status'\">\r\n {{ element[column].label }}\r\n </span>\r\n \r\n \r\n <div class=\"d-flex mx-n1\" *ngSwitchCase=\"'RequestType'\">\r\n <div class=\"request-type mx-1 {{item.status}}\" *ngFor=\"let item of element?.RequestType\">\r\n {{ item.label }}\r\n <span class=\"mx-1\" *ngIf=\"item.status === 'need-action'\"></span>\r\n <span class=\"sfi sfi-info \" *ngIf=\"item.status === 'need-action'\"></span>\r\n </div>\r\n </div>\r\n \r\n \r\n <span class=\"{{ element[column].type }} {{ element[column] ? 'text-color-coral underline' : '' }}\"\r\n [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'number'\">\r\n {{ element[column] ? element[column] : '-' }}\r\n </span>\r\n \r\n <div class=\"text-nowrap d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n *ngSwitchCase=\"'group'\">\r\n <span>{{element?.Group.groupName}}</span>\r\n <span class=\"mx-2\"></span>\r\n <app-repeated-list type=\"users-avatar\" [listOfItems]=\"element?.Group.users\"></app-repeated-list>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center gap-2\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchCase=\"'user'\">\r\n <span class=\"img-card circled-img small\" *ngIf=\"!loading\">\r\n <img src=\"{{'data:image/png;base64,' + element?.user?.personalPhoto}}\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n </span>\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"font-14 font-weight-medium\">{{element?.user?.name}}</span>\r\n <span class=\"font-12 font-weight-normal text-color-dark-gray mt-1\">{{element?.user?.email}}</span>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"delegate d-flex align-items-center\" [ngClass]=\"columnsConfig[i].type\"\r\n *ngSwitchCase=\"'assigned'\">\r\n <div class=\"img-card x-small circled-img\">\r\n <img [src]=\"element?.AssignedTo.image\" alt=\"\">\r\n </div>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"font-14 font-weight-medium text-color-onyx\">{{element?.AssignedTo.name}}</span>\r\n <span class=\"sfi sfi-close text-color-coral\"></span>\r\n </div>\r\n \r\n \r\n <ng-container *ngSwitchCase=\"'statusAction'\">\r\n <div class=\"table-action\">\r\n \r\n <div class=\"count-down mx-n1\" *ngIf=\"element[column] === 'need-action'\">\r\n <div class=\"item mx-1\">\r\n <span class=\"font-12 font-weight-medium text-color-onyx d-block\">01</span>\r\n <span class=\"font-8 font-weight-light text-color-onyx d-block\">Days</span>\r\n </div>\r\n <div class=\"item mx-1\">\r\n <span class=\"font-12 font-weight-medium text-color-onyx d-block\">18</span>\r\n <span class=\"font-8 font-weight-light text-color-onyx d-block\">Hours</span>\r\n </div>\r\n <div class=\"item mx-1\">\r\n <span class=\"font-12 font-weight-medium text-color-onyx d-block\">44</span>\r\n <span class=\"font-8 font-weight-light text-color-onyx d-block\">Mins</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'approved'\">\r\n <span class=\"status approved\">\r\n Approved\r\n </span>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'sent-back'\">\r\n <span class=\"status rejected\">\r\n Sent Back\r\n </span>\r\n <span class=\"mx-2\"></span>\r\n <button mat-stroked-button class=\"btn button-primary square br-w-1 font-14 font-weight-medium\"\r\n (click)=\"sentBack()\">\r\n <span class=\"sfi sfi-chat-o\"></span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center\" *ngIf=\"element[column] === 'pending'\">\r\n <span class=\"status pending\">\r\n Pending\r\n </span>\r\n <span class=\"mx-2\"></span>\r\n \r\n <div class=\"d-flex align-items-center mx-n1\">\r\n <div class=\"img-card circled-img x-small mx-1\">\r\n <img [src]=\"element?.pendingWith.image\" alt=\"\">\r\n </div>\r\n \r\n <div class=\"d-flex flex-column mx-1\">\r\n <span class=\"font-8 font-weight-medium text-color-yellow text-nowrap\">Pending With</span>\r\n <span class=\"font-11 font-weight-medium text-nowrap\">{{element?.pendingWith.name}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n </ng-container>\r\n \r\n \r\n <ng-container *ngSwitchCase=\"'actions'\">\r\n \r\n <div class=\"d-flex justify-content-between mx-n2\">\r\n <ng-container *ngFor=\"let action of element[column]\">\r\n \r\n <div class=\"flex-grow-1\">\r\n <ng-container *ngIf=\"action.type.buttonType === 'stroked'\">\r\n <button mat-stroked-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n {{action.label}}\r\n </button>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"action.type.buttonType === 'flat'\">\r\n <button mat-flat-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n {{action.label}}\r\n </button>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"action.type.buttonType === 'icon'\">\r\n <button mat-icon-button (click)=\"buttonClicked(element,action.fn, $event)\"\r\n class=\"btn button-{{action.type.buttonClass}} mx-2\">\r\n <span class=\"sfi sfi-{{action.type.icon}}\"></span>\r\n </button>\r\n </ng-container>\r\n </div>\r\n \r\n <ng-container *ngIf=\"action.type.buttonType === 'all'\">\r\n <button mat-icon-button class=\"btn button-transparent square medium mx-2 text-end\"\r\n [matMenuTriggerFor]=\"menuAction\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"sfi sfi-dots text-color-onyx\"></span>\r\n </button>\r\n <mat-menu #menuAction=\"matMenu\" xPosition=\"before\" class=\"actions-menu\">\r\n <button *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n (click)=\"buttonClicked(element,'CreateEmail', $event)\">\r\n {{i18n.translate('createEmail')}} \r\n </button>\r\n <button *ngIf=\"element?.user?.email && element?.user?.enabled==='true'\" mat-menu-item class=\"text-color-red font-12\"\r\n (click)=\"buttonClicked(element,'DisableEmail', $event)\">\r\n {{ i18n.translate('disableEmail')}}\r\n </button>\r\n <button *ngIf=\"element?.user?.email && element?.user?.disabledCleanUp===true\" mat-menu-item class=\"text-color-red font-12\"\r\n (click)=\"buttonClicked(element,'EnableEmail', $event)\">\r\n {{ i18n.translate('enableEmail')}}\r\n </button>\r\n <button *ngIf=\"element?.user!==null && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-onyx font-12\"\r\n (click)=\"buttonClicked(element,'CreateEntryPermission', $event)\">\r\n {{ i18n.translate('createCEP')}}\r\n </button>\r\n <!-- <button *ngIf=\"!element?.user?.email\" mat-menu-item class=\"text-color-red font-12\"\r\n (click)=\"buttonClicked(element,'DisableEntryPermission', $event)\">\r\n {{i18n.translate('disableEntryPermission')}}\r\n </button> -->\r\n <button *ngIf=\"!element?.user?.email && element?.user?.disabledCleanUp!==true\" mat-menu-item class=\"text-color-red font-12\"\r\n (click)=\"buttonClicked(element,'DeleteAccount', $event)\">\r\n {{i18n.translate('deleteAccount')}}\r\n </button>\r\n\r\n <button *ngIf=\"element?.user?.email && element?.user?.disabledCleanUp!==true\" [disabled]=\"!element?.mailExtensionAllowed\" mat-menu-item class=\"text-color-onyx font-12\"\r\n (click)=\"buttonClicked(element,'ExtendAccount', $event)\">\r\n {{ i18n.translate('extendAccount')}}\r\n </button>\r\n <button mat-menu-item class=\"text-color-onyx font-12\" *ngIf=\"element?.user?.disabledCleanUp!==true\" (click)=\"buttonClicked(element,'update', $event)\">\r\n {{ i18n.translate('updateEmploymentInformation')}}\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n \r\n <span class=\"text-nowrap\" [ngClass]=\"columnsConfig[i].type\" *ngSwitchDefault>\r\n {{ element[column] }}\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"loading\">\r\n <span class=\" d-block loading-bg\"></span>\r\n </ng-container>\r\n \r\n </td>\r\n \r\n \r\n </ng-container>\r\n </ng-container>\r\n \r\n <tr mat-header-row *matHeaderRowDef=\"columns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: columns;\" class=\"cursor-pointer\" (click)=\"selectedRow(row)\"></tr>\r\n </table>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"loading\">\r\n <span>loading...</span>\r\n </ng-container> -->\r\n <!-- <ng-container *ngIf=\"loading\">-->\r\n <!-- <td *matCellDef=\"let element\" >loading....</td>-->\r\n <!-- </ng-container>-->\r\n <!--{{this.rows | json}}-->\r\n \r\n<!-- <app-no-data-placeholder *ngIf=\"noData && !loading\" [noDataPlaceholder]=\"noDataObj\"></app-no-data-placeholder> -->\r\n\r\n <mat-paginator [pageSize]=\"10\" [length]=\"totalRecords\" (page)=\"onPageChange($event)\" \r\n [pageSizeOptions]=\"[5, 10, 25, 100]\" aria-label=\"Select page of users\"></mat-paginator>\r\n <!-- style-paginator -->\r\n <!-- showFirstLastButtons -->\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: RepeatedListComponent, selector: "app-repeated-list", inputs: ["listOfItems", "type"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { 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: "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: NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
|
|
3866
3874
|
}
|
|
3867
3875
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableListComponent, decorators: [{
|
|
3868
3876
|
type: Component,
|
|
@@ -4872,7 +4880,7 @@ class MultiselectComponent extends ControlValueAccessorDirective {
|
|
|
4872
4880
|
useExisting: forwardRef(() => MultiselectComponent),
|
|
4873
4881
|
multi: true,
|
|
4874
4882
|
},
|
|
4875
|
-
], usesInheritance: true, ngImport: i0, template: "@if (isReadOnly) {\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [value]=\"control?.value\"\r\n type=\"multipleSelect\"\r\n ></app-info-item>\r\n} @else {\r\n @if(label){\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n <mat-form-field>\r\n <mat-select \r\n (selectionChange)=\"selectionChange($event)\" \r\n [value]=\"mapKeyValuePairsToKeys(value)\" \r\n multiple \r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"isDisabled\"\r\n >\r\n <mat-select-trigger>\r\n {{value?.[0]?.value || ''}}\r\n @if (value?.length > 1) {\r\n <span class=\"additional-selection\">\r\n (+{{value.length - 1}} {{value.length === 2 ? ('other' | translate) : ('others' | translate)}})\r\n </span>\r\n }\r\n </mat-select-trigger>\r\n @for (item of options; track item) {\r\n <mat-option [value]=\"item[key]\">{{item[displayedLabel]}}</mat-option>\r\n }\r\n </mat-select>\r\n @if (loading) {\r\n <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n }\r\n </mat-form-field>\r\n @if (control.touched) {\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n }\r\n}\r\n", styles: ["mat-form-field.mat-mdc-form-field.mat-mdc-form-field-type-mat-select{--input-bg: var(--white);--input-border: 1px solid var(--gray);--placeholder-fc: var(--gray)}:host ::ng-deep .mat-mdc-select-arrow-wrapper{display:flex!important}:host ::ng-deep mat-form-field.mat-mdc-form-field .mat-mdc-select-arrow-wrapper{width:25px;padding-top:2px}.additional-selection{opacity:.75;font-size:.75em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type:
|
|
4883
|
+
], usesInheritance: true, ngImport: i0, template: "@if (isReadOnly) {\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [value]=\"control?.value\"\r\n type=\"multipleSelect\"\r\n ></app-info-item>\r\n} @else {\r\n @if(label){\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n <mat-form-field>\r\n <mat-select \r\n (selectionChange)=\"selectionChange($event)\" \r\n [value]=\"mapKeyValuePairsToKeys(value)\" \r\n multiple \r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"isDisabled\"\r\n >\r\n <mat-select-trigger>\r\n {{value?.[0]?.value || ''}}\r\n @if (value?.length > 1) {\r\n <span class=\"additional-selection\">\r\n (+{{value.length - 1}} {{value.length === 2 ? ('other' | translate) : ('others' | translate)}})\r\n </span>\r\n }\r\n </mat-select-trigger>\r\n @for (item of options; track item) {\r\n <mat-option [value]=\"item[key]\">{{item[displayedLabel]}}</mat-option>\r\n }\r\n </mat-select>\r\n @if (loading) {\r\n <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n }\r\n </mat-form-field>\r\n @if (control.touched) {\r\n <mat-error \r\n app-validation-errors \r\n [errors]=\"control.errors\" \r\n [customErrorMessages]=\"customErrorMessages\">\r\n </mat-error>\r\n }\r\n}\r\n", styles: ["mat-form-field.mat-mdc-form-field.mat-mdc-form-field-type-mat-select{--input-bg: var(--white);--input-border: 1px solid var(--gray);--placeholder-fc: var(--gray)}:host ::ng-deep .mat-mdc-select-arrow-wrapper{display:flex!important}:host ::ng-deep mat-form-field.mat-mdc-form-field .mat-mdc-select-arrow-wrapper{width:25px;padding-top:2px}.additional-selection{opacity:.75;font-size:.75em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4876
4884
|
}
|
|
4877
4885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MultiselectComponent, decorators: [{
|
|
4878
4886
|
type: Component,
|
|
@@ -4899,6 +4907,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
4899
4907
|
type: Input
|
|
4900
4908
|
}] } });
|
|
4901
4909
|
|
|
4910
|
+
/**
|
|
4911
|
+
* Time picker component for selecting a time value.
|
|
4912
|
+
*
|
|
4913
|
+
* Supports both Reactive Forms and Template-driven forms.
|
|
4914
|
+
*
|
|
4915
|
+
* Inputs:
|
|
4916
|
+
* - `placeholder`: Placeholder text for the input field.
|
|
4917
|
+
* - `isReadOnly`: Renders the component in a read-only display mode.
|
|
4918
|
+
* - `label`: Text label displayed above the time picker.
|
|
4919
|
+
* - `required`: Hides the "optional" label and adds Angular's required validator.
|
|
4920
|
+
* - `mandatory`: Hides the "optional" label visually without adding validation.
|
|
4921
|
+
* - `customErrorMessages`: Object with custom validation error messages.
|
|
4922
|
+
* - `insideTable`: If true, renders styles suitable for inside-table use.
|
|
4923
|
+
*
|
|
4924
|
+
* Emits:
|
|
4925
|
+
* - The selected time is emitted as an ISO string (e.g. `"2025-06-29T10:30:00.000Z"`).
|
|
4926
|
+
*
|
|
4927
|
+
* Example usage:
|
|
4928
|
+
* ```html
|
|
4929
|
+
* <app-timepicker
|
|
4930
|
+
* formControlName="appointmentTime"
|
|
4931
|
+
* label="Choose time"
|
|
4932
|
+
* placeholder="Select time"
|
|
4933
|
+
* [mandatory]="true"
|
|
4934
|
+
* >
|
|
4935
|
+
* </app-timepicker>
|
|
4936
|
+
* ```
|
|
4937
|
+
*/
|
|
4938
|
+
class TimepickerComponent extends ControlValueAccessorDirective {
|
|
4939
|
+
cdRef = inject(ChangeDetectorRef);
|
|
4940
|
+
destroyRef = inject(DestroyRef);
|
|
4941
|
+
ngOnInit() {
|
|
4942
|
+
super.ngOnInit();
|
|
4943
|
+
if (!this.isReadOnly) {
|
|
4944
|
+
this.actionStateService.resetAction$
|
|
4945
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
4946
|
+
.subscribe((res) => {
|
|
4947
|
+
if (this.control.enabled) {
|
|
4948
|
+
this.control.reset();
|
|
4949
|
+
}
|
|
4950
|
+
});
|
|
4951
|
+
if (this.control?.valueChanges) {
|
|
4952
|
+
this.control.valueChanges
|
|
4953
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
4954
|
+
.subscribe(() => this.cdRef.markForCheck());
|
|
4955
|
+
}
|
|
4956
|
+
}
|
|
4957
|
+
}
|
|
4958
|
+
timePickerChange(event) {
|
|
4959
|
+
if (this.control.hasError('invalidTimeFormat'))
|
|
4960
|
+
this.control.setErrors({ invalid: null });
|
|
4961
|
+
try {
|
|
4962
|
+
const newValue = event instanceof Date ? event.toISOString() : null;
|
|
4963
|
+
this.setValue(newValue);
|
|
4964
|
+
}
|
|
4965
|
+
catch (error) {
|
|
4966
|
+
this.control.setErrors({ invalidTimeFormat: true });
|
|
4967
|
+
}
|
|
4968
|
+
}
|
|
4969
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TimepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4970
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: TimepickerComponent, isStandalone: true, selector: "app-timepicker", providers: [
|
|
4971
|
+
provideNativeDateAdapter(),
|
|
4972
|
+
{
|
|
4973
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4974
|
+
useExisting: forwardRef(() => TimepickerComponent),
|
|
4975
|
+
multi: true,
|
|
4976
|
+
},
|
|
4977
|
+
], usesInheritance: true, ngImport: i0, template: "@if (isReadOnly) {\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [value]=\"control?.value\"\r\n type=\"time\"\r\n ></app-info-item>\r\n} @else { \r\n @if(label){\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n <mat-form-field>\r\n <input\r\n matInput\r\n [matTimepicker]=\"timepicker\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"timePickerChange($event)\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n <mat-timepicker #timepicker (closed)=\"onTouchedFn()\" />\r\n <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\r\n </mat-form-field>\r\n @if (control.touched) {\r\n <mat-error\r\n app-validation-errors\r\n [errors]=\"control.errors\"\r\n [customErrorMessages]=\"customErrorMessages\"\r\n >\r\n </mat-error>\r\n } \r\n}\r\n", styles: ["mat-form-field.mat-mdc-form-field.mat-timepicker-input{--input-bg: var(--white);--input-border: 1px solid var(--gray);--placeholder-fc: var(--gray)}:host ::ng-deep .mat-mdc-select-arrow-wrapper{display:flex!important}:host ::ng-deep mat-form-field.mat-mdc-form-field .mat-mdc-select-arrow-wrapper{width:25px;padding-top:2px}:host ::ng-deep mat-timepicker-toggle,:host ::ng-deep mat-timepicker-toggle button{width:38px!important}.additional-selection{opacity:.75;font-size:.75em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i2$5.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i2$5.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i2$5.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors,[app-validation-errors]", inputs: ["errors", "customErrorMessages"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4978
|
+
}
|
|
4979
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TimepickerComponent, decorators: [{
|
|
4980
|
+
type: Component,
|
|
4981
|
+
args: [{ selector: "app-timepicker", standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
|
|
4982
|
+
CommonModule,
|
|
4983
|
+
MatFormFieldModule,
|
|
4984
|
+
MatTimepickerModule,
|
|
4985
|
+
FormLabelComponent,
|
|
4986
|
+
InfoItemComponent,
|
|
4987
|
+
ValidationErrorsComponent,
|
|
4988
|
+
MatFormField,
|
|
4989
|
+
MatInput,
|
|
4990
|
+
FormsModule,
|
|
4991
|
+
], providers: [
|
|
4992
|
+
provideNativeDateAdapter(),
|
|
4993
|
+
{
|
|
4994
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4995
|
+
useExisting: forwardRef(() => TimepickerComponent),
|
|
4996
|
+
multi: true,
|
|
4997
|
+
},
|
|
4998
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isReadOnly) {\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [value]=\"control?.value\"\r\n type=\"time\"\r\n ></app-info-item>\r\n} @else { \r\n @if(label){\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n <mat-form-field>\r\n <input\r\n matInput\r\n [matTimepicker]=\"timepicker\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"timePickerChange($event)\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n <mat-timepicker #timepicker (closed)=\"onTouchedFn()\" />\r\n <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\r\n </mat-form-field>\r\n @if (control.touched) {\r\n <mat-error\r\n app-validation-errors\r\n [errors]=\"control.errors\"\r\n [customErrorMessages]=\"customErrorMessages\"\r\n >\r\n </mat-error>\r\n } \r\n}\r\n", styles: ["mat-form-field.mat-mdc-form-field.mat-timepicker-input{--input-bg: var(--white);--input-border: 1px solid var(--gray);--placeholder-fc: var(--gray)}:host ::ng-deep .mat-mdc-select-arrow-wrapper{display:flex!important}:host ::ng-deep mat-form-field.mat-mdc-form-field .mat-mdc-select-arrow-wrapper{width:25px;padding-top:2px}:host ::ng-deep mat-timepicker-toggle,:host ::ng-deep mat-timepicker-toggle button{width:38px!important}.additional-selection{opacity:.75;font-size:.75em}\n"] }]
|
|
4999
|
+
}] });
|
|
5000
|
+
|
|
4902
5001
|
function mapTo(path, source, allowUndefined = false, allowArrayWithSingleValue = false) {
|
|
4903
5002
|
let toBeReturned;
|
|
4904
5003
|
if (source) {
|
|
@@ -4968,7 +5067,7 @@ class SkipLocationDirective {
|
|
|
4968
5067
|
onClick() {
|
|
4969
5068
|
this.router.navigate([this.appSkipLocation], { skipLocationChange: true });
|
|
4970
5069
|
}
|
|
4971
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkipLocationDirective, deps: [{ token: i2$
|
|
5070
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkipLocationDirective, deps: [{ token: i2$6.Router }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4972
5071
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: SkipLocationDirective, isStandalone: true, selector: "[appSkipLocation]", inputs: { appSkipLocation: "appSkipLocation" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
|
|
4973
5072
|
}
|
|
4974
5073
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkipLocationDirective, decorators: [{
|
|
@@ -4977,7 +5076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
4977
5076
|
standalone: true,
|
|
4978
5077
|
selector: '[appSkipLocation]'
|
|
4979
5078
|
}]
|
|
4980
|
-
}], ctorParameters: () => [{ type: i2$
|
|
5079
|
+
}], ctorParameters: () => [{ type: i2$6.Router }], propDecorators: { appSkipLocation: [{
|
|
4981
5080
|
type: Input
|
|
4982
5081
|
}], onClick: [{
|
|
4983
5082
|
type: HostListener,
|
|
@@ -5133,13 +5232,13 @@ class TableComponent {
|
|
|
5133
5232
|
this.pageScroll.emit(true);
|
|
5134
5233
|
}
|
|
5135
5234
|
}
|
|
5136
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.MatDialog }, { token: i2$
|
|
5137
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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=\"'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 ? translateService.currentLang == \"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 ? translateService.currentLang == \"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 ? translateService.currentLang == \"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 ? translateService.currentLang == '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 ? translateService.currentLang == \"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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$6.TranslatePipe, name: "translate" }, { 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"] }, { 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"] }] });
|
|
5235
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.MatDialog }, { token: i2$7.TranslateService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
5236
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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=\"'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 ? translateService.currentLang == \"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 ? translateService.currentLang == \"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 ? translateService.currentLang == \"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 ? translateService.currentLang == '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 ? translateService.currentLang == \"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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$7.TranslatePipe, name: "translate" }, { 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"] }, { 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"] }] });
|
|
5138
5237
|
}
|
|
5139
5238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableComponent, decorators: [{
|
|
5140
5239
|
type: Component,
|
|
5141
5240
|
args: [{ selector: 'app-table', standalone: true, imports: [NgFor, TranslateModule, NgIf, matModules, FormsModule, NgSwitchDefault, SkipLocationDirective, MatPaginator], 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=\"'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 ? translateService.currentLang == \"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 ? translateService.currentLang == \"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 ? translateService.currentLang == \"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 ? translateService.currentLang == '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 ? translateService.currentLang == \"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"] }]
|
|
5142
|
-
}], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i2$
|
|
5241
|
+
}], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i2$7.TranslateService }, { type: i4.FormBuilder }], propDecorators: { matTableRef: [{
|
|
5143
5242
|
type: ViewChild,
|
|
5144
5243
|
args: ['table', { read: ElementRef }]
|
|
5145
5244
|
}], columns: [{
|
|
@@ -6344,7 +6443,7 @@ class PreviousRequestsComponent {
|
|
|
6344
6443
|
this.ngUnsubscribe.complete();
|
|
6345
6444
|
}
|
|
6346
6445
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PreviousRequestsComponent, deps: [{ token: i1$1.MatDialog }, { token: SidenavService }, { token: CoreService }, { token: i2$1.ToastrService }, { token: CoreI18nService }, { token: i4.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6347
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: PreviousRequestsComponent, isStandalone: true, selector: "app-history", ngImport: i0, template: "<section class=\"main-sidenav history-sidenav\">\r\n <div class=\"sidenav-title\">\r\n <h3>{{ i18n.translate('PreviousRequests') }}</h3>\r\n <ds-button class=\"close-sidenav\" (click)=\"closeSidenav()\" icon>\r\n <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n </ds-button>\r\n </div>\r\n\r\n <div class=\"sidenav-body bc-light-gray\">\r\n <section class=\"p-3\">\r\n <header class=\"d-flex align-items-center justify-content-between gap-2 mb-3\">\r\n <h2 class=\"fs-20 fw-medium fc-black mb-0 d-flex align-items-center flex-grow-1 gap-3\">\r\n {{ i18n.translate('AllRequests') }}\r\n <span class=\"title-count fs-14 fw-normal\">{{ previousRequests?.length ? previousRequests?.length : '0' }}</span>\r\n </h2>\r\n <ds-button icon size=\"small\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n <ds-icon icon=\"filter\" class=\"fc-coral fs-20\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n <mat-button-toggle-group\r\n class=\"icon-toggle flex-nowrap\"\r\n #pageView=\"matButtonToggleGroup\"\r\n (click)=\"$event.stopImmediatePropagation()\"\r\n value=\"list\"\r\n >\r\n <mat-button-toggle value=\"card\">\r\n <span class=\"sfi sfi-card fs-20\"></span>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"list\">\r\n <span class=\"sfi sfi-list-dots fs-20\"></span>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </header>\r\n\r\n @if (pageView.value === 'card') {\r\n <div class=\"history-cards-container\">\r\n @if (loading) {\r\n <ng-container>\r\n <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of [0,1,2,3]\">\r\n <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n <h3 class=\"loading-bg fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"></h3>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"d-flex flex-column col-6\">\r\n <span class=\"fs-11 fc-dark-gray mb-2 loading-bg\"></span>\r\n <span class=\"fs-12 fw-medium fc-black loading-bg\"></span>\r\n </div>\r\n <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n } @else {\r\n <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of previousRequests\">\r\n <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n <h3\r\n class=\"fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"\r\n (click)=\"viewForm(row?.form?.['formId'])\">{{ row?.form?.['formId'] }}</h3>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"d-flex flex-column col-6\">\r\n <span class=\"fs-11 fc-dark-gray mb-2\">{{ i18n.translate('formTableCreationDate') }}</span>\r\n <span class=\"fs-12 fw-medium fc-black\">{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</span>\r\n </div>\r\n <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n\r\n <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n {{ row?.form?.formStatus?.value }}\r\n </ds-status>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n @if (pageView.value === 'list') {\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"previousRequests?.length && !loading\">\r\n <thead>\r\n <tr>\r\n <th>{{ i18n.translate('formTableFormId') }}</th>\r\n <th>{{ i18n.translate('formTableCreationDate') }}</th>\r\n <th>{{ i18n.translate('Status') }}</th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody *ngFor=\"let row of previousRequests\">\r\n <tr>\r\n <td>\r\n <span class=\"fw-medium cursor-pointer underline fw-bold \" (click)=\"viewForm(row?.form?.['formId'])\">\r\n {{ row?.form?.['formId'] }}\r\n </span>\r\n </td>\r\n <td>{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</td>\r\n <td>\r\n <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n {{ row?.form?.formStatus?.value }}\r\n </ds-status>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ds-loading-table *ngIf=\"loading\" [cols]=\"4\" [rows]=\"4\"></ds-loading-table>\r\n </div>\r\n }\r\n @if (!previousRequests?.length && !loading) {\r\n <ng-container *ngTemplateOutlet=\"emptyMessage\"></ng-container>\r\n }\r\n </section>\r\n </div>\r\n</section>\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n (backdropClick)=\"isOpen = false\"\r\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"isOpen\"\r\n>\r\n <form [formGroup]=\"filterFormGroup\">\r\n <div class=\"filter-container\">\r\n <div class=\"popup-header border-bottom pb-2\">\r\n <h3 class=\"fs-16 fc-black fw-medium\">{{ i18n.translate('filters') }}</h3>\r\n </div>\r\n <div class=\"d-flex flex-column gap-4 gap-md-3 filter-section bc-white mt-0 pt-3\">\r\n\r\n <app-custom-searchable\r\n class=\"section-item\"\r\n formControlName=\"status\"\r\n label=\"{{ i18n.translate('status') }}\"\r\n [options]=\"statuses\"\r\n [displayedLabel]=\"'value'\"\r\n [key]=\"'key'\">\r\n </app-custom-searchable>\r\n\r\n <app-custom-searchable\r\n class=\"section-item\"\r\n formControlName=\"year\"\r\n label=\"{{ i18n.translate('year') }}\"\r\n [options]=\"yearsOptions\"\r\n [displayedLabel]=\"'value'\"\r\n [key]=\"'key'\">\r\n </app-custom-searchable>\r\n\r\n <app-custom-searchable\r\n class=\"section-item\"\r\n formControlName=\"month\"\r\n label=\"{{ i18n.translate('month') }}\"\r\n [options]=\"monthsOptions\"\r\n [displayedLabel]=\"'value'\"\r\n [key]=\"'key'\">\r\n </app-custom-searchable>\r\n\r\n <div class=\"d-flex align-items-center gap-3 mt-4\">\r\n <ds-button shape=\"outline\" size=\"small\" (click)=\"clearFilters()\">\r\n <span class=\"fs-12\"> {{ i18n.translate('clear') }} </span>\r\n </ds-button>\r\n <ds-button class=\"w-100\" size=\"small\" (click)=\"applyFilters()\">\r\n <span class=\"fs-12\">{{ i18n.translate('applyFilters') }} </span>\r\n </ds-button>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</ng-template>\r\n\r\n\r\n <ng-template #emptyMessage>\r\n <ds-message label=\"{{i18n.translate('NoData')}}\"></ds-message>\r\n </ng-template>\r\n", styles: [".history-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem 0}.filter-section ::ng-deep .mat-form-field.mat-primary{margin-bottom:0}.filter-section ::ng-deep .select-form-field{--placeholder-fc: var(--dark-gray)}.filter-section ::ng-deep .select-datepicker{--input-width: 200px}table thead{display:none}:host .mat-button-toggle-group{--toggle-bg: var(--white);box-shadow:var(--box-shadow)}:host table{--th-bg: var(--gray);--td-bg: var(--white);--tr-even-bc: var(--white);--tr-odd-bc: var(--white)}ds-button[square]::part(base){--btn-padding: 0}@media (min-width: 768px){.history-sidenav{--sidenav-width: 800px}}:host ::ng-deep .select-filter{--input-height: 35px;--input-width: 120px;--input-border: 1px solid var(--white) !important;--input-border-focuse: 1px solid var(--white);--input-border-active: 1px solid var(--white);box-shadow:var(--box-shadow);--input-bg: var(--white) !important}:host ::ng-deep .decisions-container{max-height:340px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out;height:340px}@media (max-width: 768px){:host ::ng-deep .decisions-container{max-height:320px;height:320px}}[dir=rtl] :host ::ng-deep .decisions-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){:host ::ng-deep .decisions-container--name,:host ::ng-deep .decisions-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] :host ::ng-deep .decisions-container--name{max-width:initial}}:host ::ng-deep .decisions-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){:host ::ng-deep .decisions-container--item h4{max-width:calc(100% - 200px);display:inline-block}}:host ::ng-deep .decisions-container--item:not(:last-child){margin-bottom:.75rem}:host ::ng-deep .decisions-container--item ds-status::part(base){--status-width: 60px}:host ::ng-deep .decisions-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}:host ::ng-deep .decisions-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){:host ::ng-deep .decisions-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .decisions-title{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}::ng-deep .main-portal mat-form-field.no-padding .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep ds-button[hidden]{display:none!important}ds-button[circle]::part(base){--btn-color: inherit;--btn-border-color: inherit;--btn-bg-color: inherit;--btn-height: 25px;--btn-min-width: 25px}ds-button[circle][color=red]{--btn-bg-color: var(--red)}ds-button[circle][color=red]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=green]{--btn-bg-color: var(--green)}ds-button[circle][color=green]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=yellow]{--btn-bg-color: var(--yellow)}ds-button[circle][color=yellow]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]{--btn-bg-color: var(--coral)}ds-button[circle][color=coral]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]:hover svg path,ds-button[circle][color=coral]:hover svg line{fill:var(--coral)}ds-button[circle][color=orange]{--btn-bg-color: var(--orange)}ds-button[circle][color=orange]:hover{--btn-bg-color: var(--white)}@media (min-width: 991px){.decisions-container--item .decisions-container--status{width:0;transition:var(--default-transition)}}@media (min-width: 991px){.decisions-container--item:hover .decisions-container--status{transition:var(--default-transition);width:auto;height:auto;right:1.5rem}}::ng-deep .mat-tooltip{max-width:187px;background:#1d252d}::ng-deep ds-button.dots::part(base){text-decoration:none;padding:0;min-width:auto}@media (max-width: 300px){::ng-deep ds-button[shape=text]::part(base){padding:0 5px}::ng-deep ds-button.mat-menu-trigger::part(base){padding:0 5px}}.search-form-input{color:var(--black);font-weight:var(--font-medium);padding:0 .75rem;border:none;height:100%}.search-form-input::placeholder{color:var(--dark-gray);font-weight:var(--font-regular)}::ng-deep .select-user-dropdown{min-width:300px}::ng-deep .filter-container{background-color:var(--white);padding:1.5rem;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i6$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: StatusStylePipe, name: "statusClass" }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
|
|
6446
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: PreviousRequestsComponent, isStandalone: true, selector: "app-history", ngImport: i0, template: "<section class=\"main-sidenav history-sidenav\">\r\n <div class=\"sidenav-title\">\r\n <h3>{{ i18n.translate('PreviousRequests') }}</h3>\r\n <ds-button class=\"close-sidenav\" (click)=\"closeSidenav()\" icon>\r\n <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n </ds-button>\r\n </div>\r\n\r\n <div class=\"sidenav-body bc-light-gray\">\r\n <section class=\"p-3\">\r\n <header class=\"d-flex align-items-center justify-content-between gap-2 mb-3\">\r\n <h2 class=\"fs-20 fw-medium fc-black mb-0 d-flex align-items-center flex-grow-1 gap-3\">\r\n {{ i18n.translate('AllRequests') }}\r\n <span class=\"title-count fs-14 fw-normal\">{{ previousRequests?.length ? previousRequests?.length : '0' }}</span>\r\n </h2>\r\n <ds-button icon size=\"small\" (click)=\"isOpen = !isOpen\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\r\n <ds-icon icon=\"filter\" class=\"fc-coral fs-20\" slot=\"prefix\"></ds-icon>\r\n </ds-button>\r\n <mat-button-toggle-group\r\n class=\"icon-toggle flex-nowrap\"\r\n #pageView=\"matButtonToggleGroup\"\r\n (click)=\"$event.stopImmediatePropagation()\"\r\n value=\"list\"\r\n >\r\n <mat-button-toggle value=\"card\">\r\n <span class=\"sfi sfi-card fs-20\"></span>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"list\">\r\n <span class=\"sfi sfi-list-dots fs-20\"></span>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </header>\r\n\r\n @if (pageView.value === 'card') {\r\n <div class=\"history-cards-container\">\r\n @if (loading) {\r\n <ng-container>\r\n <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of [0,1,2,3]\">\r\n <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n <h3 class=\"loading-bg fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"></h3>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"d-flex flex-column col-6\">\r\n <span class=\"fs-11 fc-dark-gray mb-2 loading-bg\"></span>\r\n <span class=\"fs-12 fw-medium fc-black loading-bg\"></span>\r\n </div>\r\n <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n } @else {\r\n <div class=\"p-4 line-height-1 bc-white radius-6 box-shadow\" *ngFor=\"let row of previousRequests\">\r\n <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n <h3\r\n class=\"fs-16 fw-medium flex-grow-1 mb-0 cursor-pointer underline fw-bold\"\r\n (click)=\"viewForm(row?.form?.['formId'])\">{{ row?.form?.['formId'] }}</h3>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"d-flex flex-column col-6\">\r\n <span class=\"fs-11 fc-dark-gray mb-2\">{{ i18n.translate('formTableCreationDate') }}</span>\r\n <span class=\"fs-12 fw-medium fc-black\">{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</span>\r\n </div>\r\n <div class=\"d-flex flex-column col-6 justify-content-end align-items-end\">\r\n\r\n <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n {{ row?.form?.formStatus?.value }}\r\n </ds-status>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n @if (pageView.value === 'list') {\r\n <div class=\"table-responsive\">\r\n <table *ngIf=\"previousRequests?.length && !loading\">\r\n <thead>\r\n <tr>\r\n <th>{{ i18n.translate('formTableFormId') }}</th>\r\n <th>{{ i18n.translate('formTableCreationDate') }}</th>\r\n <th>{{ i18n.translate('Status') }}</th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody *ngFor=\"let row of previousRequests\">\r\n <tr>\r\n <td>\r\n <span class=\"fw-medium cursor-pointer underline fw-bold \" (click)=\"viewForm(row?.form?.['formId'])\">\r\n {{ row?.form?.['formId'] }}\r\n </span>\r\n </td>\r\n <td>{{ row?.form?.['creationDate'] | date: 'dd/MM/yyyy hh:mm a' }}</td>\r\n <td>\r\n <ds-status [attr.status]=\"row?.form?.formStatus?.key | statusClass\">\r\n {{ row?.form?.formStatus?.value }}\r\n </ds-status>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <ds-loading-table *ngIf=\"loading\" [cols]=\"4\" [rows]=\"4\"></ds-loading-table>\r\n </div>\r\n }\r\n @if (!previousRequests?.length && !loading) {\r\n <ng-container *ngTemplateOutlet=\"emptyMessage\"></ng-container>\r\n }\r\n </section>\r\n </div>\r\n</section>\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n (backdropClick)=\"isOpen = false\"\r\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\r\n [cdkConnectedOverlayOrigin]=\"trigger\"\r\n [cdkConnectedOverlayOpen]=\"isOpen\"\r\n>\r\n <form [formGroup]=\"filterFormGroup\">\r\n <div class=\"filter-container\">\r\n <div class=\"popup-header border-bottom pb-2\">\r\n <h3 class=\"fs-16 fc-black fw-medium\">{{ i18n.translate('filters') }}</h3>\r\n </div>\r\n <div class=\"d-flex flex-column gap-4 gap-md-3 filter-section bc-white mt-0 pt-3\">\r\n\r\n <app-custom-searchable\r\n class=\"section-item\"\r\n formControlName=\"status\"\r\n label=\"{{ i18n.translate('status') }}\"\r\n [options]=\"statuses\"\r\n [displayedLabel]=\"'value'\"\r\n [key]=\"'key'\">\r\n </app-custom-searchable>\r\n\r\n <app-custom-searchable\r\n class=\"section-item\"\r\n formControlName=\"year\"\r\n label=\"{{ i18n.translate('year') }}\"\r\n [options]=\"yearsOptions\"\r\n [displayedLabel]=\"'value'\"\r\n [key]=\"'key'\">\r\n </app-custom-searchable>\r\n\r\n <app-custom-searchable\r\n class=\"section-item\"\r\n formControlName=\"month\"\r\n label=\"{{ i18n.translate('month') }}\"\r\n [options]=\"monthsOptions\"\r\n [displayedLabel]=\"'value'\"\r\n [key]=\"'key'\">\r\n </app-custom-searchable>\r\n\r\n <div class=\"d-flex align-items-center gap-3 mt-4\">\r\n <ds-button shape=\"outline\" size=\"small\" (click)=\"clearFilters()\">\r\n <span class=\"fs-12\"> {{ i18n.translate('clear') }} </span>\r\n </ds-button>\r\n <ds-button class=\"w-100\" size=\"small\" (click)=\"applyFilters()\">\r\n <span class=\"fs-12\">{{ i18n.translate('applyFilters') }} </span>\r\n </ds-button>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</ng-template>\r\n\r\n\r\n <ng-template #emptyMessage>\r\n <ds-message label=\"{{i18n.translate('NoData')}}\"></ds-message>\r\n </ng-template>\r\n", styles: [".history-cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;padding:1rem 0}.filter-section ::ng-deep .mat-form-field.mat-primary{margin-bottom:0}.filter-section ::ng-deep .select-form-field{--placeholder-fc: var(--dark-gray)}.filter-section ::ng-deep .select-datepicker{--input-width: 200px}table thead{display:none}:host .mat-button-toggle-group{--toggle-bg: var(--white);box-shadow:var(--box-shadow)}:host table{--th-bg: var(--gray);--td-bg: var(--white);--tr-even-bc: var(--white);--tr-odd-bc: var(--white)}ds-button[square]::part(base){--btn-padding: 0}@media (min-width: 768px){.history-sidenav{--sidenav-width: 800px}}:host ::ng-deep .select-filter{--input-height: 35px;--input-width: 120px;--input-border: 1px solid var(--white) !important;--input-border-focuse: 1px solid var(--white);--input-border-active: 1px solid var(--white);box-shadow:var(--box-shadow);--input-bg: var(--white) !important}:host ::ng-deep .decisions-container{max-height:340px;overflow:auto;scroll-behavior:smooth;transition:scroll-behavior .5s ease-in-out;height:340px}@media (max-width: 768px){:host ::ng-deep .decisions-container{max-height:320px;height:320px}}[dir=rtl] :host ::ng-deep .decisions-container--btn.reRequest{transform:scaleX(-1)}@media (min-width: 1200px){:host ::ng-deep .decisions-container--name,:host ::ng-deep .decisions-container--date{max-width:120px}}@media (min-width: 1200px){[dir=rtl] :host ::ng-deep .decisions-container--name{max-width:initial}}:host ::ng-deep .decisions-container--item{display:flex;align-items:center;gap:1rem;min-height:105px;overflow:hidden;position:relative;cursor:pointer}@media (min-width: 991px){:host ::ng-deep .decisions-container--item h4{max-width:calc(100% - 200px);display:inline-block}}:host ::ng-deep .decisions-container--item:not(:last-child){margin-bottom:.75rem}:host ::ng-deep .decisions-container--item ds-status::part(base){--status-width: 60px}:host ::ng-deep .decisions-container--info span{position:relative;display:flex;align-items:center;gap:.5rem}:host ::ng-deep .decisions-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){:host ::ng-deep .decisions-container--status{position:absolute;top:1rem;right:0}}:host ::ng-deep .decisions-title{display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1}::ng-deep .main-portal mat-form-field.no-padding .mat-form-field-wrapper{padding-bottom:0!important}::ng-deep ds-button[hidden]{display:none!important}ds-button[circle]::part(base){--btn-color: inherit;--btn-border-color: inherit;--btn-bg-color: inherit;--btn-height: 25px;--btn-min-width: 25px}ds-button[circle][color=red]{--btn-bg-color: var(--red)}ds-button[circle][color=red]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=green]{--btn-bg-color: var(--green)}ds-button[circle][color=green]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=yellow]{--btn-bg-color: var(--yellow)}ds-button[circle][color=yellow]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]{--btn-bg-color: var(--coral)}ds-button[circle][color=coral]:hover{--btn-bg-color: var(--white)}ds-button[circle][color=coral]:hover svg path,ds-button[circle][color=coral]:hover svg line{fill:var(--coral)}ds-button[circle][color=orange]{--btn-bg-color: var(--orange)}ds-button[circle][color=orange]:hover{--btn-bg-color: var(--white)}@media (min-width: 991px){.decisions-container--item .decisions-container--status{width:0;transition:var(--default-transition)}}@media (min-width: 991px){.decisions-container--item:hover .decisions-container--status{transition:var(--default-transition);width:auto;height:auto;right:1.5rem}}::ng-deep .mat-tooltip{max-width:187px;background:#1d252d}::ng-deep ds-button.dots::part(base){text-decoration:none;padding:0;min-width:auto}@media (max-width: 300px){::ng-deep ds-button[shape=text]::part(base){padding:0 5px}::ng-deep ds-button.mat-menu-trigger::part(base){padding:0 5px}}.search-form-input{color:var(--black);font-weight:var(--font-medium);padding:0 .75rem;border:none;height:100%}.search-form-input::placeholder{color:var(--dark-gray);font-weight:var(--font-regular)}::ng-deep .select-user-dropdown{min-width:300px}::ng-deep .filter-container{background-color:var(--white);padding:1.5rem;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: StatusStylePipe, name: "statusClass" }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
|
|
6348
6447
|
}
|
|
6349
6448
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PreviousRequestsComponent, decorators: [{
|
|
6350
6449
|
type: Component,
|
|
@@ -6856,7 +6955,7 @@ class FormSectionComponent {
|
|
|
6856
6955
|
return statusStrategy.icon;
|
|
6857
6956
|
}
|
|
6858
6957
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormSectionComponent, deps: [{ token: CoreI18nService }, { token: CoreService }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6859
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { requestDetails: "requestDetails", section: "section", form: "form", lov: "lov", isReadOnly: "isReadOnly", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, ngImport: i0, template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #approvalPanel=\"matExpansionPanel\">\r\n <mat-expansion-panel-header>\r\n\r\n <div class=\"approval-panel-container\">\r\n <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n <ds-status\r\n status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n class=\"circle-status d-none d-sm-inline-block\">\r\n <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n </ds-status>\r\n <div class=\"d-flex flex-column flex-grow-1\">\r\n <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n @if (section.header?.processedBy) {\r\n <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n {{ processingDate }}\r\n </bdi>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"approval-panel-details gap-1\">\r\n @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n <ng-container>\r\n @if (section?.header?.personTo) {\r\n <div\r\n class=\"d-flex align-items-center gap-3\"\r\n (click)=\"$event.stopImmediatePropagation();\">\r\n <div\r\n (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n @if (!section?.header?.delegatedTo) {\r\n <span\r\n class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n >{{ section?.header?.personTo }}</span>\r\n }\r\n </div>\r\n @if (section?.header?.delegatedTo) {\r\n <div\r\n class=\"d-flex align-items-center gap-3\"\r\n (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n <img\r\n class=\"rotate-arrow\"\r\n alt=\"\"\r\n src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n <span\r\n class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n\r\n @if (section?.body?.details?.['decision']?.key) {\r\n <ds-status\r\n class=\"main-status\"\r\n status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n </ds-status>\r\n }\r\n </div>\r\n\r\n <div class=\"approval-panel-toggle\">\r\n @if (approvalPanel.expanded) {\r\n <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n } @else {\r\n <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n }\r\n </div>\r\n\r\n </div>\r\n </mat-expansion-panel-header>\r\n <section class=\"border-top pt-4\">\r\n <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n </section>\r\n\r\n</mat-expansion-panel>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$
|
|
6958
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: FormSectionComponent, isStandalone: true, selector: "app-form-section", inputs: { requestDetails: "requestDetails", section: "section", form: "form", lov: "lov", isReadOnly: "isReadOnly", controllers: "controllers", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, ngImport: i0, template: "<mat-expansion-panel class=\"mb-4\" [expanded]=\"isExpanded\" hideToggle #approvalPanel=\"matExpansionPanel\">\r\n <mat-expansion-panel-header>\r\n\r\n <div class=\"approval-panel-container\">\r\n <div class=\"d-flex gap-2 flex-grow-1 approval-panel-title\">\r\n <ds-status\r\n status=\"{{statusClass(sectionStatusKey)}}\" no-opacity icon\r\n class=\"circle-status d-none d-sm-inline-block\">\r\n <ds-icon icon=\"{{statusIcon(sectionStatusKey)}}\"></ds-icon>\r\n </ds-status>\r\n <div class=\"d-flex flex-column flex-grow-1\">\r\n <span class=\"fs-16 fw-medium m-0\"> {{ sectionName }}</span>\r\n @if (section.header?.processedBy) {\r\n <bdi class=\"fs-12 fc-dark-gray fw-normal line-height-1 d-block mt-1\">\r\n {{ processingDate }}\r\n </bdi>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"approval-panel-details gap-1\">\r\n @if (!section?.body?.details?.['stage0']?.['isStage0'] || section?.body?.details?.['stage0']?.['isStage0'] === 'false') {\r\n <ng-container>\r\n @if (section?.header?.personTo) {\r\n <div\r\n class=\"d-flex align-items-center gap-3\"\r\n (click)=\"$event.stopImmediatePropagation();\">\r\n <div\r\n (click)=\"toggleSmallProfileInfo($event, 'recipient')\"\r\n class=\"d-flex align-items-center gap-2 radius-3 h-40\"\r\n [ngClass]=\"{'user-avatar-name px-0 px-md-2': !section?.header?.delegatedTo, 'p-0': section?.header?.delegatedTo}\">\r\n <ds-avatar image=\"{{section?.header?.personToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n @if (!section?.header?.delegatedTo) {\r\n <span\r\n class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\"\r\n [ngClass]=\"{'panel-user-only': !section?.header?.delegatedTo}\"\r\n >{{ section?.header?.personTo }}</span>\r\n }\r\n </div>\r\n @if (section?.header?.delegatedTo) {\r\n <div\r\n class=\"d-flex align-items-center gap-3\"\r\n (click)=\"toggleSmallProfileInfo($event, 'delegate')\">\r\n <img\r\n class=\"rotate-arrow\"\r\n alt=\"\"\r\n src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDIxIDEzIj48cGF0aCBkPSJNMjEsNy43NjNhMS42MjEsMS42MjEsMCwwLDEtLjQ0Ny41OTMsMS4zMDYsMS4zMDYsMCwwLDEtLjc1LjE5NGMtNy4yODQsMC04LjU2OCwwLTE1Ljg1MywwSDMuNjY5TDMuNjMsOC42Yy4wNzcuMDY0LjE1OC4xMjQuMjI5LjE5NHExLjcxLDEuNjksMy40MiwzLjM4MWExLjAyMywxLjAyMywwLDAsMSwuMjkxLDEuMDc5Ljk5Mi45OTIsMCwwLDEtLjguNzE5LDEuMDUzLDEuMDUzLDAsMCwxLTEtLjMzMVEzLjgzMSwxMS43MTksMS44ODYsOS44Yy0uNDQyLS40MzctLjg3OS0uODgxLTEuMzMtMS4zMDlBNC41NzIsNC41NzIsMCwwLDEsMCw3LjgxNFY3LjE4NUEzMC43ODMsMzAuNzgzLDAsMCwxLDIuNzMsNC4zNzFjMS0xLjAyNywyLjAzOC0yLjAyNSwzLjA2My0zLjAzMkExLjA0OSwxLjA0OSwwLDEsMSw3LjI3NywyLjgyQzYuNCwzLjcsNS41MDksNC41Nyw0LjYyNSw1LjQ0NmMtLjMyMy4zMjEtLjY0NC42NDUtLjk3My45NzYuMDg0LjA1OS4xODEuMDI3LjI3LjAyNyw3LjI1OCwwLDguNTE2LDAsMTUuNzc1LDBBMS4xMjksMS4xMjksMCwwLDEsMjEsNy4yOXYuNDcyWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMC45OTkpIiBmaWxsPSIjYTU0ZWUxIi8+PC9zdmc+\"/>\r\n <div class=\"d-flex align-items-center gap-2 px-0 px-md-2 radius-3 user-avatar-name h-40\">\r\n <ds-avatar image=\"{{section?.header?.delegatedToThumbnail}}\" size=\"small\" class=\"user-avatar\"></ds-avatar>\r\n <span\r\n class=\"fs-14 fw-medium d-inline-block panel-user-name text-truncate\">{{ section?.header?.delegatedTo }}</span>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n\r\n @if (section?.body?.details?.['decision']?.key) {\r\n <ds-status\r\n class=\"main-status\"\r\n status=\"{{statusClass(section?.body?.details?.['decision']?.key)}}\">{{ section?.body?.details?.['decision']?.value }}\r\n </ds-status>\r\n }\r\n </div>\r\n\r\n <div class=\"approval-panel-toggle\">\r\n @if (approvalPanel.expanded) {\r\n <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n } @else {\r\n <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n }\r\n </div>\r\n\r\n </div>\r\n </mat-expansion-panel-header>\r\n <section class=\"border-top pt-4\">\r\n <ng-container *ngComponentOutlet=\"sectionFormComponent; ndcDynamicInputs: input\"></ng-container>\r\n </section>\r\n\r\n</mat-expansion-panel>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .mat-expansion-panel-content{background:#fff!important}:host .approval-panel-container{display:grid;grid-template-columns:40% calc(60% - 45px) 20px;grid-template-areas:\"title details toggle\";gap:.75rem;place-content:space-between;align-items:center;flex-grow:1;width:100%}@media (max-width: 991px){:host .approval-panel-container{grid-template-columns:calc(100% - 45px) 20px;grid-template-areas:\"title toggle\" \"details details\"}}:host .approval-panel-container .approval-panel-title{grid-area:title}:host .approval-panel-container .panel-user-name{max-width:120px}@media (max-width: 768px){:host .approval-panel-container .panel-user-name.panel-ueser-only{max-width:140px}:host .approval-panel-container .panel-user-name:not(.panel-ueser-only){max-width:90px}}:host .approval-panel-container .approval-panel-details{display:flex;align-items:center;justify-content:space-between;grid-area:details}:host .approval-panel-container .approval-panel-toggle{grid-area:toggle;display:flex;align-items:center;justify-content:center;width:20px}:host ::ng-deep ds-avatar.user-avatar .avatar{min-width:var(--default-size, 45px)!important;width:var(--default-size, 45px)!important;height:var(--default-size, 45px)!important;padding:var(--avatar-padding, 0)!important;background-color:var(--avatar-bg, white);color:var(--avatar-color, black)!important;border:var(--avatar-border, 0)!important;border-radius:var(--avatar-radius, 50%)!important;margin:var(--avatar-margin, 0)!important;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;--default-size: 25px}@media (min-width: 768px){:host ::ng-deep ds-avatar.user-avatar .avatar{--default-size: 31px;--avatar-border: 3px solid var(--light-gray)}}@media (min-width: 768px){:host ::ng-deep .user-avatar-name{padding-inline-end:1rem!important}}:host .circle-status::part(base){--status-radius: 50%;--status-size: 18px;--status-fs: 80% }:host .panel-title{min-width:40%;width:40%}@media (max-width: 576px){:host .panel-title{min-width:100%!important;width:100%!important}}:host .panel-user-status{min-width:60%;width:60%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 576px){:host .panel-user-status{min-width:100%!important;width:100%!important}:host .panel-user-status .user-delegate{min-width:auto}:host .panel-user-status .main-status::part(base){--status-width: 50px}}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$8.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$8.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: ComponentOutletIoDirective, selector: "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ngComponentOutletNdcDynamicInputs", "ngComponentOutletNdcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DynamicModule }, { kind: "directive", type: i3$1.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
|
|
6860
6959
|
}
|
|
6861
6960
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormSectionComponent, decorators: [{
|
|
6862
6961
|
type: Component,
|
|
@@ -6902,7 +7001,7 @@ class MainRequestDetailsComponent {
|
|
|
6902
7001
|
return this.section?.body?.details?.['expandStage'] === 'true';
|
|
6903
7002
|
}
|
|
6904
7003
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MainRequestDetailsComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6905
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: MainRequestDetailsComponent, isStandalone: true, selector: "app-main-request-details", inputs: { section: "section", lov: "lov", form: "form" }, ngImport: i0, template: "<mat-accordion class=\"primary-accordion main-request-accordion border-top\">\r\n <mat-expansion-panel\r\n [expanded]=\"isExpanded || form?.sections?.length === 1\"\r\n class=\"mb-3\"\r\n hideToggle\r\n #requestPanel=\"matExpansionPanel\"\r\n >\r\n <mat-expansion-panel-header>\r\n <h2 class=\"fs-16 fw-medium fc-coral m-0 flex-grow-1\">\r\n {{ i18n.translate(\"requestDetailsTitle\") }}\r\n </h2>\r\n @if (requestPanel.expanded) {\r\n <div class=\"d-inline-flex align-items-center gap-2\">\r\n <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n </div>\r\n } @else {\r\n <div class=\"d-inline-flex align-items-center gap-2\">\r\n <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n </div>\r\n }\r\n </mat-expansion-panel-header>\r\n <section class=\"default-box box-shadow p-4 rounded-4\">\r\n <ng-content></ng-content>\r\n </section>\r\n </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".main-request-accordion{--accordion-height: 65px;--accordion-radius: 0 0 4px 4px;--accordion-shadow: 0 7px 10px rgba(var(--rgb-black), 3%);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--gray);--panel-padding: 0 1.5rem;--panel-body-padding: 0 0 1.5rem;position:relative;z-index:1}@media (max-width: 576px){.main-request-accordion{--accordion-height: 55px;--panel-padding: 0 1rem;--panel-body-padding: 0 1rem 1rem}}.main-request-accordion .inner-accordion{--accordion-height: 44px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--light-gray);--panel-body-padding: 0;--accordion-shadow: none;--panel-padding: 0 1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$
|
|
7004
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: MainRequestDetailsComponent, isStandalone: true, selector: "app-main-request-details", inputs: { section: "section", lov: "lov", form: "form" }, ngImport: i0, template: "<mat-accordion class=\"primary-accordion main-request-accordion border-top\">\r\n <mat-expansion-panel\r\n [expanded]=\"isExpanded || form?.sections?.length === 1\"\r\n class=\"mb-3\"\r\n hideToggle\r\n #requestPanel=\"matExpansionPanel\"\r\n >\r\n <mat-expansion-panel-header>\r\n <h2 class=\"fs-16 fw-medium fc-coral m-0 flex-grow-1\">\r\n {{ i18n.translate(\"requestDetailsTitle\") }}\r\n </h2>\r\n @if (requestPanel.expanded) {\r\n <div class=\"d-inline-flex align-items-center gap-2\">\r\n <ds-icon icon=\"minus\" class=\"fs-20 fc-dark-gray\"></ds-icon>\r\n </div>\r\n } @else {\r\n <div class=\"d-inline-flex align-items-center gap-2\">\r\n <ds-icon icon=\"plus-1\" class=\"fs-20 fc-coral\"></ds-icon>\r\n </div>\r\n }\r\n </mat-expansion-panel-header>\r\n <section class=\"default-box box-shadow p-4 rounded-4\">\r\n <ng-content></ng-content>\r\n </section>\r\n </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".main-request-accordion{--accordion-height: 65px;--accordion-radius: 0 0 4px 4px;--accordion-shadow: 0 7px 10px rgba(var(--rgb-black), 3%);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--gray);--panel-padding: 0 1.5rem;--panel-body-padding: 0 0 1.5rem;position:relative;z-index:1}@media (max-width: 576px){.main-request-accordion{--accordion-height: 55px;--panel-padding: 0 1rem;--panel-body-padding: 0 1rem 1rem}}.main-request-accordion .inner-accordion{--accordion-height: 44px;--accordion-bc: var(--light-gray);--accordion-bc-active: var(--white);--accordion-border: 1px solid var(--light-gray);--accordion-border-active: 1px solid var(--light-gray);--panel-body-padding: 0;--accordion-shadow: none;--panel-padding: 0 1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2$8.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$8.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$8.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }] });
|
|
6906
7005
|
}
|
|
6907
7006
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MainRequestDetailsComponent, decorators: [{
|
|
6908
7007
|
type: Component,
|
|
@@ -7122,7 +7221,7 @@ class HeaderComponent {
|
|
|
7122
7221
|
this.sidenavService.sideNavOpened.next(!this.isSidenavOpened);
|
|
7123
7222
|
}
|
|
7124
7223
|
location = location;
|
|
7125
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$
|
|
7224
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$6.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
|
|
7126
7225
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: HeaderComponent, isStandalone: true, selector: "app-header", ngImport: i0, template: "<ng-container *ngIf=\"!isMobile\">\r\n <mat-toolbar\r\n class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n >\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <ds-button\r\n shape=\"flat\"\r\n icon\r\n color=\"light-gray\"\r\n square\r\n (click)=\"toggleSideNav()\"\r\n >\r\n <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n </ds-button>\r\n\r\n <a [href]=\"location.origin\">\r\n <figure class=\"m-0 d-flex\">\r\n <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n </figure>\r\n </a>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <ds-button\r\n shape=\"flat\"\r\n color=\"light-gray\"\r\n class=\"user-menu-btn\"\r\n [matMenuTriggerFor]=\"userMenu\"\r\n >\r\n <ds-avatar\r\n image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{userData?.email}}\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user2.jpg'\"\r\n slot=\"prefix\"\r\n class=\"avatar\"\r\n >\r\n </ds-avatar>\r\n\r\n <span class=\"fs-14 fw-medium fc-black\">\r\n {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n </span>\r\n\r\n <ds-icon\r\n slot=\"suffix\"\r\n icon=\"arrow\"\r\n class=\"fc-dark-gray fs-16\"\r\n ></ds-icon>\r\n </ds-button>\r\n </div>\r\n </mat-toolbar>\r\n\r\n <!-- User Menu -->\r\n <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n <div mat-menu-item>\r\n <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n <br />\r\n <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n </div>\r\n <button mat-menu-item (click)=\"setLanguage()\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n <span class=\"fs-14 fw-medium fc-black\">{{\r\n translate.translate('otherLang')\r\n }}</span>\r\n </div>\r\n </button>\r\n <button mat-menu-item (click)=\"logout()\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n <span class=\"fs-14 fw-medium fc-black\">{{\r\n translate.translate('logout')\r\n }}</span>\r\n </div>\r\n </button>\r\n </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}.main-logo{display:block;width:auto;height:30px;object-fit:contain}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.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: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
|
|
7127
7226
|
}
|
|
7128
7227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
@@ -7134,7 +7233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
7134
7233
|
MatMenuModule,
|
|
7135
7234
|
MatToolbarModule
|
|
7136
7235
|
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"!isMobile\">\r\n <mat-toolbar\r\n class=\"align-items-center justify-content-between gap-3 border-bottom\"\r\n >\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <ds-button\r\n shape=\"flat\"\r\n icon\r\n color=\"light-gray\"\r\n square\r\n (click)=\"toggleSideNav()\"\r\n >\r\n <ds-icon icon=\"burger-menu-1\" class=\"fs-24 fc-dark-gray\"></ds-icon>\r\n </ds-button>\r\n\r\n <a [href]=\"location.origin\">\r\n <figure class=\"m-0 d-flex\">\r\n <img class=\"main-logo\" src=\"assets/images/hub.svg\" alt=\"\" />\r\n </figure>\r\n </a>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <ds-button\r\n shape=\"flat\"\r\n color=\"light-gray\"\r\n class=\"user-menu-btn\"\r\n [matMenuTriggerFor]=\"userMenu\"\r\n >\r\n <ds-avatar\r\n image=\"/group/i-gate/wm-bpm/forms/-/proxy/portrait?email={{userData?.email}}\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user2.jpg'\"\r\n slot=\"prefix\"\r\n class=\"avatar\"\r\n >\r\n </ds-avatar>\r\n\r\n <span class=\"fs-14 fw-medium fc-black\">\r\n {{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}\r\n </span>\r\n\r\n <ds-icon\r\n slot=\"suffix\"\r\n icon=\"arrow\"\r\n class=\"fc-dark-gray fs-16\"\r\n ></ds-icon>\r\n </ds-button>\r\n </div>\r\n </mat-toolbar>\r\n\r\n <!-- User Menu -->\r\n <mat-menu #userMenu=\"matMenu\" class=\"user-menu\">\r\n <div mat-menu-item>\r\n <span class=\"fs-14\">{{ translate.translate('welcome') }}, </span>\r\n <br />\r\n <span class=\"fs-14 fw-medium line-height-1\">{{ coreService.getShortName( coreService?.loggedInUserData?.['name']) }}</span>\r\n </div>\r\n <button mat-menu-item (click)=\"setLanguage()\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <ds-icon icon=\"globe\" class=\"fs-25 fc-purple\"></ds-icon>\r\n <span class=\"fs-14 fw-medium fc-black\">{{\r\n translate.translate('otherLang')\r\n }}</span>\r\n </div>\r\n </button>\r\n <button mat-menu-item (click)=\"logout()\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <ds-icon icon=\"logout\" class=\"fs-25 fc-red\"></ds-icon>\r\n <span class=\"fs-14 fw-medium fc-black\">{{\r\n translate.translate('logout')\r\n }}</span>\r\n </div>\r\n </button>\r\n </mat-menu>\r\n</ng-container>\r\n", styles: [".test-user-agent{position:fixed;top:90px;width:100%;z-index:99999;color:#fff}ds-button[square].burger-menu::part(base){--btn-padding: 10px;margin-bottom:-1px;width:37px;height:37px;--default-size: 37px}[dir=rtl] :host ds-button::part(overlay){inset:0}mat-toolbar{background-color:var(--main-toolbar-bc);height:var(--main-toolbar-height);position:fixed;top:0;z-index:var(--main-toolbar-zIndex);border-bottom:1px solid var(--light-gray)!important}mat-toolbar .logo img{min-width:100px}.main-logo{display:block;width:auto;height:30px;object-fit:contain}@media (max-width: 991px){.user-menu-btn::part(base){border:0px;padding:0;--default-size: 40px}.user-menu-btn::part(overlay){border-radius:50%}.user-menu-btn::part(label),.user-menu-btn::part(suffix){display:none}}:host::ng-deep .avatar{min-width:24px;width:24px;height:24px;background-color:transparent}:host::ng-deep ds-button.add::part(base){--btn-bg-color: var(--coral)}@media (max-width: 991px){:host::ng-deep .avatar{min-width:40px;width:40px;height:40px}:host::ng-deep .avatar .avatar--x-small{--default-size: 40px}}.linkS{position:fixed;z-index:2;bottom:100px;right:20px}.dashboard-menu-icon{display:inline-flex;align-items:center;justify-content:center;min-width:56px;width:56px;height:56px;border-radius:50%;background-color:var(--coral);margin-bottom:10px}::ng-deep .inside-mobile-app{--main-toolbar-height: 0px}::ng-deep ds-button.transparent::part(base){--btn-bg-color: transparent;--btn-border-color: transparent;--btn-overlay-color: transparent}::ng-deep .mat-divider-vertical{border-right-color:var(--black)}.mat-divider{--mat-divider-width: 1px;--mat-divider-color: var(--dark-gray)}.header-search{width:500px}@media (max-width: 1130px){.header-search{width:200px}}\n"] }]
|
|
7137
|
-
}], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$
|
|
7236
|
+
}], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$6.Router }, { type: undefined, decorators: [{
|
|
7138
7237
|
type: Inject,
|
|
7139
7238
|
args: [PLATFORM_ID]
|
|
7140
7239
|
}] }] });
|
|
@@ -7276,13 +7375,13 @@ class SideNavComponent {
|
|
|
7276
7375
|
}
|
|
7277
7376
|
this.router.navigate([url]);
|
|
7278
7377
|
}
|
|
7279
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i2$
|
|
7378
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i2$6.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
7280
7379
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SideNavComponent, isStandalone: true, selector: "app-side-nav", inputs: { isOpened: "isOpened" }, viewQueries: [{ propertyName: "MenuTrigger", first: true, predicate: ["MenuTrigger"], descendants: true }], ngImport: i0, template: "<aside>\r\n <div class=\"header d-flex d-lg-none\">\r\n <div class=\"d-flex h-100 mt-auto justify-content-between w-100\">\r\n <h1 class=\"fs-26 fw-bold fc-white logo\">academy</h1>\r\n <ds-button size=\"small\" color=\"purple\" class=\"close purple\" (click)=\"closeSidenav()\">\r\n <ds-icon icon=\"close\" class=\"fs-15 fc-white\"></ds-icon>\r\n </ds-button>\r\n </div>\r\n </div>\r\n <nav>\r\n <ul>\r\n <!-- (mouseenter)=\"menuMobile ? null : MenuTrigger.openMenu()\"-->\r\n <!-- (click)=\"goto(item.routerLink,item.matmenu) -->\r\n @for (item of Menu; track $index) {\r\n @if (item.matmenu) {\r\n <li\r\n (click)=\"closeSidenav();navigateTo(item)\" matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n [routerLinkActive]=\"'active'\" (click)=\"goto(item.routerLink!,item.matmenu)\" #MenuTrigger=\"matMenuTrigger\"\r\n [matMenuTriggerFor]=\"menuMenu\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n <span class=\"menu-label\">\r\n {{ item.name }}\r\n </span>\r\n </li>\r\n <mat-menu #menuMenu=\"matMenu\" class=\"aside-menu visible-{{item.matmenu}}\">\r\n <app-mat-menu [title]=\"item.name \" [icon]=\"item.icon\" [list]=\"item.List\"></app-mat-menu>\r\n </mat-menu>\r\n } @else {\r\n <li\r\n (click)=\"closeSidenav();navigateTo(item)\" matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n [routerLinkActive]=\"'active'\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n <span class=\"menu-label\">\r\n {{ item.name }}\r\n </span>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </nav>\r\n</aside>\r\n", styles: [":host ::ng-deep aside{min-width:var(--main-aside-width);width:var(--main-aside-width);height:calc(100vh - var(--main-toolbar-height));display:flex;position:var(--main-aside-position);right:var(--main-aside-right);left:var(--main-aside-left);top:var(--main-toolbar-height);z-index:var(--main-toolbar-zIndex);background-color:var(--main-aside-bc);transform:var(--main-aside-transform);transition:all .5s cubic-bezier(.685,.0473,.346,1)}@media (max-width: 1024px){:host ::ng-deep aside{height:100%;flex-direction:column;--main-toolbar-height: 0}}:host ::ng-deep aside nav{width:100%}:host ::ng-deep aside ul{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:0rem;margin:37px 0;list-style:none;counter-reset:itemCounter}:host ::ng-deep aside ul li{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;max-width:calc(var(--main-aside-width-active) - 15px);width:100%;gap:var(--gap-width, 2.5rem);padding:3px 0 3px 10px;cursor:pointer;color:var(--main-aside-item-fc);border-radius:0;transition:var(--default-transition)}[dir=rtl] :host ::ng-deep aside ul li{padding:3px 10px 3px 0!important}@media (max-width: 1024px){@keyframes liAnimation{0%{transform:translateY(-500px)}to{transform:translateY(0)}}}:host ::ng-deep aside ul li.active,:host ::ng-deep aside ul li:hover{background-color:var(--main-aside-item-bc)}[dir=ltr] :host ::ng-deep aside ul li.active,[dir=ltr] :host ::ng-deep aside ul li:hover{border-left:5px solid var(--coral)}[dir=rtl] :host ::ng-deep aside ul li.active,[dir=rtl] :host ::ng-deep aside ul li:hover{border-right:5px solid var(--coral)}:host ::ng-deep aside ul li .menu-label{font-size:var(--main-aside-item-fs);flex-grow:1;opacity:1;min-width:calc(var(--main-aside-width-active) - 2rem - 40px);display:var(--main-aside-item-display)}:host ::ng-deep aside .header{background-color:#0003!important;padding:15px;flex-direction:row}:host ::ng-deep aside .header div{display:flex;align-items:center;margin-top:auto}:host ::ng-deep aside .footer{margin-top:auto;margin-bottom:80px;padding:0 30px}:host ::ng-deep aside ds-icon{font-size:1.55rem;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;min-width:40px;width:40px;height:40px}:host ::ng-deep ds-button.close::part(base){height:37px;width:37px}:host ::ng-deep ds-button.close ds-icon{font-size:18px;min-width:18px;width:18px;height:18px}:host ::ng-deep .viewAll:hover{background-color:var(--purple)}:host ::ng-deep .viewAll:hover span{color:var(--white)}:host ::ng-deep .justify-content-between{justify-content:space-between}:host ::ng-deep .flex-column{flex-direction:column}:host ::ng-deep .d-flex{display:flex}:host ::ng-deep .w-100{width:100%}:host ::ng-deep .gap-3{gap:1rem!important}:host ::ng-deep ds-button.purple::part(base){--btn-border-color: var(--purple)}:host ::ng-deep ds-button.purple::part(overlay){--btn-overlay-color: var(--purple)}:host ::ng-deep ds-button.secondary::part(base){--btn-border-color: var(--secondary)}:host ::ng-deep ds-button.secondary::part(overlay){--btn-overlay-color: var(--secondary)}@media (min-width: 1024px){:host ::ng-deep .d-md-none{display:none!important}}@media (max-height: 430px){:host ::ng-deep aside .header{margin-bottom:50px}:host ::ng-deep aside nav{padding:15px 0 0;overflow:auto}:host ::ng-deep aside .footer{margin-bottom:20px}}@media (max-height: 300px){:host ::ng-deep aside .header{margin-bottom:5px}}:host ::ng-deep .logo{color:#fff}::ng-deep .aside-menu .mat-mdc-menu-content{border:none;box-shadow:none;padding:0!important}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$2.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: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
|
|
7281
7380
|
}
|
|
7282
7381
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SideNavComponent, decorators: [{
|
|
7283
7382
|
type: Component,
|
|
7284
7383
|
args: [{ selector: 'app-side-nav', standalone: true, imports: [RouterLinkActive, RouterLink, MatTooltipModule, MatMenu, MatMenuTrigger], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<aside>\r\n <div class=\"header d-flex d-lg-none\">\r\n <div class=\"d-flex h-100 mt-auto justify-content-between w-100\">\r\n <h1 class=\"fs-26 fw-bold fc-white logo\">academy</h1>\r\n <ds-button size=\"small\" color=\"purple\" class=\"close purple\" (click)=\"closeSidenav()\">\r\n <ds-icon icon=\"close\" class=\"fs-15 fc-white\"></ds-icon>\r\n </ds-button>\r\n </div>\r\n </div>\r\n <nav>\r\n <ul>\r\n <!-- (mouseenter)=\"menuMobile ? null : MenuTrigger.openMenu()\"-->\r\n <!-- (click)=\"goto(item.routerLink,item.matmenu) -->\r\n @for (item of Menu; track $index) {\r\n @if (item.matmenu) {\r\n <li\r\n (click)=\"closeSidenav();navigateTo(item)\" matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n [routerLinkActive]=\"'active'\" (click)=\"goto(item.routerLink!,item.matmenu)\" #MenuTrigger=\"matMenuTrigger\"\r\n [matMenuTriggerFor]=\"menuMenu\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n <span class=\"menu-label\">\r\n {{ item.name }}\r\n </span>\r\n </li>\r\n <mat-menu #menuMenu=\"matMenu\" class=\"aside-menu visible-{{item.matmenu}}\">\r\n <app-mat-menu [title]=\"item.name \" [icon]=\"item.icon\" [list]=\"item.List\"></app-mat-menu>\r\n </mat-menu>\r\n } @else {\r\n <li\r\n (click)=\"closeSidenav();navigateTo(item)\" matTooltipPosition=\"right\" matTooltip=\"{{item.name }}\"\r\n [routerLinkActive]=\"'active'\" [routerLinkActiveOptions]=\"{ exact: true }\" class=\"cursor-pointer\">\r\n <ds-icon icon=\"{{item.icon}}\" class=\"icon\"></ds-icon>\r\n <span class=\"menu-label\">\r\n {{ item.name }}\r\n </span>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n </nav>\r\n</aside>\r\n", styles: [":host ::ng-deep aside{min-width:var(--main-aside-width);width:var(--main-aside-width);height:calc(100vh - var(--main-toolbar-height));display:flex;position:var(--main-aside-position);right:var(--main-aside-right);left:var(--main-aside-left);top:var(--main-toolbar-height);z-index:var(--main-toolbar-zIndex);background-color:var(--main-aside-bc);transform:var(--main-aside-transform);transition:all .5s cubic-bezier(.685,.0473,.346,1)}@media (max-width: 1024px){:host ::ng-deep aside{height:100%;flex-direction:column;--main-toolbar-height: 0}}:host ::ng-deep aside nav{width:100%}:host ::ng-deep aside ul{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:0rem;margin:37px 0;list-style:none;counter-reset:itemCounter}:host ::ng-deep aside ul li{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;max-width:calc(var(--main-aside-width-active) - 15px);width:100%;gap:var(--gap-width, 2.5rem);padding:3px 0 3px 10px;cursor:pointer;color:var(--main-aside-item-fc);border-radius:0;transition:var(--default-transition)}[dir=rtl] :host ::ng-deep aside ul li{padding:3px 10px 3px 0!important}@media (max-width: 1024px){@keyframes liAnimation{0%{transform:translateY(-500px)}to{transform:translateY(0)}}}:host ::ng-deep aside ul li.active,:host ::ng-deep aside ul li:hover{background-color:var(--main-aside-item-bc)}[dir=ltr] :host ::ng-deep aside ul li.active,[dir=ltr] :host ::ng-deep aside ul li:hover{border-left:5px solid var(--coral)}[dir=rtl] :host ::ng-deep aside ul li.active,[dir=rtl] :host ::ng-deep aside ul li:hover{border-right:5px solid var(--coral)}:host ::ng-deep aside ul li .menu-label{font-size:var(--main-aside-item-fs);flex-grow:1;opacity:1;min-width:calc(var(--main-aside-width-active) - 2rem - 40px);display:var(--main-aside-item-display)}:host ::ng-deep aside .header{background-color:#0003!important;padding:15px;flex-direction:row}:host ::ng-deep aside .header div{display:flex;align-items:center;margin-top:auto}:host ::ng-deep aside .footer{margin-top:auto;margin-bottom:80px;padding:0 30px}:host ::ng-deep aside ds-icon{font-size:1.55rem;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;min-width:40px;width:40px;height:40px}:host ::ng-deep ds-button.close::part(base){height:37px;width:37px}:host ::ng-deep ds-button.close ds-icon{font-size:18px;min-width:18px;width:18px;height:18px}:host ::ng-deep .viewAll:hover{background-color:var(--purple)}:host ::ng-deep .viewAll:hover span{color:var(--white)}:host ::ng-deep .justify-content-between{justify-content:space-between}:host ::ng-deep .flex-column{flex-direction:column}:host ::ng-deep .d-flex{display:flex}:host ::ng-deep .w-100{width:100%}:host ::ng-deep .gap-3{gap:1rem!important}:host ::ng-deep ds-button.purple::part(base){--btn-border-color: var(--purple)}:host ::ng-deep ds-button.purple::part(overlay){--btn-overlay-color: var(--purple)}:host ::ng-deep ds-button.secondary::part(base){--btn-border-color: var(--secondary)}:host ::ng-deep ds-button.secondary::part(overlay){--btn-overlay-color: var(--secondary)}@media (min-width: 1024px){:host ::ng-deep .d-md-none{display:none!important}}@media (max-height: 430px){:host ::ng-deep aside .header{margin-bottom:50px}:host ::ng-deep aside nav{padding:15px 0 0;overflow:auto}:host ::ng-deep aside .footer{margin-bottom:20px}}@media (max-height: 300px){:host ::ng-deep aside .header{margin-bottom:5px}}:host ::ng-deep .logo{color:#fff}::ng-deep .aside-menu .mat-mdc-menu-content{border:none;box-shadow:none;padding:0!important}\n"] }]
|
|
7285
|
-
}], ctorParameters: () => [{ type: SidenavService }, { type: i2$
|
|
7384
|
+
}], ctorParameters: () => [{ type: SidenavService }, { type: i2$6.Router }], propDecorators: { isOpened: [{
|
|
7286
7385
|
type: Input
|
|
7287
7386
|
}], MenuTrigger: [{
|
|
7288
7387
|
type: ViewChild,
|
|
@@ -7342,7 +7441,7 @@ class LayoutComponent {
|
|
|
7342
7441
|
closeSideNav() {
|
|
7343
7442
|
this.sidenav.close().then(r => { });
|
|
7344
7443
|
}
|
|
7345
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutComponent, deps: [{ token: DOCUMENT }, { token: i2$
|
|
7444
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutComponent, deps: [{ token: DOCUMENT }, { token: i2$6.Router }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7346
7445
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: LayoutComponent, isStandalone: true, selector: "core-layout", inputs: { form: "form", hubContainerMini: "hubContainerMini", formTitle: "formTitle", isLoading: "isLoading", serviceBrief: "serviceBrief" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, static: true }], ngImport: i0, template: "<!--<app-header></app-header>-->\r\n<section class=\"d-flex\">\r\n<!-- <app-side-nav></app-side-nav>-->\r\n <mat-sidenav-container\r\n class=\"flex-grow-1\"\r\n [hasBackdrop]=\"true\"\r\n (backdropClick)=\"backdropClick()\"\r\n >\r\n <mat-sidenav\r\n #sidenav\r\n autoFocus=\"false\"\r\n fixedInViewport\r\n [position]=\"'end'\"\r\n (closedStart)=\"onClose()\"\r\n >\r\n <ng-container *ngComponentOutlet=\"sideContent\">\r\n<!-- <app-side-nav></app-side-nav>-->\r\n </ng-container>\r\n </mat-sidenav>\r\n <mat-sidenav-content>\r\n <main\r\n class=\"hadPadding service-wrapper\"\r\n [ngClass]=\"hubContainerMini ? 'hub-container-mini' : 'hub-container'\">\r\n\r\n <ng-content ></ng-content>\r\n <ng-content select=\"[workflow]\"></ng-content>\r\n\r\n </main>\r\n </mat-sidenav-content>\r\n </mat-sidenav-container>\r\n</section>\r\n", styles: [":host ::ng-deep .mat-drawer-container{overflow:visible;margin-top:var(--main-toolbar-height);min-height:calc(100vh - var(--main-toolbar-height));background-color:var(--body-bg)!important;z-index:initial!important;min-width:calc(100% - var(--main-aside-width));width:calc(100% - var(--main-aside-width))}:host ::ng-deep .mat-drawer-container .mat-drawer-content{display:flex;flex-direction:column;overflow:visible}.hup-wrapper :host ::ng-deep .mat-drawer-container .mat-drawer-content{min-height:auto}:host ::ng-deep footer{bottom:-65px}.mat-drawer{border-radius:10px!important;margin:1rem;box-shadow:0 8px 16px 7px rgba(var(--rgb-black),.06);background-color:var(--white)}@media (max-width: 767px){.mat-drawer{padding:0;border-radius:0;margin:0;width:100%}}.customize-btn{min-width:166px}.zer-pt{padding-top:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$3.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$3.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$3.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7347
7446
|
}
|
|
7348
7447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
@@ -7351,7 +7450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
7351
7450
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
7352
7451
|
type: Inject,
|
|
7353
7452
|
args: [DOCUMENT]
|
|
7354
|
-
}] }, { type: i2$
|
|
7453
|
+
}] }, { type: i2$6.Router }, { type: SidenavService }], propDecorators: { sidenav: [{
|
|
7355
7454
|
type: ViewChild,
|
|
7356
7455
|
args: ["sidenav", { static: true }]
|
|
7357
7456
|
}], form: [{
|
|
@@ -7599,6 +7698,10 @@ class RequestDetailsSectionComponent {
|
|
|
7599
7698
|
|
|
7600
7699
|
})*/
|
|
7601
7700
|
}
|
|
7701
|
+
timePicker = '2025-07-05T23:00:00.000Z';
|
|
7702
|
+
timePickerChange(e) {
|
|
7703
|
+
console.log(e);
|
|
7704
|
+
}
|
|
7602
7705
|
initializeTableConfig() {
|
|
7603
7706
|
this.initializeColumns();
|
|
7604
7707
|
this.initializeColumnConfig();
|
|
@@ -7661,7 +7764,7 @@ class RequestDetailsSectionComponent {
|
|
|
7661
7764
|
newForm[option.value] = [''];
|
|
7662
7765
|
});
|
|
7663
7766
|
this.formGroup = this.fb.group({
|
|
7664
|
-
|
|
7767
|
+
timePicker: new FormControl({ value: '2025-07-05T23:00:00.000Z', disabled: false }, Validators.required),
|
|
7665
7768
|
// currencyInput: new FormControl(null, Validators.required),
|
|
7666
7769
|
// emailInput: new FormControl({value: null, disabled: true}, Validators.required),
|
|
7667
7770
|
// numberInput: new FormControl(null, Validators.required),
|
|
@@ -7673,7 +7776,7 @@ class RequestDetailsSectionComponent {
|
|
|
7673
7776
|
// radio: new FormControl(null, Validators.required),
|
|
7674
7777
|
// toggle: new FormControl(null, Validators.required),
|
|
7675
7778
|
// telephone: new FormControl(null, Validators.required),
|
|
7676
|
-
|
|
7779
|
+
searchEmployee: new FormControl(null, Validators.required),
|
|
7677
7780
|
// // ...newForm,
|
|
7678
7781
|
// attachment: new FormControl(null, Validators.required),
|
|
7679
7782
|
attachmentSection: new FormControl([], Validators.required),
|
|
@@ -7706,7 +7809,7 @@ class RequestDetailsSectionComponent {
|
|
|
7706
7809
|
// attachment: new FormControl(null),
|
|
7707
7810
|
// attachmentSection: new FormControl([]),
|
|
7708
7811
|
// });
|
|
7709
|
-
this.formGroup.setValue(this.section.body.details);
|
|
7812
|
+
// this.formGroup.setValue(this.section.body.details);
|
|
7710
7813
|
// console.log(this.section.body.detils);
|
|
7711
7814
|
// console.log(this.lov?.['approverActions']?.options)
|
|
7712
7815
|
this.formGroup.valueChanges.subscribe(value => {
|
|
@@ -7799,7 +7902,7 @@ class RequestDetailsSectionComponent {
|
|
|
7799
7902
|
this.pageSize = event.pageSize;
|
|
7800
7903
|
}
|
|
7801
7904
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RequestDetailsSectionComponent, deps: [{ token: CoreI18nService }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7802
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n\r\n <app-attachment-section\r\n class=\"section-item full\"\r\n [descriptionRequired]=\"false\"\r\n label=\"Attachment section\"\r\n [commentsRequired]=\"false\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"attachmentSection\"></app-attachment-section>\r\n\r\n<!-- {{formGroup.valid}}-->\r\n<!-- <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>-->\r\n<!-- <app-checkbox\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"checkbox\"\r\n termsLabel=\"Terms and conditions\"\r\n label=\"check-box\"\r\n [containTerms]=\"true\"></app-checkbox>-->\r\n <!--\r\n <app-search-employee\r\n class=\"section-item full\"\r\n [multiple]=\"true\"\r\n [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"searchEmployee\"\r\n label=\"Search-employee\"></app-search-employee>\r\n <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n <app-custom-searchable\r\n class=\"section-item mb-0 full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"customSearchable\"\r\n label=\"Custom-searchable\"\r\n [options]=\"lov?.['approverActions']?.options\"\r\n [displayedLabel]=\"'name'\"\r\n [key]=\"'name'\"></app-custom-searchable>\r\n <app-checkbox\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"checkbox\"\r\n termsLabel=\"Terms and conditions\"\r\n label=\"check-box\"\r\n [containTerms]=\"true\"></app-checkbox>\r\n <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n\r\n <app-date-range-picker\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"datePickerRange\"\r\n label=\"Date-picker-range\"\r\n [matSuffix]=\"true\"></app-date-range-picker>\r\n <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>-->\r\n <!-- <app-toggle-button\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"toggle\"\r\n [options]=\"lov?.['decision']?.options\"\r\n label=\"Toggle-button\"\r\n [displayedLabel]=\"'description'\"\r\n [key]=\"'value'\"></app-toggle-button>-->\r\n <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\r\n <app-file-uploader\r\n class=\"section-item full\"\r\n [callApi]=\"true\"\r\n [isReadOnly]=\"isReadOnly\"\r\n [multiple]=\"false\"\r\n label=\"attachment\"\r\n formControlName=\"attachment\"></app-file-uploader>\r\n\r\n <app-attachment-section\r\n class=\"section-item full\"\r\n [descriptionRequired]=\"false\"\r\n label=\"Attachment section\"\r\n [commentsRequired]=\"false\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"attachmentSection\"></app-attachment-section>\r\n-->\r\n\r\n\r\n\r\n <!-- <app-table\r\n [columnsConfig]=\"columnsConfig\"\r\n [columns]=\"columns\"\r\n [isError]=\"isError\"\r\n [isLoading]=\"isLoading\"\r\n [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n [totalElements]=\"totalElements\"\r\n (pageChange)=\"pageChanged($event)\"\r\n class=\"new-primary-table full\">\r\n </app-table> -->\r\n\r\n<!-- <app-datepicker\r\n class=\"section-item full\"\r\n [isReadOnly]=\"false\"\r\n formControlName=\"datePicker\"\r\n [matSuffix]=\"true\"\r\n label=\"Date-picker\"></app-datepicker>-->\r\n\r\n\r\n </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n <div class=\"mt-4\">\r\n <lib-action-buttons\r\n [lovOptions]=\"lov?.['decision']?.options\"\r\n [lovType]=\"lov?.['decision']?.type\"\r\n [section]=\"section\"\r\n [form]=\"form\"\r\n [sections]=\"form.sections\"\r\n [showApprovalCycle]=\"true\"\r\n [customCall]=\"false\"\r\n [fieldsForm]=\"formGroup\"\r\n (customCallEmit)=\"customCallSubmit($event)\"\r\n (resetFormEmit)=\"resetForm()\"\r\n />\r\n </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type:
|
|
7905
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: RequestDetailsSectionComponent, isStandalone: true, selector: "app-request-details-section", inputs: { isReadOnly: "isReadOnly", section: "section", form: "form", lov: "lov", className: "className" }, ngImport: i0, template: "<div>\r\n <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n <app-search-employee\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"searchEmployee\"\r\n label=\"Search-employee\">\r\n </app-search-employee>\r\n <!-- <app-attachment-section\r\n class=\"section-item full\"\r\n [descriptionRequired]=\"false\"\r\n label=\"Attachment section\"\r\n [commentsRequired]=\"false\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"attachmentSection\"></app-attachment-section> -->\r\n \r\n <!-- <app-timepicker\r\n label=\"time picker\"\r\n formControlName=\"timePicker\" \r\n [isReadOnly]=\"false\" placeholder=\"Select time\">\r\n </app-timepicker> -->\r\n <!-- <div class=\"table-responsive full\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>time</th>\r\n </tr>\r\n </thead>\r\n <tbody formArrayName=\"candidates\">\r\n <tr>\r\n <td>\r\n <app-timepicker\r\n [ngModel]=\"timePicker\" \r\n (ngModelChange)=\"timePickerChange($event)\"\r\n [isReadOnly]=\"false\" placeholder=\"Select time\"\r\n [insideTable]=\"true\">\r\n </app-timepicker>\r\n </td>\r\n </tbody>\r\n </table>\r\n </div> -->\r\n <!-- <app-timepicker\r\n label=\"time picker\"\r\n [(ngModel)]=\"timePicker\" (ngModelChange)=\"timePickerChange($event)\" [ngModelOptions]=\"{standalone: true}\"\r\n placeholder=\"test placeholder\"></app-timepicker> -->\r\n\r\n<!-- {{formGroup.valid}}-->\r\n<!-- <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>-->\r\n<!-- <app-checkbox\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"checkbox\"\r\n termsLabel=\"Terms and conditions\"\r\n label=\"check-box\"\r\n [containTerms]=\"true\"></app-checkbox>-->\r\n <!--\r\n <app-search-employee\r\n class=\"section-item full\"\r\n [multiple]=\"true\"\r\n [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"searchEmployee\"\r\n label=\"Search-employee\"></app-search-employee>\r\n <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n <app-custom-searchable\r\n class=\"section-item mb-0 full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"customSearchable\"\r\n label=\"Custom-searchable\"\r\n [options]=\"lov?.['approverActions']?.options\"\r\n [displayedLabel]=\"'name'\"\r\n [key]=\"'name'\"></app-custom-searchable>\r\n <app-checkbox\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"checkbox\"\r\n termsLabel=\"Terms and conditions\"\r\n label=\"check-box\"\r\n [containTerms]=\"true\"></app-checkbox>\r\n <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n\r\n <app-date-range-picker\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"datePickerRange\"\r\n label=\"Date-picker-range\"\r\n [matSuffix]=\"true\"></app-date-range-picker>\r\n <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>-->\r\n <!-- <app-toggle-button\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"toggle\"\r\n [options]=\"lov?.['decision']?.options\"\r\n label=\"Toggle-button\"\r\n [displayedLabel]=\"'description'\"\r\n [key]=\"'value'\"></app-toggle-button>-->\r\n <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\r\n <app-file-uploader\r\n class=\"section-item full\"\r\n [callApi]=\"true\"\r\n [isReadOnly]=\"isReadOnly\"\r\n [multiple]=\"false\"\r\n label=\"attachment\"\r\n formControlName=\"attachment\"></app-file-uploader>\r\n\r\n <app-attachment-section\r\n class=\"section-item full\"\r\n [descriptionRequired]=\"false\"\r\n label=\"Attachment section\"\r\n [commentsRequired]=\"false\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"attachmentSection\"></app-attachment-section>\r\n-->\r\n\r\n\r\n\r\n <!-- <app-table\r\n [columnsConfig]=\"columnsConfig\"\r\n [columns]=\"columns\"\r\n [isError]=\"isError\"\r\n [isLoading]=\"isLoading\"\r\n [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n [totalElements]=\"totalElements\"\r\n (pageChange)=\"pageChanged($event)\"\r\n class=\"new-primary-table full\">\r\n </app-table> -->\r\n\r\n<!-- <app-datepicker\r\n class=\"section-item full\"\r\n [isReadOnly]=\"false\"\r\n formControlName=\"datePicker\"\r\n [matSuffix]=\"true\"\r\n label=\"Date-picker\"></app-datepicker>-->\r\n\r\n\r\n </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n <div class=\"mt-4\">\r\n <lib-action-buttons\r\n [lovOptions]=\"lov?.['decision']?.options\"\r\n [lovType]=\"lov?.['decision']?.type\"\r\n [section]=\"section\"\r\n [form]=\"form\"\r\n [sections]=\"form.sections\"\r\n [showApprovalCycle]=\"true\"\r\n [customCall]=\"false\"\r\n [fieldsForm]=\"formGroup\"\r\n (customCallEmit)=\"customCallSubmit($event)\"\r\n (resetFormEmit)=\"resetForm()\"\r\n />\r\n </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ActionButtonsComponent, selector: "lib-action-buttons", inputs: ["lovOptions", "lovType", "fieldsForm", "form", "section", "sections", "showApprovalCycle", "customCall"], outputs: ["resetFormEmit", "customCallEmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SearchEmployeeComponent, selector: "app-search-employee", inputs: ["valueName", "className", "optional", "data", "floatLabel", "error", "showEdit", "arrayList", "isUniqueUsers"], outputs: ["selectedEmp", "onInputChange", "editDirectManger", "deleteDirectManger", "emitedDeletedValue"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
7803
7906
|
}
|
|
7804
7907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
|
|
7805
7908
|
type: Component,
|
|
@@ -7823,8 +7926,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
7823
7926
|
SearchEmployeeComponent,
|
|
7824
7927
|
AttachmentSectionComponent,
|
|
7825
7928
|
TableComponent,
|
|
7826
|
-
TranslatePipe
|
|
7827
|
-
|
|
7929
|
+
TranslatePipe,
|
|
7930
|
+
TimepickerComponent,
|
|
7931
|
+
FormsModule
|
|
7932
|
+
], template: "<div>\r\n <form [ngClass]=\"{'form-section-divide form-section':!section?.header?.readOnly,'info-section':section?.header?.readOnly}\" [formGroup]=\"formGroup\">\r\n <app-search-employee\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"searchEmployee\"\r\n label=\"Search-employee\">\r\n </app-search-employee>\r\n <!-- <app-attachment-section\r\n class=\"section-item full\"\r\n [descriptionRequired]=\"false\"\r\n label=\"Attachment section\"\r\n [commentsRequired]=\"false\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"attachmentSection\"></app-attachment-section> -->\r\n \r\n <!-- <app-timepicker\r\n label=\"time picker\"\r\n formControlName=\"timePicker\" \r\n [isReadOnly]=\"false\" placeholder=\"Select time\">\r\n </app-timepicker> -->\r\n <!-- <div class=\"table-responsive full\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>time</th>\r\n </tr>\r\n </thead>\r\n <tbody formArrayName=\"candidates\">\r\n <tr>\r\n <td>\r\n <app-timepicker\r\n [ngModel]=\"timePicker\" \r\n (ngModelChange)=\"timePickerChange($event)\"\r\n [isReadOnly]=\"false\" placeholder=\"Select time\"\r\n [insideTable]=\"true\">\r\n </app-timepicker>\r\n </td>\r\n </tbody>\r\n </table>\r\n </div> -->\r\n <!-- <app-timepicker\r\n label=\"time picker\"\r\n [(ngModel)]=\"timePicker\" (ngModelChange)=\"timePickerChange($event)\" [ngModelOptions]=\"{standalone: true}\"\r\n placeholder=\"test placeholder\"></app-timepicker> -->\r\n\r\n<!-- {{formGroup.valid}}-->\r\n<!-- <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>-->\r\n<!-- <app-checkbox\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"checkbox\"\r\n termsLabel=\"Terms and conditions\"\r\n label=\"check-box\"\r\n [containTerms]=\"true\"></app-checkbox>-->\r\n <!--\r\n <app-search-employee\r\n class=\"section-item full\"\r\n [multiple]=\"true\"\r\n [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"searchEmployee\"\r\n label=\"Search-employee\"></app-search-employee>\r\n <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n <app-custom-searchable\r\n class=\"section-item mb-0 full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"customSearchable\"\r\n label=\"Custom-searchable\"\r\n [options]=\"lov?.['approverActions']?.options\"\r\n [displayedLabel]=\"'name'\"\r\n [key]=\"'name'\"></app-custom-searchable>\r\n <app-checkbox\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"checkbox\"\r\n termsLabel=\"Terms and conditions\"\r\n label=\"check-box\"\r\n [containTerms]=\"true\"></app-checkbox>\r\n <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n\r\n <app-date-range-picker\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"datePickerRange\"\r\n label=\"Date-picker-range\"\r\n [matSuffix]=\"true\"></app-date-range-picker>\r\n <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>-->\r\n <!-- <app-toggle-button\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"toggle\"\r\n [options]=\"lov?.['decision']?.options\"\r\n label=\"Toggle-button\"\r\n [displayedLabel]=\"'description'\"\r\n [key]=\"'value'\"></app-toggle-button>-->\r\n <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\r\n <app-file-uploader\r\n class=\"section-item full\"\r\n [callApi]=\"true\"\r\n [isReadOnly]=\"isReadOnly\"\r\n [multiple]=\"false\"\r\n label=\"attachment\"\r\n formControlName=\"attachment\"></app-file-uploader>\r\n\r\n <app-attachment-section\r\n class=\"section-item full\"\r\n [descriptionRequired]=\"false\"\r\n label=\"Attachment section\"\r\n [commentsRequired]=\"false\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"attachmentSection\"></app-attachment-section>\r\n-->\r\n\r\n\r\n\r\n <!-- <app-table\r\n [columnsConfig]=\"columnsConfig\"\r\n [columns]=\"columns\"\r\n [isError]=\"isError\"\r\n [isLoading]=\"isLoading\"\r\n [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n [totalElements]=\"totalElements\"\r\n (pageChange)=\"pageChanged($event)\"\r\n class=\"new-primary-table full\">\r\n </app-table> -->\r\n\r\n<!-- <app-datepicker\r\n class=\"section-item full\"\r\n [isReadOnly]=\"false\"\r\n formControlName=\"datePicker\"\r\n [matSuffix]=\"true\"\r\n label=\"Date-picker\"></app-datepicker>-->\r\n\r\n\r\n </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n <div class=\"mt-4\">\r\n <lib-action-buttons\r\n [lovOptions]=\"lov?.['decision']?.options\"\r\n [lovType]=\"lov?.['decision']?.type\"\r\n [section]=\"section\"\r\n [form]=\"form\"\r\n [sections]=\"form.sections\"\r\n [showApprovalCycle]=\"true\"\r\n [customCall]=\"false\"\r\n [fieldsForm]=\"formGroup\"\r\n (customCallEmit)=\"customCallSubmit($event)\"\r\n (resetFormEmit)=\"resetForm()\"\r\n />\r\n </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"] }]
|
|
7828
7933
|
}], ctorParameters: () => [{ type: CoreI18nService }, { type: i4.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
|
|
7829
7934
|
type: Input
|
|
7830
7935
|
}], section: [{
|
|
@@ -8050,7 +8155,7 @@ class CoreAppComponent {
|
|
|
8050
8155
|
document.documentElement.setAttribute('dir', direction);
|
|
8051
8156
|
}
|
|
8052
8157
|
}
|
|
8053
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CoreAppComponent, deps: [{ token: SegmentDynamicLoaderService }, { token: DOCUMENT }, { token: i2$
|
|
8158
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: CoreAppComponent, deps: [{ token: SegmentDynamicLoaderService }, { token: DOCUMENT }, { token: i2$6.Router }, { token: SidenavService }, { token: CoreI18nService }, { token: CoreService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
|
|
8054
8159
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: CoreAppComponent, isStandalone: true, selector: "lib-app", providers: [
|
|
8055
8160
|
{ provide: DynamicComponentInjectorToken, useValue: { /* your value here */} }
|
|
8056
8161
|
], ngImport: i0, template: "<core-layout>\r\n @if (!loading['form']) {\r\n\r\n @if (noError) {\r\n <core-service-header\r\n [isLoading]=\"false\"\r\n [formTitle]=\"formTitle\"\r\n [isReadOnly]=\"form.sections[0].header.readOnly\"\r\n [form]=\"form\">\r\n </core-service-header>\r\n <app-workflow-section\r\n workflow\r\n [segmentDynamicLoaderService]=\"segmentDynamicLoader\"\r\n [form]=\"form\" [sections]=\"form?.['sections']\">\r\n <app-request-details-section\r\n [section]=\"form.sections[0]\" [form]=\"form\" [lov]=\"form?.lovs\" className=\"form-section\"\r\n [isReadOnly]=\"form.sections[0].header.readOnly\"></app-request-details-section>\r\n </app-workflow-section>\r\n } @else {\r\n @if (errorMessage?.length) {\r\n <ds-message></ds-message>\r\n @for (item of errorMessage; track $index) {\r\n <div class=\"d-flex justify-content-center\">\r\n <span class=\"fc-coral fs-18\" >{{ item?.['message'] }}</span>\r\n </div>\r\n }\r\n } @else {\r\n <ds-message [label]=\"'pageErrorLoading' | translate\"></ds-message>\r\n }\r\n }\r\n } @else {\r\n <core-service-header header [formTitle]=\"formTitle\" [isLoading]=\"true\">\r\n </core-service-header>\r\n }\r\n</core-layout>\r\n", styles: [""], dependencies: [{ kind: "component", type:
|
|
@@ -8072,7 +8177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
8072
8177
|
}], ctorParameters: () => [{ type: SegmentDynamicLoaderService }, { type: Document, decorators: [{
|
|
8073
8178
|
type: Inject,
|
|
8074
8179
|
args: [DOCUMENT]
|
|
8075
|
-
}] }, { type: i2$
|
|
8180
|
+
}] }, { type: i2$6.Router }, { type: SidenavService }, { type: CoreI18nService }, { type: CoreService }, { type: undefined, decorators: [{
|
|
8076
8181
|
type: Inject,
|
|
8077
8182
|
args: [PLATFORM_ID]
|
|
8078
8183
|
}] }] });
|
|
@@ -8486,5 +8591,5 @@ const MY_LIB_CONFIG_TOKEN = new InjectionToken('MyLibConfig');
|
|
|
8486
8591
|
* Generated bundle index. Do not edit.
|
|
8487
8592
|
*/
|
|
8488
8593
|
|
|
8489
|
-
export { APPROVERS, ActionButtonsComponent, ActionStateService, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, COMMENT_CONTAINER, CheckBoxComponent, CommentsDrop, ConfirmDialogComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DataValidators, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DocsUploaderComponent, FALSE_BOOL, FALSE_STRING, FEEDBACK_CONTAINER, FEEDBACK_STATUS_REQUEST, FEEDBACK_STATUS_RESPOND, FEEDBACK_STATUS_RESPONDED, FEEDBACK_STATUS_WAITING, FORM_STATUS_APPROVE, FORM_STATUS_APPROVED, FORM_STATUS_CANCEL, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECT, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, FeedBackService, FeedbackSectionComponent, Form, FormLabelComponent, FormSectionComponent, FormatAsPasswordPipe, FormatTimePipe, GETSIPORTENTRYGROUPS, GETSIPORTENTRYLOCATIONS, HAS_COMMENTS, HEADER_CONTENT_TYPE_FORM, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, HTTP_PROTOCOL_HTTP, HTTP_PROTOCOL_HTTPS, Header, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL, INBOX_STATUS_PENDING, INBOX_STATUS_PROCESSED, INBOX_STATUS_SENT, InboxItem, InfoItemComponent, InputComponent, InputCurrencyComponent, InputEmailComponent, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MultiselectComponent, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, RegexPatterns, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableComponent, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, ValidationErrorsComponent, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WORKFLOW_ITEMS, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidForAction, logFormStatus, stringToBooleanPipe, updateValueAndValidity, validateIfAction, validateOnlyWhen, validateSAID };
|
|
8594
|
+
export { APPROVERS, ActionButtonsComponent, ActionStateService, AttachmentSectionComponent, AttachmentSectionDataComponent, BaseComponent, COMMENT_CONTAINER, CheckBoxComponent, CommentsDrop, ConfirmDialogComponent, CoreAppComponent, CoreI18nService, CoreService, CustomSearchableComponent, DATE_DASH, DATE_SLASH, DATE_TIME, DONT_SHOW, DataValidators, DatePickerComponent, DateRangePickerComponent, DeleteDialogComponent, DocsUploaderComponent, FALSE_BOOL, FALSE_STRING, FEEDBACK_CONTAINER, FEEDBACK_STATUS_REQUEST, FEEDBACK_STATUS_RESPOND, FEEDBACK_STATUS_RESPONDED, FEEDBACK_STATUS_WAITING, FORM_STATUS_APPROVE, FORM_STATUS_APPROVED, FORM_STATUS_CANCEL, FORM_STATUS_CANCELLED, FORM_STATUS_COMPLETED, FORM_STATUS_NEW, FORM_STATUS_PENDING, FORM_STATUS_REJECT, FORM_STATUS_REJECTED, FORM_STATUS_SEND_BACK, FeedBackService, FeedbackSectionComponent, Form, FormLabelComponent, FormSectionComponent, FormatAsPasswordPipe, FormatTimePipe, GETSIPORTENTRYGROUPS, GETSIPORTENTRYLOCATIONS, HAS_COMMENTS, HEADER_CONTENT_TYPE_FORM, HTTP_METHOD_GET, HTTP_METHOD_POST, HTTP_METHOD_PUT, HTTP_PROTOCOL_HTTP, HTTP_PROTOCOL_HTTPS, Header, IGATE_STATIC_ASSET_PROFILE_PHOTO_URL, INBOX_STATUS_PENDING, INBOX_STATUS_PROCESSED, INBOX_STATUS_SENT, InboxItem, InfoItemComponent, InputComponent, InputCurrencyComponent, InputEmailComponent, InputMaskComponent, InputNumberComponent, InputTelephoneComponent, LANGUAGE_CODE_AR, LANGUAGE_CODE_EN, LOGOUT_URL, LayoutComponent, MY_LIB_CONFIG_TOKEN, MainRequestDetailsComponent, Messages, MultiselectComponent, MycurrencyPipe, NO_COMMENTS, NO_VALUE, PROCESS_NAME_CODE, PROFILE_CONTAINER, ProfileInfoDrop, ProfileSectionComponent, READ_ONLY, REPORT, ROLE_REQUESTER, RadioComponent, RegexPatterns, RepeatedListComponent, SECTION_ID_APPROVAL_PARTIAL_NAME, SECTION_ID_DM_PARTIAL_ROLE, SECTION_ID_EMP_INFO_APPROVAL_PARTIAL_ROLE, SECTION_ID_EXECUTE_PARTIAL_ROLE, SECTION_ID_GM_PARTIAL_ROLE, SECTION_ID_NOTHING_PARTIAL_NAME, SECTION_ID_PAYROLL_APPROVAL_PARTIAL_ROLE, SECTION_ID_PERFORM_PARTIAL_ROLE, SECTION_ID_REQUESTER_PARTIAL_NAME, SECTION_ID_REQUEST_DETAILS, SECTION_ID_SM_PARTIAL_ROLE, SECTION_ID_SVP_PARTIAL_ROLE, SECTION_ID_VP_PARTIAL_ROLE, SECTION_STATUS_APPROVED, SECTION_STATUS_PENDING, SECTION_STATUS_UNSATISFIED, SERVICE_NAME_CEP, SERVICE_NAME_DP_CREATE_FEEDBACK, SERVICE_NAME_DP_INBOX_ITEM, SERVICE_NAME_DP_LOAD_HISTORY, SERVICE_NAME_DP_SEARCH_EMPLOYEE, SERVICE_NAME_DP_UPDATE_FEEDBACK, SERVICE_NAME_DP_UPDATE_INBOX_ITEM, SERVICE_NAME_MAF, SERVICE_NAME_WM_CHILD_FORM, SERVICE_NAME_WM_DRAFT_FORM, SERVICE_NAME_WM_FORM, SERVICE_NAME_WM_GET_APPROVED_REQUEST, SERVICE_NAME_WM_GET_MY_APPROVED_REQUEST, SERVICE_NAME_WM_HTML_GENERATOR, STATE_MACHINE_ACTION_CALC, STATE_MACHINE_ACTION_COMMONAPI, STATE_MACHINE_ACTION_CONVERT, STATE_MACHINE_ACTION_EMPLOYEE_PROFILE, STATE_MACHINE_ACTION_FAILURE, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST, STATE_MACHINE_ACTION_GET_APPROVED_REQUEST_RESPONSE, STATE_MACHINE_ACTION_GET_FEEDBACK, STATE_MACHINE_ACTION_GET_INBOX_ITEM, STATE_MACHINE_ACTION_HANDLE_ERROR, STATE_MACHINE_ACTION_INBOX_ITEM_RESPONSE, STATE_MACHINE_ACTION_LOAD_FILE, STATE_MACHINE_ACTION_LOAD_FORM, STATE_MACHINE_ACTION_LOAD_HISTORY, STATE_MACHINE_ACTION_PDF, STATE_MACHINE_ACTION_PPROVED_REQUESTS, STATE_MACHINE_ACTION_PROJECT_CEP, STATE_MACHINE_ACTION_PROJECT_MAF, STATE_MACHINE_ACTION_SEARCH, STATE_MACHINE_ACTION_SEARCH_EMPLOYEE, STATE_MACHINE_ACTION_SET_FLAG, STATE_MACHINE_ACTION_SHOW_PRINT, STATE_MACHINE_ACTION_SUBMIT_FEEDBACK, STATE_MACHINE_ACTION_SUBMIT_FORM, STATE_MACHINE_ACTION_SUCCESS, STATE_MACHINE_ACTION_SUCCESS_HISTORY, STATE_MACHINE_ACTION_SUCCESS_INBOX_ITEM, STATE_MACHINE_ACTION_SUCCESS_PRINT, STATE_MACHINE_ACTION_SUCCESS_RESPONSE, STATE_MACHINE_ACTION_SUCCESS_SERVICES, STATE_MACHINE_ACTION_SUCCESS_USERS, STATE_MACHINE_ACTION_SUCCESS_WM, STATE_MACHINE_ACTION_UPDATE_FEEDBACK, STATE_MACHINE_ACTION_USER_CEP, STATE_MACHINE_ACTION_USER_MAF, STATE_MACHINE_STATUS_ERROR, STATE_MACHINE_STATUS_FETCHING, STATE_MACHINE_STATUS_IDLE, STATE_MACHINE_STATUS_RESULT, STATE_MACHINE_STATUS_SENDING, STATE_NAME_DP_GET_FEEDBACK, SearchEmployeeComponent, Section, SectionHeader, SelectComponent, ServiceHeaderComponent, SidenavService, StatusComponent, SubmitDialogComponent, TARGET_SERVER_DP, TARGET_SERVER_WM, TRUE_BOOL, TRUE_STRING, TableComponent, TableListComponent, TermsConditionsComponent, TextDirective, TextareaComponent, TimepickerComponent, TitleSectionComponent, ToggleButtonComponent, URL_SEPARATOR, ValidationErrorsComponent, WM_ACTION_SAVE, WM_ACTION_SAVE_CHANGES, WM_ACTION_SUBMIT, WORKFLOW_ITEMS, WRITE_MODE, WorkflowSectionComponent, dataURItoBlob, encodePassword, handelErrorResponse, isValidForAction, logFormStatus, stringToBooleanPipe, updateValueAndValidity, validateIfAction, validateOnlyWhen, validateSAID };
|
|
8490
8595
|
//# sourceMappingURL=bpm-core.mjs.map
|