bpm-core 0.0.59 → 0.0.61
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/esm2022/lib/components/app-component-sections/main-request-details/main-request-details.component.mjs +3 -3
- package/esm2022/lib/components/app-component-sections/service-header/service-header.component.mjs +3 -3
- package/esm2022/lib/components/app-component-sections/workflow-section/workflow-section.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/add-attachment-section/add-attachment-section.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/attachment-section/attachment-section.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/checkbox/checkbox.component.mjs +14 -7
- package/esm2022/lib/components/shared-components/form-field/control-value-accessor.directive.mjs +6 -4
- package/esm2022/lib/components/shared-components/form-field/custom-searchable-autocomplete/custom-searchable.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/date-picker/date-picker.component.mjs +4 -3
- package/esm2022/lib/components/shared-components/form-field/date-range-picker/date-range-picker.component.mjs +8 -4
- package/esm2022/lib/components/shared-components/form-field/doc-uploader/docs-uploader.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/form-label/form-label.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/input/input.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/input-currency/input-currency.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/input-email/input-email.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/input-mask/input-mask.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/input-number/input-number.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/input-telephone/input-telephone.component.mjs +23 -8
- package/esm2022/lib/components/shared-components/form-field/radio/radio.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/search-employee/search-employee.component.mjs +22 -17
- package/esm2022/lib/components/shared-components/form-field/textarea/textarea.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/toggle-button/toggle-button.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/validation-errors/validation-errors.component.mjs +1 -2
- package/esm2022/lib/testComponent/request-details-section/request-details-section.component.mjs +27 -4
- package/fesm2022/bpm-core.mjs +142 -87
- package/fesm2022/bpm-core.mjs.map +1 -1
- package/lib/components/shared-components/form-field/checkbox/checkbox.component.d.ts +3 -2
- package/lib/components/shared-components/form-field/control-value-accessor.directive.d.ts +2 -1
- package/lib/components/shared-components/form-field/input-telephone/input-telephone.component.d.ts +7 -1
- package/lib/components/shared-components/form-field/shared-imports.d.ts +2 -2
- package/lib/testComponent/request-details-section/request-details-section.component.d.ts +3 -1
- package/package.json +1 -1
- package/src/lib/assets/scss/_general.scss +64 -152
- package/src/lib/assets/scss/_upgrade.scss +6 -0
- package/src/lib/assets/scss/base.scss +21 -16
- package/src/lib/assets/scss/components/_fields.scss +307 -0
- package/src/lib/assets/scss/components/_status.scss +29 -0
- package/src/lib/assets/scss/components/_table.scss +70 -0
- package/src/lib/assets/scss/components/_toggle.scss +27 -0
package/fesm2022/bpm-core.mjs
CHANGED
|
@@ -12,7 +12,7 @@ import { NgIf, CommonModule, NgSwitchCase, DecimalPipe, DatePipe, NgClass, NgSwi
|
|
|
12
12
|
import * as i4$1 from '@angular/material/core';
|
|
13
13
|
import { MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
|
|
14
14
|
import * as i4 from '@angular/forms';
|
|
15
|
-
import { NG_VALUE_ACCESSOR, FormControl, ControlContainer, NgForm, NgControl, FormControlName, FormGroupDirective,
|
|
15
|
+
import { NG_VALUE_ACCESSOR, FormControl, ControlContainer, NgForm, Validators, NgControl, FormControlName, FormGroupDirective, ReactiveFormsModule, FormsModule, FormGroup } 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 from 'ngx-toastr';
|
|
@@ -29,35 +29,35 @@ import * as i1$4 from '@angular/material/autocomplete';
|
|
|
29
29
|
import { MatAutocomplete, MatOption, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
30
30
|
import { format } from 'date-fns';
|
|
31
31
|
import { NgxMaskDirective } from 'ngx-mask';
|
|
32
|
-
import * as
|
|
32
|
+
import * as i3$1 from 'ngx-intl-tel-input-gg';
|
|
33
33
|
import { CountryISO, SearchCountryField, NgxIntlTelInputModule } from 'ngx-intl-tel-input-gg';
|
|
34
34
|
import { MatSelect, MatOption as MatOption$1, MatLabel, MatError as MatError$1, MatFormField as MatFormField$1 } from '@angular/material/select';
|
|
35
35
|
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
36
36
|
import * as i6 from '@angular/material/button-toggle';
|
|
37
37
|
import { MatButtonToggleGroup, MatButtonToggle, MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
38
|
-
import * as i2$
|
|
38
|
+
import * as i2$2 from '@angular/material/table';
|
|
39
39
|
import { MatTableDataSource, MatTableModule, MatTable, MatColumnDef, MatCell, MatCellDef, MatHeaderCellDef, MatHeaderCell, MatRow, MatHeaderRow, MatHeaderRowDef, MatRowDef } from '@angular/material/table';
|
|
40
40
|
import * as i1$5 from '@angular/material/paginator';
|
|
41
41
|
import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
|
|
42
|
-
import * as i2$
|
|
42
|
+
import * as i2$4 from '@angular/router';
|
|
43
43
|
import { RouterLink, RouterModule, RouterLinkActive, RouterOutlet } from '@angular/router';
|
|
44
44
|
import { MatButton } from '@angular/material/button';
|
|
45
45
|
import * as i4$2 from '@angular/material/menu';
|
|
46
46
|
import { MatMenu, MatMenuTrigger, MatMenuItem, MatMenuModule } from '@angular/material/menu';
|
|
47
47
|
import { NoopScrollStrategy, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
|
|
48
48
|
import * as FileSaver from 'file-saver';
|
|
49
|
-
import * as i3$
|
|
49
|
+
import * as i3$3 from '@angular/material/tooltip';
|
|
50
50
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
51
51
|
import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
52
52
|
import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
|
|
53
|
-
import * as i2$
|
|
53
|
+
import * as i2$3 from '@angular/material/expansion';
|
|
54
54
|
import { MatAccordion, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
|
|
55
55
|
import { MatDivider } from '@angular/material/divider';
|
|
56
|
-
import * as i2$
|
|
56
|
+
import * as i2$5 from '@ngx-translate/core';
|
|
57
57
|
import { TranslateModule } from '@ngx-translate/core';
|
|
58
|
-
import * as i3$
|
|
58
|
+
import * as i3$2 from 'ng-dynamic-component';
|
|
59
59
|
import { ComponentOutletIoDirective, DynamicModule, DynamicComponentInjectorToken } from 'ng-dynamic-component';
|
|
60
|
-
import * as i3$
|
|
60
|
+
import * as i3$4 from '@angular/material/sidenav';
|
|
61
61
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
62
62
|
import * as i5$1 from '@angular/material/toolbar';
|
|
63
63
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
@@ -1770,6 +1770,7 @@ class ControlValueAccessorDirective {
|
|
|
1770
1770
|
attachments = [];
|
|
1771
1771
|
startDateControl = new FormControl();
|
|
1772
1772
|
endDateControl = new FormControl();
|
|
1773
|
+
Validators = Validators;
|
|
1773
1774
|
minDateValue;
|
|
1774
1775
|
maxDateValue;
|
|
1775
1776
|
maxDate;
|
|
@@ -1780,7 +1781,7 @@ class ControlValueAccessorDirective {
|
|
|
1780
1781
|
customMinDate;
|
|
1781
1782
|
value;
|
|
1782
1783
|
control;
|
|
1783
|
-
required
|
|
1784
|
+
required;
|
|
1784
1785
|
maxLength;
|
|
1785
1786
|
isDisabled = false;
|
|
1786
1787
|
constructor(injector, i18n, toasterService, coreService, sanitizer, fb) {
|
|
@@ -1823,15 +1824,16 @@ class ControlValueAccessorDirective {
|
|
|
1823
1824
|
else {
|
|
1824
1825
|
this.searchControl.clearValidators();
|
|
1825
1826
|
this.employeeSearchControl.clearValidators();
|
|
1826
|
-
this.searchControl.updateValueAndValidity();
|
|
1827
|
-
this.employeeSearchControl.updateValueAndValidity();
|
|
1828
1827
|
}
|
|
1828
|
+
this.searchControl.updateValueAndValidity();
|
|
1829
|
+
this.employeeSearchControl.updateValueAndValidity();
|
|
1829
1830
|
}
|
|
1830
1831
|
writeValue(value) {
|
|
1831
1832
|
this.value = value;
|
|
1832
1833
|
if (!this.value) {
|
|
1833
1834
|
this.startDateControl.setValue(null);
|
|
1834
1835
|
this.endDateControl.setValue(null);
|
|
1836
|
+
this.telephoneControl.setValue(null);
|
|
1835
1837
|
this.attachments = [];
|
|
1836
1838
|
this.searchControl.reset();
|
|
1837
1839
|
this.employeeSearchControl.reset();
|
|
@@ -1973,7 +1975,7 @@ class FormLabelComponent {
|
|
|
1973
1975
|
this.i18n = i18n;
|
|
1974
1976
|
}
|
|
1975
1977
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormLabelComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1976
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: FormLabelComponent, isStandalone: true, selector: "app-form-label", inputs: { tooltip: "tooltip", label: "label", optional: "optional" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex\">\r\n <span class=\"form-label mb-0\">{{ label }}</span>\r\n @if(tooltip) {\r\n <span class=\"form-label mb-0 mx-1\">\r\n <ds-icon\r\n icon=\"info fs-18\"\r\n class=\"cursor-pointer\"\r\n [satPopoverAnchor]=\"popover\"\r\n (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n ></ds-icon>\r\n </span>\r\n }\r\n </div>\r\n <span *ngIf=\"optional\" class=\"optional-input\">\r\n {{ 'optional' | translate }}\r\n </span>\r\n</div>\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"default-popover p-3 fs-14\">\r\n <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n </div>\r\n</sat-popover>", styles: ["
|
|
1978
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: FormLabelComponent, isStandalone: true, selector: "app-form-label", inputs: { tooltip: "tooltip", label: "label", optional: "optional" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex\">\r\n <span class=\"form-label mb-0\">{{ label }}</span>\r\n @if(tooltip) {\r\n <span class=\"form-label mb-0 mx-1\">\r\n <ds-icon\r\n icon=\"info fs-18\"\r\n class=\"cursor-pointer\"\r\n [satPopoverAnchor]=\"popover\"\r\n (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n ></ds-icon>\r\n </span>\r\n }\r\n </div>\r\n <span *ngIf=\"optional\" class=\"optional-input\">\r\n {{ 'optional' | translate }}\r\n </span>\r\n</div>\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"default-popover p-3 fs-14\">\r\n <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n </div>\r\n</sat-popover>", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
1977
1979
|
}
|
|
1978
1980
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormLabelComponent, decorators: [{
|
|
1979
1981
|
type: Component,
|
|
@@ -1981,7 +1983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
1981
1983
|
NgIf,
|
|
1982
1984
|
SatPopoverModule,
|
|
1983
1985
|
TranslatePipe
|
|
1984
|
-
], standalone: true, template: "<div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex\">\r\n <span class=\"form-label mb-0\">{{ label }}</span>\r\n @if(tooltip) {\r\n <span class=\"form-label mb-0 mx-1\">\r\n <ds-icon\r\n icon=\"info fs-18\"\r\n class=\"cursor-pointer\"\r\n [satPopoverAnchor]=\"popover\"\r\n (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n ></ds-icon>\r\n </span>\r\n }\r\n </div>\r\n <span *ngIf=\"optional\" class=\"optional-input\">\r\n {{ 'optional' | translate }}\r\n </span>\r\n</div>\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"default-popover p-3 fs-14\">\r\n <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n </div>\r\n</sat-popover>"
|
|
1986
|
+
], standalone: true, template: "<div class=\"d-flex justify-content-between\">\r\n <div class=\"d-flex\">\r\n <span class=\"form-label mb-0\">{{ label }}</span>\r\n @if(tooltip) {\r\n <span class=\"form-label mb-0 mx-1\">\r\n <ds-icon\r\n icon=\"info fs-18\"\r\n class=\"cursor-pointer\"\r\n [satPopoverAnchor]=\"popover\"\r\n (click)=\"popover.toggle(); $event.stopImmediatePropagation()\"\r\n ></ds-icon>\r\n </span>\r\n }\r\n </div>\r\n <span *ngIf=\"optional\" class=\"optional-input\">\r\n {{ 'optional' | translate }}\r\n </span>\r\n</div>\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"default-popover p-3 fs-14\">\r\n <span class=\"fs-14 fw-bold signature-notes\" [innerHTML]=\"tooltip\"></span>\r\n </div>\r\n</sat-popover>" }]
|
|
1985
1987
|
}], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { tooltip: [{
|
|
1986
1988
|
type: Input
|
|
1987
1989
|
}], label: [{
|
|
@@ -2004,7 +2006,6 @@ class ValidationErrorsComponent extends ControlValueAccessorDirective {
|
|
|
2004
2006
|
validatePhoneNumber: this.i18n.translate('pleaseEnterValidNumber')
|
|
2005
2007
|
};
|
|
2006
2008
|
ngOnChanges(changes) {
|
|
2007
|
-
console.log(this.control?.errors);
|
|
2008
2009
|
const { customErrorMessages } = changes;
|
|
2009
2010
|
if (customErrorMessages) {
|
|
2010
2011
|
this.errorMessages = {
|
|
@@ -2230,6 +2231,12 @@ class CheckBoxComponent extends ControlValueAccessorDirective {
|
|
|
2230
2231
|
termsBody;
|
|
2231
2232
|
downloadCheckBox = new EventEmitter();
|
|
2232
2233
|
dialog = inject(MatDialog);
|
|
2234
|
+
ngOnInit() {
|
|
2235
|
+
super.ngOnInit();
|
|
2236
|
+
if (this.control.value == 'true') {
|
|
2237
|
+
this.control.setValue(true);
|
|
2238
|
+
}
|
|
2239
|
+
}
|
|
2233
2240
|
openUrl() {
|
|
2234
2241
|
window.open(this.hrefLink);
|
|
2235
2242
|
}
|
|
@@ -2253,7 +2260,7 @@ class CheckBoxComponent extends ControlValueAccessorDirective {
|
|
|
2253
2260
|
useExisting: forwardRef(() => CheckBoxComponent),
|
|
2254
2261
|
multi: true,
|
|
2255
2262
|
},
|
|
2256
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-checkbox\r\n [ngClass]=\"{'mx-4': isReadOnly}\"\r\n class=\"mb-3\"\r\n [disabled]=\"isDisabled || isReadOnly\"\r\n id=\"{{ name }}{{ randomID }}\"\r\n [name]=\"name\"\r\n (change)=\"valueChange($event)\"\r\n [checked]=\"control.value ? control.value : false\">\r\n \r\n <div class=\"d-flex\">\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n \r\n @if(containTerms) {\r\n <span\r\n class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\"\r\n (click)=\"openTermsPopup(); false\">\r\n {{ termsLabel ? termsLabel : 'termsAndConditions' | translate }}\r\n </span>\r\n }\r\n </div>\r\n \r\n @if(link) {\r\n <ng-container>\r\n <span> | </span>\r\n <a \r\n class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\" \r\n href=\"{{ hrefLink }}\" \r\n target=\"_blank\">\r\n <ds-icon icon=\"external-link\"></ds-icon>\r\n <span class=\"underline\">{{ linkText }}</span>\r\n </a>\r\n </ng-container>\r\n }\r\n</mat-checkbox>", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
2263
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-checkbox\r\n [ngClass]=\"{'mx-4': isReadOnly}\"\r\n class=\"mb-3\"\r\n [disabled]=\"isDisabled || isReadOnly\"\r\n id=\"{{ name }}{{ randomID }}\"\r\n [name]=\"name\"\r\n (change)=\"valueChange($event)\"\r\n [checked]=\"control.value ? control.value : false\"\r\n [formControl]=\"control\">\r\n \r\n <div class=\"d-flex\">\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n \r\n @if(containTerms) {\r\n <span\r\n class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\"\r\n (click)=\"openTermsPopup(); false\">\r\n {{ termsLabel ? termsLabel : 'termsAndConditions' | translate }}\r\n </span>\r\n }\r\n </div>\r\n \r\n @if(link) {\r\n <ng-container>\r\n <span> | </span>\r\n <a \r\n class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\" \r\n href=\"{{ hrefLink }}\" \r\n target=\"_blank\">\r\n <ds-icon icon=\"external-link\"></ds-icon>\r\n <span class=\"underline\">{{ linkText }}</span>\r\n </a>\r\n </ng-container>\r\n }\r\n</mat-checkbox>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", inputs: ["errors", "customErrorMessages"] }, { kind: "ngmodule", type: i4.ReactiveFormsModule }, { 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" }] });
|
|
2257
2264
|
}
|
|
2258
2265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CheckBoxComponent, decorators: [{
|
|
2259
2266
|
type: Component,
|
|
@@ -2267,7 +2274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2267
2274
|
useExisting: forwardRef(() => CheckBoxComponent),
|
|
2268
2275
|
multi: true,
|
|
2269
2276
|
},
|
|
2270
|
-
], template: "<mat-checkbox\r\n [ngClass]=\"{'mx-4': isReadOnly}\"\r\n class=\"mb-3\"\r\n [disabled]=\"isDisabled || isReadOnly\"\r\n id=\"{{ name }}{{ randomID }}\"\r\n [name]=\"name\"\r\n (change)=\"valueChange($event)\"\r\n [checked]=\"control.value ? control.value : false\">\r\n \r\n <div class=\"d-flex\">\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n \r\n @if(containTerms) {\r\n <span\r\n class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\"\r\n (click)=\"openTermsPopup(); false\">\r\n {{ termsLabel ? termsLabel : 'termsAndConditions' | translate }}\r\n </span>\r\n }\r\n </div>\r\n \r\n @if(link) {\r\n <ng-container>\r\n <span> | </span>\r\n <a \r\n class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\" \r\n href=\"{{ hrefLink }}\" \r\n target=\"_blank\">\r\n <ds-icon icon=\"external-link\"></ds-icon>\r\n <span class=\"underline\">{{ linkText }}</span>\r\n </a>\r\n </ng-container>\r\n }\r\n</mat-checkbox>", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}\n"] }]
|
|
2277
|
+
], template: "<mat-checkbox\r\n [ngClass]=\"{'mx-4': isReadOnly}\"\r\n class=\"mb-3\"\r\n [disabled]=\"isDisabled || isReadOnly\"\r\n id=\"{{ name }}{{ randomID }}\"\r\n [name]=\"name\"\r\n (change)=\"valueChange($event)\"\r\n [checked]=\"control.value ? control.value : false\"\r\n [formControl]=\"control\">\r\n \r\n <div class=\"d-flex\">\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n \r\n @if(containTerms) {\r\n <span\r\n class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1\"\r\n (click)=\"openTermsPopup(); false\">\r\n {{ termsLabel ? termsLabel : 'termsAndConditions' | translate }}\r\n </span>\r\n }\r\n </div>\r\n \r\n @if(link) {\r\n <ng-container>\r\n <span> | </span>\r\n <a \r\n class=\"fs-12 fw-bold fc-coral cursor-pointer mx-1 d-inline-flex align-items-center gap-1\" \r\n href=\"{{ hrefLink }}\" \r\n target=\"_blank\">\r\n <ds-icon icon=\"external-link\"></ds-icon>\r\n <span class=\"underline\">{{ linkText }}</span>\r\n </a>\r\n </ng-container>\r\n }\r\n</mat-checkbox>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>", styles: [".checkbox{margin-top:10px!important;position:relative;margin-bottom:0!important}.checkbox label{padding-left:30px;font-size:14px;color:#414142}.checkbox input[type=checkbox]{opacity:0}.checkbox input[type=checkbox]+label.checkboxInput{position:absolute;width:25px;height:25px;top:0;left:0;padding-left:0}@media (max-width: 768px){.checkbox input[type=checkbox]+label.checkboxInput{top:8px!important}}.checkbox input[type=checkbox]+label.checkboxInput:before{content:\"\\f096\";font-family:FontAwesome;font-size:25px;display:block;margin-top:-7px;color:#ddd}.checkbox input[type=checkbox]:checked+label.checkboxInput:before{content:\"\\f14a\";color:#da3f7b;background-color:#fff}.rtlCheckbox.checkbox input[type=checkbox]+label.checkboxInput{left:inherit;right:0;padding-left:0;padding-right:0}.rtlCheckbox.checkbox label{padding-left:0;padding-right:30px}\n"] }]
|
|
2271
2278
|
}], propDecorators: { containTerms: [{
|
|
2272
2279
|
type: Input
|
|
2273
2280
|
}], termsLabel: [{
|
|
@@ -2353,7 +2360,7 @@ class CustomSearchableComponent extends ControlValueAccessorDirective {
|
|
|
2353
2360
|
useExisting: forwardRef(() => CustomSearchableComponent),
|
|
2354
2361
|
multi: true,
|
|
2355
2362
|
},
|
|
2356
|
-
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(isReadOnly && control?.value) {\r\n
|
|
2363
|
+
], 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]=\"!control.hasValidator(Validators['required'])\"\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\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\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"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.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", 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"] }] });
|
|
2357
2364
|
}
|
|
2358
2365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CustomSearchableComponent, decorators: [{
|
|
2359
2366
|
type: Component,
|
|
@@ -2370,7 +2377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2370
2377
|
useExisting: forwardRef(() => CustomSearchableComponent),
|
|
2371
2378
|
multi: true,
|
|
2372
2379
|
},
|
|
2373
|
-
], template: "@if(isReadOnly && control?.value) {\r\n
|
|
2380
|
+
], 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]=\"!control.hasValidator(Validators['required'])\"\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\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n</ng-container>\r\n}\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}\n"] }]
|
|
2374
2381
|
}], propDecorators: { options: [{
|
|
2375
2382
|
type: Input
|
|
2376
2383
|
}], selectedValue: [{
|
|
@@ -2464,6 +2471,7 @@ class DatePickerComponent extends ControlValueAccessorDirective {
|
|
|
2464
2471
|
}
|
|
2465
2472
|
clearDateValue(event) {
|
|
2466
2473
|
this.control.setValue(null);
|
|
2474
|
+
this.control.markAsTouched();
|
|
2467
2475
|
}
|
|
2468
2476
|
activateYearOnlyMode() {
|
|
2469
2477
|
this.dateFormat.updateDateFormat(YEAR_ONLY_FORMAT$1.parse, YEAR_ONLY_FORMAT$1.display);
|
|
@@ -2493,7 +2501,7 @@ class DatePickerComponent extends ControlValueAccessorDirective {
|
|
|
2493
2501
|
provide: MAT_DATE_FORMATS,
|
|
2494
2502
|
useClass: CustomDateFormat,
|
|
2495
2503
|
},
|
|
2496
|
-
], 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\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n
|
|
2504
|
+
], 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]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n <div class=\"datePicker justify-content-between mb-1\">\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-error *ngIf=\"errorMessage\">{{errorMessage}}</mat-error> -->\r\n </mat-form-field>\r\n </div>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control) {\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: "ngmodule", type: MatNativeDateModule }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: i1$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: i1$3.MatDatepickerModule }, { kind: "directive", type: i1$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "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" }] });
|
|
2497
2505
|
}
|
|
2498
2506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
2499
2507
|
type: Component,
|
|
@@ -2513,7 +2521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2513
2521
|
...MatDatePickerImports,
|
|
2514
2522
|
...MatFormImports,
|
|
2515
2523
|
...Shareds
|
|
2516
|
-
], template: "@if(!isReadOnly) {\r\n <ng-container>\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n
|
|
2524
|
+
], template: "@if(!isReadOnly) {\r\n <ng-container>\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n <div class=\"datePicker justify-content-between mb-1\">\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-error *ngIf=\"errorMessage\">{{errorMessage}}</mat-error> -->\r\n </mat-form-field>\r\n </div>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control) {\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"] }]
|
|
2517
2525
|
}], propDecorators: { className: [{
|
|
2518
2526
|
type: Input
|
|
2519
2527
|
}], calendarType: [{
|
|
@@ -2625,6 +2633,9 @@ class DateRangePickerComponent extends ControlValueAccessorDirective {
|
|
|
2625
2633
|
this.control.setValue(null);
|
|
2626
2634
|
this.endDateControl.setValue(null);
|
|
2627
2635
|
this.startDateControl.setValue(null);
|
|
2636
|
+
this.control.markAsTouched();
|
|
2637
|
+
this.endDateControl.markAsTouched();
|
|
2638
|
+
this.startDateControl.markAsTouched();
|
|
2628
2639
|
}
|
|
2629
2640
|
activateYearOnlyMode() {
|
|
2630
2641
|
this.dateFormat.updateDateFormat(YEAR_ONLY_FORMAT.parse, YEAR_ONLY_FORMAT.display);
|
|
@@ -2654,7 +2665,7 @@ class DateRangePickerComponent extends ControlValueAccessorDirective {
|
|
|
2654
2665
|
provide: MAT_DATE_FORMATS,
|
|
2655
2666
|
useClass: CustomDateFormat,
|
|
2656
2667
|
},
|
|
2657
|
-
], 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\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n <mat-form-field class=\"date-range primary-form {{ className }}\">\r\n <label class=\"mat-form-content\">\r\n <mat-date-range-input
|
|
2668
|
+
], 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]=\"!control.hasValidator(Validators['required'])\" [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<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n} @else {\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$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i1$3.MatDatepickerModule }, { kind: "directive", type: i1$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i1$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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", 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" }] });
|
|
2658
2669
|
}
|
|
2659
2670
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DateRangePickerComponent, decorators: [{
|
|
2660
2671
|
type: Component,
|
|
@@ -2672,7 +2683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2672
2683
|
...MatDatePickerImports,
|
|
2673
2684
|
...MatFormImports,
|
|
2674
2685
|
...Shareds
|
|
2675
|
-
], template: "@if(!isReadOnly) {\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n <mat-form-field class=\"date-range primary-form {{ className }}\">\r\n <label class=\"mat-form-content\">\r\n <mat-date-range-input
|
|
2686
|
+
], template: "@if(!isReadOnly) {\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [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<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n} @else {\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"] }]
|
|
2676
2687
|
}], propDecorators: { className: [{
|
|
2677
2688
|
type: Input
|
|
2678
2689
|
}], yearOnly: [{
|
|
@@ -2701,7 +2712,7 @@ class InputComponent extends ControlValueAccessorDirective {
|
|
|
2701
2712
|
useExisting: forwardRef(() => InputComponent),
|
|
2702
2713
|
multi: true,
|
|
2703
2714
|
},
|
|
2704
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"!required\" [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 [required]=\"required\"\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 [required]=\"required\"\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-form-field>\r\n<app-validation-errors [errors]=\"control.errors\" [customErrorMessages]=\"customErrorMessages\"></app-validation-errors>\r\n\r\n} @if(isReadOnly && (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}", styles: ["
|
|
2715
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [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 [required]=\"required\"\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 [required]=\"required\"\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-form-field>\r\n<app-validation-errors [errors]=\"control.errors\" [customErrorMessages]=\"customErrorMessages\"></app-validation-errors>\r\n\r\n} @if(isReadOnly && (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}", 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", 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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"], exportAs: ["matInput"] }] });
|
|
2705
2716
|
}
|
|
2706
2717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, decorators: [{
|
|
2707
2718
|
type: Component,
|
|
@@ -2716,7 +2727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2716
2727
|
useExisting: forwardRef(() => InputComponent),
|
|
2717
2728
|
multi: true,
|
|
2718
2729
|
},
|
|
2719
|
-
], template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"!required\" [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 [required]=\"required\"\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 [required]=\"required\"\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-form-field>\r\n<app-validation-errors [errors]=\"control.errors\" [customErrorMessages]=\"customErrorMessages\"></app-validation-errors>\r\n\r\n} @if(isReadOnly && (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}"
|
|
2730
|
+
], template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [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 [required]=\"required\"\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 [required]=\"required\"\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-form-field>\r\n<app-validation-errors [errors]=\"control.errors\" [customErrorMessages]=\"customErrorMessages\"></app-validation-errors>\r\n\r\n} @if(isReadOnly && (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}" }]
|
|
2720
2731
|
}], propDecorators: { floatLabel: [{
|
|
2721
2732
|
type: Input
|
|
2722
2733
|
}], className: [{
|
|
@@ -2815,7 +2826,7 @@ class InputNumberComponent extends ControlValueAccessorDirective {
|
|
|
2815
2826
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
2816
2827
|
multi: true,
|
|
2817
2828
|
},
|
|
2818
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [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-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && (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 }", 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", 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: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.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"], exportAs: ["matInput"] }] });
|
|
2829
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [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-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && (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 }", 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", 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: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.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"], exportAs: ["matInput"] }] });
|
|
2819
2830
|
}
|
|
2820
2831
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
2821
2832
|
type: Component,
|
|
@@ -2829,7 +2840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2829
2840
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
2830
2841
|
multi: true,
|
|
2831
2842
|
},
|
|
2832
|
-
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [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-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && (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 }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
|
|
2843
|
+
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [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-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && (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 }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
|
|
2833
2844
|
}], propDecorators: { floatLabel: [{
|
|
2834
2845
|
type: Input
|
|
2835
2846
|
}], className: [{
|
|
@@ -2863,7 +2874,7 @@ class InputEmailComponent extends ControlValueAccessorDirective {
|
|
|
2863
2874
|
useExisting: forwardRef(() => InputEmailComponent),
|
|
2864
2875
|
multi: true,
|
|
2865
2876
|
},
|
|
2866
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [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-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && (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 }", 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", 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: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.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"], exportAs: ["matInput"] }] });
|
|
2877
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [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-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && (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 }", 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", 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: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.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"], exportAs: ["matInput"] }] });
|
|
2867
2878
|
}
|
|
2868
2879
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputEmailComponent, decorators: [{
|
|
2869
2880
|
type: Component,
|
|
@@ -2876,7 +2887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2876
2887
|
useExisting: forwardRef(() => InputEmailComponent),
|
|
2877
2888
|
multi: true,
|
|
2878
2889
|
},
|
|
2879
|
-
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [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-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && (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 }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
|
|
2890
|
+
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [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-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && (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 }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
|
|
2880
2891
|
}], propDecorators: { floatLabel: [{
|
|
2881
2892
|
type: Input
|
|
2882
2893
|
}], className: [{
|
|
@@ -2909,7 +2920,7 @@ class InputMaskComponent extends ControlValueAccessorDirective {
|
|
|
2909
2920
|
useExisting: forwardRef(() => InputMaskComponent),
|
|
2910
2921
|
multi: true,
|
|
2911
2922
|
},
|
|
2912
|
-
], usesInheritance: true, ngImport: i0, template: "\r\n@if(!isReadOnly){\r\n <ng-container>\r\n <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n @if(label){\r\n <div class=\"d-flex justify-content-between mb-1\">\r\n <span class=\"form-label mb-0\">{{label}}</span>\r\n @if(!required){\r\n <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n </span>\r\n }\r\n </div>\r\n }\r\n \r\n <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n [floatLabel]=\"floatLabel\">\r\n \r\n @if(iconPrefixName){\r\n <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n }\r\n <label class=\"mat-form-content\">\r\n <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n [required]=\"required\" [placeholder]=\"placeholder\">\r\n </label>\r\n \r\n @if(matSuffix){\r\n <span matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n }\r\n @if(type === 'number'){\r\n <div matSuffix class=\"d-flex align-items-center gap-2\">\r\n @if(numberSuffixName){\r\n <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n }\r\n <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n </div>\r\n }\r\n <!-- @if((!control?.valid)){\r\n <mat-error class=\"mb-2\">\r\n {{i18n.translate('validFieldError')}}{{label}}\r\n </mat-error>\r\n } -->\r\n \r\n \r\n <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n {{i18n.translate('validEmailError')}}\r\n </mat-error> -->\r\n @if(showHint){\r\n <mat-hint>\r\n <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></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 <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n {{errorMessage}}\r\n </span> -->\r\n \r\n </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control){\r\n <ng-container class=\"info-section\">\r\n <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n [value]=\"control\"></app-info-item>\r\n </ng-container>\r\n \r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"deafult-tooltip\">\r\n {{tooltip}}\r\n </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ 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: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2923
|
+
], usesInheritance: true, ngImport: i0, template: "\r\n@if(!isReadOnly){\r\n <ng-container>\r\n <!-- <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n @if(label){\r\n <div class=\"d-flex justify-content-between mb-1\">\r\n <span class=\"form-label mb-0\">{{label}}</span>\r\n @if(!required){\r\n <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n </span>\r\n }\r\n </div>\r\n }\r\n \r\n <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n [floatLabel]=\"floatLabel\">\r\n \r\n @if(iconPrefixName){\r\n <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n }\r\n <label class=\"mat-form-content\">\r\n <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n [required]=\"required\" [placeholder]=\"placeholder\">\r\n </label>\r\n \r\n @if(matSuffix){\r\n <span matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n }\r\n @if(type === 'number'){\r\n <div matSuffix class=\"d-flex align-items-center gap-2\">\r\n @if(numberSuffixName){\r\n <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n }\r\n <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n </div>\r\n }\r\n <!-- @if((!control?.valid)){\r\n <mat-error class=\"mb-2\">\r\n {{i18n.translate('validFieldError')}}{{label}}\r\n </mat-error>\r\n } -->\r\n \r\n \r\n <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n {{i18n.translate('validEmailError')}}\r\n </mat-error> -->\r\n @if(showHint){\r\n <mat-hint>\r\n <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></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 <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n {{errorMessage}}\r\n </span> -->\r\n \r\n </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control){\r\n <ng-container class=\"info-section\">\r\n <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n [value]=\"control\"></app-info-item>\r\n </ng-container>\r\n \r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"deafult-tooltip\">\r\n {{tooltip}}\r\n </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ 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: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: InfoItemComponent, selector: "app-info-item", inputs: ["label", "value", "name", "type", "dateType", "multiple", "insideTable", "hasLabel", "arrayList", "actionType", "download"] }, { kind: "ngmodule", type: 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2913
2924
|
}
|
|
2914
2925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputMaskComponent, decorators: [{
|
|
2915
2926
|
type: Component,
|
|
@@ -2926,7 +2937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2926
2937
|
InfoItemComponent,
|
|
2927
2938
|
ReactiveFormsModule,
|
|
2928
2939
|
NgClass,
|
|
2929
|
-
], template: "\r\n@if(!isReadOnly){\r\n <ng-container>\r\n <!-- <app-form-label [label]=\"label\" [optional]=\"!required\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n @if(label){\r\n <div class=\"d-flex justify-content-between mb-1\">\r\n <span class=\"form-label mb-0\">{{label}}</span>\r\n @if(!required){\r\n <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n </span>\r\n }\r\n </div>\r\n }\r\n \r\n <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n [floatLabel]=\"floatLabel\">\r\n \r\n @if(iconPrefixName){\r\n <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n }\r\n <label class=\"mat-form-content\">\r\n <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n [required]=\"required\" [placeholder]=\"placeholder\">\r\n </label>\r\n \r\n @if(matSuffix){\r\n <span matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n }\r\n @if(type === 'number'){\r\n <div matSuffix class=\"d-flex align-items-center gap-2\">\r\n @if(numberSuffixName){\r\n <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n }\r\n <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n </div>\r\n }\r\n <!-- @if((!control?.valid)){\r\n <mat-error class=\"mb-2\">\r\n {{i18n.translate('validFieldError')}}{{label}}\r\n </mat-error>\r\n } -->\r\n \r\n \r\n <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n {{i18n.translate('validEmailError')}}\r\n </mat-error> -->\r\n @if(showHint){\r\n <mat-hint>\r\n <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></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 <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n {{errorMessage}}\r\n </span> -->\r\n \r\n </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control){\r\n <ng-container class=\"info-section\">\r\n <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n [value]=\"control\"></app-info-item>\r\n </ng-container>\r\n \r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"deafult-tooltip\">\r\n {{tooltip}}\r\n </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"] }]
|
|
2940
|
+
], template: "\r\n@if(!isReadOnly){\r\n <ng-container>\r\n <!-- <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [hideOption]=\"hideOption\" [showLabel]=\"showLabel\"></app-form-label> -->\r\n @if(label){\r\n <div class=\"d-flex justify-content-between mb-1\">\r\n <span class=\"form-label mb-0\">{{label}}</span>\r\n @if(!required){\r\n <span class=\"fs-11 fc-dark-gray\">{{i18n.translate('Optional')}}\r\n </span>\r\n }\r\n </div>\r\n }\r\n \r\n <mat-form-field class=\"primary-form {{className}}\" [ngClass]=\"{'input-disabled' : isDisabled }\"\r\n [floatLabel]=\"floatLabel\">\r\n \r\n @if(iconPrefixName){\r\n <span matPrefix class=\"sfi {{iconPrefixName}}\"></span>\r\n }\r\n <label class=\"mat-form-content\">\r\n <input matInput [placeholder]=\"placeholder\" [value]=\"value\" [attr.disabled]=\"isDisabled\" [mask]=\"mask\"\r\n [showMaskTyped]=\"false\" oninput=\"validity.valid || (value='');\" [formControl]=\"control\"\r\n [required]=\"required\" [placeholder]=\"placeholder\">\r\n </label>\r\n \r\n @if(matSuffix){\r\n <span matSuffix class=\"sfi {{iconSuffixName}}\"></span>\r\n }\r\n @if(type === 'number'){\r\n <div matSuffix class=\"d-flex align-items-center gap-2\">\r\n @if(numberSuffixName){\r\n <span class=\"fs-14 fw-medium\">{{numberSuffixName}}</span>\r\n }\r\n <!-- <span class=\"sfi sfi-minus p-2 bc-light-gray fc-black\"></span>\r\n <span class=\"sfi sfi-plus p-2 bc-light-gray fc-black\"></span> -->\r\n </div>\r\n }\r\n <!-- @if((!control?.valid)){\r\n <mat-error class=\"mb-2\">\r\n {{i18n.translate('validFieldError')}}{{label}}\r\n </mat-error>\r\n } -->\r\n \r\n \r\n <!-- <mat-error *ngIf=\"(type ==='email' && !control?.valid)\">\r\n {{i18n.translate('validEmailError')}}\r\n </mat-error> -->\r\n @if(showHint){\r\n <mat-hint>\r\n <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp':value}\"></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 <!-- <span class=\"fc-coral\" style=\"color:#f44336\" *ngIf=\"( showErrorMessage && control.value)\">\r\n {{errorMessage}}\r\n </span> -->\r\n \r\n </ng-container>\r\n}\r\n\r\n@if(isReadOnly && control){\r\n <ng-container class=\"info-section\">\r\n <app-info-item class=\"info-item w-100\" [label]=\"label\" [insideTable]=\"insideTable\" [hasLabel]=\"label ? true: false\"\r\n [value]=\"control\"></app-info-item>\r\n </ng-container>\r\n \r\n}\r\n\r\n\r\n<!-- section tooltip -->\r\n<sat-popover #popover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"deafult-tooltip\">\r\n {{tooltip}}\r\n </div>\r\n</sat-popover>\r\n", styles: [":host{flex-grow:1}\n"] }]
|
|
2930
2941
|
}], propDecorators: { floatLabel: [{
|
|
2931
2942
|
type: Input
|
|
2932
2943
|
}], className: [{
|
|
@@ -3028,7 +3039,7 @@ class InputCurrencyComponent extends ControlValueAccessorDirective {
|
|
|
3028
3039
|
multi: true,
|
|
3029
3040
|
},
|
|
3030
3041
|
MycurrencyPipe
|
|
3031
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [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-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && (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 }", 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", 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: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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"], exportAs: ["matInput"] }] });
|
|
3042
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [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-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && (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 }", 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", 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: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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"], exportAs: ["matInput"] }] });
|
|
3032
3043
|
}
|
|
3033
3044
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputCurrencyComponent, decorators: [{
|
|
3034
3045
|
type: Component,
|
|
@@ -3045,7 +3056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3045
3056
|
multi: true,
|
|
3046
3057
|
},
|
|
3047
3058
|
MycurrencyPipe
|
|
3048
|
-
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [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-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && (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 }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"] }]
|
|
3059
|
+
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [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-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && (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 }", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"] }]
|
|
3049
3060
|
}], propDecorators: { floatLabel: [{
|
|
3050
3061
|
type: Input
|
|
3051
3062
|
}], className: [{
|
|
@@ -3064,15 +3075,30 @@ class InputTelephoneComponent extends ControlValueAccessorDirective {
|
|
|
3064
3075
|
floatLabel = 'auto';
|
|
3065
3076
|
className = 'bordered-input';
|
|
3066
3077
|
controlValue = '';
|
|
3078
|
+
errorMessages = {
|
|
3079
|
+
required: this.i18n.translate('thisFieldIsRequired'),
|
|
3080
|
+
validatePhoneNumber: this.i18n.translate('pleaseEnterValidNumber')
|
|
3081
|
+
};
|
|
3082
|
+
ngOnInit() {
|
|
3083
|
+
super.ngOnInit();
|
|
3084
|
+
if (this.control.hasValidator(this.Validators.required)) {
|
|
3085
|
+
this.telephoneControl.setValidators(this.Validators.required);
|
|
3086
|
+
}
|
|
3087
|
+
else {
|
|
3088
|
+
this.telephoneControl.setValidators(null);
|
|
3089
|
+
}
|
|
3090
|
+
this.telephoneControl.updateValueAndValidity;
|
|
3091
|
+
}
|
|
3067
3092
|
CountryISO = CountryISO;
|
|
3068
3093
|
SearchCountryField = SearchCountryField;
|
|
3069
3094
|
show = false;
|
|
3070
3095
|
setControlValue(controlValue) {
|
|
3096
|
+
console.log(this.telephoneControl.errors);
|
|
3071
3097
|
if (this.telephoneControl.valid && controlValue) {
|
|
3072
3098
|
this.control.setValue(controlValue['internationalNumber']);
|
|
3073
3099
|
this.telephoneControl.setValue(controlValue['internationalNumber']);
|
|
3074
3100
|
}
|
|
3075
|
-
|
|
3101
|
+
if (!controlValue) {
|
|
3076
3102
|
this.control.setValue(null);
|
|
3077
3103
|
}
|
|
3078
3104
|
if (this.telephoneControl.invalid && this.telephoneControl.touched) {
|
|
@@ -3086,7 +3112,7 @@ class InputTelephoneComponent extends ControlValueAccessorDirective {
|
|
|
3086
3112
|
useExisting: forwardRef(() => InputTelephoneComponent),
|
|
3087
3113
|
multi: true,
|
|
3088
3114
|
},
|
|
3089
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <!-- <mat-form-field style=\"height: 50px;\" class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\"> -->\r\n <div class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\">\r\n <label class=\"mat-form-content\">\r\n <!-- [placeholder]=\"label\" -->\r\n <!-- <input matInput [disabled]=\"disabled\" ng2TelInput numberOnly #phone\r\n [ng2TelInputOptions]=\"{initialCountry: 'sa', utilsScript: 'assets/js/utils.js'}\" (hasError)=\"hasError($event)\"\r\n (ng2TelOutput)=\"getNumber($event)\" (intlTelInputObject)=\"telInputObject($event)\"\r\n (countryChange)=\"onCountryChange($event)\" [(ngModel)]=\"field\" [name]=\"name\"\r\n oninput=\"this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\\..*)\\./g, '$1');\"\r\n [maxlength]=\"maxLength\" [minLength]=\"minLength\" />-->\r\n <!-- <input matInput [hidden]=\"true\"/> -->\r\n <ngx-intl-tel-input\r\n (input)=\"setControlValue(telephoneControl.value)\"\r\n [formControl]=\"telephoneControl\"\r\n [cssClass]=\"'custom'\"\r\n [preferredCountries]=\"[CountryISO.UnitedStates, CountryISO.UnitedKingdom]\"\r\n [enableAutoCountrySelect]=\"false\"\r\n [enablePlaceholder]=\"true\"\r\n [searchCountryFlag]=\"true\"\r\n [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n [selectFirstCountry]=\"false\"\r\n [selectedCountryISO]=\"CountryISO.SaudiArabia\"\r\n [maxLength]=\"17\"\r\n [phoneValidation]=\"true\"\r\n [inputId]=\"\"\r\n name=\"phone\"\r\n ></ngx-intl-tel-input>\r\n </label>\r\n </div>\r\n <!-- </mat-form-field> -->\r\n <app-validation-errors [errors]=\"telephoneControl.errors\"></app-validation-errors>\r\n </ng-container>\r\n}\r\n@if(isReadOnly){\r\n <ng-container>\r\n <app-info-item class=\"info-item w-100\" [type]=\"'telephone'\" [label]=\"label\"\r\n [value]=\"control.value\"></app-info-item>\r\n </ng-container>\r\n}\r\n\r\n", styles: ["[dir=rtl] :host .mat-input-element{direction:ltr;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: NgxIntlTelInputModule }, { kind: "component", type:
|
|
3115
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <!-- <mat-form-field style=\"height: 50px;\" class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\"> -->\r\n <div class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\">\r\n <label class=\"mat-form-content\">\r\n <!-- [placeholder]=\"label\" -->\r\n <!-- <input matInput [disabled]=\"disabled\" ng2TelInput numberOnly #phone\r\n [ng2TelInputOptions]=\"{initialCountry: 'sa', utilsScript: 'assets/js/utils.js'}\" (hasError)=\"hasError($event)\"\r\n (ng2TelOutput)=\"getNumber($event)\" (intlTelInputObject)=\"telInputObject($event)\"\r\n (countryChange)=\"onCountryChange($event)\" [(ngModel)]=\"field\" [name]=\"name\"\r\n oninput=\"this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\\..*)\\./g, '$1');\"\r\n [maxlength]=\"maxLength\" [minLength]=\"minLength\" />-->\r\n <!-- <input matInput [hidden]=\"true\"/> -->\r\n <ngx-intl-tel-input\r\n (input)=\"setControlValue(telephoneControl.value)\"\r\n [formControl]=\"telephoneControl\"\r\n [cssClass]=\"'custom'\"\r\n [preferredCountries]=\"[CountryISO.UnitedStates, CountryISO.UnitedKingdom]\"\r\n [enableAutoCountrySelect]=\"false\"\r\n [enablePlaceholder]=\"true\"\r\n [searchCountryFlag]=\"true\"\r\n [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n [selectFirstCountry]=\"false\"\r\n [selectedCountryISO]=\"CountryISO.SaudiArabia\"\r\n [maxLength]=\"17\"\r\n [phoneValidation]=\"true\"\r\n [inputId]=\"\"\r\n name=\"phone\"\r\n ></ngx-intl-tel-input>\r\n </label>\r\n </div>\r\n <!-- </mat-form-field> -->\r\n <!-- <app-validation-errors [errors]=\"telephoneControl.errors\"></app-validation-errors> -->\r\n @if(telephoneControl.touched){\r\n @for(error of telephoneControl.errors | keyvalue; track error ) {\r\n <mat-error class=\"mb-2\">\r\n {{ errorMessages[error.key] }}\r\n </mat-error>\r\n }\r\n }\r\n \r\n </ng-container>\r\n}\r\n@if(isReadOnly){\r\n <ng-container>\r\n <app-info-item class=\"info-item w-100\" [type]=\"'telephone'\" [label]=\"label\"\r\n [value]=\"control.value\"></app-info-item>\r\n </ng-container>\r\n}\r\n\r\n", styles: ["[dir=rtl] :host .mat-input-element{direction:ltr;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: NgxIntlTelInputModule }, { kind: "component", type: i3$1.NgxIntlTelInputComponent, selector: "ngx-intl-tel-input", inputs: ["value", "preferredCountries", "enablePlaceholder", "customPlaceholder", "numberFormat", "cssClass", "onlyCountries", "enableAutoCountrySelect", "searchCountryFlag", "searchCountryField", "searchCountryPlaceholder", "maxLength", "selectFirstCountry", "selectedCountryISO", "phoneValidation", "inputId", "separateDialCode"], outputs: ["countryChange"] }, { kind: "directive", type: i3$1.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { 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: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
3090
3116
|
}
|
|
3091
3117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputTelephoneComponent, decorators: [{
|
|
3092
3118
|
type: Component,
|
|
@@ -3101,7 +3127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3101
3127
|
useExisting: forwardRef(() => InputTelephoneComponent),
|
|
3102
3128
|
multi: true,
|
|
3103
3129
|
},
|
|
3104
|
-
], template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <!-- <mat-form-field style=\"height: 50px;\" class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\"> -->\r\n <div class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\">\r\n <label class=\"mat-form-content\">\r\n <!-- [placeholder]=\"label\" -->\r\n <!-- <input matInput [disabled]=\"disabled\" ng2TelInput numberOnly #phone\r\n [ng2TelInputOptions]=\"{initialCountry: 'sa', utilsScript: 'assets/js/utils.js'}\" (hasError)=\"hasError($event)\"\r\n (ng2TelOutput)=\"getNumber($event)\" (intlTelInputObject)=\"telInputObject($event)\"\r\n (countryChange)=\"onCountryChange($event)\" [(ngModel)]=\"field\" [name]=\"name\"\r\n oninput=\"this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\\..*)\\./g, '$1');\"\r\n [maxlength]=\"maxLength\" [minLength]=\"minLength\" />-->\r\n <!-- <input matInput [hidden]=\"true\"/> -->\r\n <ngx-intl-tel-input\r\n (input)=\"setControlValue(telephoneControl.value)\"\r\n [formControl]=\"telephoneControl\"\r\n [cssClass]=\"'custom'\"\r\n [preferredCountries]=\"[CountryISO.UnitedStates, CountryISO.UnitedKingdom]\"\r\n [enableAutoCountrySelect]=\"false\"\r\n [enablePlaceholder]=\"true\"\r\n [searchCountryFlag]=\"true\"\r\n [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n [selectFirstCountry]=\"false\"\r\n [selectedCountryISO]=\"CountryISO.SaudiArabia\"\r\n [maxLength]=\"17\"\r\n [phoneValidation]=\"true\"\r\n [inputId]=\"\"\r\n name=\"phone\"\r\n ></ngx-intl-tel-input>\r\n </label>\r\n </div>\r\n <!-- </mat-form-field> -->\r\n <app-validation-errors [errors]=\"telephoneControl.errors\"></app-validation-errors>\r\n </ng-container>\r\n}\r\n@if(isReadOnly){\r\n <ng-container>\r\n <app-info-item class=\"info-item w-100\" [type]=\"'telephone'\" [label]=\"label\"\r\n [value]=\"control.value\"></app-info-item>\r\n </ng-container>\r\n}\r\n\r\n", styles: ["[dir=rtl] :host .mat-input-element{direction:ltr;text-align:right}\n"] }]
|
|
3130
|
+
], template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <!-- <mat-form-field style=\"height: 50px;\" class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\"> -->\r\n <div class=\"primary-form input-telephone {{className}}\" floatLabel=\"always\">\r\n <label class=\"mat-form-content\">\r\n <!-- [placeholder]=\"label\" -->\r\n <!-- <input matInput [disabled]=\"disabled\" ng2TelInput numberOnly #phone\r\n [ng2TelInputOptions]=\"{initialCountry: 'sa', utilsScript: 'assets/js/utils.js'}\" (hasError)=\"hasError($event)\"\r\n (ng2TelOutput)=\"getNumber($event)\" (intlTelInputObject)=\"telInputObject($event)\"\r\n (countryChange)=\"onCountryChange($event)\" [(ngModel)]=\"field\" [name]=\"name\"\r\n oninput=\"this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\\..*)\\./g, '$1');\"\r\n [maxlength]=\"maxLength\" [minLength]=\"minLength\" />-->\r\n <!-- <input matInput [hidden]=\"true\"/> -->\r\n <ngx-intl-tel-input\r\n (input)=\"setControlValue(telephoneControl.value)\"\r\n [formControl]=\"telephoneControl\"\r\n [cssClass]=\"'custom'\"\r\n [preferredCountries]=\"[CountryISO.UnitedStates, CountryISO.UnitedKingdom]\"\r\n [enableAutoCountrySelect]=\"false\"\r\n [enablePlaceholder]=\"true\"\r\n [searchCountryFlag]=\"true\"\r\n [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n [selectFirstCountry]=\"false\"\r\n [selectedCountryISO]=\"CountryISO.SaudiArabia\"\r\n [maxLength]=\"17\"\r\n [phoneValidation]=\"true\"\r\n [inputId]=\"\"\r\n name=\"phone\"\r\n ></ngx-intl-tel-input>\r\n </label>\r\n </div>\r\n <!-- </mat-form-field> -->\r\n <!-- <app-validation-errors [errors]=\"telephoneControl.errors\"></app-validation-errors> -->\r\n @if(telephoneControl.touched){\r\n @for(error of telephoneControl.errors | keyvalue; track error ) {\r\n <mat-error class=\"mb-2\">\r\n {{ errorMessages[error.key] }}\r\n </mat-error>\r\n }\r\n }\r\n \r\n </ng-container>\r\n}\r\n@if(isReadOnly){\r\n <ng-container>\r\n <app-info-item class=\"info-item w-100\" [type]=\"'telephone'\" [label]=\"label\"\r\n [value]=\"control.value\"></app-info-item>\r\n </ng-container>\r\n}\r\n\r\n", styles: ["[dir=rtl] :host .mat-input-element{direction:ltr;text-align:right}\n"] }]
|
|
3105
3131
|
}], propDecorators: { floatLabel: [{
|
|
3106
3132
|
type: Input
|
|
3107
3133
|
}], className: [{
|
|
@@ -3128,7 +3154,7 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
|
|
|
3128
3154
|
destroyRef = inject(DestroyRef);
|
|
3129
3155
|
deleteRow(ind, rowData) {
|
|
3130
3156
|
if (!this.isReadOnly) {
|
|
3131
|
-
this.arrayList = this.arrayList
|
|
3157
|
+
this.arrayList = this.arrayList?.filter((item, index) => {
|
|
3132
3158
|
return index != ind;
|
|
3133
3159
|
});
|
|
3134
3160
|
const obj = {
|
|
@@ -3137,6 +3163,12 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
|
|
|
3137
3163
|
};
|
|
3138
3164
|
this.emitedDeletedValue.emit(obj);
|
|
3139
3165
|
}
|
|
3166
|
+
if (!this.arrayList?.length && this.multiple) {
|
|
3167
|
+
this.employeeSearchControl.markAsTouched();
|
|
3168
|
+
this.control.setValue([]);
|
|
3169
|
+
this.control.setValidators(this.Validators['required']);
|
|
3170
|
+
this.control.updateValueAndValidity();
|
|
3171
|
+
}
|
|
3140
3172
|
}
|
|
3141
3173
|
onLoadOptions(event) {
|
|
3142
3174
|
const input = event.target.value;
|
|
@@ -3182,23 +3214,23 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
|
|
|
3182
3214
|
this.selected = true;
|
|
3183
3215
|
this.data = [];
|
|
3184
3216
|
if (this.multiple) {
|
|
3185
|
-
if (this.arrayList
|
|
3217
|
+
if (this.arrayList?.some((item) => item?.personEmail === object?.email)) {
|
|
3186
3218
|
this.userAlreadyExist = true;
|
|
3187
3219
|
return;
|
|
3188
3220
|
}
|
|
3189
3221
|
let obj = {
|
|
3190
3222
|
personName: object.name,
|
|
3191
3223
|
personEmail: object.email,
|
|
3192
|
-
job: object.job.name,
|
|
3193
|
-
jobCode: object.job.code,
|
|
3194
|
-
manager: object.manager,
|
|
3195
|
-
department: object.department,
|
|
3196
|
-
generalDepartment: object.generalDepartment,
|
|
3197
|
-
sector: object.sector,
|
|
3198
|
-
section: object.section,
|
|
3199
|
-
seniorSectorName: object.seniorSectorName,
|
|
3224
|
+
// job: object.job.name,
|
|
3225
|
+
// jobCode: object.job.code,
|
|
3226
|
+
// manager: object.manager,
|
|
3227
|
+
// department: object.department,
|
|
3228
|
+
// generalDepartment: object.generalDepartment,
|
|
3229
|
+
// sector: object.sector,
|
|
3230
|
+
// section: object.section,
|
|
3231
|
+
// seniorSectorName: object.seniorSectorName,
|
|
3200
3232
|
};
|
|
3201
|
-
this.arrayList
|
|
3233
|
+
this.arrayList?.push(obj);
|
|
3202
3234
|
this.control.setValue(this.arrayList);
|
|
3203
3235
|
}
|
|
3204
3236
|
else {
|
|
@@ -3217,7 +3249,7 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
|
|
|
3217
3249
|
useExisting: forwardRef(() => SearchEmployeeComponent),
|
|
3218
3250
|
multi: true,
|
|
3219
3251
|
},
|
|
3220
|
-
], usesInheritance: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n <ng-container>\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field class=\"primary-form {{className}}\" [floatLabel]=\"floatLabel\">\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\" aria-label=\"Number\" (input)=\"onLoadOptions($event)\" matInput [disabled]=\"isDisabled\"\r\n [matAutocomplete]=\"auto\" [formControl]=\"employeeSearchControl\" [value]=\"control.value\">\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 <div class=\"d-flex align-items-center\">\r\n <div class=\"img-card circled-img small\">\r\n <img [src]=\"getImage(option?.email)\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" alt=\"\">\r\n </div>\r\n <span class=\"mx-2\"></span>\r\n <div class=\"line-height-1\">\r\n <h6 class=\"fs-17 fw-medium fc-onyx mb-0 line-height-1\">{{ option?.name }}</h6>\r\n <span class=\"fs-13 fw-normal fc-dark-gray\">{{ option?.description }}</span>\r\n </div>\r\n </div>\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n @if (showHint) {\r\n <mat-hint>\r\n <span class=\"sfi sfi-check-circle font-10 fc-dark-gray\" [ngClass]=\"{'fc-oasis-light-imp': value}\"></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 <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n @if (userAlreadyExist) {\r\n <mat-error class=\"mb-2\">{{ 'userAlreadyExist' | translate }}</mat-error>\r\n }\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 <img alt=\"user image\" [src]=\"getImage(emails?.['personEmail'])\" onerror=\"this.onerror=null;this.src='assets/images/user.svg';\" class=\"prof-img\" draggable=\"false\">\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 class=\"ds-btn-action\" size=\"small\" (click)=\"deleteRow($index, emails)\" icon>\r\n <ds-icon icon=\"trash\" class=\"fc-red 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}\r\n\r\n@if (isReadOnly) {\r\n <ng-container>\r\n <app-info-item\r\n class=\"info-item\" type=\"user-picker\" [hasLabel]=\"!!label\"\r\n [multiple]=\"multiple\" [ngClass]=\"{'user-picker': !isReadOnly}\" [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n [label]=\"label\" [name]=\"control.value['personName']\" [value]=\"control.value['personEmail']\" [arrayList]=\"arrayList\">\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>", 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}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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"], 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: i4$1.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", 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" }] });
|
|
3252
|
+
], 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]=\"!control.hasValidator(Validators['required'])\" \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 \r\n \r\n <!-- <app-validation-errors [errors]=\"customErrorMessage || employeeSearchControl.errors\" [isEmployeeSearchControl]=\"multiple? true: false\"></app-validation-errors> -->\r\n @if(control.invalid && employeeSearchControl.touched){\r\n <mat-error class=\"mb-2\">\r\n this filed is required\r\n </mat-error>\r\n }\r\n \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) {\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: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], 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: i4$1.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: 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" }] });
|
|
3221
3253
|
}
|
|
3222
3254
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SearchEmployeeComponent, decorators: [{
|
|
3223
3255
|
type: Component,
|
|
@@ -3235,7 +3267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3235
3267
|
useExisting: forwardRef(() => SearchEmployeeComponent),
|
|
3236
3268
|
multi: true,
|
|
3237
3269
|
},
|
|
3238
|
-
], template: "@if (!isReadOnly) {\r\n
|
|
3270
|
+
], template: "@if (!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"!control.hasValidator(Validators['required'])\" \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 \r\n \r\n <!-- <app-validation-errors [errors]=\"customErrorMessage || employeeSearchControl.errors\" [isEmployeeSearchControl]=\"multiple? true: false\"></app-validation-errors> -->\r\n @if(control.invalid && employeeSearchControl.touched){\r\n <mat-error class=\"mb-2\">\r\n this filed is required\r\n </mat-error>\r\n }\r\n \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) {\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"] }]
|
|
3239
3271
|
}], propDecorators: { valueName: [{
|
|
3240
3272
|
type: Input
|
|
3241
3273
|
}], className: [{
|
|
@@ -3453,7 +3485,7 @@ class TextareaComponent extends ControlValueAccessorDirective {
|
|
|
3453
3485
|
useExisting: forwardRef(() => TextareaComponent),
|
|
3454
3486
|
multi: true,
|
|
3455
3487
|
},
|
|
3456
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [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 [placeholder]=\"placeholder\" min=\"minlength\" arOnly max=\"maxValue\"\r\n [formControl]=\"control\" matInput></textarea>\r\n }\r\n @if (type === 'enOnly'){\r\n <textarea [placeholder]=\"placeholder\" min=\"minlength\" enOnly max=\"maxValue\"\r\n [formControl]=\"control\" matInput></textarea>\r\n }\r\n @if (type !== 'enOnly' && type !== 'arOnly' ){\r\n <textarea [placeholder]=\"placeholder\" \r\n [maxlength]=\"maxLength\" min=\"minlength\" specialIsAlphaNumeric max=\"maxValue\"\r\n [formControl]=\"control\" matInput></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 \r\n </mat-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n \r\n </ng-container>\r\n}\r\n@if (isReadOnly && (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\r\n", styles: ["
|
|
3488
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [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 [placeholder]=\"placeholder\" min=\"minlength\" arOnly max=\"maxValue\"\r\n [formControl]=\"control\" matInput></textarea>\r\n }\r\n @if (type === 'enOnly'){\r\n <textarea [placeholder]=\"placeholder\" min=\"minlength\" enOnly max=\"maxValue\"\r\n [formControl]=\"control\" matInput></textarea>\r\n }\r\n @if (type !== 'enOnly' && type !== 'arOnly' ){\r\n <textarea [placeholder]=\"placeholder\" \r\n [maxlength]=\"maxLength\" min=\"minlength\" specialIsAlphaNumeric max=\"maxValue\"\r\n [formControl]=\"control\" matInput></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 \r\n </mat-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n \r\n </ng-container>\r\n}\r\n@if (isReadOnly && (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\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2$1.MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "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"], exportAs: ["matInput"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }] });
|
|
3457
3489
|
}
|
|
3458
3490
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
3459
3491
|
type: Component,
|
|
@@ -3467,7 +3499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3467
3499
|
useExisting: forwardRef(() => TextareaComponent),
|
|
3468
3500
|
multi: true,
|
|
3469
3501
|
},
|
|
3470
|
-
], template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [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 [placeholder]=\"placeholder\" min=\"minlength\" arOnly max=\"maxValue\"\r\n [formControl]=\"control\" matInput></textarea>\r\n }\r\n @if (type === 'enOnly'){\r\n <textarea [placeholder]=\"placeholder\" min=\"minlength\" enOnly max=\"maxValue\"\r\n [formControl]=\"control\" matInput></textarea>\r\n }\r\n @if (type !== 'enOnly' && type !== 'arOnly' ){\r\n <textarea [placeholder]=\"placeholder\" \r\n [maxlength]=\"maxLength\" min=\"minlength\" specialIsAlphaNumeric max=\"maxValue\"\r\n [formControl]=\"control\" matInput></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 \r\n </mat-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n \r\n </ng-container>\r\n}\r\n@if (isReadOnly && (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\r\n"
|
|
3502
|
+
], template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [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 [placeholder]=\"placeholder\" min=\"minlength\" arOnly max=\"maxValue\"\r\n [formControl]=\"control\" matInput></textarea>\r\n }\r\n @if (type === 'enOnly'){\r\n <textarea [placeholder]=\"placeholder\" min=\"minlength\" enOnly max=\"maxValue\"\r\n [formControl]=\"control\" matInput></textarea>\r\n }\r\n @if (type !== 'enOnly' && type !== 'arOnly' ){\r\n <textarea [placeholder]=\"placeholder\" \r\n [maxlength]=\"maxLength\" min=\"minlength\" specialIsAlphaNumeric max=\"maxValue\"\r\n [formControl]=\"control\" matInput></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 \r\n </mat-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n \r\n </ng-container>\r\n}\r\n@if (isReadOnly && (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\r\n" }]
|
|
3471
3503
|
}], propDecorators: { className: [{
|
|
3472
3504
|
type: Input
|
|
3473
3505
|
}], preventSpecailChar: [{
|
|
@@ -3529,7 +3561,7 @@ class ToggleButtonComponent extends ControlValueAccessorDirective {
|
|
|
3529
3561
|
useExisting: forwardRef(() => ToggleButtonComponent),
|
|
3530
3562
|
multi: true,
|
|
3531
3563
|
},
|
|
3532
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n @if(options){\r\n <mat-button-toggle-group class=\"
|
|
3564
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n @if(options){\r\n <mat-button-toggle-group class=\"Toggle__buttons d-flex align-items-center gap-3\" [value]=\"control.value\" [formControl]=\"control\"\r\n aria-label=\"Font Style\" [multiple]=\"multiple\">\r\n @for(item of options; track item){\r\n <mat-button-toggle [value]=\"item[key]\" (click)=\"hasHint ? hintSection?.toggle() : null\" [satPopoverAnchor]=\"hintSection\">\r\n <span>\r\n {{item[displayedLabel]}}\r\n </span>\r\n <sat-popover #hintSection [hasBackdrop]=\" true\" verticalAlign=\"below\">\r\n <div class=\"default-tooltip\">\r\n <p class=\"m-0\" [innerHTML]=\"item[displayedLabel]\"></p>\r\n </div>\r\n </sat-popover>\r\n </mat-button-toggle>\r\n }\r\n\r\n </mat-button-toggle-group>\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 class=\"info-item w-100\" [insideTable]=\"insideTable\" [type]=\"'toggleBtn'\" [label]=\"label\" [value]=\"control?.value\"></app-info-item>\r\n </ng-container>\r\n\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { 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: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { 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: "ngmodule", type: i4.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"] }] });
|
|
3533
3565
|
}
|
|
3534
3566
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ToggleButtonComponent, decorators: [{
|
|
3535
3567
|
type: Component,
|
|
@@ -3544,7 +3576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3544
3576
|
useExisting: forwardRef(() => ToggleButtonComponent),
|
|
3545
3577
|
multi: true,
|
|
3546
3578
|
},
|
|
3547
|
-
], standalone: true, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n @if(options){\r\n <mat-button-toggle-group class=\"
|
|
3579
|
+
], standalone: true, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n @if(options){\r\n <mat-button-toggle-group class=\"Toggle__buttons d-flex align-items-center gap-3\" [value]=\"control.value\" [formControl]=\"control\"\r\n aria-label=\"Font Style\" [multiple]=\"multiple\">\r\n @for(item of options; track item){\r\n <mat-button-toggle [value]=\"item[key]\" (click)=\"hasHint ? hintSection?.toggle() : null\" [satPopoverAnchor]=\"hintSection\">\r\n <span>\r\n {{item[displayedLabel]}}\r\n </span>\r\n <sat-popover #hintSection [hasBackdrop]=\" true\" verticalAlign=\"below\">\r\n <div class=\"default-tooltip\">\r\n <p class=\"m-0\" [innerHTML]=\"item[displayedLabel]\"></p>\r\n </div>\r\n </sat-popover>\r\n </mat-button-toggle>\r\n }\r\n\r\n </mat-button-toggle-group>\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 class=\"info-item w-100\" [insideTable]=\"insideTable\" [type]=\"'toggleBtn'\" [label]=\"label\" [value]=\"control?.value\"></app-info-item>\r\n </ng-container>\r\n\r\n}\r\n" }]
|
|
3548
3580
|
}], propDecorators: { className: [{
|
|
3549
3581
|
type: Input
|
|
3550
3582
|
}], data: [{
|
|
@@ -3656,7 +3688,7 @@ class TableListComponent extends BaseComponent {
|
|
|
3656
3688
|
sentBack() {
|
|
3657
3689
|
}
|
|
3658
3690
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3659
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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]" }] });
|
|
3691
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$2.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]" }] });
|
|
3660
3692
|
}
|
|
3661
3693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableListComponent, decorators: [{
|
|
3662
3694
|
type: Component,
|
|
@@ -4093,7 +4125,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
|
|
|
4093
4125
|
useExisting: forwardRef(() => DocsUploaderComponent),
|
|
4094
4126
|
multi: true,
|
|
4095
4127
|
},
|
|
4096
|
-
], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], 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\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <section\r\n [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n [class.insideTableStyle]=\"insideTable\">\r\n <div\r\n [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n (click)=\"fileAttached.click()\">\r\n @if (!uploading) {\r\n <div class=\"icon mb-1\">\r\n <svg\r\n [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n fill=\"#DEE0E2\"/>\r\n <path\r\n d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n fill=\"#8E9AA0\"/>\r\n <path\r\n d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n fill=\"#F9F9F9\"/>\r\n </svg>\r\n </div>\r\n }\r\n @if (uploading) {\r\n <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n }\r\n\r\n <div class=\"f-14 fc-black fw-normal\">\r\n <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n </div>\r\n <div class=\"fs-10 fc-dark-gray\">\r\n {{ allowedExtensions ? allowedExtensions : '' }}\r\n </div>\r\n\r\n <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n </div>\r\n </section>\r\n\r\n @if (hints) {\r\n <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n @for (hint of hints; track hint) {\r\n <ng-container>\r\n <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n <ds-icon\r\n icon=\"{{ hint.valid ? 'check-circle-f' : 'check-circle-o' }}\"\r\n class=\"fs-24 {{ hint.valid ? 'fc-green' : 'fc-dark-gray' }}\"></ds-icon>\r\n <span class=\"{{ hint.valid ? 'fc-black' : 'fc-dark-gray' }}\">{{ hint.label }}</span>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n\r\n @if (hint) {\r\n <mat-hint class=\"d-flex align-items-center gap-1\">\r\n <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n\r\n @if (multiple) {\r\n <section class=\"files-list\">\r\n @for (file of displayedFiles; track file; let i = $index) {\r\n <div class=\"file-item-container\">\r\n <ds-attachments\r\n [matTooltip]=\"file?.fileName\"\r\n [file]=\"{ name: file.fileName }\"\r\n (downloadEvent)=\"attachmentAction('download', i, file)\"\r\n (deleteEvent)=\"attachmentAction('delete', i, file)\"\r\n [showActions]=\"showActions\">\r\n </ds-attachments>\r\n </div>\r\n }\r\n </section>\r\n }\r\n\r\n @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n <section class=\"files-list\">\r\n <div class=\"file-item-container file-item-container-actions\">\r\n <ds-attachments\r\n [matTooltip]=\"control.value?.fileName\"\r\n [file]=\"{ name: control.value.fileName }\"\r\n (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n [showActions]=\"showActions\">\r\n </ds-attachments>\r\n </div>\r\n </section>\r\n }\r\n\r\n <div class=\"attachments-error\">\r\n @if (!validExtension) {\r\n <section class=\"files-list mt-2\">\r\n <div class=\"file-item-container \">\r\n <ds-attachments\r\n [file]=\"wrongFile\" error [showActions]=\"false\">\r\n </ds-attachments>\r\n </div>\r\n </section>\r\n }\r\n\r\n @if (!allowedFileSize) {\r\n <mat-error class=\"fs-12 my-2\">\r\n {{ maxSize === \"0.3\" ? ('support3' | translate ): ('support2' | translate) + maxSize + ('mb' | translate) }}\r\n </mat-error>\r\n }\r\n\r\n @if (!fileNotDuplicated) {\r\n <mat-error class=\"fs-12 my-2\">{{ 'duplicated-error' | translate }}</mat-error>\r\n }\r\n\r\n @if (lengthError) {\r\n <mat-error class=\"fs-12\">{{ 'lengthError' | translate }} :{{ maxLength }}</mat-error>\r\n }\r\n\r\n @if (showErrorMessage) {\r\n <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n }\r\n </div>\r\n </ng-container>\r\n}\r\n\r\n@if (isReadOnly) {\r\n <ng-container>\r\n @if (multiple && displayedFiles) {\r\n <ng-container>\r\n <div class=\"info-item\">\r\n @if (label) {\r\n <span class=\"name\">{{ label }}</span>\r\n }\r\n @if (displayedFiles?.length) {\r\n <span>\r\n @for (file of displayedFiles; track file; let i = $index) {\r\n <div class=\"file-item-container\">\r\n <ds-attachments\r\n [matTooltip]=\"file?.fileName\"\r\n class=\"my-2\" [file]=\"{ name: file.fileName }\" readOnly (downloadEvent)=\"downloadFile($event, file)\"\r\n [showActions]=\"showActions\">\r\n </ds-attachments>\r\n </div>\r\n }\r\n </span>\r\n }\r\n @if (!displayedFiles?.length) {\r\n <span class=\"disc\">\r\n {{ 'NoAttachments' | translate }}\r\n </span>\r\n }\r\n </div>\r\n </ng-container>\r\n }\r\n\r\n @if (!multiple && (control.value?.['attachmentId'] || control.value?.['fileContents'])) {\r\n <ng-container>\r\n <div class=\"info-item\">\r\n @if (label) {\r\n <span class=\"name\">{{ label }}</span>\r\n }\r\n <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth': insideTable}\">\r\n @if (control.value?.['attachmentId'] || control.value?.['fileContents']) {\r\n <ds-attachments\r\n [matTooltip]=\"control.value?.fileName\" [file]=\"{ name: control.value.fileName }\" [showActions]=\"showActions\"\r\n (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n readOnly>\r\n </ds-attachments>\r\n }\r\n </div>\r\n </div>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n}", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45PX;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;DISPLAY:FLEX;ALIGN-ITEMS:CENTER;JUSTIFY-CONTENT:CENTER}.file-uploader-table-dev{DISPLAY:FLEX;ALIGN-ITEMS:CENTER;GAP:1REM}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
4128
|
+
], viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["inputFile"], 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]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <section\r\n [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n [class.insideTableStyle]=\"insideTable\">\r\n <div\r\n [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n (click)=\"fileAttached.click()\">\r\n @if (!uploading) {\r\n <div class=\"icon mb-1\">\r\n <svg\r\n [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n fill=\"#DEE0E2\"/>\r\n <path\r\n d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n fill=\"#8E9AA0\"/>\r\n <path\r\n d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n fill=\"#F9F9F9\"/>\r\n </svg>\r\n </div>\r\n }\r\n @if (uploading) {\r\n <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n }\r\n\r\n <div class=\"f-14 fc-black fw-normal\">\r\n <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n </div>\r\n <div class=\"fs-10 fc-dark-gray\">\r\n {{ allowedExtensions ? allowedExtensions : '' }}\r\n </div>\r\n\r\n <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n </div>\r\n </section>\r\n\r\n @if (hints) {\r\n <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n @for (hint of hints; track hint) {\r\n <ng-container>\r\n <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n <ds-icon\r\n icon=\"{{ hint.valid ? 'check-circle-f' : 'check-circle-o' }}\"\r\n class=\"fs-24 {{ hint.valid ? 'fc-green' : 'fc-dark-gray' }}\"></ds-icon>\r\n <span class=\"{{ hint.valid ? 'fc-black' : 'fc-dark-gray' }}\">{{ hint.label }}</span>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n\r\n @if (hint) {\r\n <mat-hint class=\"d-flex align-items-center gap-1\">\r\n <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n\r\n @if (multiple) {\r\n <section class=\"files-list\">\r\n @for (file of displayedFiles; track file; let i = $index) {\r\n <div class=\"file-item-container\">\r\n <ds-attachments\r\n [matTooltip]=\"file?.fileName\"\r\n [file]=\"{ name: file.fileName }\"\r\n (downloadEvent)=\"attachmentAction('download', i, file)\"\r\n (deleteEvent)=\"attachmentAction('delete', i, file)\"\r\n [showActions]=\"showActions\">\r\n </ds-attachments>\r\n </div>\r\n }\r\n </section>\r\n }\r\n\r\n @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n <section class=\"files-list\">\r\n <div class=\"file-item-container file-item-container-actions\">\r\n <ds-attachments\r\n [matTooltip]=\"control.value?.fileName\"\r\n [file]=\"{ name: control.value.fileName }\"\r\n (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n [showActions]=\"showActions\">\r\n </ds-attachments>\r\n </div>\r\n </section>\r\n }\r\n\r\n <div class=\"attachments-error\">\r\n @if (!validExtension) {\r\n <section class=\"files-list mt-2\">\r\n <div class=\"file-item-container \">\r\n <ds-attachments\r\n [file]=\"wrongFile\" error [showActions]=\"false\">\r\n </ds-attachments>\r\n </div>\r\n </section>\r\n }\r\n\r\n @if (!allowedFileSize) {\r\n <mat-error class=\"fs-12 my-2\">\r\n {{ maxSize === \"0.3\" ? ('support3' | translate ): ('support2' | translate) + maxSize + ('mb' | translate) }}\r\n </mat-error>\r\n }\r\n\r\n @if (!fileNotDuplicated) {\r\n <mat-error class=\"fs-12 my-2\">{{ 'duplicated-error' | translate }}</mat-error>\r\n }\r\n\r\n @if (lengthError) {\r\n <mat-error class=\"fs-12\">{{ 'lengthError' | translate }} :{{ maxLength }}</mat-error>\r\n }\r\n\r\n @if (showErrorMessage) {\r\n <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n }\r\n </div>\r\n </ng-container>\r\n}\r\n\r\n@if (isReadOnly) {\r\n <ng-container>\r\n @if (multiple && displayedFiles) {\r\n <ng-container>\r\n <div class=\"info-item\">\r\n @if (label) {\r\n <span class=\"name\">{{ label }}</span>\r\n }\r\n @if (displayedFiles?.length) {\r\n <span>\r\n @for (file of displayedFiles; track file; let i = $index) {\r\n <div class=\"file-item-container\">\r\n <ds-attachments\r\n [matTooltip]=\"file?.fileName\"\r\n class=\"my-2\" [file]=\"{ name: file.fileName }\" readOnly (downloadEvent)=\"downloadFile($event, file)\"\r\n [showActions]=\"showActions\">\r\n </ds-attachments>\r\n </div>\r\n }\r\n </span>\r\n }\r\n @if (!displayedFiles?.length) {\r\n <span class=\"disc\">\r\n {{ 'NoAttachments' | translate }}\r\n </span>\r\n }\r\n </div>\r\n </ng-container>\r\n }\r\n\r\n @if (!multiple && (control.value?.['attachmentId'] || control.value?.['fileContents'])) {\r\n <ng-container>\r\n <div class=\"info-item\">\r\n @if (label) {\r\n <span class=\"name\">{{ label }}</span>\r\n }\r\n <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth': insideTable}\">\r\n @if (control.value?.['attachmentId'] || control.value?.['fileContents']) {\r\n <ds-attachments\r\n [matTooltip]=\"control.value?.fileName\" [file]=\"{ name: control.value.fileName }\" [showActions]=\"showActions\"\r\n (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n readOnly>\r\n </ds-attachments>\r\n }\r\n </div>\r\n </div>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n}", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
4097
4129
|
}
|
|
4098
4130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DocsUploaderComponent, decorators: [{
|
|
4099
4131
|
type: Component,
|
|
@@ -4111,7 +4143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
4111
4143
|
useExisting: forwardRef(() => DocsUploaderComponent),
|
|
4112
4144
|
multi: true,
|
|
4113
4145
|
},
|
|
4114
|
-
], template: "@if (!isReadOnly) {\r\n <ng-container>\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <section\r\n [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n [class.insideTableStyle]=\"insideTable\">\r\n <div\r\n [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n (click)=\"fileAttached.click()\">\r\n @if (!uploading) {\r\n <div class=\"icon mb-1\">\r\n <svg\r\n [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n fill=\"#DEE0E2\"/>\r\n <path\r\n d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n fill=\"#8E9AA0\"/>\r\n <path\r\n d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n fill=\"#F9F9F9\"/>\r\n </svg>\r\n </div>\r\n }\r\n @if (uploading) {\r\n <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n }\r\n\r\n <div class=\"f-14 fc-black fw-normal\">\r\n <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n </div>\r\n <div class=\"fs-10 fc-dark-gray\">\r\n {{ allowedExtensions ? allowedExtensions : '' }}\r\n </div>\r\n\r\n <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n </div>\r\n </section>\r\n\r\n @if (hints) {\r\n <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n @for (hint of hints; track hint) {\r\n <ng-container>\r\n <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n <ds-icon\r\n icon=\"{{ hint.valid ? 'check-circle-f' : 'check-circle-o' }}\"\r\n class=\"fs-24 {{ hint.valid ? 'fc-green' : 'fc-dark-gray' }}\"></ds-icon>\r\n <span class=\"{{ hint.valid ? 'fc-black' : 'fc-dark-gray' }}\">{{ hint.label }}</span>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n\r\n @if (hint) {\r\n <mat-hint class=\"d-flex align-items-center gap-1\">\r\n <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n\r\n @if (multiple) {\r\n <section class=\"files-list\">\r\n @for (file of displayedFiles; track file; let i = $index) {\r\n <div class=\"file-item-container\">\r\n <ds-attachments\r\n [matTooltip]=\"file?.fileName\"\r\n [file]=\"{ name: file.fileName }\"\r\n (downloadEvent)=\"attachmentAction('download', i, file)\"\r\n (deleteEvent)=\"attachmentAction('delete', i, file)\"\r\n [showActions]=\"showActions\">\r\n </ds-attachments>\r\n </div>\r\n }\r\n </section>\r\n }\r\n\r\n @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n <section class=\"files-list\">\r\n <div class=\"file-item-container file-item-container-actions\">\r\n <ds-attachments\r\n [matTooltip]=\"control.value?.fileName\"\r\n [file]=\"{ name: control.value.fileName }\"\r\n (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n [showActions]=\"showActions\">\r\n </ds-attachments>\r\n </div>\r\n </section>\r\n }\r\n\r\n <div class=\"attachments-error\">\r\n @if (!validExtension) {\r\n <section class=\"files-list mt-2\">\r\n <div class=\"file-item-container \">\r\n <ds-attachments\r\n [file]=\"wrongFile\" error [showActions]=\"false\">\r\n </ds-attachments>\r\n </div>\r\n </section>\r\n }\r\n\r\n @if (!allowedFileSize) {\r\n <mat-error class=\"fs-12 my-2\">\r\n {{ maxSize === \"0.3\" ? ('support3' | translate ): ('support2' | translate) + maxSize + ('mb' | translate) }}\r\n </mat-error>\r\n }\r\n\r\n @if (!fileNotDuplicated) {\r\n <mat-error class=\"fs-12 my-2\">{{ 'duplicated-error' | translate }}</mat-error>\r\n }\r\n\r\n @if (lengthError) {\r\n <mat-error class=\"fs-12\">{{ 'lengthError' | translate }} :{{ maxLength }}</mat-error>\r\n }\r\n\r\n @if (showErrorMessage) {\r\n <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n }\r\n </div>\r\n </ng-container>\r\n}\r\n\r\n@if (isReadOnly) {\r\n <ng-container>\r\n @if (multiple && displayedFiles) {\r\n <ng-container>\r\n <div class=\"info-item\">\r\n @if (label) {\r\n <span class=\"name\">{{ label }}</span>\r\n }\r\n @if (displayedFiles?.length) {\r\n <span>\r\n @for (file of displayedFiles; track file; let i = $index) {\r\n <div class=\"file-item-container\">\r\n <ds-attachments\r\n [matTooltip]=\"file?.fileName\"\r\n class=\"my-2\" [file]=\"{ name: file.fileName }\" readOnly (downloadEvent)=\"downloadFile($event, file)\"\r\n [showActions]=\"showActions\">\r\n </ds-attachments>\r\n </div>\r\n }\r\n </span>\r\n }\r\n @if (!displayedFiles?.length) {\r\n <span class=\"disc\">\r\n {{ 'NoAttachments' | translate }}\r\n </span>\r\n }\r\n </div>\r\n </ng-container>\r\n }\r\n\r\n @if (!multiple && (control.value?.['attachmentId'] || control.value?.['fileContents'])) {\r\n <ng-container>\r\n <div class=\"info-item\">\r\n @if (label) {\r\n <span class=\"name\">{{ label }}</span>\r\n }\r\n <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth': insideTable}\">\r\n @if (control.value?.['attachmentId'] || control.value?.['fileContents']) {\r\n <ds-attachments\r\n [matTooltip]=\"control.value?.fileName\" [file]=\"{ name: control.value.fileName }\" [showActions]=\"showActions\"\r\n (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n readOnly>\r\n </ds-attachments>\r\n }\r\n </div>\r\n </div>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n}", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45PX;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;DISPLAY:FLEX;ALIGN-ITEMS:CENTER;JUSTIFY-CONTENT:CENTER}.file-uploader-table-dev{DISPLAY:FLEX;ALIGN-ITEMS:CENTER;GAP:1REM}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"] }]
|
|
4146
|
+
], template: "@if (!isReadOnly) {\r\n <ng-container>\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <section\r\n [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\" class=\" mb-2\"\r\n [class.insideTableStyle]=\"insideTable\">\r\n <div\r\n [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\" class=\"file-uploader-input\"\r\n (click)=\"fileAttached.click()\">\r\n @if (!uploading) {\r\n <div class=\"icon mb-1\">\r\n <svg\r\n [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\" width=\"41\" height=\"38\" viewBox=\"0 0 41 38\"\r\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n fill=\"#DEE0E2\"/>\r\n <path\r\n d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n fill=\"#8E9AA0\"/>\r\n <path\r\n d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n fill=\"#F9F9F9\"/>\r\n </svg>\r\n </div>\r\n }\r\n @if (uploading) {\r\n <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n }\r\n\r\n <div class=\"f-14 fc-black fw-normal\">\r\n <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n </div>\r\n <div class=\"fs-10 fc-dark-gray\">\r\n {{ allowedExtensions ? allowedExtensions : '' }}\r\n </div>\r\n\r\n <input type=\"file\" #inputFile [accept]=\"accept\" class=\"d-none\" #fileAttached (change)=\"onValueChange($event)\">\r\n </div>\r\n </section>\r\n\r\n @if (hints) {\r\n <div class=\"d-flex align-items-center gap-3 mb-3\">\r\n @for (hint of hints; track hint) {\r\n <ng-container>\r\n <div class=\"d-flex align-items-center gap-1 fs-12\">\r\n <ds-icon\r\n icon=\"{{ hint.valid ? 'check-circle-f' : 'check-circle-o' }}\"\r\n class=\"fs-24 {{ hint.valid ? 'fc-green' : 'fc-dark-gray' }}\"></ds-icon>\r\n <span class=\"{{ hint.valid ? 'fc-black' : 'fc-dark-gray' }}\">{{ hint.label }}</span>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n\r\n @if (hint) {\r\n <mat-hint class=\"d-flex align-items-center gap-1\">\r\n <ds-icon icon=\"info\" class=\"fs-17 fc-dark-gray\"></ds-icon>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n\r\n @if (multiple) {\r\n <section class=\"files-list\">\r\n @for (file of displayedFiles; track file; let i = $index) {\r\n <div class=\"file-item-container\">\r\n <ds-attachments\r\n [matTooltip]=\"file?.fileName\"\r\n [file]=\"{ name: file.fileName }\"\r\n (downloadEvent)=\"attachmentAction('download', i, file)\"\r\n (deleteEvent)=\"attachmentAction('delete', i, file)\"\r\n [showActions]=\"showActions\">\r\n </ds-attachments>\r\n </div>\r\n }\r\n </section>\r\n }\r\n\r\n @if (!multiple && (control.value?.fileContents || control.value?.attachmentId)) {\r\n <section class=\"files-list\">\r\n <div class=\"file-item-container file-item-container-actions\">\r\n <ds-attachments\r\n [matTooltip]=\"control.value?.fileName\"\r\n [file]=\"{ name: control.value.fileName }\"\r\n (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n [showActions]=\"showActions\">\r\n </ds-attachments>\r\n </div>\r\n </section>\r\n }\r\n\r\n <div class=\"attachments-error\">\r\n @if (!validExtension) {\r\n <section class=\"files-list mt-2\">\r\n <div class=\"file-item-container \">\r\n <ds-attachments\r\n [file]=\"wrongFile\" error [showActions]=\"false\">\r\n </ds-attachments>\r\n </div>\r\n </section>\r\n }\r\n\r\n @if (!allowedFileSize) {\r\n <mat-error class=\"fs-12 my-2\">\r\n {{ maxSize === \"0.3\" ? ('support3' | translate ): ('support2' | translate) + maxSize + ('mb' | translate) }}\r\n </mat-error>\r\n }\r\n\r\n @if (!fileNotDuplicated) {\r\n <mat-error class=\"fs-12 my-2\">{{ 'duplicated-error' | translate }}</mat-error>\r\n }\r\n\r\n @if (lengthError) {\r\n <mat-error class=\"fs-12\">{{ 'lengthError' | translate }} :{{ maxLength }}</mat-error>\r\n }\r\n\r\n @if (showErrorMessage) {\r\n <!-- <mat-error class=\"fs-12\">{{errorMessage}} </mat-error> -->\r\n }\r\n </div>\r\n </ng-container>\r\n}\r\n\r\n@if (isReadOnly) {\r\n <ng-container>\r\n @if (multiple && displayedFiles) {\r\n <ng-container>\r\n <div class=\"info-item\">\r\n @if (label) {\r\n <span class=\"name\">{{ label }}</span>\r\n }\r\n @if (displayedFiles?.length) {\r\n <span>\r\n @for (file of displayedFiles; track file; let i = $index) {\r\n <div class=\"file-item-container\">\r\n <ds-attachments\r\n [matTooltip]=\"file?.fileName\"\r\n class=\"my-2\" [file]=\"{ name: file.fileName }\" readOnly (downloadEvent)=\"downloadFile($event, file)\"\r\n [showActions]=\"showActions\">\r\n </ds-attachments>\r\n </div>\r\n }\r\n </span>\r\n }\r\n @if (!displayedFiles?.length) {\r\n <span class=\"disc\">\r\n {{ 'NoAttachments' | translate }}\r\n </span>\r\n }\r\n </div>\r\n </ng-container>\r\n }\r\n\r\n @if (!multiple && (control.value?.['attachmentId'] || control.value?.['fileContents'])) {\r\n <ng-container>\r\n <div class=\"info-item\">\r\n @if (label) {\r\n <span class=\"name\">{{ label }}</span>\r\n }\r\n <div class=\"disc file-item-container file-item-container-actions\" [ngClass]=\"{'insideTableWidth': insideTable}\">\r\n @if (control.value?.['attachmentId'] || control.value?.['fileContents']) {\r\n <ds-attachments\r\n [matTooltip]=\"control.value?.fileName\" [file]=\"{ name: control.value.fileName }\" [showActions]=\"showActions\"\r\n (downloadEvent)=\"attachmentAction('download', null, control.value)\"\r\n (deleteEvent)=\"attachmentAction('delete', null, control.value)\"\r\n readOnly>\r\n </ds-attachments>\r\n }\r\n </div>\r\n </div>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n}", styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"] }]
|
|
4115
4147
|
}], propDecorators: { useCrop: [{
|
|
4116
4148
|
type: Input
|
|
4117
4149
|
}], formKey: [{
|
|
@@ -4276,7 +4308,7 @@ class AttachmentSectionDataComponent extends ControlValueAccessorDirective {
|
|
|
4276
4308
|
useExisting: forwardRef(() => AttachmentSectionDataComponent),
|
|
4277
4309
|
multi: true,
|
|
4278
4310
|
},
|
|
4279
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-container\">\r\n <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n <h3 class=\"mb-0 font-16 fw-medium\">{{ 'addAttachments' | translate }}</h3>\r\n <ds-button icon matDialogClose>\r\n <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n </ds-button>\r\n </div>\r\n <mat-dialog-content>\r\n <div class=\"px-md-4 mt-3\">\r\n <form [formGroup]=\"formGroup\">\r\n <app-file-uploader class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n [labelTextReadMode]=\"'Attachment' | translate\" [labelTextWriteMode]=\"'Attachment' | translate\"\r\n [hasColumnBreak]=\"false\" [label]=\"'Attachment' | translate\" [required]=\"true\" [multiple]=\"false\" \r\n [allowedExtensions]=\"dialogData?.data\"\r\n [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n formControlName=\"file\">\r\n </app-file-uploader>\r\n\r\n <app-textarea class=\"section-item d-block mt-4 mb-4\" [section]=\"section\" [field]=\"popupData?.fileDescription\" name=\"fileDescription\"\r\n [labelTextReadMode]=\"'description' | translate\" [labelTextWriteMode]=\"'description' | translate\"\r\n [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n [label]=\"'description' | translate\" [required]=\"dialogData?.isRequired\" [minLength]='1' [maxLength]='500'\r\n [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n formControlName=\"description\">\r\n </app-textarea>\r\n\r\n <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"popupData?.attachmentcomment\" name=\"attachmentcomment\"\r\n [labelTextReadMode]=\"'comments' | translate\" [labelTextWriteMode]=\"'comments' | translate\"\r\n [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\" \r\n [label]=\"'comments' | translate\" [required]=\"false\" [minLength]='1' [maxLength]='500' \r\n [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n formControlName=\"comments\">\r\n </app-textarea>\r\n </form>\r\n </div>\r\n </mat-dialog-content>\r\n <mat-dialog-actions class=\"default-footer justify-content-end gap-3\">\r\n <ds-button shape=\"outline\" matDialogClose [disabled]=\"uploading\">{{ 'cancel' | translate }}</ds-button>\r\n <ds-button (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n [disabled]=\"(!(formGroup?.value?.file?.fileContents || formGroup?.value?.file?.attachmentId ) || (dialogData?.isRequired && !formGroup?.value?.description) || uploading || !formGroup.valid)\">\r\n <ng-container *ngIf=\"!editMode; else editTemplate\">\r\n <span>{{ 'add' | translate }}</span>\r\n </ng-container>\r\n <ng-template #editTemplate>\r\n <span>{{ 'edit' | translate }}</span>\r\n </ng-template>\r\n </ds-button>\r\n </mat-dialog-actions>\r\n</div>", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px !important;--popup-width: 100% !important}::ng-deep .default-footer ds-button::part(base){--btn-min-width: 90px
|
|
4311
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"popup-container\">\r\n <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n <h3 class=\"mb-0 font-16 fw-medium\">{{ 'addAttachments' | translate }}</h3>\r\n <ds-button icon matDialogClose>\r\n <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n </ds-button>\r\n </div>\r\n <mat-dialog-content>\r\n <div class=\"px-md-4 mt-3\">\r\n <form [formGroup]=\"formGroup\">\r\n <app-file-uploader class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n [labelTextReadMode]=\"'Attachment' | translate\" [labelTextWriteMode]=\"'Attachment' | translate\"\r\n [hasColumnBreak]=\"false\" [label]=\"'Attachment' | translate\" [required]=\"true\" [multiple]=\"false\" \r\n [allowedExtensions]=\"dialogData?.data\"\r\n [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n formControlName=\"file\">\r\n </app-file-uploader>\r\n\r\n <app-textarea class=\"section-item d-block mt-4 mb-4\" [section]=\"section\" [field]=\"popupData?.fileDescription\" name=\"fileDescription\"\r\n [labelTextReadMode]=\"'description' | translate\" [labelTextWriteMode]=\"'description' | translate\"\r\n [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n [label]=\"'description' | translate\" [required]=\"dialogData?.isRequired\" [minLength]='1' [maxLength]='500'\r\n [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n formControlName=\"description\">\r\n </app-textarea>\r\n\r\n <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"popupData?.attachmentcomment\" name=\"attachmentcomment\"\r\n [labelTextReadMode]=\"'comments' | translate\" [labelTextWriteMode]=\"'comments' | translate\"\r\n [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\" \r\n [label]=\"'comments' | translate\" [required]=\"false\" [minLength]='1' [maxLength]='500' \r\n [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n formControlName=\"comments\">\r\n </app-textarea>\r\n </form>\r\n </div>\r\n </mat-dialog-content>\r\n <mat-dialog-actions class=\"default-footer justify-content-end gap-3\">\r\n <ds-button shape=\"outline\" matDialogClose [disabled]=\"uploading\">{{ 'cancel' | translate }}</ds-button>\r\n <ds-button (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n [disabled]=\"(!(formGroup?.value?.file?.fileContents || formGroup?.value?.file?.attachmentId ) || (dialogData?.isRequired && !formGroup?.value?.description) || uploading || !formGroup.valid)\">\r\n <ng-container *ngIf=\"!editMode; else editTemplate\">\r\n <span>{{ 'add' | translate }}</span>\r\n </ng-container>\r\n <ng-template #editTemplate>\r\n <span>{{ 'edit' | translate }}</span>\r\n </ng-template>\r\n </ds-button>\r\n </mat-dialog-actions>\r\n</div>", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px !important;--popup-width: 100% !important}::ng-deep .default-footer ds-button::part(base){--btn-min-width: 90px}\n"], dependencies: [{ kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
4280
4312
|
}
|
|
4281
4313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionDataComponent, decorators: [{
|
|
4282
4314
|
type: Component,
|
|
@@ -4296,7 +4328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
4296
4328
|
useExisting: forwardRef(() => AttachmentSectionDataComponent),
|
|
4297
4329
|
multi: true,
|
|
4298
4330
|
},
|
|
4299
|
-
], template: "<div class=\"popup-container\">\r\n <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n <h3 class=\"mb-0 font-16 fw-medium\">{{ 'addAttachments' | translate }}</h3>\r\n <ds-button icon matDialogClose>\r\n <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n </ds-button>\r\n </div>\r\n <mat-dialog-content>\r\n <div class=\"px-md-4 mt-3\">\r\n <form [formGroup]=\"formGroup\">\r\n <app-file-uploader class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n [labelTextReadMode]=\"'Attachment' | translate\" [labelTextWriteMode]=\"'Attachment' | translate\"\r\n [hasColumnBreak]=\"false\" [label]=\"'Attachment' | translate\" [required]=\"true\" [multiple]=\"false\" \r\n [allowedExtensions]=\"dialogData?.data\"\r\n [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n formControlName=\"file\">\r\n </app-file-uploader>\r\n\r\n <app-textarea class=\"section-item d-block mt-4 mb-4\" [section]=\"section\" [field]=\"popupData?.fileDescription\" name=\"fileDescription\"\r\n [labelTextReadMode]=\"'description' | translate\" [labelTextWriteMode]=\"'description' | translate\"\r\n [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n [label]=\"'description' | translate\" [required]=\"dialogData?.isRequired\" [minLength]='1' [maxLength]='500'\r\n [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n formControlName=\"description\">\r\n </app-textarea>\r\n\r\n <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"popupData?.attachmentcomment\" name=\"attachmentcomment\"\r\n [labelTextReadMode]=\"'comments' | translate\" [labelTextWriteMode]=\"'comments' | translate\"\r\n [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\" \r\n [label]=\"'comments' | translate\" [required]=\"false\" [minLength]='1' [maxLength]='500' \r\n [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n formControlName=\"comments\">\r\n </app-textarea>\r\n </form>\r\n </div>\r\n </mat-dialog-content>\r\n <mat-dialog-actions class=\"default-footer justify-content-end gap-3\">\r\n <ds-button shape=\"outline\" matDialogClose [disabled]=\"uploading\">{{ 'cancel' | translate }}</ds-button>\r\n <ds-button (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n [disabled]=\"(!(formGroup?.value?.file?.fileContents || formGroup?.value?.file?.attachmentId ) || (dialogData?.isRequired && !formGroup?.value?.description) || uploading || !formGroup.valid)\">\r\n <ng-container *ngIf=\"!editMode; else editTemplate\">\r\n <span>{{ 'add' | translate }}</span>\r\n </ng-container>\r\n <ng-template #editTemplate>\r\n <span>{{ 'edit' | translate }}</span>\r\n </ng-template>\r\n </ds-button>\r\n </mat-dialog-actions>\r\n</div>", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px !important;--popup-width: 100% !important}::ng-deep .default-footer ds-button::part(base){--btn-min-width: 90px
|
|
4331
|
+
], template: "<div class=\"popup-container\">\r\n <div class=\"d-flex align-items-center justify-content-end\" mat-dialog-title>\r\n <h3 class=\"mb-0 font-16 fw-medium\">{{ 'addAttachments' | translate }}</h3>\r\n <ds-button icon matDialogClose>\r\n <ds-icon icon=\"close\" class=\"fs-20 fc-black\"></ds-icon>\r\n </ds-button>\r\n </div>\r\n <mat-dialog-content>\r\n <div class=\"px-md-4 mt-3\">\r\n <form [formGroup]=\"formGroup\">\r\n <app-file-uploader class=\"section-item full\" [field]=\"popupData\" name=\"file\" [attachments]=\"dialogData?.attachments\"\r\n [labelTextReadMode]=\"'Attachment' | translate\" [labelTextWriteMode]=\"'Attachment' | translate\"\r\n [hasColumnBreak]=\"false\" [label]=\"'Attachment' | translate\" [required]=\"true\" [multiple]=\"false\" \r\n [allowedExtensions]=\"dialogData?.data\"\r\n [isReadOnly]=\"section?.header?.readOnly\" [showActions]=\"false\"\r\n formControlName=\"file\">\r\n </app-file-uploader>\r\n\r\n <app-textarea class=\"section-item d-block mt-4 mb-4\" [section]=\"section\" [field]=\"popupData?.fileDescription\" name=\"fileDescription\"\r\n [labelTextReadMode]=\"'description' | translate\" [labelTextWriteMode]=\"'description' | translate\"\r\n [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'fileDescription')\"\r\n [label]=\"'description' | translate\" [required]=\"dialogData?.isRequired\" [minLength]='1' [maxLength]='500'\r\n [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n formControlName=\"description\">\r\n </app-textarea>\r\n\r\n <app-textarea class=\"section-item\" [section]=\"section\" [field]=\"popupData?.attachmentcomment\" name=\"attachmentcomment\"\r\n [labelTextReadMode]=\"'comments' | translate\" [labelTextWriteMode]=\"'comments' | translate\"\r\n [hasColumnBreak]=\"false\" (emitedValue)=\"handleEmitValue($event,'attachmentcomment')\" \r\n [label]=\"'comments' | translate\" [required]=\"false\" [minLength]='1' [maxLength]='500' \r\n [isReadOnly]=\"section?.header?.readOnly\" [errorMessage]=\"'lenghtMin1Max500' | translate\"\r\n formControlName=\"comments\">\r\n </app-textarea>\r\n </form>\r\n </div>\r\n </mat-dialog-content>\r\n <mat-dialog-actions class=\"default-footer justify-content-end gap-3\">\r\n <ds-button shape=\"outline\" matDialogClose [disabled]=\"uploading\">{{ 'cancel' | translate }}</ds-button>\r\n <ds-button (click)=\"addAttachments()\" [loading]=\"uploading\"\r\n [disabled]=\"(!(formGroup?.value?.file?.fileContents || formGroup?.value?.file?.attachmentId ) || (dialogData?.isRequired && !formGroup?.value?.description) || uploading || !formGroup.valid)\">\r\n <ng-container *ngIf=\"!editMode; else editTemplate\">\r\n <span>{{ 'add' | translate }}</span>\r\n </ng-container>\r\n <ng-template #editTemplate>\r\n <span>{{ 'edit' | translate }}</span>\r\n </ng-template>\r\n </ds-button>\r\n </mat-dialog-actions>\r\n</div>", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px !important;--popup-width: 100% !important}::ng-deep .default-footer ds-button::part(base){--btn-min-width: 90px}\n"] }]
|
|
4300
4332
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: CoreI18nService }, { type: i2.ToastrService }, { type: CoreService }, { type: i3.DomSanitizer }, { type: i4.FormBuilder }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
4301
4333
|
type: Inject,
|
|
4302
4334
|
args: [MAT_DIALOG_DATA]
|
|
@@ -4459,7 +4491,7 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
|
|
|
4459
4491
|
useExisting: forwardRef(() => AttachmentSectionComponent),
|
|
4460
4492
|
multi: true,
|
|
4461
4493
|
},
|
|
4462
|
-
], viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mt-2 p-0\">\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n \r\n @if (!attachments?.length && !isReadOnly) {\r\n <section\r\n [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n class=\"mb-2\"\r\n [class.insideTableStyle]=\"insideTable\"\r\n (click)=\"addAttachment(); $event.stopPropagation()\">\r\n <div\r\n [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n class=\"file-uploader-input\">\r\n <div class=\"icon mb-1\">\r\n <svg\r\n [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n width=\"41\"\r\n height=\"38\"\r\n viewBox=\"0 0 41 38\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n fill=\"#DEE0E2\"/>\r\n <path\r\n d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n fill=\"#8E9AA0\"/>\r\n <path\r\n d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n fill=\"#F9F9F9\"/>\r\n </svg>\r\n </div>\r\n <div class=\"f-14 fc-black fw-normal\">\r\n <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n </div>\r\n <div class=\"fs-10 fc-dark-gray\">\r\n {{ 'addMultiAttachments' | translate }}\r\n </div>\r\n </div>\r\n </section>\r\n }\r\n\r\n @if (attachments?.length) {\r\n <div\r\n class=\"table-responsive full\"\r\n cdkDropList\r\n [cdkDropListData]=\"attachments\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n >\r\n <table mat-table [dataSource]=\"dataSource\">\r\n\r\n <!-- index Column -->\r\n <ng-container matColumnDef=\"index\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ds-button\r\n [matTooltip]=\"'downloadAll' | translate\"\r\n square icon size=\"small\"\r\n (click)=\"downloadAllAttachments($event)\"\r\n class=\"icon-btn-shadow\">\r\n @if (loading) {\r\n <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n } @else {\r\n <ds-icon\r\n icon=\"download\"\r\n class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n }\r\n </ds-button>\r\n </th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 + pageSize * (pageNumber) }}</td>\r\n </ng-container>\r\n\r\n <!-- Name Column -->\r\n <ng-container matColumnDef=\"file\">\r\n <th mat-header-cell *matHeaderCellDef>{{ 'FileName' | translate }}</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <app-file-uploader\r\n [allowedExtensions]=\"allowedExtensions\"\r\n [displayedFiles]=\"[element]\"\r\n name=\"attachment\"\r\n [showActions]=\"true\"\r\n [isReadOnly]=\"true\"\r\n [multiple]=\"true\">\r\n </app-file-uploader>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Description Column -->\r\n <ng-container matColumnDef=\"description\">\r\n <th mat-header-cell *matHeaderCellDef>{{ 'FileDescription' | translate }}</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <a\r\n class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n [hidden]=\"!element?.['fileDescription']\"\r\n (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n [matTooltip]=\"element?.['fileDescription']\">\r\n {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n </a>\r\n <sat-popover\r\n #fileDescriptionPopover\r\n [anchor]=\"fileDescriptionAnchor\"\r\n [hasBackdrop]=\"true\"\r\n [restoreFocus]=\"false\"\r\n verticalAlign=\"below\"\r\n horizontalAlign=\"center\">\r\n <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</bdi>\r\n </div>\r\n </sat-popover>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Comment Column -->\r\n <ng-container matColumnDef=\"comment\">\r\n <th mat-header-cell *matHeaderCellDef>{{ 'comment' | translate }}</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <a\r\n class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n [hidden]=\"!element?.['attachmentcomment']\"\r\n (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n [satPopoverAnchor]=\"commentsPopover\"\r\n [matTooltip]=\"element?.['attachmentcomment']\"\r\n #commentsAnchor=\"satPopoverAnchor\">\r\n {{ element?.['attachmentcomment']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\r\n </a>\r\n <sat-popover\r\n #commentsPopover\r\n [anchor]=\"commentsAnchor\"\r\n [hasBackdrop]=\"true\"\r\n [restoreFocus]=\"false\"\r\n verticalAlign=\"below\"\r\n horizontalAlign=\"center\">\r\n <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n <bdi class=\"fc-black\">{{ element?.['attachmentcomment'] }}</bdi>\r\n </div>\r\n </sat-popover>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n @if (!isReadOnly) {\r\n <td>\r\n <div class=\"d-flex gap-2\">\r\n <ds-button\r\n square\r\n icon\r\n size=\"small\"\r\n (click)=\"deleteAttachments(i, element)\"\r\n class=\"icon-btn-shadow\">\r\n <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-red\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n square\r\n icon\r\n size=\"small\"\r\n (click)=\"editRow(element, i)\"\r\n class=\"icon-btn-shadow\">\r\n <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n </ds-button>\r\n </div>\r\n </td>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n </table>\r\n\r\n <mat-paginator\r\n #paginator\r\n [pageSizeOptions]=\"[5]\"\r\n (page)=\"onPaginateChange($event)\"\r\n [length]=\"attachments.length\"\r\n [pageSize]=\"pageSize\"\r\n showFirstLastButtons></mat-paginator>\r\n </div>\r\n }\r\n\r\n @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n <div class=\"text-center full mt-3\">\r\n <ds-button\r\n shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n [ngClass]=\"{ 'full-add-btn w-100': attachments?.length }\"\r\n (click)=\"addAttachment(); $event.stopPropagation()\">\r\n <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22\"></ds-icon>\r\n {{ 'addAttachments' | translate }}\r\n </ds-button>\r\n </div>\r\n }\r\n</div>", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: var(--light-gray);--btn-height: 70px;--btn-radius: 6px;border:1px dashed var(--dark-gray)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45PX;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;DISPLAY:FLEX;ALIGN-ITEMS:CENTER;JUSTIFY-CONTENT:CENTER}.file-uploader-table-dev{DISPLAY:FLEX;ALIGN-ITEMS:CENTER;GAP:1REM}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"], dependencies: [{ 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: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
4494
|
+
], viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mt-2 p-0\">\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n @if (!attachments?.length && !isReadOnly) {\r\n <section\r\n [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n class=\"mb-2\"\r\n [class.insideTableStyle]=\"insideTable\"\r\n (click)=\"addAttachment(); $event.stopPropagation()\">\r\n <div\r\n [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n class=\"file-uploader-input\">\r\n <div class=\"icon mb-1\">\r\n <svg\r\n [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n width=\"41\"\r\n height=\"38\"\r\n viewBox=\"0 0 41 38\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n fill=\"#DEE0E2\"/>\r\n <path\r\n d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n fill=\"#8E9AA0\"/>\r\n <path\r\n d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n fill=\"#F9F9F9\"/>\r\n </svg>\r\n </div>\r\n <div class=\"f-14 fc-black fw-normal\">\r\n <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n </div>\r\n <div class=\"fs-10 fc-dark-gray\">\r\n {{ 'addMultiAttachments' | translate }}\r\n </div>\r\n </div>\r\n </section>\r\n }\r\n\r\n @if (attachments?.length) {\r\n <div\r\n class=\"table-responsive full\"\r\n cdkDropList\r\n [cdkDropListData]=\"attachments\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n >\r\n <table mat-table [dataSource]=\"dataSource\">\r\n\r\n <!-- index Column -->\r\n <ng-container matColumnDef=\"index\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ds-button\r\n [matTooltip]=\"'downloadAll' | translate\"\r\n square icon size=\"small\"\r\n (click)=\"downloadAllAttachments($event)\"\r\n class=\"icon-btn-shadow\">\r\n @if (loading) {\r\n <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n } @else {\r\n <ds-icon\r\n icon=\"download\"\r\n class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n }\r\n </ds-button>\r\n </th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 + pageSize * (pageNumber) }}</td>\r\n </ng-container>\r\n\r\n <!-- Name Column -->\r\n <ng-container matColumnDef=\"file\">\r\n <th mat-header-cell *matHeaderCellDef>{{ 'FileName' | translate }}</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <app-file-uploader\r\n [allowedExtensions]=\"allowedExtensions\"\r\n [displayedFiles]=\"[element]\"\r\n name=\"attachment\"\r\n [showActions]=\"true\"\r\n [isReadOnly]=\"true\"\r\n [multiple]=\"true\">\r\n </app-file-uploader>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Description Column -->\r\n <ng-container matColumnDef=\"description\">\r\n <th mat-header-cell *matHeaderCellDef>{{ 'FileDescription' | translate }}</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <a\r\n class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n [hidden]=\"!element?.['fileDescription']\"\r\n (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n [matTooltip]=\"element?.['fileDescription']\">\r\n {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n </a>\r\n <sat-popover\r\n #fileDescriptionPopover\r\n [anchor]=\"fileDescriptionAnchor\"\r\n [hasBackdrop]=\"true\"\r\n [restoreFocus]=\"false\"\r\n verticalAlign=\"below\"\r\n horizontalAlign=\"center\">\r\n <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</bdi>\r\n </div>\r\n </sat-popover>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Comment Column -->\r\n <ng-container matColumnDef=\"comment\">\r\n <th mat-header-cell *matHeaderCellDef>{{ 'comment' | translate }}</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <a\r\n class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n [hidden]=\"!element?.['attachmentcomment']\"\r\n (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n [satPopoverAnchor]=\"commentsPopover\"\r\n [matTooltip]=\"element?.['attachmentcomment']\"\r\n #commentsAnchor=\"satPopoverAnchor\">\r\n {{ element?.['attachmentcomment']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\r\n </a>\r\n <sat-popover\r\n #commentsPopover\r\n [anchor]=\"commentsAnchor\"\r\n [hasBackdrop]=\"true\"\r\n [restoreFocus]=\"false\"\r\n verticalAlign=\"below\"\r\n horizontalAlign=\"center\">\r\n <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n <bdi class=\"fc-black\">{{ element?.['attachmentcomment'] }}</bdi>\r\n </div>\r\n </sat-popover>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n @if (!isReadOnly) {\r\n <td>\r\n <div class=\"d-flex gap-2\">\r\n <ds-button\r\n square\r\n icon\r\n size=\"small\"\r\n (click)=\"deleteAttachments(i, element)\"\r\n class=\"icon-btn-shadow\">\r\n <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-coral\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n square\r\n icon\r\n size=\"small\"\r\n (click)=\"editRow(element, i)\"\r\n class=\"icon-btn-shadow\">\r\n <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n </ds-button>\r\n </div>\r\n </td>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n </table>\r\n\r\n <mat-paginator\r\n #paginator\r\n [pageSizeOptions]=\"[5]\"\r\n (page)=\"onPaginateChange($event)\"\r\n [length]=\"attachments.length\"\r\n [pageSize]=\"pageSize\"\r\n showFirstLastButtons></mat-paginator>\r\n </div>\r\n }\r\n\r\n @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n <div class=\"text-center full mt-3\">\r\n <ds-button\r\n shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n [ngClass]=\"{ 'full-add-btn w-100 pt-1': attachments?.length }\"\r\n (click)=\"addAttachment(); $event.stopPropagation()\">\r\n <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n {{ 'addAttachments' | translate }}\r\n </ds-button>\r\n </div>\r\n }\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\n"], dependencies: [{ 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: "directive", type: i1$2.SatPopoverAnchorDirective, selector: "[satPopoverAnchor]", inputs: ["satPopoverAnchor"], exportAs: ["satPopoverAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
4463
4495
|
}
|
|
4464
4496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionComponent, decorators: [{
|
|
4465
4497
|
type: Component,
|
|
@@ -4490,7 +4522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
4490
4522
|
MatRowDef,
|
|
4491
4523
|
FormLabelComponent,
|
|
4492
4524
|
TranslatePipe
|
|
4493
|
-
], standalone: true, template: "<div class=\"mt-2 p-0\">\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n \r\n @if (!attachments?.length && !isReadOnly) {\r\n <section\r\n [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n class=\"mb-2\"\r\n [class.insideTableStyle]=\"insideTable\"\r\n (click)=\"addAttachment(); $event.stopPropagation()\">\r\n <div\r\n [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n class=\"file-uploader-input\">\r\n <div class=\"icon mb-1\">\r\n <svg\r\n [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n width=\"41\"\r\n height=\"38\"\r\n viewBox=\"0 0 41 38\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n fill=\"#DEE0E2\"/>\r\n <path\r\n d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n fill=\"#8E9AA0\"/>\r\n <path\r\n d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n fill=\"#F9F9F9\"/>\r\n </svg>\r\n </div>\r\n <div class=\"f-14 fc-black fw-normal\">\r\n <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n </div>\r\n <div class=\"fs-10 fc-dark-gray\">\r\n {{ 'addMultiAttachments' | translate }}\r\n </div>\r\n </div>\r\n </section>\r\n }\r\n\r\n @if (attachments?.length) {\r\n <div\r\n class=\"table-responsive full\"\r\n cdkDropList\r\n [cdkDropListData]=\"attachments\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n >\r\n <table mat-table [dataSource]=\"dataSource\">\r\n\r\n <!-- index Column -->\r\n <ng-container matColumnDef=\"index\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ds-button\r\n [matTooltip]=\"'downloadAll' | translate\"\r\n square icon size=\"small\"\r\n (click)=\"downloadAllAttachments($event)\"\r\n class=\"icon-btn-shadow\">\r\n @if (loading) {\r\n <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n } @else {\r\n <ds-icon\r\n icon=\"download\"\r\n class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n }\r\n </ds-button>\r\n </th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 + pageSize * (pageNumber) }}</td>\r\n </ng-container>\r\n\r\n <!-- Name Column -->\r\n <ng-container matColumnDef=\"file\">\r\n <th mat-header-cell *matHeaderCellDef>{{ 'FileName' | translate }}</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <app-file-uploader\r\n [allowedExtensions]=\"allowedExtensions\"\r\n [displayedFiles]=\"[element]\"\r\n name=\"attachment\"\r\n [showActions]=\"true\"\r\n [isReadOnly]=\"true\"\r\n [multiple]=\"true\">\r\n </app-file-uploader>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Description Column -->\r\n <ng-container matColumnDef=\"description\">\r\n <th mat-header-cell *matHeaderCellDef>{{ 'FileDescription' | translate }}</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <a\r\n class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n [hidden]=\"!element?.['fileDescription']\"\r\n (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n [matTooltip]=\"element?.['fileDescription']\">\r\n {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n </a>\r\n <sat-popover\r\n #fileDescriptionPopover\r\n [anchor]=\"fileDescriptionAnchor\"\r\n [hasBackdrop]=\"true\"\r\n [restoreFocus]=\"false\"\r\n verticalAlign=\"below\"\r\n horizontalAlign=\"center\">\r\n <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</bdi>\r\n </div>\r\n </sat-popover>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Comment Column -->\r\n <ng-container matColumnDef=\"comment\">\r\n <th mat-header-cell *matHeaderCellDef>{{ 'comment' | translate }}</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <a\r\n class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n [hidden]=\"!element?.['attachmentcomment']\"\r\n (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n [satPopoverAnchor]=\"commentsPopover\"\r\n [matTooltip]=\"element?.['attachmentcomment']\"\r\n #commentsAnchor=\"satPopoverAnchor\">\r\n {{ element?.['attachmentcomment']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\r\n </a>\r\n <sat-popover\r\n #commentsPopover\r\n [anchor]=\"commentsAnchor\"\r\n [hasBackdrop]=\"true\"\r\n [restoreFocus]=\"false\"\r\n verticalAlign=\"below\"\r\n horizontalAlign=\"center\">\r\n <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n <bdi class=\"fc-black\">{{ element?.['attachmentcomment'] }}</bdi>\r\n </div>\r\n </sat-popover>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n @if (!isReadOnly) {\r\n <td>\r\n <div class=\"d-flex gap-2\">\r\n <ds-button\r\n square\r\n icon\r\n size=\"small\"\r\n (click)=\"deleteAttachments(i, element)\"\r\n class=\"icon-btn-shadow\">\r\n <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-red\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n square\r\n icon\r\n size=\"small\"\r\n (click)=\"editRow(element, i)\"\r\n class=\"icon-btn-shadow\">\r\n <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n </ds-button>\r\n </div>\r\n </td>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n </table>\r\n\r\n <mat-paginator\r\n #paginator\r\n [pageSizeOptions]=\"[5]\"\r\n (page)=\"onPaginateChange($event)\"\r\n [length]=\"attachments.length\"\r\n [pageSize]=\"pageSize\"\r\n showFirstLastButtons></mat-paginator>\r\n </div>\r\n }\r\n\r\n @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n <div class=\"text-center full mt-3\">\r\n <ds-button\r\n shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n [ngClass]=\"{ 'full-add-btn w-100': attachments?.length }\"\r\n (click)=\"addAttachment(); $event.stopPropagation()\">\r\n <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22\"></ds-icon>\r\n {{ 'addAttachments' | translate }}\r\n </ds-button>\r\n </div>\r\n }\r\n</div>", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: var(--light-gray);--btn-height: 70px;--btn-radius: 6px;border:1px dashed var(--dark-gray)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45PX;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;DISPLAY:FLEX;ALIGN-ITEMS:CENTER;JUSTIFY-CONTENT:CENTER}.file-uploader-table-dev{DISPLAY:FLEX;ALIGN-ITEMS:CENTER;GAP:1REM}.file-uploader-table-svg{width:70%}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}\n"] }]
|
|
4525
|
+
], standalone: true, template: "<div class=\"mt-2 p-0\">\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n @if (!attachments?.length && !isReadOnly) {\r\n <section\r\n [ngClass]=\"insideTable ? 'file-uploader-table' : 'file-uploader'\"\r\n class=\"mb-2\"\r\n [class.insideTableStyle]=\"insideTable\"\r\n (click)=\"addAttachment(); $event.stopPropagation()\">\r\n <div\r\n [ngClass]=\"insideTable ? 'file-uploader-table-dev' : ''\"\r\n class=\"file-uploader-input\">\r\n <div class=\"icon mb-1\">\r\n <svg\r\n [ngClass]=\"insideTable ? 'file-uploader-table-svg' : ''\"\r\n width=\"41\"\r\n height=\"38\"\r\n viewBox=\"0 0 41 38\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M0 22.1947V20.6736C0.0971303 20.1019 0.070094 19.5141 0.276371 18.9533C1.28372 16.2086 3.21231 14.5023 6.0421 13.8094C6.70499 13.6472 6.68497 13.6632 6.69899 12.9843C6.73203 11.3321 6.99839 9.71992 7.62423 8.17986C8.86289 5.13678 10.9467 2.83969 13.8816 1.39175C17.168 -0.230424 20.5956 -0.450719 24.0553 0.81598C27.4929 2.07467 29.9622 4.41581 31.4802 7.74828C31.7786 8.40316 32.027 9.08307 32.1712 9.79202C32.2402 10.1315 32.4035 10.2566 32.7529 10.3107C36.7012 10.9165 39.3358 13.1255 40.6946 16.8735C40.9069 17.4603 40.9199 18.0731 40.9599 18.6829C40.9649 18.7601 40.9389 18.8442 41 18.9113V20.5124C40.9109 20.995 40.969 21.4937 40.8608 21.9734C40.5244 23.4614 39.8454 24.7821 38.8501 25.9297C37.4522 27.5418 35.7059 28.5882 33.6161 29.0519C32.791 29.2351 31.9499 29.2521 31.1117 29.2922C30.6571 29.3142 30.584 29.193 30.592 28.7484C30.6451 25.8446 29.802 23.2571 27.8624 21.0591C25.9979 18.9463 23.6597 17.7167 20.867 17.4012C18.8553 17.1739 16.9057 17.4593 15.0612 18.3395C11.8319 19.8816 9.81416 22.4069 8.96102 25.8696C8.74273 26.7538 8.68265 27.658 8.70568 28.5702C8.7217 29.2111 8.60254 29.3122 7.95968 29.2972C5.95098 29.2511 4.10551 28.7234 2.58146 27.3596C1.07644 26.0168 0.0680913 24.3996 0.0400537 22.3028C0.0400537 22.2607 0.0250336 22.2257 0 22.1937V22.1947Z\"\r\n fill=\"#DEE0E2\"/>\r\n <path\r\n d=\"M29.0303 28.2632C29.0604 33.4031 24.8657 37.6187 19.6838 37.6548C14.5169 37.6908 10.2852 33.4952 10.2521 28.3042C10.2201 23.1403 14.4297 18.9126 19.6227 18.8946C24.8037 18.8766 28.9993 23.0542 29.0303 28.2632Z\"\r\n fill=\"#8E9AA0\"/>\r\n <path\r\n d=\"M20.5573 25.2644C20.4622 25.4477 20.5012 25.5939 20.5012 25.734C20.4982 28.2154 20.5002 30.6957 20.4982 33.177C20.4982 33.8099 20.2339 34.1704 19.7462 34.2234C19.2645 34.2765 18.88 33.9831 18.8169 33.5025C18.7959 33.3443 18.7969 33.183 18.7969 33.0238C18.7959 30.5826 18.7969 28.1423 18.7969 25.701C18.7969 25.5728 18.7969 25.4447 18.7969 25.2003C18.1971 25.8031 17.6774 26.3288 17.1527 26.8505C17.0115 26.9907 16.8683 27.1349 16.7061 27.2471C16.3566 27.4864 15.9341 27.4413 15.6457 27.154C15.3643 26.8746 15.3203 26.442 15.5486 26.0925C15.6207 25.9824 15.7128 25.8832 15.8069 25.7891C16.8613 24.7307 17.9167 23.6733 18.9732 22.6179C19.4017 22.1893 19.8784 22.1763 20.3039 22.5988C21.3914 23.6803 22.4739 24.7667 23.5533 25.8572C23.9809 26.2898 24.0129 26.8065 23.6534 27.167C23.299 27.5214 22.7753 27.4844 22.3437 27.0568C21.7499 26.47 21.1661 25.8732 20.5603 25.2644H20.5573Z\"\r\n fill=\"#F9F9F9\"/>\r\n </svg>\r\n </div>\r\n <div class=\"f-14 fc-black fw-normal\">\r\n <span class=\"fc-coral fw-medium\">{{ 'browse' | translate }}</span>\r\n </div>\r\n <div class=\"fs-10 fc-dark-gray\">\r\n {{ 'addMultiAttachments' | translate }}\r\n </div>\r\n </div>\r\n </section>\r\n }\r\n\r\n @if (attachments?.length) {\r\n <div\r\n class=\"table-responsive full\"\r\n cdkDropList\r\n [cdkDropListData]=\"attachments\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n >\r\n <table mat-table [dataSource]=\"dataSource\">\r\n\r\n <!-- index Column -->\r\n <ng-container matColumnDef=\"index\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n <ds-button\r\n [matTooltip]=\"'downloadAll' | translate\"\r\n square icon size=\"small\"\r\n (click)=\"downloadAllAttachments($event)\"\r\n class=\"icon-btn-shadow\">\r\n @if (loading) {\r\n <ds-icon class=\"sfi sfi-spinner d-inline-block spin fc-coral fs-30-imp\"></ds-icon>\r\n } @else {\r\n <ds-icon\r\n icon=\"download\"\r\n class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n }\r\n </ds-button>\r\n </th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 + pageSize * (pageNumber) }}</td>\r\n </ng-container>\r\n\r\n <!-- Name Column -->\r\n <ng-container matColumnDef=\"file\">\r\n <th mat-header-cell *matHeaderCellDef>{{ 'FileName' | translate }}</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <app-file-uploader\r\n [allowedExtensions]=\"allowedExtensions\"\r\n [displayedFiles]=\"[element]\"\r\n name=\"attachment\"\r\n [showActions]=\"true\"\r\n [isReadOnly]=\"true\"\r\n [multiple]=\"true\">\r\n </app-file-uploader>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Description Column -->\r\n <ng-container matColumnDef=\"description\">\r\n <th mat-header-cell *matHeaderCellDef>{{ 'FileDescription' | translate }}</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <a\r\n class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n [hidden]=\"!element?.['fileDescription']\"\r\n (click)=\"$event.stopPropagation(); fileDescriptionAnchor.popover.open()\"\r\n [satPopoverAnchor]=\"fileDescriptionPopover\"\r\n #fileDescriptionAnchor=\"satPopoverAnchor\"\r\n [matTooltip]=\"element?.['fileDescription']\">\r\n {{ element?.['fileDescription']?.length > 10 ? (element?.['fileDescription'] | slice : 0 : 10) + '....' : element?.['fileDescription'] }}\r\n </a>\r\n <sat-popover\r\n #fileDescriptionPopover\r\n [anchor]=\"fileDescriptionAnchor\"\r\n [hasBackdrop]=\"true\"\r\n [restoreFocus]=\"false\"\r\n verticalAlign=\"below\"\r\n horizontalAlign=\"center\">\r\n <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n <bdi class=\"fc-black\">{{ element?.['fileDescription'] }}</bdi>\r\n </div>\r\n </sat-popover>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Comment Column -->\r\n <ng-container matColumnDef=\"comment\">\r\n <th mat-header-cell *matHeaderCellDef>{{ 'comment' | translate }}</th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <a\r\n class=\"fw-medium fc-black underline cursor-pointer fs-12\"\r\n [hidden]=\"!element?.['attachmentcomment']\"\r\n (click)=\"$event.stopPropagation(); commentsAnchor.popover.open()\"\r\n [satPopoverAnchor]=\"commentsPopover\"\r\n [matTooltip]=\"element?.['attachmentcomment']\"\r\n #commentsAnchor=\"satPopoverAnchor\">\r\n {{ element?.['attachmentcomment']?.length > 10 ? (element?.['attachmentcomment'] | slice : 0 : 10) + '....' : element?.['attachmentcomment'] }}\r\n </a>\r\n <sat-popover\r\n #commentsPopover\r\n [anchor]=\"commentsAnchor\"\r\n [hasBackdrop]=\"true\"\r\n [restoreFocus]=\"false\"\r\n verticalAlign=\"below\"\r\n horizontalAlign=\"center\">\r\n <div class=\"default-popover p-3 fs-14 text-break view-note-popover\">\r\n <bdi class=\"fc-black\">{{ element?.['attachmentcomment'] }}</bdi>\r\n </div>\r\n </sat-popover>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n @if (!isReadOnly) {\r\n <td>\r\n <div class=\"d-flex gap-2\">\r\n <ds-button\r\n square\r\n icon\r\n size=\"small\"\r\n (click)=\"deleteAttachments(i, element)\"\r\n class=\"icon-btn-shadow\">\r\n <ds-icon icon=\"trash\" class=\"fs-20 fs-md-17 fc-coral\"></ds-icon>\r\n </ds-button>\r\n\r\n <ds-button\r\n square\r\n icon\r\n size=\"small\"\r\n (click)=\"editRow(element, i)\"\r\n class=\"icon-btn-shadow\">\r\n <ds-icon icon=\"pen\" class=\"fs-20 fs-md-17 fc-purple\"></ds-icon>\r\n </ds-button>\r\n </div>\r\n </td>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n </table>\r\n\r\n <mat-paginator\r\n #paginator\r\n [pageSizeOptions]=\"[5]\"\r\n (page)=\"onPaginateChange($event)\"\r\n [length]=\"attachments.length\"\r\n [pageSize]=\"pageSize\"\r\n showFirstLastButtons></mat-paginator>\r\n </div>\r\n }\r\n\r\n @if (!isReadOnly && attachments?.length && attachments?.length < attachmentsMax) {\r\n <div class=\"text-center full mt-3\">\r\n <ds-button\r\n shape=\"{{ attachments?.length ? 'outline' : '' }}\"\r\n [ngClass]=\"{ 'full-add-btn w-100 pt-1': attachments?.length }\"\r\n (click)=\"addAttachment(); $event.stopPropagation()\">\r\n <ds-icon slot=\"prefix\" icon=\"plus\" class=\"fs-22 pb-1\"></ds-icon>\r\n {{ 'addAttachments' | translate }}\r\n </ds-button>\r\n </div>\r\n }\r\n</div>\r\n", styles: ["::ng-deep .add-attachment-dialog{--popup-max-width: 500px;--popup-width: 100%}::ng-deep .view-note-popover{max-width:250px;max-height:300px;overflow:auto;--popover-bc: var(--black);color:var(--white);--popover-before-width: .6rem}::ng-deep .mat-tooltip{max-width:500px;background:#1d252d}:host ::ng-deep .table-responsive table{--th-bg: var(--white);--th-fc: var(--dark-gray)}:host ::ng-deep .white-attached ds-attachments::part(base){--file-bg: transparent}:host ::ng-deep .full-add-btn::part(base){--btn-min-width: 100%;--btn-bg-color: rgb(248 248 248);--btn-height: 70px;--btn-radius: 6px;border:1px dashed rgb(142,154,160)}.file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}.insideTableWidth{width:250px!important}.file-uploader-table{--uploader-height: 45px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 0 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer;display:FLEX;align-items:CENTER;justify-content:CENTER}.file-uploader-table-dev{display:FLEX;align-items:CENTER;gap:1rem}.file-uploader-table-svg{width:70%}.files-list .file-item-container .uploaded-file-actions{margin-inline-start:20px}.files-list .file-item-container .uploaded-file-actions .button__wrapper{font-size:15px}.file-item-container-actions{display:flex;align-items:center}.file-item-container-actions .uploaded-file-actions{display:flex;align-items:center;gap:10px;margin-inline-start:25px}.file-item-container-actions .uploaded-file-actions .button__wrapper{font-size:15px}.file-uploader{--uploader-height: 120px;--uploader-width: 100%;--uploader-bg: #f8f8f8;--uploader-border: 1px dashed #8e9aa0;--uploader-radius: 6px;--uploader-padding: 20px 14px 20px 31px;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader--input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px}.insideTableStyle{width:272px}.files-list{--file-item-width: 300px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media (max-width: 768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.files-list .file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.files-list .file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.files-list .file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.files-list .file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}.file-uploader-icon{color:var(--icon-color);font-size:var(--icon-size)}.file-uploader-icon svg{display:block;object-fit:contain;object-position:center;width:41px;height:auto}::ng-deep .file-item .name-size{display:flex;flex-direction:column;justify-content:center;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:120px}.table-responsive table,.table-responsive .primary-table{--cell-pading: 3px 24px 10px}\n"] }]
|
|
4494
4526
|
}], propDecorators: { className: [{
|
|
4495
4527
|
type: Input
|
|
4496
4528
|
}], attachmentsMax: [{
|
|
@@ -4523,7 +4555,7 @@ class RadioComponent extends ControlValueAccessorDirective {
|
|
|
4523
4555
|
useExisting: forwardRef(() => RadioComponent),
|
|
4524
4556
|
multi: true,
|
|
4525
4557
|
},
|
|
4526
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-radio-group\r\n aria-label=\"Select an option\"\r\n [formControl]=\"control\"\r\n id=\"{{ name }}{{ randomID }}\"\r\n name=\"{{ name }}{{ randomID }}\"\r\n >\r\n @for(option of options; track $index){\r\n <mat-radio-button\r\n
|
|
4558
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-radio-group\r\n aria-label=\"Select an option\"\r\n [formControl]=\"control\"\r\n id=\"{{ name }}{{ randomID }}\"\r\n name=\"{{ name }}{{ randomID }}\"\r\n >\r\n @for(option of options; track $index){\r\n <mat-radio-button\r\n [disabled]=\"isReadOnly || isDisabled\"\r\n [value]=\"option\"\r\n [checked]=\"option === control.value\"\r\n >\r\n <span class=\"fs-12 fw-medium fc-onyx\">\r\n {{ option }}\r\n </span>\r\n </mat-radio-button>\r\n }\r\n </mat-radio-group>\r\n\r\n}@else {\r\n <ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [insideTable]=\"insideTable\"\r\n [label]=\"label\"\r\n [type]=\"'toggleBtn'\"\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: [".mat-mdc-radio-group{grid-gap:2rem}\n"], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "ngmodule", type: i4.ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
4527
4559
|
}
|
|
4528
4560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RadioComponent, decorators: [{
|
|
4529
4561
|
type: Component,
|
|
@@ -4539,7 +4571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
4539
4571
|
useExisting: forwardRef(() => RadioComponent),
|
|
4540
4572
|
multi: true,
|
|
4541
4573
|
},
|
|
4542
|
-
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-radio-group\r\n aria-label=\"Select an option\"\r\n [formControl]=\"control\"\r\n id=\"{{ name }}{{ randomID }}\"\r\n name=\"{{ name }}{{ randomID }}\"\r\n >\r\n @for(option of options; track $index){\r\n <mat-radio-button\r\n
|
|
4574
|
+
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!control.hasValidator(Validators['required'])\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-radio-group\r\n aria-label=\"Select an option\"\r\n [formControl]=\"control\"\r\n id=\"{{ name }}{{ randomID }}\"\r\n name=\"{{ name }}{{ randomID }}\"\r\n >\r\n @for(option of options; track $index){\r\n <mat-radio-button\r\n [disabled]=\"isReadOnly || isDisabled\"\r\n [value]=\"option\"\r\n [checked]=\"option === control.value\"\r\n >\r\n <span class=\"fs-12 fw-medium fc-onyx\">\r\n {{ option }}\r\n </span>\r\n </mat-radio-button>\r\n }\r\n </mat-radio-group>\r\n\r\n}@else {\r\n <ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [insideTable]=\"insideTable\"\r\n [label]=\"label\"\r\n [type]=\"'toggleBtn'\"\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: [".mat-mdc-radio-group{grid-gap:2rem}\n"] }]
|
|
4543
4575
|
}], propDecorators: { options: [{
|
|
4544
4576
|
type: Input
|
|
4545
4577
|
}] } });
|
|
@@ -5901,7 +5933,7 @@ class ServiceHeaderComponent {
|
|
|
5901
5933
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CoreService }, { token: CoreI18nService }, { token: FeedBackService }, { token: i1$1.MatDialog }, { token: SidenavService }, { token: i2.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5902
5934
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: ServiceHeaderComponent, isStandalone: true, selector: "core-service-header", inputs: { form: "form", showHistory: "showHistory", isLoading: "isLoading", isReadOnly: "isReadOnly", showApprovalHistory: "showApprovalHistory", approvalHistory: "approvalHistory", creationDate: "creationDate", formTitle: "formTitle", section: "section", serviceFaq: "serviceFaq" }, providers: [FeedBackService,
|
|
5903
5935
|
{ provide: MAT_DIALOG_DATA, useValue: {} },
|
|
5904
|
-
], ngImport: i0, template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n <section\r\n class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n >\r\n <div class=\"sidenav-title\">\r\n <div class=\"d-flex align-items-center gap-3 w-100\">\r\n <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n </ds-button>-->\r\n\r\n <!-- <h3 class=\"flex-grow-0\">\r\n {{ formTitle }}\r\n </h3>-->\r\n\r\n <section>\r\n <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n {{ i18n.translate('Hello') }}\r\n {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n </h6>\r\n <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n {{ formTitle }}\r\n @if (serviceFaq.length) {\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n }\r\n </h1>\r\n </section>\r\n <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n @if (serviceFaq.length) {\r\n <ds-button size=\"small\" icon>\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n </ds-button>\r\n }\r\n <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n </ds-button> -->\r\n @if (!isReadOnly) {\r\n <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n </ds-button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <!-- <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n <section>\r\n <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n {{ i18n.translate('Hello') }}\r\n {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n </h6>\r\n <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n {{ formTitle }}\r\n @if (serviceFaq.length) {\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n }\r\n </h1>\r\n </section>\r\n </header>-->\r\n} @else {\r\n\r\n <div class=\"w-100\">\r\n <section class=\"request-main-info {{statusClass(form?.header?.status?.['key'])}}\">\r\n <section class=\"request-info\">\r\n <div class=\"request-info--body\">\r\n <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n <img\r\n alt=\"\"\r\n src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n {{ formTitle }}\r\n </h4>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n <div class=\"d-inline-flex flex-column align-items-end\">\r\n @if (!isLoading) {\r\n <ds-status\r\n status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n </ds-status>\r\n }\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- <ds-button\r\n *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n square icon size=\"small\">\r\n <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n <!– [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"–>\r\n </ds-icon>\r\n </ds-button>-->\r\n <!-- history-->\r\n <ds-button\r\n *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n </ds-button>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"request-info--footer\">\r\n @if (!isLoading) {\r\n <ds-avatar\r\n image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n }\r\n <div\r\n class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n <span\r\n [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n <span class=\"fs-20\">•</span>\r\n <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n <span class=\"fs-20\" *ngIf=\"creationDate\">•</span>\r\n <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n </div>\r\n </div>\r\n </section>\r\n </section>\r\n\r\n </div>\r\n\r\n\r\n <!--<ng-container>\r\n <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n <ds-button\r\n *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n square\r\n icon\r\n size=\"small\"\r\n [matMenuTriggerFor]=\"menu\"\r\n class=\"icon-btn-shadow\">\r\n <ds-icon\r\n [ngClass]=\"{'fc-purple' : (flagPriority === '0' || flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n </ds-icon>\r\n </ds-button>\r\n <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n </mat-menu>\r\n\r\n <ng-content></ng-content>\r\n </div>\r\n <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n <div class=\"service-header-icon\">\r\n <img\r\n alt=\"\"\r\n src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n </div>\r\n\r\n <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n @if (serviceFaq.length) {\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n }\r\n </h1>\r\n <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n @if (!isLoading) {\r\n <ds-avatar\r\n image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n }\r\n <span\r\n class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n @if (creationDate) {\r\n <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n }\r\n </div>\r\n\r\n </div>\r\n <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n @if (!isLoading) {\r\n <ds-status\r\n status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n </ds-status>\r\n }\r\n <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n <!– feedback–>\r\n <!– *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"–>\r\n <!– <ds-button\r\n square icon size=\"small\" (click)=\"feedback()\">\r\n <ds-icon\r\n icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n </ds-icon>\r\n </ds-button>–>\r\n <ds-button\r\n *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n </ds-button>\r\n @if (showApprovalHistory) {\r\n <ng-container>\r\n <ds-button\r\n color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n <slot name=\"prefix\">\r\n <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n </slot>\r\n </ds-button>\r\n <sat-popover\r\n #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n horizontalAlign=\"end\">\r\n <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n </ds-approvals>\r\n </div>\r\n </sat-popover>\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </header>\r\n </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:.3rem 2rem;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar .avatar{--default-size: 18px}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!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{--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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
5936
|
+
], ngImport: i0, template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n <section\r\n class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n >\r\n <div class=\"sidenav-title\">\r\n <div class=\"d-flex align-items-center gap-3 w-100\">\r\n <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n </ds-button>-->\r\n\r\n <!-- <h3 class=\"flex-grow-0\">\r\n {{ formTitle }}\r\n </h3>-->\r\n\r\n <section>\r\n <p class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-1\">\r\n {{ i18n.translate('Hello') }}\r\n {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n </p>\r\n <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n {{ formTitle }}\r\n @if (serviceFaq.length) {\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n }\r\n </h1>\r\n </section>\r\n <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n @if (serviceFaq.length) {\r\n <ds-button size=\"small\" icon>\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n </ds-button>\r\n }\r\n <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n </ds-button> -->\r\n @if (!isReadOnly) {\r\n <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n </ds-button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <!-- <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n <section>\r\n <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n {{ i18n.translate('Hello') }}\r\n {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n </h6>\r\n <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n {{ formTitle }}\r\n @if (serviceFaq.length) {\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n }\r\n </h1>\r\n </section>\r\n </header>-->\r\n} @else {\r\n\r\n <div class=\"w-100\">\r\n <section class=\"request-main-info {{statusClass(form?.header?.status?.['key'])}}\">\r\n <section class=\"request-info\">\r\n <div class=\"request-info--body\">\r\n <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n <img\r\n alt=\"\"\r\n src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n {{ formTitle }}\r\n </h4>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n <div class=\"d-inline-flex flex-column align-items-end\">\r\n @if (!isLoading) {\r\n <ds-status\r\n status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n </ds-status>\r\n }\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- <ds-button\r\n *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n square icon size=\"small\">\r\n <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n <!– [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"–>\r\n </ds-icon>\r\n </ds-button>-->\r\n <!-- history-->\r\n <ds-button\r\n *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n </ds-button>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"request-info--footer\">\r\n @if (!isLoading) {\r\n <ds-avatar\r\n image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n }\r\n <div\r\n class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n <span\r\n [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n <span class=\"fs-20\">•</span>\r\n <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n <span class=\"fs-20\" *ngIf=\"creationDate\">•</span>\r\n <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n </div>\r\n </div>\r\n </section>\r\n </section>\r\n\r\n </div>\r\n\r\n\r\n <!--<ng-container>\r\n <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n <ds-button\r\n *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n square\r\n icon\r\n size=\"small\"\r\n [matMenuTriggerFor]=\"menu\"\r\n class=\"icon-btn-shadow\">\r\n <ds-icon\r\n [ngClass]=\"{'fc-purple' : (flagPriority === '0' || flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n </ds-icon>\r\n </ds-button>\r\n <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n </mat-menu>\r\n\r\n <ng-content></ng-content>\r\n </div>\r\n <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n <div class=\"service-header-icon\">\r\n <img\r\n alt=\"\"\r\n src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n </div>\r\n\r\n <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n @if (serviceFaq.length) {\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n }\r\n </h1>\r\n <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n @if (!isLoading) {\r\n <ds-avatar\r\n image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n }\r\n <span\r\n class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n @if (creationDate) {\r\n <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n }\r\n </div>\r\n\r\n </div>\r\n <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n @if (!isLoading) {\r\n <ds-status\r\n status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n </ds-status>\r\n }\r\n <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n <!– feedback–>\r\n <!– *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"–>\r\n <!– <ds-button\r\n square icon size=\"small\" (click)=\"feedback()\">\r\n <ds-icon\r\n icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n </ds-icon>\r\n </ds-button>–>\r\n <ds-button\r\n *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n </ds-button>\r\n @if (showApprovalHistory) {\r\n <ng-container>\r\n <ds-button\r\n color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n <slot name=\"prefix\">\r\n <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n </slot>\r\n </ds-button>\r\n <sat-popover\r\n #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n horizontalAlign=\"end\">\r\n <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n </ds-approvals>\r\n </div>\r\n </sat-popover>\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </header>\r\n </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:.3rem 2rem;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar .avatar{--default-size: 18px}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!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{--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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
5905
5937
|
}
|
|
5906
5938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ServiceHeaderComponent, decorators: [{
|
|
5907
5939
|
type: Component,
|
|
@@ -5915,7 +5947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
5915
5947
|
MatMenuItem
|
|
5916
5948
|
], schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [FeedBackService,
|
|
5917
5949
|
{ provide: MAT_DIALOG_DATA, useValue: {} },
|
|
5918
|
-
], template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n <section\r\n class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n >\r\n <div class=\"sidenav-title\">\r\n <div class=\"d-flex align-items-center gap-3 w-100\">\r\n <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n </ds-button>-->\r\n\r\n <!-- <h3 class=\"flex-grow-0\">\r\n {{ formTitle }}\r\n </h3>-->\r\n\r\n <section>\r\n <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n {{ i18n.translate('Hello') }}\r\n {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n </h6>\r\n <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n {{ formTitle }}\r\n @if (serviceFaq.length) {\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n }\r\n </h1>\r\n </section>\r\n <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n @if (serviceFaq.length) {\r\n <ds-button size=\"small\" icon>\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n </ds-button>\r\n }\r\n <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n </ds-button> -->\r\n @if (!isReadOnly) {\r\n <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n </ds-button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <!-- <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n <section>\r\n <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n {{ i18n.translate('Hello') }}\r\n {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n </h6>\r\n <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n {{ formTitle }}\r\n @if (serviceFaq.length) {\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n }\r\n </h1>\r\n </section>\r\n </header>-->\r\n} @else {\r\n\r\n <div class=\"w-100\">\r\n <section class=\"request-main-info {{statusClass(form?.header?.status?.['key'])}}\">\r\n <section class=\"request-info\">\r\n <div class=\"request-info--body\">\r\n <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n <img\r\n alt=\"\"\r\n src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n {{ formTitle }}\r\n </h4>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n <div class=\"d-inline-flex flex-column align-items-end\">\r\n @if (!isLoading) {\r\n <ds-status\r\n status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n </ds-status>\r\n }\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- <ds-button\r\n *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n square icon size=\"small\">\r\n <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n <!– [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"–>\r\n </ds-icon>\r\n </ds-button>-->\r\n <!-- history-->\r\n <ds-button\r\n *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n </ds-button>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"request-info--footer\">\r\n @if (!isLoading) {\r\n <ds-avatar\r\n image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n }\r\n <div\r\n class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n <span\r\n [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n <span class=\"fs-20\">•</span>\r\n <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n <span class=\"fs-20\" *ngIf=\"creationDate\">•</span>\r\n <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n </div>\r\n </div>\r\n </section>\r\n </section>\r\n\r\n </div>\r\n\r\n\r\n <!--<ng-container>\r\n <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n <ds-button\r\n *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n square\r\n icon\r\n size=\"small\"\r\n [matMenuTriggerFor]=\"menu\"\r\n class=\"icon-btn-shadow\">\r\n <ds-icon\r\n [ngClass]=\"{'fc-purple' : (flagPriority === '0' || flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n </ds-icon>\r\n </ds-button>\r\n <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n </mat-menu>\r\n\r\n <ng-content></ng-content>\r\n </div>\r\n <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n <div class=\"service-header-icon\">\r\n <img\r\n alt=\"\"\r\n src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n </div>\r\n\r\n <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n @if (serviceFaq.length) {\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n }\r\n </h1>\r\n <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n @if (!isLoading) {\r\n <ds-avatar\r\n image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n }\r\n <span\r\n class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n @if (creationDate) {\r\n <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n }\r\n </div>\r\n\r\n </div>\r\n <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n @if (!isLoading) {\r\n <ds-status\r\n status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n </ds-status>\r\n }\r\n <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n <!– feedback–>\r\n <!– *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"–>\r\n <!– <ds-button\r\n square icon size=\"small\" (click)=\"feedback()\">\r\n <ds-icon\r\n icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n </ds-icon>\r\n </ds-button>–>\r\n <ds-button\r\n *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n </ds-button>\r\n @if (showApprovalHistory) {\r\n <ng-container>\r\n <ds-button\r\n color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n <slot name=\"prefix\">\r\n <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n </slot>\r\n </ds-button>\r\n <sat-popover\r\n #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n horizontalAlign=\"end\">\r\n <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n </ds-approvals>\r\n </div>\r\n </sat-popover>\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </header>\r\n </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:.3rem 2rem;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar .avatar{--default-size: 18px}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!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{--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"] }]
|
|
5950
|
+
], template: "@if (form?.header?.status?.['key'] === 'NEW') {\r\n <section\r\n class=\"main-sidenav main-sidenav-full mb-4\"\r\n\r\n >\r\n <div class=\"sidenav-title\">\r\n <div class=\"d-flex align-items-center gap-3 w-100\">\r\n <!-- <ds-button icon class=\"rotate-arrow\" size=\"small\" (click)=\"goBack()\" *ngIf=\"!isInMobileApp() && showBack\">\r\n <ds-icon icon=\"arrow-right\" class=\"fs-19 fc-black\"></ds-icon>\r\n </ds-button>-->\r\n\r\n <!-- <h3 class=\"flex-grow-0\">\r\n {{ formTitle }}\r\n </h3>-->\r\n\r\n <section>\r\n <p class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-1\">\r\n {{ i18n.translate('Hello') }}\r\n {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n </p>\r\n <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n {{ formTitle }}\r\n @if (serviceFaq.length) {\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n }\r\n </h1>\r\n </section>\r\n <div class=\"d-flex align-items-center justify-content-end gap-2 flex-grow-1\">\r\n @if (serviceFaq.length) {\r\n <ds-button size=\"small\" icon>\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n </ds-button>\r\n }\r\n <!-- <ds-button size=\"small\" icon (click)=\"openWorkflow()\">\r\n <ds-icon icon=\"bell-2-o\" class=\"fs-20 fc-coral\"></ds-icon>\r\n </ds-button> -->\r\n @if (!isReadOnly) {\r\n <ds-button size=\"small\" icon (click)=\"showPreviousRequests()\">\r\n <ds-icon icon=\"clock\" class=\"fs-20 fc-coral\"></ds-icon>\r\n </ds-button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n\r\n <!-- <header class=\"mb-4 mt-4 d-flex align-items-center justify-content-between align-items-end gap-2\">\r\n <section>\r\n <h6 class=\"fs-14 fs-md-12 fw-normal fc-dark-gray mb-0\">\r\n {{ i18n.translate('Hello') }}\r\n {{ coreService.getShortName(form?.header?.requesterName) }}, {{ i18n.translate('welcomeBack') }}!\r\n </h6>\r\n <h1 class=\"fs-26 fs-md-20 fw-bold fc-black d-flex align-items-center gap-2 mb-1\">\r\n {{ formTitle }}\r\n @if (serviceFaq.length) {\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n }\r\n </h1>\r\n </section>\r\n </header>-->\r\n} @else {\r\n\r\n <div class=\"w-100\">\r\n <section class=\"request-main-info {{statusClass(form?.header?.status?.['key'])}}\">\r\n <section class=\"request-info\">\r\n <div class=\"request-info--body\">\r\n <div class=\"d-flex align-items-center gap-2 flex-grow-1\">\r\n <img\r\n alt=\"\"\r\n src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n <h4 class=\"fs-22 fs-md-16 fc-black fw-medium mb-0 flex-grow-1 line-height-1-2\">\r\n {{ formTitle }}\r\n </h4>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 request-info--status-action\">\r\n <div class=\"d-inline-flex flex-column align-items-end\">\r\n @if (!isLoading) {\r\n <ds-status\r\n status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n </ds-status>\r\n }\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- <ds-button\r\n *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback =='true'|| form?.inboxItem?.hasFeedback=='true')\"\r\n square icon size=\"small\">\r\n <ds-icon icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\">\r\n <!– [ngClass]=\"{'fc-green':feedBackIcon == 'feedbackResponded' , 'fc-red': feedBackIcon == 'respondToFeedback' , 'fc-yellow': feedBackIcon == 'waitingFeedback'}\"–>\r\n </ds-icon>\r\n </ds-button>-->\r\n <!-- history-->\r\n <ds-button\r\n *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n </ds-button>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"request-info--footer\">\r\n @if (!isLoading) {\r\n <ds-avatar\r\n image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n }\r\n <div\r\n class=\"d-flex align-items-center flex-wrap flex-grow-1 gap-1 gap-sm-2 line-height-1 request-info--header__details\">\r\n <span\r\n [ngClass]=\"{'loading-bg loading-width': isLoading}\"\r\n class=\"fs-12 fw-medium d-none d-sm-inline-block\">{{ coreService.getShortName(form?.header?.['requesterName']) }}</span>\r\n <span class=\"fs-20\">•</span>\r\n <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ form?.header?.formId }}</span>\r\n <span class=\"fs-20\" *ngIf=\"creationDate\">•</span>\r\n <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\"> {{ creationDate }}</span>\r\n </div>\r\n </div>\r\n </section>\r\n </section>\r\n\r\n </div>\r\n\r\n\r\n <!--<ng-container>\r\n <div class=\"d-flex align-items-center justify-content-end gap-2 my-2\">\r\n <ds-button\r\n *ngIf=\"form?.inboxItem && !form.sections[form.sections.length -1].header.readOnly && !isLoading\"\r\n square\r\n icon\r\n size=\"small\"\r\n [matMenuTriggerFor]=\"menu\"\r\n class=\"icon-btn-shadow\">\r\n <ds-icon\r\n [ngClass]=\"{'fc-purple' : (flagPriority === '0' || flagPriority === null),'fc-yellow' : flagPriority === '1','fc-green' : flagPriority === '2','fc-coral' : flagPriority === '3'}\"\r\n icon=\"flag-o\" class=\"fs-20 fs-md-17 fc-purple\">\r\n </ds-icon>\r\n </ds-button>\r\n <mat-menu #menu=\"matMenu\" panelClass=\"action-menu\">\r\n <button mat-menu-item (click)=\"setFlagPriority('0')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-purple fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n <button mat-menu-item (click)=\"setFlagPriority('1')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-yellow fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n <button mat-menu-item (click)=\"setFlagPriority('2')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-green fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n <button mat-menu-item (click)=\"setFlagPriority('3')\">\r\n <ds-icon icon=\"flag-o\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n </button>\r\n </mat-menu>\r\n\r\n <ng-content></ng-content>\r\n </div>\r\n <header class=\"service-header bc-white p-3 p-sm-4 py-4 gap-3 {{statusClass(form?.header?.status?.['key'])}}\">\r\n\r\n <div class=\"service-header-icon\">\r\n <img\r\n alt=\"\"\r\n src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzMCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1LjEgMEg0LjlDMi4yIDAgMCAyLjIgMCA0LjlWMjguNkgyNS4xQzI3LjggMjguNiAzMCAyNi40IDMwIDIzLjdWNC45QzMwIDIuMiAyNy44IDAgMjUuMSAwWk0yIDQuOUMyIDMuMyAzLjMgMiA0LjkgMkgyNS4xQzI2LjcgMiAyOCAzLjMgMjggNC45VjIzLjdDMjggMjUuMyAyNi43IDI2LjYgMjUuMSAyNi42SDJWNC45Wk0xMS41IDYuM0M3LjEgNi4zIDMuNSA5LjkgMy41IDE0LjNDMy41IDE4LjcgNy4xIDIyLjMgMTEuNSAyMi4zQzE1LjkgMjIuMyAxOS41IDE4LjcgMTkuNSAxNC4zQzE5LjUgOS45IDE1LjkgNi4zIDExLjUgNi4zWk0xNS4xIDE5QzE0LjEgMTkuOCAxMi44IDIwLjIgMTEuNSAyMC4yQzEwLjIgMjAuMiA4LjkgMTkuOCA3LjkgMTlDOC43IDE3LjcgMTAgMTcgMTEuNSAxN0MxMyAxNyAxNC40IDE3LjggMTUuMSAxOVpNMTMuMSAxMy40QzEzLjEgMTQuMyAxMi40IDE1IDExLjUgMTVDMTAuNiAxNSA5LjkgMTQuMyA5LjkgMTMuNEM5LjkgMTIuNSAxMC42IDExLjggMTEuNSAxMS44QzEyLjQgMTEuOCAxMy4xIDEyLjUgMTMuMSAxMy40Wk0xNS4xIDEzLjRDMTUuMSAxMS40IDEzLjUgOS44IDExLjUgOS44QzkuNSA5LjggNy45IDExLjQgNy45IDEzLjRDNy45IDE0LjIgOC4yIDE1IDguNyAxNS43QzcuOCAxNi4xIDcuMSAxNi44IDYuNSAxNy42QzUuOCAxNi42IDUuNSAxNS41IDUuNSAxNC4zQzUuNSAxMSA4LjIgOC4zIDExLjUgOC4zQzE0LjggOC4zIDE3LjUgMTEgMTcuNSAxNC4zQzE3LjUgMTUuNSAxNy4yIDE2LjYgMTYuNSAxNy42QzE1LjkgMTYuOCAxNS4yIDE2LjIgMTQuMyAxNS43QzE0LjggMTUuMSAxNS4xIDE0LjIgMTUuMSAxMy40Wk0yMSA5LjFDMjEgOC42IDIxLjQgOC4xIDIyIDguMUgyNS41QzI2IDguMSAyNi41IDguNSAyNi41IDkuMUMyNi41IDkuNiAyNi4xIDEwLjEgMjUuNSAxMC4xSDIyQzIxLjQgMTAuMSAyMSA5LjYgMjEgOS4xWk0yMSAxMi41QzIxIDEyIDIxLjQgMTEuNSAyMiAxMS41SDI1LjVDMjYgMTEuNSAyNi41IDExLjkgMjYuNSAxMi41QzI2LjUgMTMgMjYuMSAxMy41IDI1LjUgMTMuNUgyMkMyMS40IDEzLjUgMjEgMTMuMSAyMSAxMi41Wk0yMSAxNkMyMSAxNS41IDIxLjQgMTUgMjIgMTVIMjUuNUMyNiAxNSAyNi41IDE1LjQgMjYuNSAxNkMyNi41IDE2LjUgMjYuMSAxNyAyNS41IDE3SDIyQzIxLjQgMTcgMjEgMTYuNiAyMSAxNlpNMjUuNSAyMC41SDIyQzIxLjUgMjAuNSAyMSAyMC4xIDIxIDE5LjVDMjEgMTguOSAyMS40IDE4LjUgMjIgMTguNUgyNS41QzI2IDE4LjUgMjYuNSAxOC45IDI2LjUgMTkuNUMyNi41IDIwLjEgMjYuMSAyMC41IDI1LjUgMjAuNVoiIGZpbGw9IiNGRjM3NUUiLz4KPC9zdmc+Cg==\"/>\r\n </div>\r\n\r\n <div class=\"flex-grow-1 d-flex flex-column flex-sm-row align-items-sm-center gap-2\">\r\n <div class=\"flex-grow-1\">\r\n <h1 class=\"fs-20 fs-md-16 fw-bold fc-black header-title m-0\">{{ formTitle }}\r\n @if (serviceFaq.length) {\r\n <ds-icon icon=\"info\" class=\"fs-22 fc-dark-gray cursor-pointer\" (click)=\"openFaq()\">\r\n </ds-icon>\r\n }\r\n </h1>\r\n <div class=\"header-user d-flex align-items-sm-center gap-2 mt-sm-1\">\r\n @if (!isLoading) {\r\n <ds-avatar\r\n image=\"{{form?.header?.requesterPhoto}}\" size=\"xx-small\"\r\n class=\"d-inline-flex cursor-pointer\" (click)=\"showUserInfo()\"></ds-avatar>\r\n }\r\n <span\r\n class=\"fs-12 text-truncate d-sm-block cursor-pointer\" (click)=\"showUserInfo()\"\r\n [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ coreService.getShortName(form?.header?.requesterName) }}</span>\r\n <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n <span class=\"fs-12\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ form?.header?.formId }}</span>\r\n @if (creationDate) {\r\n <mat-divider class=\"divider circle mx-2 d-none d-sm-block\"></mat-divider>\r\n <span class=\"fs-14\" [ngClass]=\"{'loading-bg loading-width': isLoading}\">{{ creationDate }}</span>\r\n }\r\n </div>\r\n\r\n </div>\r\n <div class=\"header-actions d-flex flex-row flex-sm-column justify-content-between justify-content-sm-center gap-2 mt-2 mt-sm-0\">\r\n @if (!isLoading) {\r\n <ds-status\r\n status=\"{{statusClass(form?.header?.status?.['key'])}}\" class=\"header-status\">{{ form?.header?.status?.['value'] }}\r\n </ds-status>\r\n }\r\n <div class=\"d-flex align-items-center justify-content-end gap-2\">\r\n <!– feedback–>\r\n <!– *ngIf=\"form?.inboxItem && (form?.inboxItem?.canRequestFeedback ==='true'|| form?.inboxItem?.hasFeedback==='true') && !isLoading\"–>\r\n <!– <ds-button\r\n square icon size=\"small\" (click)=\"feedback()\">\r\n <ds-icon\r\n icon=\"chat-o\" class=\"fs-20 fs-md-17 fc-coral\"\r\n [ngClass]=\"{'fc-green':feedBackIcon === 'feedbackResponded' , 'fc-red': feedBackIcon === 'respondToFeedback' , 'fc-yellow': feedBackIcon === 'waitingFeedback'}\">\r\n </ds-icon>\r\n </ds-button>–>\r\n <ds-button\r\n *ngIf=\"form?.commentsDrop?.length > 0 && !isLoading\" square icon size=\"small\"\r\n (click)=\"onCommentsFormClick()\" class=\"has-comments\">\r\n <ds-icon icon=\"clock\" class=\"fc-coral fs-20 fs-md-17\"></ds-icon>\r\n </ds-button>\r\n @if (showApprovalHistory) {\r\n <ng-container>\r\n <ds-button\r\n color=\"white\" shape=\"text\" square size=\"small\" [satPopoverAnchor]=\"workflow\"\r\n #workflowAnchor=\"satPopoverAnchor\" (click)=\"workflowAnchor.popover.open()\">\r\n <slot name=\"prefix\">\r\n <ds-icon icon=\"workflow\" class=\"fs-24\"></ds-icon>\r\n </slot>\r\n </ds-button>\r\n <sat-popover\r\n #workflow [anchor]=\"workflowAnchor\" [hasBackdrop]=\"true\" verticalAlign=\"below\"\r\n horizontalAlign=\"end\">\r\n <div class=\"default-popover p-3\" style=\"min-width: 330px;\">\r\n <ds-approvals *ngIf=\"approvalHistory\" class=\"popover-approvals\" approvalsData=\"{{approvals}}\">\r\n </ds-approvals>\r\n </div>\r\n </sat-popover>\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </header>\r\n </ng-container>-->\r\n}\r\n", styles: [".loading-width{min-width:100px;width:40px;flex-grow:1}.request-main-info{--item-bg: var(--light-gray);--item-fc: var(--black);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.warning{--item-bg: var(--yellow);--status-container-bc: #fff8d9;--status-container-brc: var(--yellow)}.request-main-info.pending{--item-bg: #eff0f1;--status-container-bc: #e8ebec;--status-container-brc: #c8ced1}.request-main-info.expired{--item-bg: var(--dark-gray);--status-container-bc: #e8ebec;--status-container-brc: var(--dark-gray)}.request-main-info.success{--item-bg: var(--green);--status-container-bc: #e6f9f4;--status-container-brc: var(--green)}.request-main-info.info{--item-bg: var(--sea-light);--status-container-bc: #fff8d9;--status-container-brc: var(--sea-light)}.request-main-info.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.request-main-info.orange,.request-main-info.send_back{--item-bg: var(--orange);--status-container-bc: #fff0eb;--status-container-brc: var(--orange)}.request-info{border-radius:0;box-shadow:var(--box-shadow);background-color:var(--white);border-top:5px solid var(--item-bg)}.request-info--footer{padding:.3rem 2rem;min-height:45px;display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--light-gray)}@media (max-width: 578px){.request-info--footer{padding:.3rem 1rem}}.request-info--footer__details{color:var(--item-fc)}.request-info--body{padding:2rem;display:flex;align-items:center;gap:.75rem;background-color:#fff}@media (max-width: 578px){.request-info--body{padding:1rem;flex-direction:column;align-items:stretch}}.request-info--body figure{min-width:30px;width:30px;text-align:center}.request-info--body figure svg{width:100%}@media (max-width: 578px){.request-info--status-action{justify-content:space-between}}.request-info--history{margin-top:-.5rem}.request-info--comment{background-color:#fff0eb;color:var(--orange);border-radius:0 0 4px 4px}.status-container{min-height:40px;padding:.5rem 1rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.status-container.danger{--item-bg: var(--red);--status-container-bc: #fae9ec;--status-container-brc: var(--red)}.status-container ::ng-deep ds-avatar .avatar{--default-size: 18px}.circle-status::part(base){--status-radius: 50%;--status-size: 19px;--status-fs: 100%}ds-button[square]::part(base){--btn-padding: 0;--default-size-sm: 30px}.send-back-container{background-color:#fff0eb;color:var(--orange);padding:.5rem;border-radius:4px}object,iframe,embed{height:79vh}::ng-deep .history-popup{--popup-width: 100vw;--popup-max-width: 100vw;--popup-radius: 15px 15px 0 0;position:absolute!important;bottom:0}:host ::ng-deep .mat-expansion-panel-content{background:#fff!important}:host .main-sidenav.main-sidenav-full .sidenav-title{border-bottom:transparent!important}:host .main-sidenav .sidenav-title{background-color:transparent!important}:host .main-sidenav{height:60px;min-height:10px!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{--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"] }]
|
|
5919
5951
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CoreService }, { type: CoreI18nService }, { type: FeedBackService }, { type: i1$1.MatDialog }, { type: SidenavService }, { type: i2.ToastrService }], propDecorators: { form: [{
|
|
5920
5952
|
type: Input
|
|
5921
5953
|
}], showHistory: [{
|
|
@@ -6179,7 +6211,7 @@ class FormSectionComponent {
|
|
|
6179
6211
|
return statusStrategy.icon;
|
|
6180
6212
|
}
|
|
6181
6213
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, deps: [{ token: CoreI18nService }, { token: CoreService }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6182
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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{--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$
|
|
6214
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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{--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$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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$2.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }] });
|
|
6183
6215
|
}
|
|
6184
6216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormSectionComponent, decorators: [{
|
|
6185
6217
|
type: Component,
|
|
@@ -6225,7 +6257,7 @@ class MainRequestDetailsComponent {
|
|
|
6225
6257
|
return this.section?.body?.details?.['expandStage'] === 'true';
|
|
6226
6258
|
}
|
|
6227
6259
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MainRequestDetailsComponent, deps: [{ token: CoreI18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6228
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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
|
|
6260
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }] });
|
|
6229
6261
|
}
|
|
6230
6262
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MainRequestDetailsComponent, decorators: [{
|
|
6231
6263
|
type: Component,
|
|
@@ -6233,7 +6265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
6233
6265
|
MatExpansionModule,
|
|
6234
6266
|
MatAccordion,
|
|
6235
6267
|
MatExpansionPanel
|
|
6236
|
-
], template: "<mat-accordion class=\"primary-accordion main-request-accordion border-top\">\r\n <mat-expansion-panel
|
|
6268
|
+
], 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"] }]
|
|
6237
6269
|
}], ctorParameters: () => [{ type: CoreI18nService }], propDecorators: { section: [{
|
|
6238
6270
|
type: Input
|
|
6239
6271
|
}], lov: [{
|
|
@@ -6356,7 +6388,7 @@ class WorkflowSectionComponent {
|
|
|
6356
6388
|
});
|
|
6357
6389
|
}
|
|
6358
6390
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: WorkflowSectionComponent, deps: [{ token: CoreI18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6359
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: WorkflowSectionComponent, isStandalone: true, selector: "app-workflow-section", inputs: { sections: "sections", isReadOnly: "isReadOnly", isLoading: "isLoading", form: "form", contentClass: "contentClass", sectionsController: "sectionsController", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, outputs: { sectionSubmitted: "sectionSubmitted" }, viewQueries: [{ propertyName: "formStateObject", first: true, predicate: ["f"], descendants: true }], ngImport: i0, template: "<form #f=\"ngForm\" autocomplete=\"off\">\r\n <div *ngIf=\"form?.header?.status?.key !== 'NEW' \" class=\"mt-n3\" id=\"accordion\" role=\"tablist\"\r\n aria-multiselectable=\"true\">\r\n <app-main-request-details [lov]=\"form?.lovs\" [form]=\"form\" [section]=\"form?.sections[0]\">\r\n <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n </app-main-request-details>\r\n <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"form?.sections.length > 1\">\r\n {{i18n.translate('Approvals')}}\r\n </header>\r\n <mat-accordion class=\"primary-accordion main-approval\">\r\n <ng-container *ngFor=\"let section of form?.sections; let i = index\">\r\n <app-form-section *ngIf=\"i !== 0\" class=\"app-form-section\" [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\" [section]=section [lov]=\"form?.lovs\"\r\n [isReadOnly]=\"section.header.readOnly\" [form]=\"form\" [controllers]=\"sectionsController\">\r\n </app-form-section>\r\n </ng-container>\r\n </mat-accordion>\r\n </div>\r\n\r\n <section *ngIf=\"form?.header?.status?.key === 'NEW' \" class=\"default-box box-shadow p-4\">\r\n <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n </section>\r\n\r\n</form>\r\n\r\n\r\n<ng-template #contentReqDet><ng-content></ng-content></ng-template>\r\n", styles: ["@charset \"UTF-8\";.primary-accordion{--accordion-height: auto;--indicator-bc: transparent;--indicator-bc-active: transparent;--indicator-icon: \"\\e9bc\";--indicator-icon-active: \"\\ea34\";--indicator-color: var(--coral);--indicator-color-active: var(--dark-gray);--accordion-radius: 4px;--accordion-border-active: 1px solid var(--gray);--accordion-shadow: 0 7px 10px 0 rgba(var(--rgb-black), 3%);--accordion-shadow-active: none;--panel-padding: 1.5rem;--panel-body-padding: 0 1.5rem 1.5rem}@media (max-width: 576px){.primary-accordion{--accordion-height: 110px;--panel-padding: 1.5rem 1rem;--panel-body-padding: 0 1rem 1rem}}.primary-accordion.main-approval{position:relative}.primary-accordion.main-approval:before{content:\"\";position:absolute;top:0;bottom:0;margin:2rem;width:1px;height:calc(100% - 2rem);background-color:var(--dark-gray);z-index:0}@media (max-width: 576px){.workflow-all-btns ds-button::part(base){--btn-padding: 0 .5rem;--btn-fs: .75rem;--btn-height: var(--default-size-sm);--btn-min-width: var(--default-size-sm)}}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormSectionComponent, selector: "app-form-section", inputs: ["requestDetails", "section", "form", "lov", "isReadOnly", "controllers", "segmentDynamicLoaderService", "sectionFormComponent", "sectionName"] }, { kind: "component", type: MainRequestDetailsComponent, selector: "app-main-request-details", inputs: ["section", "lov", "form"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
6391
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: WorkflowSectionComponent, isStandalone: true, selector: "app-workflow-section", inputs: { sections: "sections", isReadOnly: "isReadOnly", isLoading: "isLoading", form: "form", contentClass: "contentClass", sectionsController: "sectionsController", segmentDynamicLoaderService: "segmentDynamicLoaderService", sectionFormComponent: "sectionFormComponent", sectionName: "sectionName" }, outputs: { sectionSubmitted: "sectionSubmitted" }, viewQueries: [{ propertyName: "formStateObject", first: true, predicate: ["f"], descendants: true }], ngImport: i0, template: "<form #f=\"ngForm\" autocomplete=\"off\">\r\n <div *ngIf=\"form?.header?.status?.key !== 'NEW' \" class=\"mt-n3\" id=\"accordion\" role=\"tablist\"\r\n aria-multiselectable=\"true\">\r\n <app-main-request-details [lov]=\"form?.lovs\" [form]=\"form\" [section]=\"form?.sections[0]\">\r\n <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n </app-main-request-details>\r\n <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"form?.sections.length > 1\">\r\n {{i18n.translate('Approvals')}}\r\n </header>\r\n <mat-accordion class=\"primary-accordion main-approval\">\r\n <ng-container *ngFor=\"let section of form?.sections; let i = index\">\r\n <app-form-section *ngIf=\"i !== 0\" class=\"app-form-section\" [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\" [section]=section [lov]=\"form?.lovs\"\r\n [isReadOnly]=\"section.header.readOnly\" [form]=\"form\" [controllers]=\"sectionsController\">\r\n </app-form-section>\r\n </ng-container>\r\n </mat-accordion>\r\n </div>\r\n\r\n <section *ngIf=\"form?.header?.status?.key === 'NEW' \" class=\"default-box box-shadow p-4 rounded-4\">\r\n <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n </section>\r\n\r\n</form>\r\n\r\n\r\n<ng-template #contentReqDet><ng-content></ng-content></ng-template>\r\n", styles: ["@charset \"UTF-8\";.primary-accordion{--accordion-height: auto;--indicator-bc: transparent;--indicator-bc-active: transparent;--indicator-icon: \"\\e9bc\";--indicator-icon-active: \"\\ea34\";--indicator-color: var(--coral);--indicator-color-active: var(--dark-gray);--accordion-radius: 4px;--accordion-border-active: 1px solid var(--gray);--accordion-shadow: 0 7px 10px 0 rgba(var(--rgb-black), 3%);--accordion-shadow-active: none;--panel-padding: 1.5rem;--panel-body-padding: 0 1.5rem 1.5rem}@media (max-width: 576px){.primary-accordion{--accordion-height: 110px;--panel-padding: 1.5rem 1rem;--panel-body-padding: 0 1rem 1rem}}.primary-accordion.main-approval{position:relative}.primary-accordion.main-approval:before{content:\"\";position:absolute;top:0;bottom:0;margin:2rem;width:1px;height:calc(100% - 2rem);background-color:var(--dark-gray);z-index:0}@media (max-width: 576px){.workflow-all-btns ds-button::part(base){--btn-padding: 0 .5rem;--btn-fs: .75rem;--btn-height: var(--default-size-sm);--btn-min-width: var(--default-size-sm)}}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormSectionComponent, selector: "app-form-section", inputs: ["requestDetails", "section", "form", "lov", "isReadOnly", "controllers", "segmentDynamicLoaderService", "sectionFormComponent", "sectionName"] }, { kind: "component", type: MainRequestDetailsComponent, selector: "app-main-request-details", inputs: ["section", "lov", "form"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
|
|
6360
6392
|
}
|
|
6361
6393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: WorkflowSectionComponent, decorators: [{
|
|
6362
6394
|
type: Component,
|
|
@@ -6369,7 +6401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
6369
6401
|
MainRequestDetailsComponent,
|
|
6370
6402
|
NgForOf,
|
|
6371
6403
|
FormsModule
|
|
6372
|
-
], standalone: true, template: "<form #f=\"ngForm\" autocomplete=\"off\">\r\n <div *ngIf=\"form?.header?.status?.key !== 'NEW' \" class=\"mt-n3\" id=\"accordion\" role=\"tablist\"\r\n aria-multiselectable=\"true\">\r\n <app-main-request-details [lov]=\"form?.lovs\" [form]=\"form\" [section]=\"form?.sections[0]\">\r\n <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n </app-main-request-details>\r\n <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"form?.sections.length > 1\">\r\n {{i18n.translate('Approvals')}}\r\n </header>\r\n <mat-accordion class=\"primary-accordion main-approval\">\r\n <ng-container *ngFor=\"let section of form?.sections; let i = index\">\r\n <app-form-section *ngIf=\"i !== 0\" class=\"app-form-section\" [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\" [section]=section [lov]=\"form?.lovs\"\r\n [isReadOnly]=\"section.header.readOnly\" [form]=\"form\" [controllers]=\"sectionsController\">\r\n </app-form-section>\r\n </ng-container>\r\n </mat-accordion>\r\n </div>\r\n\r\n <section *ngIf=\"form?.header?.status?.key === 'NEW' \" class=\"default-box box-shadow p-4\">\r\n <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n </section>\r\n\r\n</form>\r\n\r\n\r\n<ng-template #contentReqDet><ng-content></ng-content></ng-template>\r\n", styles: ["@charset \"UTF-8\";.primary-accordion{--accordion-height: auto;--indicator-bc: transparent;--indicator-bc-active: transparent;--indicator-icon: \"\\e9bc\";--indicator-icon-active: \"\\ea34\";--indicator-color: var(--coral);--indicator-color-active: var(--dark-gray);--accordion-radius: 4px;--accordion-border-active: 1px solid var(--gray);--accordion-shadow: 0 7px 10px 0 rgba(var(--rgb-black), 3%);--accordion-shadow-active: none;--panel-padding: 1.5rem;--panel-body-padding: 0 1.5rem 1.5rem}@media (max-width: 576px){.primary-accordion{--accordion-height: 110px;--panel-padding: 1.5rem 1rem;--panel-body-padding: 0 1rem 1rem}}.primary-accordion.main-approval{position:relative}.primary-accordion.main-approval:before{content:\"\";position:absolute;top:0;bottom:0;margin:2rem;width:1px;height:calc(100% - 2rem);background-color:var(--dark-gray);z-index:0}@media (max-width: 576px){.workflow-all-btns ds-button::part(base){--btn-padding: 0 .5rem;--btn-fs: .75rem;--btn-height: var(--default-size-sm);--btn-min-width: var(--default-size-sm)}}\n"] }]
|
|
6404
|
+
], standalone: true, template: "<form #f=\"ngForm\" autocomplete=\"off\">\r\n <div *ngIf=\"form?.header?.status?.key !== 'NEW' \" class=\"mt-n3\" id=\"accordion\" role=\"tablist\"\r\n aria-multiselectable=\"true\">\r\n <app-main-request-details [lov]=\"form?.lovs\" [form]=\"form\" [section]=\"form?.sections[0]\">\r\n <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n </app-main-request-details>\r\n <header class=\"header-line fs-12 fw-medium fc-dark-gray mt-sm-5 mt-4 mb-4\" *ngIf=\"form?.sections.length > 1\">\r\n {{i18n.translate('Approvals')}}\r\n </header>\r\n <mat-accordion class=\"primary-accordion main-approval\">\r\n <ng-container *ngFor=\"let section of form?.sections; let i = index\">\r\n <app-form-section *ngIf=\"i !== 0\" class=\"app-form-section\" [segmentDynamicLoaderService]=\"segmentDynamicLoaderService\" [section]=section [lov]=\"form?.lovs\"\r\n [isReadOnly]=\"section.header.readOnly\" [form]=\"form\" [controllers]=\"sectionsController\">\r\n </app-form-section>\r\n </ng-container>\r\n </mat-accordion>\r\n </div>\r\n\r\n <section *ngIf=\"form?.header?.status?.key === 'NEW' \" class=\"default-box box-shadow p-4 rounded-4\">\r\n <ng-container *ngTemplateOutlet=\"contentReqDet\"></ng-container>\r\n </section>\r\n\r\n</form>\r\n\r\n\r\n<ng-template #contentReqDet><ng-content></ng-content></ng-template>\r\n", styles: ["@charset \"UTF-8\";.primary-accordion{--accordion-height: auto;--indicator-bc: transparent;--indicator-bc-active: transparent;--indicator-icon: \"\\e9bc\";--indicator-icon-active: \"\\ea34\";--indicator-color: var(--coral);--indicator-color-active: var(--dark-gray);--accordion-radius: 4px;--accordion-border-active: 1px solid var(--gray);--accordion-shadow: 0 7px 10px 0 rgba(var(--rgb-black), 3%);--accordion-shadow-active: none;--panel-padding: 1.5rem;--panel-body-padding: 0 1.5rem 1.5rem}@media (max-width: 576px){.primary-accordion{--accordion-height: 110px;--panel-padding: 1.5rem 1rem;--panel-body-padding: 0 1rem 1rem}}.primary-accordion.main-approval{position:relative}.primary-accordion.main-approval:before{content:\"\";position:absolute;top:0;bottom:0;margin:2rem;width:1px;height:calc(100% - 2rem);background-color:var(--dark-gray);z-index:0}@media (max-width: 576px){.workflow-all-btns ds-button::part(base){--btn-padding: 0 .5rem;--btn-fs: .75rem;--btn-height: var(--default-size-sm);--btn-min-width: var(--default-size-sm)}}\n"] }]
|
|
6373
6405
|
}], ctorParameters: () => [{ type: CoreI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formStateObject: [{
|
|
6374
6406
|
type: ViewChild,
|
|
6375
6407
|
args: ['f']
|
|
@@ -6467,7 +6499,7 @@ class HeaderComponent {
|
|
|
6467
6499
|
// this.sidenavSubscription.unsubscribe()
|
|
6468
6500
|
}
|
|
6469
6501
|
location = location;
|
|
6470
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$
|
|
6502
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, deps: [{ token: CoreI18nService }, { token: SidenavService }, { token: CoreService }, { token: i2$4.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
|
|
6471
6503
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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$2.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$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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"] }] });
|
|
6472
6504
|
}
|
|
6473
6505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
@@ -6479,7 +6511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
6479
6511
|
MatMenuModule,
|
|
6480
6512
|
MatToolbarModule
|
|
6481
6513
|
], 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"] }]
|
|
6482
|
-
}], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$
|
|
6514
|
+
}], ctorParameters: () => [{ type: CoreI18nService }, { type: SidenavService }, { type: CoreService }, { type: i2$4.Router }, { type: undefined, decorators: [{
|
|
6483
6515
|
type: Inject,
|
|
6484
6516
|
args: [PLATFORM_ID]
|
|
6485
6517
|
}] }] });
|
|
@@ -6621,13 +6653,13 @@ class SideNavComponent {
|
|
|
6621
6653
|
}
|
|
6622
6654
|
this.router.navigate([url]);
|
|
6623
6655
|
}
|
|
6624
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i2$
|
|
6625
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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$
|
|
6656
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, deps: [{ token: SidenavService }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
6657
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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$3.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"] }] });
|
|
6626
6658
|
}
|
|
6627
6659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SideNavComponent, decorators: [{
|
|
6628
6660
|
type: Component,
|
|
6629
6661
|
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"] }]
|
|
6630
|
-
}], ctorParameters: () => [{ type: SidenavService }, { type: i2$
|
|
6662
|
+
}], ctorParameters: () => [{ type: SidenavService }, { type: i2$4.Router }], propDecorators: { isOpened: [{
|
|
6631
6663
|
type: Input
|
|
6632
6664
|
}], MenuTrigger: [{
|
|
6633
6665
|
type: ViewChild,
|
|
@@ -6687,8 +6719,8 @@ class LayoutComponent {
|
|
|
6687
6719
|
closeSideNav() {
|
|
6688
6720
|
this.sidenav.close().then(r => { });
|
|
6689
6721
|
}
|
|
6690
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, deps: [{ token: DOCUMENT }, { token: i2$
|
|
6691
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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$
|
|
6722
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, deps: [{ token: DOCUMENT }, { token: i2$4.Router }, { token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6723
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", 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$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
6692
6724
|
}
|
|
6693
6725
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
6694
6726
|
type: Component,
|
|
@@ -6696,7 +6728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
6696
6728
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
|
6697
6729
|
type: Inject,
|
|
6698
6730
|
args: [DOCUMENT]
|
|
6699
|
-
}] }, { type: i2$
|
|
6731
|
+
}] }, { type: i2$4.Router }, { type: SidenavService }], propDecorators: { sidenav: [{
|
|
6700
6732
|
type: ViewChild,
|
|
6701
6733
|
args: ["sidenav", { static: true }]
|
|
6702
6734
|
}], form: [{
|
|
@@ -6779,7 +6811,7 @@ class SkipLocationDirective {
|
|
|
6779
6811
|
onClick() {
|
|
6780
6812
|
this.router.navigate([this.appSkipLocation], { skipLocationChange: true });
|
|
6781
6813
|
}
|
|
6782
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkipLocationDirective, deps: [{ token: i2$
|
|
6814
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkipLocationDirective, deps: [{ token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Directive });
|
|
6783
6815
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SkipLocationDirective, isStandalone: true, selector: "[appSkipLocation]", inputs: { appSkipLocation: "appSkipLocation" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
|
|
6784
6816
|
}
|
|
6785
6817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkipLocationDirective, decorators: [{
|
|
@@ -6788,7 +6820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
6788
6820
|
standalone: true,
|
|
6789
6821
|
selector: '[appSkipLocation]'
|
|
6790
6822
|
}]
|
|
6791
|
-
}], ctorParameters: () => [{ type: i2$
|
|
6823
|
+
}], ctorParameters: () => [{ type: i2$4.Router }], propDecorators: { appSkipLocation: [{
|
|
6792
6824
|
type: Input
|
|
6793
6825
|
}], onClick: [{
|
|
6794
6826
|
type: HostListener,
|
|
@@ -6941,13 +6973,13 @@ class TableComponent {
|
|
|
6941
6973
|
this.pageScroll.emit(true);
|
|
6942
6974
|
}
|
|
6943
6975
|
}
|
|
6944
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.MatDialog }, { token: i2$
|
|
6945
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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\r\n #tableSort=\"matSort\"\r\n (matSortChange)=\"sortChange($event)\"\r\n [dataSource]=\"dataSource\"\r\n class=\"primary-table {{ className }}\"\r\n mat-table\r\n matSort\r\n >\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\r\n [matColumnDef]=\"column\"\r\n [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\"\r\n >\r\n @if(!columnsConfig[i].notSortable){\r\n <ng-container>\r\n <th\r\n *matHeaderCellDef\r\n [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n mat-header-cell\r\n mat-sort-header\r\n >\r\n @if(columnsConfig[i].type !== 'checkbox' || (\r\n this.columnsConfig[i]?.type! == 'actions' &&\r\n this.columnsConfig[i]?.actions?.length === 0) ){\r\n <ng-container>\r\n @if(!( this.columnsConfig[i].type == 'actions' &&\r\n 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\r\n *matHeaderCellDef\r\n [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n mat-header-cell\r\n >\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\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\r\n *ngSwitchCase=\"'linkWithIcon'\"\r\n [appSkipLocation]=\"columnsConfig[i].link\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"fc-black text-decoration-underline fw-medium\"\r\n >\r\n <ds-icon\r\n class=\"fs-20 fc-black\"\r\n icon=\" {{ columnsConfig[i].icon }}\"\r\n ></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n element[column]\r\n }}</span>\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'underLineWithIcon'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"fc-black text-decoration-underline fw-medium\"\r\n >\r\n <ds-icon\r\n class=\"fs-20 fc-black\"\r\n icon=\" {{ columnsConfig[i].icon }}\"\r\n ></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n element[column]\r\n }}</span>\r\n </span>\r\n <mat-checkbox\r\n *ngSwitchCase=\"'checkbox'\"\r\n checked=\"{{ columnsConfig[i].checked }}\"\r\n class=\"checkbox\"\r\n disabled=\"{{ columnsConfig[i].disabled }}\"\r\n >\r\n </mat-checkbox>\r\n <span\r\n *ngSwitchCase=\"'ServiceDetails'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"cursor-pointer\"\r\n >\r\n {{ element[column] }}\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'dateOnly'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-2 text-nowrap\"\r\n >\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\r\n *ngSwitchCase=\"'Search'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center\"\r\n >\r\n <app-input\r\n [formControl]=\"ctrl\"\r\n [placeholder]=\"'Search for item '\"\r\n [showLabel]=\"false\"\r\n class=\"\"\r\n className=\"no-padding \"\r\n prefix=\"sfi-search fs-16\"\r\n type=\"text\"\r\n >\r\n </app-input>\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'Number'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center\"\r\n >\r\n <app-input\r\n [formControl]=\"ctrl\"\r\n [placeholder]=\"'number'\"\r\n [showLabel]=\"false\"\r\n class=\"\"\r\n className=\"no-padding\"\r\n type=\"text\"\r\n >\r\n </app-input>\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'dateFromTo'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center\"\r\n >\r\n <span class=\"sfi sfi-clock fc-coral\"></span>\r\n <span class=\"mx-2\">\r\n {{ element?.date.from }}\r\n @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\r\n *ngSwitchCase=\"'dateTime'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n >\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\r\n *ngSwitchCase=\"'singleTimeOnly'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n >\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\r\n *ngSwitchCase=\"'timeOnly'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\"\r\n dir=\"ltr\"\r\n >\r\n <!-- -->\r\n {{\r\n mapText(columnsConfig[i].firstVal, element[column])\r\n | date : \"h:mm a\"\r\n }}\r\n @if(mapText(columnsConfig[i].secondVal, element[column] )){\r\n <ng-container>\r\n -\r\n {{\r\n mapText(columnsConfig[i].secondVal, element[column])\r\n | date : \"h:mm a\"\r\n }}\r\n </ng-container>\r\n }\r\n </span>\r\n\r\n <span\r\n *ngSwitchCase=\"'multipleRows'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n >\r\n <!-- -->\r\n @if(!element[column].monthlyFineEscalation){\r\n <div>\r\n {{ element[column].fixedFineValue }}\r\n {{ \"global.SAR\" | translate }}\r\n </div>\r\n } @if(element[column].monthlyFineEscalation){\r\n <div>\r\n <br />\r\n {{ element[column].firstTimeFine }}\r\n {{ \"global.SAR\" | translate }} <br /><br />\r\n {{ element[column].secondTimeFine }}\r\n {{ \"global.SAR\" | translate }} <br /><br />\r\n {{ element[column].thirdTimeFine }}\r\n {{ \"global.SAR\" | translate }} <br /><br />\r\n </div>\r\n }\r\n </span>\r\n\r\n <div\r\n *ngSwitchCase=\"'sla'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center\"\r\n >\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\r\n *ngSwitchCase=\"'Priority'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ element[column] }}\"\r\n >\r\n {{ element[column] }}\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'serviceStatus'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ element[column] }}\"\r\n >\r\n <span\r\n [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\"\r\n class=\"dot-status\"\r\n ></span>\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'image'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"img-card table-img\"\r\n >\r\n <img\r\n [src]=\"element?.image\"\r\n alt=\"\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n />\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'employee'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex align-items-center gap-2 text-nowrap\"\r\n >\r\n <ds-avatar\r\n [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\"\r\n size=\"x-small\"\r\n >\r\n </ds-avatar>\r\n <span>{{ (element[column]?.['name']) }}</span>\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'progress_group'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex gap-1\"\r\n >\r\n <ng-container *ngFor=\"let item of element[column]\">\r\n <div\r\n class=\"progress-container default-progress medium radius-0\"\r\n matTooltip=\"Team assignment {{ item.value }}%\"\r\n matTooltipPosition=\"below\"\r\n >\r\n <div\r\n [style.width.%]=\"item.value\"\r\n class=\"progress-bar bg-color-{{ item.color }}\"\r\n ></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div\r\n *ngSwitchCase=\"'input'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"\"\r\n >\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\r\n *ngSwitchCase=\"'select'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"\"\r\n >\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\r\n *ngSwitchCase=\"'status'\"\r\n [ngClass]=\"'New' + columnsConfig[i].type\"\r\n class=\"d-flex align-items-center gap-2\"\r\n >\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\r\n (change)=\"toggleValueChange($event, element)\"\r\n [checked]=\"element[column] == 1\"\r\n [disabled]=\"false\"\r\n ></mat-slide-toggle>\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'customToggle'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n >\r\n <mat-slide-toggle\r\n (change)=\"toggleValueChange($event, element)\"\r\n [checked]=\"element[column] == 7\"\r\n [disabled]=\"element[column] != 1\"\r\n ></mat-slide-toggle>\r\n </div>\r\n <div\r\n *ngSwitchCase=\"'meetingStatus'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }}\"\r\n >\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\r\n class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n >\r\n <span class=\"fs-11 fw-medium mb-1\">\r\n {{ element[column].hours }}</span\r\n >\r\n <span class=\"fs-10 fw-light\">HRS</span>\r\n </div>\r\n <div\r\n class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n >\r\n <span class=\"fs-11 fw-medium mb-1\">\r\n {{ element[column].min }}</span\r\n >\r\n <span class=\"fs-10 fw-light\">MINS</span>\r\n </div>\r\n <div\r\n class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n >\r\n <span class=\"fs-11 fw-medium mb-1\">\r\n {{ element[column].sec }}</span\r\n >\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\r\n *ngSwitchCase=\"'currency'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }}\"\r\n >\r\n {{\r\n element[column]\r\n ? parseInt(element[column]).toFixed(2) +\r\n (columnsConfig[i].currency | translate)\r\n : \"-\"\r\n }}\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'active'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }}\"\r\n >\r\n <ds-icon\r\n [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\"\r\n icon=\"check-circle-f fs-30\"\r\n ></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\r\n fill=\"none\"\r\n height=\"19\"\r\n viewBox=\"0 0 18 19\"\r\n width=\"18\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\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 {{\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 </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\r\n #descConditionalMenu=\"matMenu\"\r\n class=\"p-4 text-center\"\r\n >\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n\r\n <span\r\n (click)=\"$event.stopPropagation()\"\r\n *ngSwitchCase=\"'dropdown'\"\r\n [matMenuTriggerFor]=\"dropdownMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }} cursor-pointer\"\r\n >\r\n {{\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 <!-- <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 {{\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 </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\r\n *ngSwitchCase=\"'group'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"text-nowrap d-flex align-items-center\"\r\n ></div>\r\n\r\n <div\r\n *ngSwitchCase=\"'company'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex align-items-center\"\r\n >\r\n <span class=\"img-card circled-img\">\r\n <img\r\n [src]=\"element?.image\"\r\n alt=\"\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n />\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\r\n *ngSwitchCase=\"'translated'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"text-nowrap\"\r\n >\r\n {{ element[column] }}\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'title'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"text-nowrap\"\r\n >\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span\r\n *ngSwitchCase=\"'maxWidth'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n >\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span\r\n *ngSwitchCase=\"'progress'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n >\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\">{{\r\n element[column].total\r\n }}</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </span>\r\n\r\n <div\r\n *ngSwitchCase=\"'subsidiary'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex align-items-center gap-2\"\r\n >\r\n <img\r\n [alt]=\"element[column]?.title\"\r\n src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\"\r\n />\r\n <!-- <span class=\"full-name\">{{element[column]}}</span>-->\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'Service'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex align-items-center gap-2\"\r\n >\r\n <svg\r\n fill=\"none\"\r\n height=\"35\"\r\n viewBox=\"0 0 34 35\"\r\n width=\"34\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <rect\r\n fill=\"#FF375E\"\r\n fill-opacity=\"0.1\"\r\n height=\"33.5\"\r\n rx=\"4\"\r\n width=\"33.5\"\r\n y=\"0.75\"\r\n />\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\">{{\r\n element?.Service.name\r\n }}</span>\r\n </div>\r\n <div\r\n *ngSwitchCase=\"'Color'\"\r\n class=\"d-flex align-items-center gap-2\"\r\n >\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\r\n *ngSwitchCase=\"'assigned'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"delegate d-flex align-items-center\"\r\n >\r\n <div class=\"img-card x-small circled-img\">\r\n <img\r\n [src]=\"element?.AssignedTo.image\"\r\n alt=\"\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n />\r\n </div>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-black\">{{\r\n element?.AssignedTo.name\r\n }}</span>\r\n <!--\r\n <span class=\"sfi sfi-close fc-coral\"></span>\r\n -->\r\n </div>\r\n\r\n <span\r\n *ngSwitchCase=\"'coloredText'\"\r\n [style.color]=\"element[column]?.['color']\"\r\n >{{\r\n element[column]?.['title']\r\n }}</span\r\n >\r\n <div\r\n *ngSwitchCase=\"'survey'\"\r\n [style.color]=\"element[column]?.['color']\"\r\n class=\"d-flex align-items-center gap-1 text-nowrap\"\r\n >\r\n <span\r\n class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"\r\n ></span>\r\n {{ element[column]?.['title'] }}\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'Satisfaction'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"delegate d-flex gap-2 align-items-center\"\r\n >\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\"\r\n >{{ element[column].percentage }}%</span\r\n >\r\n <ds-status\r\n class=\"auto-status\"\r\n size=\"small\"\r\n status=\"{{ element[column].status }}\"\r\n >\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\">\r\n </ds-icon>\r\n } @if(element[column].trendStatus != 'up'){\r\n <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\">\r\n </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\r\n *ngIf=\"columnsConfig[i]?.actions?.length <= 6\"\r\n >\r\n <ng-container\r\n *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n >\r\n <ds-button\r\n (click)=\"$event.stopPropagation()\"\r\n *ngIf=\"action.viewMode === Actions.ALLOCATE\"\r\n shape=\"outline\"\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=\"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\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\r\n class=\"fc-coral fs-15\"\r\n icon=\"trash\"\r\n ></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\r\n class=\"fc-coral fs-15\"\r\n icon=\"trash\"\r\n ></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\r\n class=\"fc-coral fs-15\"\r\n icon=\"chart-o\"\r\n ></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\r\n *ngIf=\"action?.action === Actions.DETAILS\"\r\n shape=\"text\"\r\n size=\"small\"\r\n >\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\r\n class=\"fs-16\"\r\n icon=\"media-play\"\r\n slot=\"prefix\"\r\n ></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\r\n class=\"fs-12 fc-black\"\r\n icon=\"settings\"\r\n slot=\"prefix\"\r\n ></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\r\n class=\"fs-16\"\r\n icon=\"media-play\"\r\n slot=\"prefix\"\r\n ></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\r\n class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n >\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\r\n class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n >\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\r\n class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n >\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\r\n class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n >\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-status\r\n *ngIf=\"action?.action === Actions.STATUS\"\r\n [status]=\"action?.Status.status\"\r\n class=\"fs-12 statusAction w-100\"\r\n >\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\r\n class=\"fs-20 fc-dark-gray\"\r\n icon=\"dots\"\r\n ></ds-icon>\r\n </ds-button>\r\n\r\n <mat-menu #statusMenu=\"matMenu\">\r\n <button\r\n (click)=\"action?.onClick(element)\"\r\n *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n mat-menu-item\r\n >\r\n <span class=\"fs-12 fc-black\"\r\n >{{ action?.actionName | translate }}\r\n </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 {{\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 </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\r\n (click)=\"clickRow(row)\"\r\n *matRowDef=\"let row; columns: columns\"\r\n [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\"\r\n mat-row\r\n role=\"button\"\r\n ></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\r\n [label]=\"'global.noItemsToDisplay' | translate\"\r\n type=\"emptyList\"\r\n ></ds-message>\r\n }\r\n</div>\r\n@if(dataSource.filteredData?.length && hasPaginator){\r\n<mat-paginator\r\n #paginator\r\n (page)=\"pageChanged($event)\"\r\n [length]=\"totalElements\"\r\n [pageIndex]=\"currentPage\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 100]\"\r\n [pageSize]=\"pageSize\"\r\n aria-label=\"Select page\"\r\n showFirstLastButtons\r\n>\r\n</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", "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", "customErrorMessages"] }, { 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"] }] });
|
|
6976
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.MatDialog }, { token: i2$5.TranslateService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
6977
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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\r\n #tableSort=\"matSort\"\r\n (matSortChange)=\"sortChange($event)\"\r\n [dataSource]=\"dataSource\"\r\n class=\"primary-table {{ className }}\"\r\n mat-table\r\n matSort\r\n >\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\r\n [matColumnDef]=\"column\"\r\n [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\"\r\n >\r\n @if(!columnsConfig[i].notSortable){\r\n <ng-container>\r\n <th\r\n *matHeaderCellDef\r\n [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n mat-header-cell\r\n mat-sort-header\r\n >\r\n @if(columnsConfig[i].type !== 'checkbox' || (\r\n this.columnsConfig[i]?.type! == 'actions' &&\r\n this.columnsConfig[i]?.actions?.length === 0) ){\r\n <ng-container>\r\n @if(!( this.columnsConfig[i].type == 'actions' &&\r\n 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\r\n *matHeaderCellDef\r\n [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n mat-header-cell\r\n >\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\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\r\n *ngSwitchCase=\"'linkWithIcon'\"\r\n [appSkipLocation]=\"columnsConfig[i].link\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"fc-black text-decoration-underline fw-medium\"\r\n >\r\n <ds-icon\r\n class=\"fs-20 fc-black\"\r\n icon=\" {{ columnsConfig[i].icon }}\"\r\n ></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n element[column]\r\n }}</span>\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'underLineWithIcon'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"fc-black text-decoration-underline fw-medium\"\r\n >\r\n <ds-icon\r\n class=\"fs-20 fc-black\"\r\n icon=\" {{ columnsConfig[i].icon }}\"\r\n ></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n element[column]\r\n }}</span>\r\n </span>\r\n <mat-checkbox\r\n *ngSwitchCase=\"'checkbox'\"\r\n checked=\"{{ columnsConfig[i].checked }}\"\r\n class=\"checkbox\"\r\n disabled=\"{{ columnsConfig[i].disabled }}\"\r\n >\r\n </mat-checkbox>\r\n <span\r\n *ngSwitchCase=\"'ServiceDetails'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"cursor-pointer\"\r\n >\r\n {{ element[column] }}\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'dateOnly'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-2 text-nowrap\"\r\n >\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\r\n *ngSwitchCase=\"'Search'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center\"\r\n >\r\n <app-input\r\n [formControl]=\"ctrl\"\r\n [placeholder]=\"'Search for item '\"\r\n [showLabel]=\"false\"\r\n class=\"\"\r\n className=\"no-padding \"\r\n prefix=\"sfi-search fs-16\"\r\n type=\"text\"\r\n >\r\n </app-input>\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'Number'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center\"\r\n >\r\n <app-input\r\n [formControl]=\"ctrl\"\r\n [placeholder]=\"'number'\"\r\n [showLabel]=\"false\"\r\n class=\"\"\r\n className=\"no-padding\"\r\n type=\"text\"\r\n >\r\n </app-input>\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'dateFromTo'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center\"\r\n >\r\n <span class=\"sfi sfi-clock fc-coral\"></span>\r\n <span class=\"mx-2\">\r\n {{ element?.date.from }}\r\n @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\r\n *ngSwitchCase=\"'dateTime'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n >\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\r\n *ngSwitchCase=\"'singleTimeOnly'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n >\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\r\n *ngSwitchCase=\"'timeOnly'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\"\r\n dir=\"ltr\"\r\n >\r\n <!-- -->\r\n {{\r\n mapText(columnsConfig[i].firstVal, element[column])\r\n | date : \"h:mm a\"\r\n }}\r\n @if(mapText(columnsConfig[i].secondVal, element[column] )){\r\n <ng-container>\r\n -\r\n {{\r\n mapText(columnsConfig[i].secondVal, element[column])\r\n | date : \"h:mm a\"\r\n }}\r\n </ng-container>\r\n }\r\n </span>\r\n\r\n <span\r\n *ngSwitchCase=\"'multipleRows'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n >\r\n <!-- -->\r\n @if(!element[column].monthlyFineEscalation){\r\n <div>\r\n {{ element[column].fixedFineValue }}\r\n {{ \"global.SAR\" | translate }}\r\n </div>\r\n } @if(element[column].monthlyFineEscalation){\r\n <div>\r\n <br />\r\n {{ element[column].firstTimeFine }}\r\n {{ \"global.SAR\" | translate }} <br /><br />\r\n {{ element[column].secondTimeFine }}\r\n {{ \"global.SAR\" | translate }} <br /><br />\r\n {{ element[column].thirdTimeFine }}\r\n {{ \"global.SAR\" | translate }} <br /><br />\r\n </div>\r\n }\r\n </span>\r\n\r\n <div\r\n *ngSwitchCase=\"'sla'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center\"\r\n >\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\r\n *ngSwitchCase=\"'Priority'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ element[column] }}\"\r\n >\r\n {{ element[column] }}\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'serviceStatus'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ element[column] }}\"\r\n >\r\n <span\r\n [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\"\r\n class=\"dot-status\"\r\n ></span>\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'image'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"img-card table-img\"\r\n >\r\n <img\r\n [src]=\"element?.image\"\r\n alt=\"\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n />\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'employee'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex align-items-center gap-2 text-nowrap\"\r\n >\r\n <ds-avatar\r\n [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\"\r\n size=\"x-small\"\r\n >\r\n </ds-avatar>\r\n <span>{{ (element[column]?.['name']) }}</span>\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'progress_group'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex gap-1\"\r\n >\r\n <ng-container *ngFor=\"let item of element[column]\">\r\n <div\r\n class=\"progress-container default-progress medium radius-0\"\r\n matTooltip=\"Team assignment {{ item.value }}%\"\r\n matTooltipPosition=\"below\"\r\n >\r\n <div\r\n [style.width.%]=\"item.value\"\r\n class=\"progress-bar bg-color-{{ item.color }}\"\r\n ></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div\r\n *ngSwitchCase=\"'input'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"\"\r\n >\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\r\n *ngSwitchCase=\"'select'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"\"\r\n >\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\r\n *ngSwitchCase=\"'status'\"\r\n [ngClass]=\"'New' + columnsConfig[i].type\"\r\n class=\"d-flex align-items-center gap-2\"\r\n >\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\r\n (change)=\"toggleValueChange($event, element)\"\r\n [checked]=\"element[column] == 1\"\r\n [disabled]=\"false\"\r\n ></mat-slide-toggle>\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'customToggle'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n >\r\n <mat-slide-toggle\r\n (change)=\"toggleValueChange($event, element)\"\r\n [checked]=\"element[column] == 7\"\r\n [disabled]=\"element[column] != 1\"\r\n ></mat-slide-toggle>\r\n </div>\r\n <div\r\n *ngSwitchCase=\"'meetingStatus'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }}\"\r\n >\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\r\n class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n >\r\n <span class=\"fs-11 fw-medium mb-1\">\r\n {{ element[column].hours }}</span\r\n >\r\n <span class=\"fs-10 fw-light\">HRS</span>\r\n </div>\r\n <div\r\n class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n >\r\n <span class=\"fs-11 fw-medium mb-1\">\r\n {{ element[column].min }}</span\r\n >\r\n <span class=\"fs-10 fw-light\">MINS</span>\r\n </div>\r\n <div\r\n class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n >\r\n <span class=\"fs-11 fw-medium mb-1\">\r\n {{ element[column].sec }}</span\r\n >\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\r\n *ngSwitchCase=\"'currency'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }}\"\r\n >\r\n {{\r\n element[column]\r\n ? parseInt(element[column]).toFixed(2) +\r\n (columnsConfig[i].currency | translate)\r\n : \"-\"\r\n }}\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'active'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }}\"\r\n >\r\n <ds-icon\r\n [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\"\r\n icon=\"check-circle-f fs-30\"\r\n ></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\r\n fill=\"none\"\r\n height=\"19\"\r\n viewBox=\"0 0 18 19\"\r\n width=\"18\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\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 {{\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 </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\r\n #descConditionalMenu=\"matMenu\"\r\n class=\"p-4 text-center\"\r\n >\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n\r\n <span\r\n (click)=\"$event.stopPropagation()\"\r\n *ngSwitchCase=\"'dropdown'\"\r\n [matMenuTriggerFor]=\"dropdownMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }} cursor-pointer\"\r\n >\r\n {{\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 <!-- <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 {{\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 </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\r\n *ngSwitchCase=\"'group'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"text-nowrap d-flex align-items-center\"\r\n ></div>\r\n\r\n <div\r\n *ngSwitchCase=\"'company'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex align-items-center\"\r\n >\r\n <span class=\"img-card circled-img\">\r\n <img\r\n [src]=\"element?.image\"\r\n alt=\"\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n />\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\r\n *ngSwitchCase=\"'translated'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"text-nowrap\"\r\n >\r\n {{ element[column] }}\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'title'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"text-nowrap\"\r\n >\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span\r\n *ngSwitchCase=\"'maxWidth'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n >\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span\r\n *ngSwitchCase=\"'progress'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n >\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\">{{\r\n element[column].total\r\n }}</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </span>\r\n\r\n <div\r\n *ngSwitchCase=\"'subsidiary'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex align-items-center gap-2\"\r\n >\r\n <img\r\n [alt]=\"element[column]?.title\"\r\n src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\"\r\n />\r\n <!-- <span class=\"full-name\">{{element[column]}}</span>-->\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'Service'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex align-items-center gap-2\"\r\n >\r\n <svg\r\n fill=\"none\"\r\n height=\"35\"\r\n viewBox=\"0 0 34 35\"\r\n width=\"34\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <rect\r\n fill=\"#FF375E\"\r\n fill-opacity=\"0.1\"\r\n height=\"33.5\"\r\n rx=\"4\"\r\n width=\"33.5\"\r\n y=\"0.75\"\r\n />\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\">{{\r\n element?.Service.name\r\n }}</span>\r\n </div>\r\n <div\r\n *ngSwitchCase=\"'Color'\"\r\n class=\"d-flex align-items-center gap-2\"\r\n >\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\r\n *ngSwitchCase=\"'assigned'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"delegate d-flex align-items-center\"\r\n >\r\n <div class=\"img-card x-small circled-img\">\r\n <img\r\n [src]=\"element?.AssignedTo.image\"\r\n alt=\"\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n />\r\n </div>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-black\">{{\r\n element?.AssignedTo.name\r\n }}</span>\r\n <!--\r\n <span class=\"sfi sfi-close fc-coral\"></span>\r\n -->\r\n </div>\r\n\r\n <span\r\n *ngSwitchCase=\"'coloredText'\"\r\n [style.color]=\"element[column]?.['color']\"\r\n >{{\r\n element[column]?.['title']\r\n }}</span\r\n >\r\n <div\r\n *ngSwitchCase=\"'survey'\"\r\n [style.color]=\"element[column]?.['color']\"\r\n class=\"d-flex align-items-center gap-1 text-nowrap\"\r\n >\r\n <span\r\n class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"\r\n ></span>\r\n {{ element[column]?.['title'] }}\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'Satisfaction'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"delegate d-flex gap-2 align-items-center\"\r\n >\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\"\r\n >{{ element[column].percentage }}%</span\r\n >\r\n <ds-status\r\n class=\"auto-status\"\r\n size=\"small\"\r\n status=\"{{ element[column].status }}\"\r\n >\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\">\r\n </ds-icon>\r\n } @if(element[column].trendStatus != 'up'){\r\n <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\">\r\n </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\r\n *ngIf=\"columnsConfig[i]?.actions?.length <= 6\"\r\n >\r\n <ng-container\r\n *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n >\r\n <ds-button\r\n (click)=\"$event.stopPropagation()\"\r\n *ngIf=\"action.viewMode === Actions.ALLOCATE\"\r\n shape=\"outline\"\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=\"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\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\r\n class=\"fc-coral fs-15\"\r\n icon=\"trash\"\r\n ></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\r\n class=\"fc-coral fs-15\"\r\n icon=\"trash\"\r\n ></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\r\n class=\"fc-coral fs-15\"\r\n icon=\"chart-o\"\r\n ></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\r\n *ngIf=\"action?.action === Actions.DETAILS\"\r\n shape=\"text\"\r\n size=\"small\"\r\n >\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\r\n class=\"fs-16\"\r\n icon=\"media-play\"\r\n slot=\"prefix\"\r\n ></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\r\n class=\"fs-12 fc-black\"\r\n icon=\"settings\"\r\n slot=\"prefix\"\r\n ></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\r\n class=\"fs-16\"\r\n icon=\"media-play\"\r\n slot=\"prefix\"\r\n ></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\r\n class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n >\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\r\n class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n >\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\r\n class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n >\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\r\n class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n >\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-status\r\n *ngIf=\"action?.action === Actions.STATUS\"\r\n [status]=\"action?.Status.status\"\r\n class=\"fs-12 statusAction w-100\"\r\n >\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\r\n class=\"fs-20 fc-dark-gray\"\r\n icon=\"dots\"\r\n ></ds-icon>\r\n </ds-button>\r\n\r\n <mat-menu #statusMenu=\"matMenu\">\r\n <button\r\n (click)=\"action?.onClick(element)\"\r\n *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n mat-menu-item\r\n >\r\n <span class=\"fs-12 fc-black\"\r\n >{{ action?.actionName | translate }}\r\n </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 {{\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 </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\r\n (click)=\"clickRow(row)\"\r\n *matRowDef=\"let row; columns: columns\"\r\n [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\"\r\n mat-row\r\n role=\"button\"\r\n ></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\r\n [label]=\"'global.noItemsToDisplay' | translate\"\r\n type=\"emptyList\"\r\n ></ds-message>\r\n }\r\n</div>\r\n@if(dataSource.filteredData?.length && hasPaginator){\r\n<mat-paginator\r\n #paginator\r\n (page)=\"pageChanged($event)\"\r\n [length]=\"totalElements\"\r\n [pageIndex]=\"currentPage\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 100]\"\r\n [pageSize]=\"pageSize\"\r\n aria-label=\"Select page\"\r\n showFirstLastButtons\r\n>\r\n</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$5.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", "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", "customErrorMessages"] }, { 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"] }] });
|
|
6946
6978
|
}
|
|
6947
6979
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TableComponent, decorators: [{
|
|
6948
6980
|
type: Component,
|
|
6949
6981
|
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\r\n #tableSort=\"matSort\"\r\n (matSortChange)=\"sortChange($event)\"\r\n [dataSource]=\"dataSource\"\r\n class=\"primary-table {{ className }}\"\r\n mat-table\r\n matSort\r\n >\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\r\n [matColumnDef]=\"column\"\r\n [stickyEnd]=\"!!columnsConfig[i].stickyEnd!\"\r\n >\r\n @if(!columnsConfig[i].notSortable){\r\n <ng-container>\r\n <th\r\n *matHeaderCellDef\r\n [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n mat-header-cell\r\n mat-sort-header\r\n >\r\n @if(columnsConfig[i].type !== 'checkbox' || (\r\n this.columnsConfig[i]?.type! == 'actions' &&\r\n this.columnsConfig[i]?.actions?.length === 0) ){\r\n <ng-container>\r\n @if(!( this.columnsConfig[i].type == 'actions' &&\r\n 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\r\n *matHeaderCellDef\r\n [ngClass]=\"{ 'text-end': columnsConfig[i].type === 'actions' }\"\r\n mat-header-cell\r\n >\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\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\r\n *ngSwitchCase=\"'linkWithIcon'\"\r\n [appSkipLocation]=\"columnsConfig[i].link\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"fc-black text-decoration-underline fw-medium\"\r\n >\r\n <ds-icon\r\n class=\"fs-20 fc-black\"\r\n icon=\" {{ columnsConfig[i].icon }}\"\r\n ></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n element[column]\r\n }}</span>\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'underLineWithIcon'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"fc-black text-decoration-underline fw-medium\"\r\n >\r\n <ds-icon\r\n class=\"fs-20 fc-black\"\r\n icon=\" {{ columnsConfig[i].icon }}\"\r\n ></ds-icon>\r\n <span class=\"fs-13 fc-coral px-1 text-decoration-underline\">{{\r\n element[column]\r\n }}</span>\r\n </span>\r\n <mat-checkbox\r\n *ngSwitchCase=\"'checkbox'\"\r\n checked=\"{{ columnsConfig[i].checked }}\"\r\n class=\"checkbox\"\r\n disabled=\"{{ columnsConfig[i].disabled }}\"\r\n >\r\n </mat-checkbox>\r\n <span\r\n *ngSwitchCase=\"'ServiceDetails'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"cursor-pointer\"\r\n >\r\n {{ element[column] }}\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'dateOnly'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-2 text-nowrap\"\r\n >\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\r\n *ngSwitchCase=\"'Search'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center\"\r\n >\r\n <app-input\r\n [formControl]=\"ctrl\"\r\n [placeholder]=\"'Search for item '\"\r\n [showLabel]=\"false\"\r\n class=\"\"\r\n className=\"no-padding \"\r\n prefix=\"sfi-search fs-16\"\r\n type=\"text\"\r\n >\r\n </app-input>\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'Number'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center\"\r\n >\r\n <app-input\r\n [formControl]=\"ctrl\"\r\n [placeholder]=\"'number'\"\r\n [showLabel]=\"false\"\r\n class=\"\"\r\n className=\"no-padding\"\r\n type=\"text\"\r\n >\r\n </app-input>\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'dateFromTo'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center\"\r\n >\r\n <span class=\"sfi sfi-clock fc-coral\"></span>\r\n <span class=\"mx-2\">\r\n {{ element?.date.from }}\r\n @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\r\n *ngSwitchCase=\"'dateTime'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n >\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\r\n *ngSwitchCase=\"'singleTimeOnly'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n >\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\r\n *ngSwitchCase=\"'timeOnly'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-1 flex-wrap text-nowrap text-left\"\r\n dir=\"ltr\"\r\n >\r\n <!-- -->\r\n {{\r\n mapText(columnsConfig[i].firstVal, element[column])\r\n | date : \"h:mm a\"\r\n }}\r\n @if(mapText(columnsConfig[i].secondVal, element[column] )){\r\n <ng-container>\r\n -\r\n {{\r\n mapText(columnsConfig[i].secondVal, element[column])\r\n | date : \"h:mm a\"\r\n }}\r\n </ng-container>\r\n }\r\n </span>\r\n\r\n <span\r\n *ngSwitchCase=\"'multipleRows'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center gap-1 flex-wrap\"\r\n >\r\n <!-- -->\r\n @if(!element[column].monthlyFineEscalation){\r\n <div>\r\n {{ element[column].fixedFineValue }}\r\n {{ \"global.SAR\" | translate }}\r\n </div>\r\n } @if(element[column].monthlyFineEscalation){\r\n <div>\r\n <br />\r\n {{ element[column].firstTimeFine }}\r\n {{ \"global.SAR\" | translate }} <br /><br />\r\n {{ element[column].secondTimeFine }}\r\n {{ \"global.SAR\" | translate }} <br /><br />\r\n {{ element[column].thirdTimeFine }}\r\n {{ \"global.SAR\" | translate }} <br /><br />\r\n </div>\r\n }\r\n </span>\r\n\r\n <div\r\n *ngSwitchCase=\"'sla'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-inline-flex align-items-center\"\r\n >\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\r\n *ngSwitchCase=\"'Priority'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ element[column] }}\"\r\n >\r\n {{ element[column] }}\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'serviceStatus'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ element[column] }}\"\r\n >\r\n <span\r\n [ngClass]=\"element[column] == 'FALSE' ? 'green' : 'red'\"\r\n class=\"dot-status\"\r\n ></span>\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'image'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"img-card table-img\"\r\n >\r\n <img\r\n [src]=\"element?.image\"\r\n alt=\"\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n />\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'employee'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex align-items-center gap-2 text-nowrap\"\r\n >\r\n <ds-avatar\r\n [image]=\"'https://igateapp.stc.com.sa'+element[column]?.['imageUrl']\"\r\n size=\"x-small\"\r\n >\r\n </ds-avatar>\r\n <span>{{ (element[column]?.['name']) }}</span>\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'progress_group'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex gap-1\"\r\n >\r\n <ng-container *ngFor=\"let item of element[column]\">\r\n <div\r\n class=\"progress-container default-progress medium radius-0\"\r\n matTooltip=\"Team assignment {{ item.value }}%\"\r\n matTooltipPosition=\"below\"\r\n >\r\n <div\r\n [style.width.%]=\"item.value\"\r\n class=\"progress-bar bg-color-{{ item.color }}\"\r\n ></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div\r\n *ngSwitchCase=\"'input'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"\"\r\n >\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\r\n *ngSwitchCase=\"'select'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"\"\r\n >\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\r\n *ngSwitchCase=\"'status'\"\r\n [ngClass]=\"'New' + columnsConfig[i].type\"\r\n class=\"d-flex align-items-center gap-2\"\r\n >\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\r\n (change)=\"toggleValueChange($event, element)\"\r\n [checked]=\"element[column] == 1\"\r\n [disabled]=\"false\"\r\n ></mat-slide-toggle>\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'customToggle'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n >\r\n <mat-slide-toggle\r\n (change)=\"toggleValueChange($event, element)\"\r\n [checked]=\"element[column] == 7\"\r\n [disabled]=\"element[column] != 1\"\r\n ></mat-slide-toggle>\r\n </div>\r\n <div\r\n *ngSwitchCase=\"'meetingStatus'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }}\"\r\n >\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\r\n class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n >\r\n <span class=\"fs-11 fw-medium mb-1\">\r\n {{ element[column].hours }}</span\r\n >\r\n <span class=\"fs-10 fw-light\">HRS</span>\r\n </div>\r\n <div\r\n class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n >\r\n <span class=\"fs-11 fw-medium mb-1\">\r\n {{ element[column].min }}</span\r\n >\r\n <span class=\"fs-10 fw-light\">MINS</span>\r\n </div>\r\n <div\r\n class=\"Finished d-flex flex-column align-items-center justify-content-center py-1 fc-black\"\r\n >\r\n <span class=\"fs-11 fw-medium mb-1\">\r\n {{ element[column].sec }}</span\r\n >\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\r\n *ngSwitchCase=\"'currency'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }}\"\r\n >\r\n {{\r\n element[column]\r\n ? parseInt(element[column]).toFixed(2) +\r\n (columnsConfig[i].currency | translate)\r\n : \"-\"\r\n }}\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'active'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }}\"\r\n >\r\n <ds-icon\r\n [ngClass]=\"element[column] ? 'fc-green' : 'fc-gray'\"\r\n icon=\"check-circle-f fs-30\"\r\n ></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\r\n fill=\"none\"\r\n height=\"19\"\r\n viewBox=\"0 0 18 19\"\r\n width=\"18\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\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 {{\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 </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\r\n #descConditionalMenu=\"matMenu\"\r\n class=\"p-4 text-center\"\r\n >\r\n <span class=\"fs-14\">\r\n {{ element[column] }}\r\n </span>\r\n </mat-menu>\r\n\r\n <span\r\n (click)=\"$event.stopPropagation()\"\r\n *ngSwitchCase=\"'dropdown'\"\r\n [matMenuTriggerFor]=\"dropdownMenu\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"{{ columnsConfig[i].type }} cursor-pointer\"\r\n >\r\n {{\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 <!-- <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 {{\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 </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\r\n *ngSwitchCase=\"'group'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"text-nowrap d-flex align-items-center\"\r\n ></div>\r\n\r\n <div\r\n *ngSwitchCase=\"'company'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex align-items-center\"\r\n >\r\n <span class=\"img-card circled-img\">\r\n <img\r\n [src]=\"element?.image\"\r\n alt=\"\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n />\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\r\n *ngSwitchCase=\"'translated'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"text-nowrap\"\r\n >\r\n {{ element[column] }}\r\n </span>\r\n <span\r\n *ngSwitchCase=\"'title'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"text-nowrap\"\r\n >\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span\r\n *ngSwitchCase=\"'maxWidth'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n >\r\n {{ element[column]?.title }}\r\n </span>\r\n\r\n <span\r\n *ngSwitchCase=\"'progress'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n >\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\">{{\r\n element[column].total\r\n }}</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </span>\r\n\r\n <div\r\n *ngSwitchCase=\"'subsidiary'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex align-items-center gap-2\"\r\n >\r\n <img\r\n [alt]=\"element[column]?.title\"\r\n src=\"assets/subsidiaries/ids/{{ element[column]?.id }}.png\"\r\n />\r\n <!-- <span class=\"full-name\">{{element[column]}}</span>-->\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'Service'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"d-flex align-items-center gap-2\"\r\n >\r\n <svg\r\n fill=\"none\"\r\n height=\"35\"\r\n viewBox=\"0 0 34 35\"\r\n width=\"34\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <rect\r\n fill=\"#FF375E\"\r\n fill-opacity=\"0.1\"\r\n height=\"33.5\"\r\n rx=\"4\"\r\n width=\"33.5\"\r\n y=\"0.75\"\r\n />\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\">{{\r\n element?.Service.name\r\n }}</span>\r\n </div>\r\n <div\r\n *ngSwitchCase=\"'Color'\"\r\n class=\"d-flex align-items-center gap-2\"\r\n >\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\r\n *ngSwitchCase=\"'assigned'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"delegate d-flex align-items-center\"\r\n >\r\n <div class=\"img-card x-small circled-img\">\r\n <img\r\n [src]=\"element?.AssignedTo.image\"\r\n alt=\"\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n />\r\n </div>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-black\">{{\r\n element?.AssignedTo.name\r\n }}</span>\r\n <!--\r\n <span class=\"sfi sfi-close fc-coral\"></span>\r\n -->\r\n </div>\r\n\r\n <span\r\n *ngSwitchCase=\"'coloredText'\"\r\n [style.color]=\"element[column]?.['color']\"\r\n >{{\r\n element[column]?.['title']\r\n }}</span\r\n >\r\n <div\r\n *ngSwitchCase=\"'survey'\"\r\n [style.color]=\"element[column]?.['color']\"\r\n class=\"d-flex align-items-center gap-1 text-nowrap\"\r\n >\r\n <span\r\n class=\"fs-20 sfi sfi-emoji-{{(element[column]?.['title']['en'].toLowerCase()) }}\"\r\n ></span>\r\n {{ element[column]?.['title'] }}\r\n </div>\r\n\r\n <div\r\n *ngSwitchCase=\"'Satisfaction'\"\r\n [ngClass]=\"columnsConfig[i].type\"\r\n class=\"delegate d-flex gap-2 align-items-center\"\r\n >\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\"\r\n >{{ element[column].percentage }}%</span\r\n >\r\n <ds-status\r\n class=\"auto-status\"\r\n size=\"small\"\r\n status=\"{{ element[column].status }}\"\r\n >\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\">\r\n </ds-icon>\r\n } @if(element[column].trendStatus != 'up'){\r\n <ds-icon class=\"fs-13 mx-1 downIcon\" icon=\"down-growth\">\r\n </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\r\n *ngIf=\"columnsConfig[i]?.actions?.length <= 6\"\r\n >\r\n <ng-container\r\n *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n >\r\n <ds-button\r\n (click)=\"$event.stopPropagation()\"\r\n *ngIf=\"action.viewMode === Actions.ALLOCATE\"\r\n shape=\"outline\"\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=\"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\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\r\n class=\"fc-coral fs-15\"\r\n icon=\"trash\"\r\n ></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\r\n class=\"fc-coral fs-15\"\r\n icon=\"trash\"\r\n ></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\r\n class=\"fc-coral fs-15\"\r\n icon=\"chart-o\"\r\n ></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\r\n *ngIf=\"action?.action === Actions.DETAILS\"\r\n shape=\"text\"\r\n size=\"small\"\r\n >\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\r\n class=\"fs-16\"\r\n icon=\"media-play\"\r\n slot=\"prefix\"\r\n ></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\r\n class=\"fs-12 fc-black\"\r\n icon=\"settings\"\r\n slot=\"prefix\"\r\n ></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\r\n class=\"fs-16\"\r\n icon=\"media-play\"\r\n slot=\"prefix\"\r\n ></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\r\n class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n >\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\r\n class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n >\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\r\n class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n >\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\r\n class=\"fs-12 fc-{{ action?.actionFontColor }}\"\r\n >\r\n {{ action?.actionName | translate }}\r\n </span>\r\n </ds-button>\r\n <ds-status\r\n *ngIf=\"action?.action === Actions.STATUS\"\r\n [status]=\"action?.Status.status\"\r\n class=\"fs-12 statusAction w-100\"\r\n >\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\r\n class=\"fs-20 fc-dark-gray\"\r\n icon=\"dots\"\r\n ></ds-icon>\r\n </ds-button>\r\n\r\n <mat-menu #statusMenu=\"matMenu\">\r\n <button\r\n (click)=\"action?.onClick(element)\"\r\n *ngFor=\"let action of columnsConfig[i]?.actions\"\r\n mat-menu-item\r\n >\r\n <span class=\"fs-12 fc-black\"\r\n >{{ action?.actionName | translate }}\r\n </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 {{\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 </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\r\n (click)=\"clickRow(row)\"\r\n *matRowDef=\"let row; columns: columns\"\r\n [ngClass]=\"{ 'selected-row': row?.fastTrackSeen === false }\"\r\n mat-row\r\n role=\"button\"\r\n ></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\r\n [label]=\"'global.noItemsToDisplay' | translate\"\r\n type=\"emptyList\"\r\n ></ds-message>\r\n }\r\n</div>\r\n@if(dataSource.filteredData?.length && hasPaginator){\r\n<mat-paginator\r\n #paginator\r\n (page)=\"pageChanged($event)\"\r\n [length]=\"totalElements\"\r\n [pageIndex]=\"currentPage\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 100]\"\r\n [pageSize]=\"pageSize\"\r\n aria-label=\"Select page\"\r\n showFirstLastButtons\r\n>\r\n</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"] }]
|
|
6950
|
-
}], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i2$
|
|
6982
|
+
}], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i2$5.TranslateService }, { type: i4.FormBuilder }], propDecorators: { matTableRef: [{
|
|
6951
6983
|
type: ViewChild,
|
|
6952
6984
|
args: ['table', { read: ElementRef }]
|
|
6953
6985
|
}], columns: [{
|
|
@@ -7033,6 +7065,7 @@ class RequestDetailsSectionComponent {
|
|
|
7033
7065
|
columnsConfig = [];
|
|
7034
7066
|
columns = [];
|
|
7035
7067
|
destroyRef = inject(DestroyRef);
|
|
7068
|
+
requiredSearchable;
|
|
7036
7069
|
isError = false;
|
|
7037
7070
|
categoryData = [
|
|
7038
7071
|
{
|
|
@@ -7225,6 +7258,19 @@ class RequestDetailsSectionComponent {
|
|
|
7225
7258
|
ngOnInit() {
|
|
7226
7259
|
this.createForm();
|
|
7227
7260
|
this.initializeTableConfig();
|
|
7261
|
+
this.formGroup.get('checkbox').valueChanges.subscribe(res => {
|
|
7262
|
+
if (res) {
|
|
7263
|
+
this.formGroup.get('customSearchable').setValidators(Validators.required);
|
|
7264
|
+
this.requiredSearchable = true;
|
|
7265
|
+
console.log(this.requiredSearchable);
|
|
7266
|
+
}
|
|
7267
|
+
else {
|
|
7268
|
+
this.formGroup.get('customSearchable').clearValidators();
|
|
7269
|
+
this.requiredSearchable = false;
|
|
7270
|
+
console.log(this.requiredSearchable);
|
|
7271
|
+
}
|
|
7272
|
+
this.formGroup.get('customSearchable').updateValueAndValidity();
|
|
7273
|
+
});
|
|
7228
7274
|
}
|
|
7229
7275
|
initializeTableConfig() {
|
|
7230
7276
|
this.initializeColumns();
|
|
@@ -7284,7 +7330,7 @@ class RequestDetailsSectionComponent {
|
|
|
7284
7330
|
newForm[option.value] = [''];
|
|
7285
7331
|
});
|
|
7286
7332
|
this.formGroup = this.fb.group({
|
|
7287
|
-
input: new FormControl(null, Validators.required),
|
|
7333
|
+
input: new FormControl(null, [Validators.required]),
|
|
7288
7334
|
currencyInput: new FormControl(null, Validators.required),
|
|
7289
7335
|
emailInput: new FormControl(null, Validators.required),
|
|
7290
7336
|
numberInput: new FormControl(null, Validators.required),
|
|
@@ -7363,6 +7409,15 @@ class RequestDetailsSectionComponent {
|
|
|
7363
7409
|
editAsset(asset) {
|
|
7364
7410
|
console.log(asset);
|
|
7365
7411
|
}
|
|
7412
|
+
startsWithDMOEOrCR() {
|
|
7413
|
+
return (control) => {
|
|
7414
|
+
const value = control.value;
|
|
7415
|
+
if (value && (value.startsWith('DMOE-') || value.startsWith('CR-'))) {
|
|
7416
|
+
return null; // Valid
|
|
7417
|
+
}
|
|
7418
|
+
return { startsWithInvalid: true }; // Invalid
|
|
7419
|
+
};
|
|
7420
|
+
}
|
|
7366
7421
|
deleteAsset(asset) {
|
|
7367
7422
|
console.log(asset);
|
|
7368
7423
|
}
|
|
@@ -7394,7 +7449,7 @@ class RequestDetailsSectionComponent {
|
|
|
7394
7449
|
this.pageSize = event.pageSize;
|
|
7395
7450
|
}
|
|
7396
7451
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, deps: [{ token: CoreI18nService }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7397
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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-search-employee class=\"section-item full\" [multiple]=\"true\" [arrayList]=\"formGroup.get('searchEmployee').value\" [isReadOnly]=\"isReadOnly\" formControlName=\"searchEmployee\" 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 class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"customSearchable\" label=\"Custom-searchable\" [options]=\"lov?.['approverActions']?.options\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-custom-searchable>\r\n <app-checkbox class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"checkbox\" termsLabel=\"Terms and conditions\" label=\"check-box\" [containTerms]=\"true\"></app-checkbox>\r\n <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n <app-datepicker class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"datePicker\" [matSuffix]=\"true\" label=\"Date-picker\"></app-datepicker>\r\n <app-date-range-picker class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"datePickerRange\" label=\"Date-picker-range\" [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 class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"toggle\" [options]=\"lov?.['approverActions']?.options\" label=\"Toggle-button\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-toggle-button>\r\n <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n <app-file-uploader class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [multiple]=\"false\" label=\"attachment\" formControlName=\"attachment\"></app-file-uploader>\r\n <app-attachment-section class=\"section-item full\" [descriptionRequired]=\"true\" label=\"Attachment section\" [commentsRequired]=\"true\" [isReadOnly]=\"isReadOnly\" formControlName=\"attachmentSection\"></app-attachment-section>\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\nclass=\"new-primary-table full\">\r\n</app-table
|
|
7452
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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-search-employee class=\"section-item full\" [multiple]=\"true\" [arrayList]=\"formGroup.get('searchEmployee').value\" [isReadOnly]=\"isReadOnly\" formControlName=\"searchEmployee\" 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 class=\"section-item mb-0 full\" [isReadOnly]=\"isReadOnly\" formControlName=\"customSearchable\" label=\"Custom-searchable\" [options]=\"lov?.['approverActions']?.options\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-custom-searchable>\r\n <app-checkbox class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"checkbox\" termsLabel=\"Terms and conditions\" label=\"check-box\" [containTerms]=\"true\"></app-checkbox>\r\n <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n <app-datepicker class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"datePicker\" [matSuffix]=\"true\" label=\"Date-picker\"></app-datepicker>\r\n <app-date-range-picker class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"datePickerRange\" label=\"Date-picker-range\" [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 class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"toggle\" [options]=\"lov?.['approverActions']?.options\" label=\"Toggle-button\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-toggle-button>\r\n <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n <app-file-uploader class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [multiple]=\"false\" label=\"attachment\" formControlName=\"attachment\"></app-file-uploader>\r\n <app-attachment-section class=\"section-item full\" [descriptionRequired]=\"true\" label=\"Attachment section\" [commentsRequired]=\"true\" [isReadOnly]=\"isReadOnly\" formControlName=\"attachmentSection\"></app-attachment-section>\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\nclass=\"new-primary-table full\">\r\n</app-table> -->\r\n\r\n\r\n\r\n</form>\r\n\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: InputComponent, selector: "app-input", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "emitedChangedValue1", "customErrorMessages"] }, { 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: CustomSearchableComponent, selector: "app-custom-searchable", inputs: ["options", "disabled", "displayedLabel", "key", "floatLabel", "className"], outputs: ["selectedValue", "isLengthGreaterThan4"] }, { kind: "component", type: CheckBoxComponent, selector: "app-checkbox", inputs: ["containTerms", "termsLabel", "linkText", "hrefLink", "link", "termsBody"], outputs: ["downloadCheckBox"] }, { kind: "component", type: TextareaComponent, selector: "app-textarea", inputs: ["className", "preventSpecailChar"] }, { kind: "component", type: InputCurrencyComponent, selector: "app-input-currency", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: DatePickerComponent, selector: "app-datepicker", inputs: ["className", "calendarType", "yearOnly", "error", "format"], outputs: ["dateValue"] }, { kind: "component", type: DateRangePickerComponent, selector: "app-date-range-picker", inputs: ["className", "yearOnly", "calendarType"] }, { kind: "component", type: InputEmailComponent, selector: "app-input-email", inputs: ["floatLabel", "className", "matPrefix", "iconPrefixName", "iconSuffixName", "numberSuffixName"] }, { kind: "component", type: InputNumberComponent, selector: "app-input-number", inputs: ["floatLabel", "className", "iconPrefixName", "iconSuffixName", "numberSuffixName", "allowedPattern"], outputs: ["emitedChangedValue"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["options"] }, { kind: "component", type: ToggleButtonComponent, selector: "app-toggle-button", inputs: ["className", "data", "error", "optionAr", "optionEn", "hasHint", "options", "displayedLabel", "key"], outputs: ["onChange"] }, { kind: "component", type: InputTelephoneComponent, selector: "app-input-telephone", inputs: ["floatLabel", "className"] }, { kind: "component", type: DocsUploaderComponent, selector: "app-file-uploader", inputs: ["useCrop", "formKey", "showLabel", "downloadLink", "showActions", "styleHeight", "fileInputHeight", "styleWidth", "hints", "allowedExtensions", "callApi", "display", "attachType", "error", "displayedFiles", "getDataFromTemplate", "allowFileContentsWithMultiAttachments", "accept", "signType", "showSignButton", "printType", "showPrintButton", "downloadType", "showDownloadButton", "preventFileContents", "maxSize"], outputs: ["selectedTemplateAttachment", "addSignatureClicked", "printActionClicked", "emitedValue", "downloadActionClicked"] }, { 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: "component", type: AttachmentSectionComponent, selector: "app-attachment-section", inputs: ["className", "attachmentsMax", "isSortable", "downloadAll", "isRequired", "descriptionRequired", "commentsRequired", "allowedExtensions"], outputs: ["emitedValue"] }] });
|
|
7398
7453
|
}
|
|
7399
7454
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
|
|
7400
7455
|
type: Component,
|
|
@@ -7419,7 +7474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
7419
7474
|
AttachmentSectionComponent,
|
|
7420
7475
|
TableComponent,
|
|
7421
7476
|
TranslatePipe
|
|
7422
|
-
], 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-search-employee class=\"section-item full\" [multiple]=\"true\" [arrayList]=\"formGroup.get('searchEmployee').value\" [isReadOnly]=\"isReadOnly\" formControlName=\"searchEmployee\" 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 class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"customSearchable\" label=\"Custom-searchable\" [options]=\"lov?.['approverActions']?.options\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-custom-searchable>\r\n <app-checkbox class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"checkbox\" termsLabel=\"Terms and conditions\" label=\"check-box\" [containTerms]=\"true\"></app-checkbox>\r\n <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n <app-datepicker class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"datePicker\" [matSuffix]=\"true\" label=\"Date-picker\"></app-datepicker>\r\n <app-date-range-picker class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"datePickerRange\" label=\"Date-picker-range\" [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 class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"toggle\" [options]=\"lov?.['approverActions']?.options\" label=\"Toggle-button\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-toggle-button>\r\n <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n <app-file-uploader class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [multiple]=\"false\" label=\"attachment\" formControlName=\"attachment\"></app-file-uploader>\r\n <app-attachment-section class=\"section-item full\" [descriptionRequired]=\"true\" label=\"Attachment section\" [commentsRequired]=\"true\" [isReadOnly]=\"isReadOnly\" formControlName=\"attachmentSection\"></app-attachment-section>\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\nclass=\"new-primary-table full\">\r\n</app-table
|
|
7477
|
+
], 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-search-employee class=\"section-item full\" [multiple]=\"true\" [arrayList]=\"formGroup.get('searchEmployee').value\" [isReadOnly]=\"isReadOnly\" formControlName=\"searchEmployee\" 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 class=\"section-item mb-0 full\" [isReadOnly]=\"isReadOnly\" formControlName=\"customSearchable\" label=\"Custom-searchable\" [options]=\"lov?.['approverActions']?.options\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-custom-searchable>\r\n <app-checkbox class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"checkbox\" termsLabel=\"Terms and conditions\" label=\"check-box\" [containTerms]=\"true\"></app-checkbox>\r\n <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n <app-datepicker class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"datePicker\" [matSuffix]=\"true\" label=\"Date-picker\"></app-datepicker>\r\n <app-date-range-picker class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"datePickerRange\" label=\"Date-picker-range\" [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 class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"toggle\" [options]=\"lov?.['approverActions']?.options\" label=\"Toggle-button\" [displayedLabel]=\"'name'\" [key]=\"'name'\"></app-toggle-button>\r\n <app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n <app-file-uploader class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [multiple]=\"false\" label=\"attachment\" formControlName=\"attachment\"></app-file-uploader>\r\n <app-attachment-section class=\"section-item full\" [descriptionRequired]=\"true\" label=\"Attachment section\" [commentsRequired]=\"true\" [isReadOnly]=\"isReadOnly\" formControlName=\"attachmentSection\"></app-attachment-section>\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\nclass=\"new-primary-table full\">\r\n</app-table> -->\r\n\r\n\r\n\r\n</form>\r\n\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"] }]
|
|
7423
7478
|
}], ctorParameters: () => [{ type: CoreI18nService }, { type: i4.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
|
|
7424
7479
|
type: Input
|
|
7425
7480
|
}], section: [{
|
|
@@ -7652,7 +7707,7 @@ class CoreAppComponent {
|
|
|
7652
7707
|
document.documentElement.setAttribute('dir', direction);
|
|
7653
7708
|
}
|
|
7654
7709
|
}
|
|
7655
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreAppComponent, deps: [{ token: SegmentDynamicLoaderService }, { token: DOCUMENT }, { token: i2$
|
|
7710
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CoreAppComponent, deps: [{ token: SegmentDynamicLoaderService }, { token: DOCUMENT }, { token: i2$4.Router }, { token: SidenavService }, { token: CoreI18nService }, { token: CoreService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
|
|
7656
7711
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: CoreAppComponent, isStandalone: true, selector: "lib-app", providers: [
|
|
7657
7712
|
{ provide: DynamicComponentInjectorToken, useValue: { /* your value here */} }
|
|
7658
7713
|
], 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=\"{{i18n.translate('pageErrorLoading')}}\"></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:
|
|
@@ -7673,7 +7728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
7673
7728
|
}], ctorParameters: () => [{ type: SegmentDynamicLoaderService }, { type: Document, decorators: [{
|
|
7674
7729
|
type: Inject,
|
|
7675
7730
|
args: [DOCUMENT]
|
|
7676
|
-
}] }, { type: i2$
|
|
7731
|
+
}] }, { type: i2$4.Router }, { type: SidenavService }, { type: CoreI18nService }, { type: CoreService }, { type: undefined, decorators: [{
|
|
7677
7732
|
type: Inject,
|
|
7678
7733
|
args: [PLATFORM_ID]
|
|
7679
7734
|
}] }] });
|