bpm-core 0.0.96 → 0.0.98
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/shared-components/form-field/attachment-section/attachment-section.component.mjs +7 -5
- package/esm2022/lib/components/shared-components/form-field/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/control-value-accessor.directive.mjs +5 -5
- 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 +3 -3
- package/esm2022/lib/components/shared-components/form-field/date-range-picker/date-range-picker.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/doc-uploader/docs-uploader.component.mjs +8 -9
- 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 +6 -5
- 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-number/input-number.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/input-telephone/input-telephone.component.mjs +3 -3
- 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 +3 -3
- 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/testComponent/request-details-section/request-details-section.component.mjs +3 -3
- package/fesm2022/bpm-core.mjs +47 -45
- package/fesm2022/bpm-core.mjs.map +1 -1
- package/lib/components/shared-components/form-field/attachment-section/attachment-section.component.d.ts +2 -1
- package/lib/components/shared-components/form-field/control-value-accessor.directive.d.ts +2 -2
- package/package.json +1 -1
package/fesm2022/bpm-core.mjs
CHANGED
|
@@ -1761,8 +1761,8 @@ class ControlValueAccessorDirective {
|
|
|
1761
1761
|
customMinDate;
|
|
1762
1762
|
value;
|
|
1763
1763
|
control;
|
|
1764
|
-
required;
|
|
1765
|
-
|
|
1764
|
+
required; //hide optional label and add required validator from angular side
|
|
1765
|
+
mandatory; //only hide optional label
|
|
1766
1766
|
maxLength;
|
|
1767
1767
|
isDisabled = false;
|
|
1768
1768
|
constructor(injector, i18n, toasterService, coreService, sanitizer, fb, actionStateService) {
|
|
@@ -1841,7 +1841,7 @@ class ControlValueAccessorDirective {
|
|
|
1841
1841
|
this.isDisabled = isDisabled;
|
|
1842
1842
|
}
|
|
1843
1843
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, deps: [{ token: i0.Injector }, { token: CoreI18nService }, { token: i2$1.ToastrService }, { token: CoreService }, { token: i3.DomSanitizer }, { token: i4.FormBuilder }, { token: ActionStateService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1844
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: ControlValueAccessorDirective, selector: "[appControlValueAccessor]", inputs: { tooltip: "tooltip", isReadOnly: "isReadOnly", hint: "hint", loading: "loading", placeholder: "placeholder", type: "type", showErrorMessage: "showErrorMessage", showHint: "showHint", showIfEmpty: "showIfEmpty", insideTable: "insideTable", mask: "mask", label: "label", matSuffix: "matSuffix", hasTooltip: "hasTooltip", name: "name", randomID: "randomID", multiple: "multiple", maxDate: "maxDate", minDate: "minDate", customMaxDate: "customMaxDate", customMinDate: "customMinDate", required: "required",
|
|
1844
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: ControlValueAccessorDirective, selector: "[appControlValueAccessor]", inputs: { tooltip: "tooltip", isReadOnly: "isReadOnly", hint: "hint", loading: "loading", placeholder: "placeholder", type: "type", showErrorMessage: "showErrorMessage", showHint: "showHint", showIfEmpty: "showIfEmpty", insideTable: "insideTable", mask: "mask", label: "label", matSuffix: "matSuffix", hasTooltip: "hasTooltip", name: "name", randomID: "randomID", multiple: "multiple", maxDate: "maxDate", minDate: "minDate", customMaxDate: "customMaxDate", customMinDate: "customMinDate", required: "required", mandatory: "mandatory" }, ngImport: i0 });
|
|
1845
1845
|
}
|
|
1846
1846
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ControlValueAccessorDirective, decorators: [{
|
|
1847
1847
|
type: Directive,
|
|
@@ -1892,7 +1892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
1892
1892
|
type: Input
|
|
1893
1893
|
}], required: [{
|
|
1894
1894
|
type: Input
|
|
1895
|
-
}],
|
|
1895
|
+
}], mandatory: [{
|
|
1896
1896
|
type: Input
|
|
1897
1897
|
}] } });
|
|
1898
1898
|
|
|
@@ -2260,7 +2260,7 @@ class CheckBoxComponent extends ControlValueAccessorDirective {
|
|
|
2260
2260
|
useExisting: forwardRef(() => CheckBoxComponent),
|
|
2261
2261
|
multi: true,
|
|
2262
2262
|
},
|
|
2263
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-checkbox\r\n [ngClass]=\"{'mx-3': isReadOnly}\"\r\n class=\"my-3\"\r\n [style.pointerEvents]=\"isReadOnly ? 'none' : 'auto'\"\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 pt-1\">\r\n @if(label){\r\n <app-form-label class=\"mb-0\" [label]=\"label\" [optional]=\"
|
|
2263
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-checkbox\r\n [ngClass]=\"{'mx-3': isReadOnly}\"\r\n class=\"my-3\"\r\n [style.pointerEvents]=\"isReadOnly ? 'none' : 'auto'\"\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 pt-1\">\r\n @if(label){\r\n <app-form-label class=\"mb-0\" [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\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>\r\n", 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}.mat-mdc-checkbox.mat-accent .mdc-form-field>label{margin:0}.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}.mat-mdc-checkbox label{cursor:pointer}\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" }] });
|
|
2264
2264
|
}
|
|
2265
2265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CheckBoxComponent, decorators: [{
|
|
2266
2266
|
type: Component,
|
|
@@ -2274,7 +2274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2274
2274
|
useExisting: forwardRef(() => CheckBoxComponent),
|
|
2275
2275
|
multi: true,
|
|
2276
2276
|
},
|
|
2277
|
-
], template: "<mat-checkbox\r\n [ngClass]=\"{'mx-3': isReadOnly}\"\r\n class=\"my-3\"\r\n [style.pointerEvents]=\"isReadOnly ? 'none' : 'auto'\"\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 pt-1\">\r\n @if(label){\r\n <app-form-label class=\"mb-0\" [label]=\"label\" [optional]=\"
|
|
2277
|
+
], template: "<mat-checkbox\r\n [ngClass]=\"{'mx-3': isReadOnly}\"\r\n class=\"my-3\"\r\n [style.pointerEvents]=\"isReadOnly ? 'none' : 'auto'\"\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 pt-1\">\r\n @if(label){\r\n <app-form-label class=\"mb-0\" [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\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>\r\n", 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}.mat-mdc-checkbox.mat-accent .mdc-form-field>label{margin:0}.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}.mat-mdc-checkbox label{cursor:pointer}\n"] }]
|
|
2278
2278
|
}], propDecorators: { containTerms: [{
|
|
2279
2279
|
type: Input
|
|
2280
2280
|
}], termsLabel: [{
|
|
@@ -2371,7 +2371,7 @@ class CustomSearchableComponent extends ControlValueAccessorDirective {
|
|
|
2371
2371
|
useExisting: forwardRef(() => CustomSearchableComponent),
|
|
2372
2372
|
multi: true,
|
|
2373
2373
|
},
|
|
2374
|
-
], 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]=\"
|
|
2374
|
+
], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(isReadOnly && control?.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [value]=\"control?.value.value\"\r\n ></app-info-item>\r\n</ng-container>\r\n} @if(!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': disabled || loading,\r\n 'custom-validation': !control.hasValidator(Validators['required'])\r\n }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n <span class=\"sfi sfi-search fc-coral fs-18\" matPrefix></span>\r\n <label class=\"mat-form-content\">\r\n <input\r\n #autocompleteInput\r\n type=\"text\"\r\n (keydown)=\"onKeyDown($event, autocompleteInput)\"\r\n [attr.disabled]=\"disabled\"\r\n [placeholder]=\"label\"\r\n aria-label=\"Number\"\r\n matInput\r\n (input)=\"onValueChange($event)\"\r\n [formControl]=\"searchControl\"\r\n [name]=\"name\"\r\n [matAutocomplete]=\"auto\"\r\n [value]=\"value?.key\"\r\n (focusout)=\"onFocusOut()\"\r\n />\r\n </label>\r\n\r\n @if(loading) {\r\n <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n } @if(!loading && searchControl?.value) {\r\n <span\r\n class=\"sfi sfi-close d-inline-block fc-coral cursor-pointer fs-12\"\r\n (click)=\"clearInput()\"\r\n matSuffix\r\n ></span>\r\n }\r\n\r\n <mat-autocomplete\r\n autoActiveFirstOption\r\n #auto=\"matAutocomplete\"\r\n [displayWith]=\"displayFn\"\r\n (optionSelected)=\"getAutoComplete($event.option.value)\">\r\n\r\n\r\n\r\n\r\n @if(!noData) {\r\n <ng-container>\r\n @for(option of filteredOptions; track option) {\r\n <mat-option [value]=\"option\">\r\n <div class=\"d-flex align-items-center\">\r\n @if(option['avatar_url']) {\r\n <figure class=\"img-card small circled-img p-0 m-0\">\r\n <img [src]=\"option['avatar_url']\" alt=\"\" />\r\n </figure>\r\n } @if(option['avatar_url']) {\r\n <span class=\"mx-2\"></span>\r\n }\r\n\r\n {{ option[displayedLabel] }}\r\n </div>\r\n </mat-option>\r\n }\r\n </ng-container>\r\n } @if(noData) {\r\n <ng-container>\r\n <mat-option [disabled]=\"true\" class=\"text-center\">No Data</mat-option>\r\n </ng-container>\r\n }\r\n </mat-autocomplete>\r\n\r\n <!-- <mat-error class=\"mb-2\" *ngIf=\"(!control?.valid)\">{{ 'validSelectError' | translate }}{{ label }}</mat-error> -->\r\n\r\n @if(showHint) {\r\n <mat-hint>\r\n <span\r\n class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n\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: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.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"] }] });
|
|
2375
2375
|
}
|
|
2376
2376
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: CustomSearchableComponent, decorators: [{
|
|
2377
2377
|
type: Component,
|
|
@@ -2388,7 +2388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2388
2388
|
useExisting: forwardRef(() => CustomSearchableComponent),
|
|
2389
2389
|
multi: true,
|
|
2390
2390
|
},
|
|
2391
|
-
], 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]=\"
|
|
2391
|
+
], template: "@if(isReadOnly && control?.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [value]=\"control?.value.value\"\r\n ></app-info-item>\r\n</ng-container>\r\n} @if(!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': disabled || loading,\r\n 'custom-validation': !control.hasValidator(Validators['required'])\r\n }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n <span class=\"sfi sfi-search fc-coral fs-18\" matPrefix></span>\r\n <label class=\"mat-form-content\">\r\n <input\r\n #autocompleteInput\r\n type=\"text\"\r\n (keydown)=\"onKeyDown($event, autocompleteInput)\"\r\n [attr.disabled]=\"disabled\"\r\n [placeholder]=\"label\"\r\n aria-label=\"Number\"\r\n matInput\r\n (input)=\"onValueChange($event)\"\r\n [formControl]=\"searchControl\"\r\n [name]=\"name\"\r\n [matAutocomplete]=\"auto\"\r\n [value]=\"value?.key\"\r\n (focusout)=\"onFocusOut()\"\r\n />\r\n </label>\r\n\r\n @if(loading) {\r\n <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n } @if(!loading && searchControl?.value) {\r\n <span\r\n class=\"sfi sfi-close d-inline-block fc-coral cursor-pointer fs-12\"\r\n (click)=\"clearInput()\"\r\n matSuffix\r\n ></span>\r\n }\r\n\r\n <mat-autocomplete\r\n autoActiveFirstOption\r\n #auto=\"matAutocomplete\"\r\n [displayWith]=\"displayFn\"\r\n (optionSelected)=\"getAutoComplete($event.option.value)\">\r\n\r\n\r\n\r\n\r\n @if(!noData) {\r\n <ng-container>\r\n @for(option of filteredOptions; track option) {\r\n <mat-option [value]=\"option\">\r\n <div class=\"d-flex align-items-center\">\r\n @if(option['avatar_url']) {\r\n <figure class=\"img-card small circled-img p-0 m-0\">\r\n <img [src]=\"option['avatar_url']\" alt=\"\" />\r\n </figure>\r\n } @if(option['avatar_url']) {\r\n <span class=\"mx-2\"></span>\r\n }\r\n\r\n {{ option[displayedLabel] }}\r\n </div>\r\n </mat-option>\r\n }\r\n </ng-container>\r\n } @if(noData) {\r\n <ng-container>\r\n <mat-option [disabled]=\"true\" class=\"text-center\">No Data</mat-option>\r\n </ng-container>\r\n }\r\n </mat-autocomplete>\r\n\r\n <!-- <mat-error class=\"mb-2\" *ngIf=\"(!control?.valid)\">{{ 'validSelectError' | translate }}{{ label }}</mat-error> -->\r\n\r\n @if(showHint) {\r\n <mat-hint>\r\n <span\r\n class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n\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"] }]
|
|
2392
2392
|
}], propDecorators: { options: [{
|
|
2393
2393
|
type: Input
|
|
2394
2394
|
}], selectedValue: [{
|
|
@@ -2522,7 +2522,7 @@ class DatePickerComponent extends ControlValueAccessorDirective {
|
|
|
2522
2522
|
provide: MAT_DATE_FORMATS,
|
|
2523
2523
|
useClass: CustomDateFormat,
|
|
2524
2524
|
},
|
|
2525
|
-
], 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]=\"
|
|
2525
|
+
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly) {\r\n <ng-container>\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n <div class=\"datePicker justify-content-between 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.value) {\r\n <ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n type=\"date\"\r\n [insideTable]=\"insideTable\"\r\n [dateType]=\"calendarType\"\r\n [label]=\"label\"\r\n [value]=\"control.value\"\r\n [hasLabel]=\"!!label\"\r\n >\r\n </app-info-item>\r\n </ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}::ng-deep .year-only .mat-calendar-period-button{pointer-events:none}::ng-deep .year-only .mat-calendar-arrow{display:none}\n"], dependencies: [{ kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: i1$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.MatNativeDateModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.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" }] });
|
|
2526
2526
|
}
|
|
2527
2527
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
2528
2528
|
type: Component,
|
|
@@ -2541,7 +2541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2541
2541
|
...MatDatePickerImports,
|
|
2542
2542
|
...MatFormImports,
|
|
2543
2543
|
...Shareds
|
|
2544
|
-
], template: "@if(!isReadOnly) {\r\n <ng-container>\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
2544
|
+
], template: "@if(!isReadOnly) {\r\n <ng-container>\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n <div class=\"datePicker justify-content-between 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.value) {\r\n <ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n type=\"date\"\r\n [insideTable]=\"insideTable\"\r\n [dateType]=\"calendarType\"\r\n [label]=\"label\"\r\n [value]=\"control.value\"\r\n [hasLabel]=\"!!label\"\r\n >\r\n </app-info-item>\r\n </ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}::ng-deep .year-only .mat-calendar-period-button{pointer-events:none}::ng-deep .year-only .mat-calendar-arrow{display:none}\n"] }]
|
|
2545
2545
|
}], propDecorators: { className: [{
|
|
2546
2546
|
type: Input
|
|
2547
2547
|
}], calendarType: [{
|
|
@@ -2696,7 +2696,7 @@ class DateRangePickerComponent extends ControlValueAccessorDirective {
|
|
|
2696
2696
|
provide: MAT_DATE_FORMATS,
|
|
2697
2697
|
useClass: CustomDateFormat,
|
|
2698
2698
|
},
|
|
2699
|
-
], 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]=\"
|
|
2699
|
+
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: MatDatepicker, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(!isReadOnly) {\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n<div class=\"datePicker\">\r\n <mat-form-field class=\"date-range primary-form {{ className }}\"\r\n [ngClass]=\"{\r\n 'custom-validation-error': !startDateControl.value && !endDateControl.value && startDateControl.touched\r\n }\">\r\n <label class=\"mat-form-content\">\r\n <mat-date-range-input\r\n [rangePicker]=\"picker\"\r\n [min]=\"minDateValue\"\r\n [max]=\"maxDateValue\"\r\n >\r\n <input\r\n matStartDate\r\n placeholder=\"{{ 'startDate' | translate }}\"\r\n [formControl]=\"startDateControl\"\r\n (dateInput)=\"startDateChange($event)\"\r\n (click)=\"focusPicker(picker)\"\r\n readonly\r\n />\r\n <input\r\n matEndDate\r\n placeholder=\"{{ 'endDate' | translate }}\"\r\n [formControl]=\"endDateControl\"\r\n (dateInput)=\"endDateChange($event)\"\r\n (click)=\"focusPicker(picker)\"\r\n readonly\r\n />\r\n </mat-date-range-input>\r\n </label>\r\n\r\n @if(control?.value) {\r\n <ds-icon\r\n matSuffix\r\n icon=\"close\"\r\n class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n (click)=\"clearDateValue($event)\"\r\n ></ds-icon>\r\n }\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n <i class=\"sfi sfi-calendar-o fc-black font-18\" matDatepickerToggleIcon></i>\r\n </mat-datepicker-toggle>\r\n\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n </mat-form-field>\r\n</div>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n} @else if(isReadOnly && control.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n type=\"date\"\r\n [insideTable]=\"insideTable\"\r\n [dateType]=\"calendarType\"\r\n [label]=\"label\"\r\n [value]=\"{\r\n startDate: control?.value?.startDate,\r\n endDate: control?.value?.endDate\r\n }\"\r\n [hasLabel]=\"!!label\"\r\n >\r\n </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: i1$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.MatNativeDateModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.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" }] });
|
|
2700
2700
|
}
|
|
2701
2701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DateRangePickerComponent, decorators: [{
|
|
2702
2702
|
type: Component,
|
|
@@ -2714,7 +2714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2714
2714
|
...MatDatePickerImports,
|
|
2715
2715
|
...MatFormImports,
|
|
2716
2716
|
...Shareds
|
|
2717
|
-
], template: "@if(!isReadOnly) {\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
2717
|
+
], template: "@if(!isReadOnly) {\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n<div class=\"datePicker\">\r\n <mat-form-field class=\"date-range primary-form {{ className }}\"\r\n [ngClass]=\"{\r\n 'custom-validation-error': !startDateControl.value && !endDateControl.value && startDateControl.touched\r\n }\">\r\n <label class=\"mat-form-content\">\r\n <mat-date-range-input\r\n [rangePicker]=\"picker\"\r\n [min]=\"minDateValue\"\r\n [max]=\"maxDateValue\"\r\n >\r\n <input\r\n matStartDate\r\n placeholder=\"{{ 'startDate' | translate }}\"\r\n [formControl]=\"startDateControl\"\r\n (dateInput)=\"startDateChange($event)\"\r\n (click)=\"focusPicker(picker)\"\r\n readonly\r\n />\r\n <input\r\n matEndDate\r\n placeholder=\"{{ 'endDate' | translate }}\"\r\n [formControl]=\"endDateControl\"\r\n (dateInput)=\"endDateChange($event)\"\r\n (click)=\"focusPicker(picker)\"\r\n readonly\r\n />\r\n </mat-date-range-input>\r\n </label>\r\n\r\n @if(control?.value) {\r\n <ds-icon\r\n matSuffix\r\n icon=\"close\"\r\n class=\"fc-coral fs-10 mx-2 cursor-pointer\"\r\n (click)=\"clearDateValue($event)\"\r\n ></ds-icon>\r\n }\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\" [disableRipple]=\"true\">\r\n <i class=\"sfi sfi-calendar-o fc-black font-18\" matDatepickerToggleIcon></i>\r\n </mat-datepicker-toggle>\r\n\r\n <mat-date-range-picker #picker></mat-date-range-picker>\r\n </mat-form-field>\r\n</div>\r\n<app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n\r\n\r\n} @else if(isReadOnly && control.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n type=\"date\"\r\n [insideTable]=\"insideTable\"\r\n [dateType]=\"calendarType\"\r\n [label]=\"label\"\r\n [value]=\"{\r\n startDate: control?.value?.startDate,\r\n endDate: control?.value?.endDate\r\n }\"\r\n [hasLabel]=\"!!label\"\r\n >\r\n </app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [":host{flex-grow:1}\n"] }]
|
|
2718
2718
|
}], propDecorators: { className: [{
|
|
2719
2719
|
type: Input
|
|
2720
2720
|
}], yearOnly: [{
|
|
@@ -2754,7 +2754,7 @@ class InputComponent extends ControlValueAccessorDirective {
|
|
|
2754
2754
|
useExisting: forwardRef(() => InputComponent),
|
|
2755
2755
|
multi: true,
|
|
2756
2756
|
},
|
|
2757
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"
|
|
2757
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n}\r\n<mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n>\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n @if(type === 'arOnly'){\r\n <input\r\n arOnly\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n } @else if(type === 'enOnly'){\r\n <input\r\n enOnly\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n }\r\n @else{\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n }\r\n </label>\r\n\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\" [customErrorMessages]=\"customErrorMessages\"></app-validation-errors>\r\n\r\n} @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n<ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"type\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n</ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: EnOnlyDirective, selector: "[enOnly]" }, { kind: "directive", type: ArOnlyDirective, selector: "[arOnly]" }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", 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: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.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"] }] });
|
|
2758
2758
|
}
|
|
2759
2759
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, decorators: [{
|
|
2760
2760
|
type: Component,
|
|
@@ -2769,7 +2769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2769
2769
|
useExisting: forwardRef(() => InputComponent),
|
|
2770
2770
|
multi: true,
|
|
2771
2771
|
},
|
|
2772
|
-
], template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"
|
|
2772
|
+
], template: "@if(!isReadOnly){\r\n@if(label){\r\n<app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n}\r\n<mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n>\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n @if(type === 'arOnly'){\r\n <input\r\n arOnly\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n } @else if(type === 'enOnly'){\r\n <input\r\n enOnly\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n }\r\n @else{\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n />\r\n }\r\n </label>\r\n\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n</mat-form-field>\r\n<app-validation-errors [errors]=\"control.errors\" [customErrorMessages]=\"customErrorMessages\"></app-validation-errors>\r\n\r\n} @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n<ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"type\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n</ng-container>\r\n}\r\n" }]
|
|
2773
2773
|
}], propDecorators: { floatLabel: [{
|
|
2774
2774
|
type: Input
|
|
2775
2775
|
}], className: [{
|
|
@@ -2879,7 +2879,7 @@ class InputNumberComponent extends ControlValueAccessorDirective {
|
|
|
2879
2879
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
2880
2880
|
multi: true,
|
|
2881
2881
|
},
|
|
2882
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
2882
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n @if(loading){<span\r\n class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n matSuffix\r\n ></span\r\n >}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n numberOnly\r\n />\r\n </label>\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"type\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n </ng-container>\r\n }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "directive", type: NumberDirective, selector: "[numberOnly]", inputs: ["decimals"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", 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: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.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"] }] });
|
|
2883
2883
|
}
|
|
2884
2884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
2885
2885
|
type: Component,
|
|
@@ -2893,7 +2893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2893
2893
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
2894
2894
|
multi: true,
|
|
2895
2895
|
},
|
|
2896
|
-
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
2896
|
+
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n @if(loading){<span\r\n class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n matSuffix\r\n ></span\r\n >}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n numberOnly\r\n />\r\n </label>\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"type\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n </ng-container>\r\n }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
|
|
2897
2897
|
}], propDecorators: { floatLabel: [{
|
|
2898
2898
|
type: Input
|
|
2899
2899
|
}], className: [{
|
|
@@ -2938,7 +2938,7 @@ class InputEmailComponent extends ControlValueAccessorDirective {
|
|
|
2938
2938
|
useExisting: forwardRef(() => InputEmailComponent),
|
|
2939
2939
|
multi: true,
|
|
2940
2940
|
},
|
|
2941
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
2941
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n @if(loading){<span\r\n class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n matSuffix\r\n ></span\r\n >}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n (change)=\"displayErrors($event)\"\r\n />\r\n </label>\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"type\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n </ng-container>\r\n }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"], dependencies: [{ kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", 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: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.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"] }] });
|
|
2942
2942
|
}
|
|
2943
2943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputEmailComponent, decorators: [{
|
|
2944
2944
|
type: Component,
|
|
@@ -2951,7 +2951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
2951
2951
|
useExisting: forwardRef(() => InputEmailComponent),
|
|
2952
2952
|
multi: true,
|
|
2953
2953
|
},
|
|
2954
|
-
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
2954
|
+
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n @if(loading){<span\r\n class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n matSuffix\r\n ></span\r\n >}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n (change)=\"displayErrors($event)\"\r\n />\r\n </label>\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"type\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n </ng-container>\r\n }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none;opacity:1.5}\n"] }]
|
|
2955
2955
|
}], propDecorators: { floatLabel: [{
|
|
2956
2956
|
type: Input
|
|
2957
2957
|
}], className: [{
|
|
@@ -3114,7 +3114,7 @@ class InputCurrencyComponent extends ControlValueAccessorDirective {
|
|
|
3114
3114
|
multi: true,
|
|
3115
3115
|
},
|
|
3116
3116
|
MycurrencyPipe
|
|
3117
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3117
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n @if(loading){<span\r\n class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n matSuffix\r\n ></span\r\n >}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n appMycurrency\r\n />\r\n </label>\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"'currency'\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n </ng-container>\r\n }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MycurrencyDirective, selector: "[appMycurrency]", inputs: ["decimals"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: ValidationErrorsComponent, selector: "app-validation-errors", 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: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.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"] }] });
|
|
3118
3118
|
}
|
|
3119
3119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputCurrencyComponent, decorators: [{
|
|
3120
3120
|
type: Component,
|
|
@@ -3123,7 +3123,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3123
3123
|
MatHint,
|
|
3124
3124
|
MycurrencyDirective,
|
|
3125
3125
|
...Shareds,
|
|
3126
|
-
...MatFormImports
|
|
3126
|
+
...MatFormImports,
|
|
3127
|
+
NgSwitchCase
|
|
3127
3128
|
], providers: [
|
|
3128
3129
|
{
|
|
3129
3130
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -3131,7 +3132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3131
3132
|
multi: true,
|
|
3132
3133
|
},
|
|
3133
3134
|
MycurrencyPipe
|
|
3134
|
-
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3135
|
+
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [ngClass]=\"{ 'input-disabled': control.disabled }\"\r\n [floatLabel]=\"floatLabel\"\r\n >\r\n @if(iconPrefixName){<span class=\"sfi {{ iconPrefixName }}\"></span>}\r\n @if(loading){<span\r\n class=\"sfi sfi-spinner d-inline-block spin fc-coral\"\r\n matSuffix\r\n ></span\r\n >}\r\n <label class=\"mat-form-content\">\r\n <!-- add input for ar && en custom directive with add type = arOnly || type = enOnly-->\r\n <input\r\n matInput\r\n [value]=\"value\"\r\n oninput=\"validity.valid || (value='');\"\r\n [formControl]=\"control\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n appMycurrency\r\n />\r\n </label>\r\n @if(iconSuffixName){<span matSuffix class=\"sfi {{ iconSuffixName }}\"></span>}\r\n @if(hint){\r\n <mat-hint class=\"d-flex align-items-center gap-1 mt-1\">\r\n <span\r\n class=\"sfi sfi-info fs-17 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"fs-12 fc-black line-height-1\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n <app-validation-errors [errors]=\"control.errors\"></app-validation-errors>\r\n } @if(isReadOnly && control.value && (showIfEmpty || control)){\r\n <ng-container class=\"info-section\">\r\n <app-info-item\r\n class=\"info-item w-100\"\r\n [label]=\"label\"\r\n [insideTable]=\"insideTable\"\r\n [hasLabel]=\"!!label\"\r\n [type]=\"'currency'\"\r\n [value]=\"control.value\"\r\n ></app-info-item>\r\n </ng-container>\r\n }\r\n", styles: [":host{flex-grow:1}.input-disabled{pointer-events:none!important;opacity:1.5}\n"] }]
|
|
3135
3136
|
}], propDecorators: { floatLabel: [{
|
|
3136
3137
|
type: Input
|
|
3137
3138
|
}], className: [{
|
|
@@ -3195,7 +3196,7 @@ class InputTelephoneComponent extends ControlValueAccessorDirective {
|
|
|
3195
3196
|
useExisting: forwardRef(() => InputTelephoneComponent),
|
|
3196
3197
|
multi: true,
|
|
3197
3198
|
},
|
|
3198
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3199
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <!-- <mat-form-field 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 && control.value){\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", 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"] }] });
|
|
3199
3200
|
}
|
|
3200
3201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputTelephoneComponent, decorators: [{
|
|
3201
3202
|
type: Component,
|
|
@@ -3210,7 +3211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3210
3211
|
useExisting: forwardRef(() => InputTelephoneComponent),
|
|
3211
3212
|
multi: true,
|
|
3212
3213
|
},
|
|
3213
|
-
], template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3214
|
+
], template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <!-- <mat-form-field 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 && control.value){\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", styles: ["[dir=rtl] :host .mat-input-element{direction:ltr;text-align:right}\n"] }]
|
|
3214
3215
|
}], propDecorators: { floatLabel: [{
|
|
3215
3216
|
type: Input
|
|
3216
3217
|
}], className: [{
|
|
@@ -3342,7 +3343,7 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
|
|
|
3342
3343
|
useExisting: forwardRef(() => SearchEmployeeComponent),
|
|
3343
3344
|
multi: true,
|
|
3344
3345
|
},
|
|
3345
|
-
], usesInheritance: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"!required\"\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 && control.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item\"\r\n type=\"user-picker\"\r\n [hasLabel]=\"!!label\"\r\n [multiple]=\"multiple\"\r\n [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n [label]=\"label\"\r\n [name]=\"control.value['personName']\"\r\n [value]=\"control.value['personEmail']\"\r\n [arrayList]=\"arrayList\"\r\n >\r\n </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"default-popover p-3\">\r\n <ol class=\"px-3 m-0\">\r\n <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n </ol>\r\n </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: 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" }] });
|
|
3346
|
+
], usesInheritance: true, ngImport: i0, template: "@if (!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [floatLabel]=\"floatLabel\"\r\n [ngClass]=\"{\r\n 'custom-validation': !control.errors\r\n }\"\r\n >\r\n <mat-label>{{ label }}</mat-label>\r\n <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n <label class=\"mat-form-content\">\r\n <input\r\n type=\"text\"\r\n aria-label=\"Number\"\r\n (input)=\"onLoadOptions($event)\"\r\n matInput\r\n [disabled]=\"isDisabled\"\r\n [matAutocomplete]=\"auto\"\r\n [formControl]=\"employeeSearchControl\"\r\n />\r\n </label>\r\n @if (loading) {\r\n <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n }\r\n <mat-autocomplete #auto=\"matAutocomplete\">\r\n @for (option of data; track option) {\r\n <mat-option\r\n [value]=\"option?.['personName']\"\r\n (onSelectionChange)=\"selectOption(option, $event)\"\r\n >\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div class=\"dropdown-img\">\r\n <ds-avatar\r\n [image]=\"getImage(option?.email)\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n slot=\"prefix\"\r\n class=\"avatar\"\r\n size=\"small\"\r\n >\r\n </ds-avatar>\r\n </div>\r\n <div class=\"line-height-1\">\r\n <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n {{ option?.name }}\r\n </h6>\r\n <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n option?.description\r\n }}</span>\r\n </div>\r\n </div>\r\n </mat-option>\r\n\r\n }\r\n </mat-autocomplete>\r\n @if (showHint) {\r\n <mat-hint>\r\n <span\r\n class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n\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 && control.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item\"\r\n type=\"user-picker\"\r\n [hasLabel]=\"!!label\"\r\n [multiple]=\"multiple\"\r\n [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n [label]=\"label\"\r\n [name]=\"control.value['personName']\"\r\n [value]=\"control.value['personEmail']\"\r\n [arrayList]=\"arrayList\"\r\n >\r\n </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"default-popover p-3\">\r\n <ol class=\"px-3 m-0\">\r\n <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n </ol>\r\n </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: SatPopoverModule }, { kind: "component", type: i1$2.SatPopoverComponent, selector: "sat-popover", inputs: ["anchor", "horizontalAlign", "xAlign", "verticalAlign", "yAlign", "forceAlignment", "lockAlignment", "autoFocus", "restoreFocus", "scrollStrategy", "hasBackdrop", "interactiveClose", "openTransition", "closeTransition", "openAnimationStartAtScale", "closeAnimationEndAtScale", "backdropClass", "panelClass"], outputs: ["opened", "closed", "afterOpen", "afterClose", "backdropClicked", "overlayKeydown"] }, { kind: "component", type: FormLabelComponent, selector: "app-form-label", inputs: ["tooltip", "label", "optional"] }, { kind: "component", type: 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" }] });
|
|
3346
3347
|
}
|
|
3347
3348
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SearchEmployeeComponent, decorators: [{
|
|
3348
3349
|
type: Component,
|
|
@@ -3360,7 +3361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3360
3361
|
useExisting: forwardRef(() => SearchEmployeeComponent),
|
|
3361
3362
|
multi: true,
|
|
3362
3363
|
},
|
|
3363
|
-
], template: "@if (!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"
|
|
3364
|
+
], template: "@if (!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"required || mandatory ? false : true\"\r\n [tooltip]=\"tooltip\"\r\n ></app-form-label>\r\n }\r\n <mat-form-field\r\n class=\"primary-form {{ className }}\"\r\n [floatLabel]=\"floatLabel\"\r\n [ngClass]=\"{\r\n 'custom-validation': !control.errors\r\n }\"\r\n >\r\n <mat-label>{{ label }}</mat-label>\r\n <ds-icon icon=\"search\" class=\"fc-coral fs-18\"></ds-icon>\r\n <label class=\"mat-form-content\">\r\n <input\r\n type=\"text\"\r\n aria-label=\"Number\"\r\n (input)=\"onLoadOptions($event)\"\r\n matInput\r\n [disabled]=\"isDisabled\"\r\n [matAutocomplete]=\"auto\"\r\n [formControl]=\"employeeSearchControl\"\r\n />\r\n </label>\r\n @if (loading) {\r\n <span class=\"sfi sfi-spinner d-inline-block spin fc-coral\" matSuffix></span>\r\n }\r\n <mat-autocomplete #auto=\"matAutocomplete\">\r\n @for (option of data; track option) {\r\n <mat-option\r\n [value]=\"option?.['personName']\"\r\n (onSelectionChange)=\"selectOption(option, $event)\"\r\n >\r\n <div class=\"d-flex align-items-center gap-3\">\r\n <div class=\"dropdown-img\">\r\n <ds-avatar\r\n [image]=\"getImage(option?.email)\"\r\n onerror=\"this.onerror=null;this.src='assets/images/user.svg';\"\r\n slot=\"prefix\"\r\n class=\"avatar\"\r\n size=\"small\"\r\n >\r\n </ds-avatar>\r\n </div>\r\n <div class=\"line-height-1\">\r\n <h6 class=\"fs-14 fw-medium fc-onyx mb-0 line-height-1\">\r\n {{ option?.name }}\r\n </h6>\r\n <span class=\"fs-13 fw-normal fc-dark-gray\">{{\r\n option?.description\r\n }}</span>\r\n </div>\r\n </div>\r\n </mat-option>\r\n\r\n }\r\n </mat-autocomplete>\r\n @if (showHint) {\r\n <mat-hint>\r\n <span\r\n class=\"sfi sfi-check-circle font-10 fc-dark-gray\"\r\n [ngClass]=\"{ 'fc-oasis-light-imp': value }\"\r\n ></span>\r\n <span class=\"mx-1\"></span>\r\n <span class=\"fs-12 fc-onyx\">{{ hint }}</span>\r\n </mat-hint>\r\n }\r\n </mat-form-field>\r\n\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 && control.value) {\r\n<ng-container>\r\n <app-info-item\r\n class=\"info-item\"\r\n type=\"user-picker\"\r\n [hasLabel]=\"!!label\"\r\n [multiple]=\"multiple\"\r\n [ngClass]=\"{ 'user-picker': !isReadOnly }\"\r\n [actionType]=\"!isReadOnly ? 'delete' : 'edit'\"\r\n [label]=\"label\"\r\n [name]=\"control.value['personName']\"\r\n [value]=\"control.value['personEmail']\"\r\n [arrayList]=\"arrayList\"\r\n >\r\n </app-info-item>\r\n</ng-container>\r\n}\r\n\r\n<sat-popover #searchEmpPopover [hasBackdrop]=\"true\" verticalAlign=\"below\">\r\n <div class=\"default-popover p-3\">\r\n <ol class=\"px-3 m-0\">\r\n <li>{{ \"searchEmployeeTooltip_1\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_2\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_3\" | translate }}</li>\r\n <li>{{ \"searchEmployeeTooltip_4\" | translate }}</li>\r\n </ol>\r\n </div>\r\n</sat-popover>\r\n", styles: [".small-input~.btn{height:41px}:host{flex-grow:1}.agenda-list.inside .mat-list-item{display:flex;align-items:center;padding:0 1rem;background-color:#fff;border:1px solid silver;height:88px!important}.agenda-list.inside .mat-list-item:before{position:relative;left:auto;right:auto}.agenda-list .mat-list-item{height:66px!important;background-color:#d3d3d3;margin-bottom:1.5rem;cursor:move}.agenda-list .mat-list-item:hover:before{opacity:1}.agenda-list .mat-list-item:before{content:\"\\e928\";font-family:stc-font-icons;left:-1.5rem;color:#a9a9a9;position:absolute;font-size:1.5rem;opacity:0;transition:all .3s linear}[dir=rtl] .agenda-list .mat-list-item:before{left:auto;right:-1.5rem}.agenda-list .mat-list-item:last-child{margin-bottom:0}.example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:0;overflow:hidden}.example-box{color:#000000de;display:flex;box-sizing:border-box;cursor:move;font-size:14px;position:relative;background-color:#f3f3f1;padding:18px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.example-box .user-info{display:flex;align-items:center}.example-box .user-info .drag-icon{position:absolute;left:18px;cursor:move}html[dir=rtl] .example-box .user-info .drag-icon{left:auto;right:18px}.example-box .user-info .prof-img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-inline-end:10px}.example-box .user-info label{font-size:13px;font-weight:500;color:#1d242d;flex-grow:1}.example-box .user-info label .title{display:block;color:#ff375e;font-size:9px}.example-box .user-info-reviewer{display:flex;gap:.5rem;width:calc(100% + 68px);padding:10px 15px;margin:10px 0 -18px -50px;background-color:#dde0e1}[dir=rtl] .example-box .user-info-reviewer{margin:10px -50px -18px 0}.example-box .user-info-reviewer .drag-icon{position:absolute;transform:translateY(-50%);cursor:move}.example-box .user-info-reviewer .reviewer-info{display:flex}.example-box .user-info-reviewer .reviewer-info .prof-img{width:20px;height:20px;border-radius:50%;border:1px solid #fff;margin:0 5px}.example-box .user-info-reviewer .reviewer-info label{font-size:11px;font-weight:500;color:#000;width:100px;margin-top:1px}.example-box .user-info-reviewer .reviewer-info label .title{display:block;color:#ff375e;font-size:11px}.example-box .user-info-reviewer span{color:#a54ee1;font-size:11px;padding:0;margin-bottom:0;display:block;text-align:start}.example-box .icon{width:30px;height:30px;background-color:#ff375e33;text-align:center;line-height:26px;cursor:pointer;flex-shrink:0}.cdk-drag-preview{box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;overflow:hidden}.cdk-drag-preview .icon{display:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.n-content{max-width:700px;width:100%}.n-results{width:100%;border:0;counter-reset:section}.n-results .n-col{position:relative;background-color:#f3f3f1;padding:10px;justify-content:space-between;align-items:flex-start;margin-top:10px;padding-inline-start:50px;border:0;flex-direction:column;width:100%}.n-results .n-col:last-child{margin-bottom:30px}.n-results .n-col:after,.n-results .n-col:before{display:none}@media (max-width: 991px){.example-box .user-info:before{margin-inline-end:10px;flex-shrink:0}}@media (max-width: 767px){.n-col{padding-inline-start:40px}.n-col .user-info-reviewer span{margin-bottom:0}}@media (max-width: 321px){.n-results .n-col{flex-wrap:wrap;justify-content:center}.n-results .n-col .user-info{justify-content:center}.n-results .n-col .user-info:before{position:absolute;top:15px;left:15px}.n-results .n-col .user-info .prof-img{margin:0 10px 10px}.n-results .n-col .user-info label{width:100%;text-align:center}.n-results .n-col .icon{width:100%}}::ng-deep .default-popover{max-width:320px;right:-2.5rem!important}[dir=rtl] ::ng-deep .default-popover{left:-2.5rem!important;right:auto}.dropdown-img{width:30px;height:30px;border-radius:50%;border:2px solid #fff}.dropdown-img .avatar--medium{--default-size: 30px}:host ::ng-deep .avatar{border:0 none!important}\n"] }]
|
|
3364
3365
|
}], propDecorators: { valueName: [{
|
|
3365
3366
|
type: Input
|
|
3366
3367
|
}], className: [{
|
|
@@ -3589,7 +3590,7 @@ class TextareaComponent extends ControlValueAccessorDirective {
|
|
|
3589
3590
|
useExisting: forwardRef(() => TextareaComponent),
|
|
3590
3591
|
multi: true,
|
|
3591
3592
|
},
|
|
3592
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3593
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field class=\"custom-textarea bordered-input {{className}}\">\r\n <mat-label>{{ label }}</mat-label>\r\n <label class=\"mat-form-content\">\r\n @if (type === 'arOnly'){\r\n <textarea [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 && control.value && (showIfEmpty || control)){\r\n <ng-container>\r\n <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n </ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.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]" }] });
|
|
3593
3594
|
}
|
|
3594
3595
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
3595
3596
|
type: Component,
|
|
@@ -3603,7 +3604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3603
3604
|
useExisting: forwardRef(() => TextareaComponent),
|
|
3604
3605
|
multi: true,
|
|
3605
3606
|
},
|
|
3606
|
-
], template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3607
|
+
], template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-form-field class=\"custom-textarea bordered-input {{className}}\">\r\n <mat-label>{{ label }}</mat-label>\r\n <label class=\"mat-form-content\">\r\n @if (type === 'arOnly'){\r\n <textarea [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 && control.value && (showIfEmpty || control)){\r\n <ng-container>\r\n <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [label]=\"label\" [value]=\"control?.value\" [type]=\"type\"></app-info-item>\r\n </ng-container>\r\n}\r\n" }]
|
|
3607
3608
|
}], propDecorators: { className: [{
|
|
3608
3609
|
type: Input
|
|
3609
3610
|
}], preventSpecailChar: [{
|
|
@@ -3687,7 +3688,7 @@ class ToggleButtonComponent extends ControlValueAccessorDirective {
|
|
|
3687
3688
|
useExisting: forwardRef(() => ToggleButtonComponent),
|
|
3688
3689
|
multi: true,
|
|
3689
3690
|
},
|
|
3690
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3691
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n @if(options){\r\n <mat-button-toggle-group class=\"Toggle__buttons d-flex align-items-center gap-3\" [value]=\"toggleButtonControl.value\" [formControl]=\"toggleButtonControl\"\r\n aria-label=\"Font Style\" [multiple]=\"multiple\">\r\n @for(item of options; track item){\r\n <mat-button-toggle (click)=\"setToggelButtonValue(hasHint, hintSection, item)\" [value]=\"item[key]\" [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 && toggleButtonControl.value){\r\n <ng-container>\r\n <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [type]=\"'toggleBtn'\" [label]=\"label\" [value]=\"control.value?.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"] }] });
|
|
3691
3692
|
}
|
|
3692
3693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ToggleButtonComponent, decorators: [{
|
|
3693
3694
|
type: Component,
|
|
@@ -3702,7 +3703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3702
3703
|
useExisting: forwardRef(() => ToggleButtonComponent),
|
|
3703
3704
|
multi: true,
|
|
3704
3705
|
},
|
|
3705
|
-
], standalone: true, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3706
|
+
], standalone: true, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n\r\n @if(options){\r\n <mat-button-toggle-group class=\"Toggle__buttons d-flex align-items-center gap-3\" [value]=\"toggleButtonControl.value\" [formControl]=\"toggleButtonControl\"\r\n aria-label=\"Font Style\" [multiple]=\"multiple\">\r\n @for(item of options; track item){\r\n <mat-button-toggle (click)=\"setToggelButtonValue(hasHint, hintSection, item)\" [value]=\"item[key]\" [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 && toggleButtonControl.value){\r\n <ng-container>\r\n <app-info-item class=\"info-item w-100\" [insideTable]=\"insideTable\" [type]=\"'toggleBtn'\" [label]=\"label\" [value]=\"control.value?.value\"></app-info-item>\r\n </ng-container>\r\n\r\n}\r\n" }]
|
|
3706
3707
|
}], propDecorators: { className: [{
|
|
3707
3708
|
type: Input
|
|
3708
3709
|
}], data: [{
|
|
@@ -3970,12 +3971,11 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
|
|
|
3970
3971
|
.subscribe(res => {
|
|
3971
3972
|
if (!this.isReadOnly && this.control.enabled) {
|
|
3972
3973
|
this.control.reset();
|
|
3973
|
-
if (this.required) {
|
|
3974
|
-
|
|
3975
|
-
}
|
|
3976
|
-
|
|
3977
|
-
|
|
3978
|
-
}
|
|
3974
|
+
// if (this.required) {
|
|
3975
|
+
// this.control.setValidators(this.Validators.required)
|
|
3976
|
+
// } else {
|
|
3977
|
+
// this.control.setValidators(null)
|
|
3978
|
+
// }
|
|
3979
3979
|
}
|
|
3980
3980
|
});
|
|
3981
3981
|
}
|
|
@@ -4263,7 +4263,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
|
|
|
4263
4263
|
useExisting: forwardRef(() => DocsUploaderComponent),
|
|
4264
4264
|
multi: true,
|
|
4265
4265
|
},
|
|
4266
|
-
], 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 (click)=\"fileAttached.click()\"\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 >\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" }] });
|
|
4266
|
+
], 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 || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <section\r\n (click)=\"fileAttached.click()\"\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 >\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" }] });
|
|
4267
4267
|
}
|
|
4268
4268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DocsUploaderComponent, decorators: [{
|
|
4269
4269
|
type: Component,
|
|
@@ -4281,7 +4281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
4281
4281
|
useExisting: forwardRef(() => DocsUploaderComponent),
|
|
4282
4282
|
multi: true,
|
|
4283
4283
|
},
|
|
4284
|
-
], 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 (click)=\"fileAttached.click()\"\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 >\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"] }]
|
|
4284
|
+
], template: "@if (!isReadOnly) {\r\n <ng-container>\r\n @if(label) {\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <section\r\n (click)=\"fileAttached.click()\"\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 >\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"] }]
|
|
4285
4285
|
}], propDecorators: { useCrop: [{
|
|
4286
4286
|
type: Input
|
|
4287
4287
|
}], formKey: [{
|
|
@@ -4488,7 +4488,7 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
|
|
|
4488
4488
|
isSortable = false;
|
|
4489
4489
|
downloadAll = false;
|
|
4490
4490
|
popupData = {};
|
|
4491
|
-
|
|
4491
|
+
isRequired = false;
|
|
4492
4492
|
descriptionRequired;
|
|
4493
4493
|
commentsRequired;
|
|
4494
4494
|
allowedExtensions = '';
|
|
@@ -4630,13 +4630,13 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
|
|
|
4630
4630
|
this.downloadActionClicked.emit(event);
|
|
4631
4631
|
}
|
|
4632
4632
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4633
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: AttachmentSectionComponent, isStandalone: true, selector: "app-attachment-section", inputs: { className: "className", customDownload: "customDownload", attachmentsMax: "attachmentsMax", isSortable: "isSortable", downloadAll: "downloadAll", descriptionRequired: "descriptionRequired", commentsRequired: "commentsRequired", allowedExtensions: "allowedExtensions" }, outputs: { downloadActionClicked: "downloadActionClicked", emitedValue: "emitedValue" }, providers: [
|
|
4633
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: AttachmentSectionComponent, isStandalone: true, selector: "app-attachment-section", inputs: { className: "className", customDownload: "customDownload", attachmentsMax: "attachmentsMax", isSortable: "isSortable", downloadAll: "downloadAll", isRequired: "isRequired", descriptionRequired: "descriptionRequired", commentsRequired: "commentsRequired", allowedExtensions: "allowedExtensions" }, outputs: { downloadActionClicked: "downloadActionClicked", emitedValue: "emitedValue" }, providers: [
|
|
4634
4634
|
{
|
|
4635
4635
|
provide: NG_VALUE_ACCESSOR,
|
|
4636
4636
|
useExisting: forwardRef(() => AttachmentSectionComponent),
|
|
4637
4637
|
multi: true,
|
|
4638
4638
|
},
|
|
4639
|
-
], 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 && !isReadOnly\" [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()\">\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 [customDownload]=\"customDownload\"\r\n (downloadActionClicked)=\"customDownloadAction($event)\"\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", "allAttachments", "signType", "customDownload", "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" }] });
|
|
4639
|
+
], 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 || mandatory ? false : true) && !isReadOnly\" [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()\">\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 [customDownload]=\"customDownload\"\r\n (downloadActionClicked)=\"customDownloadAction($event)\"\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", "allAttachments", "signType", "customDownload", "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" }] });
|
|
4640
4640
|
}
|
|
4641
4641
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionComponent, decorators: [{
|
|
4642
4642
|
type: Component,
|
|
@@ -4667,7 +4667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
4667
4667
|
MatRowDef,
|
|
4668
4668
|
FormLabelComponent,
|
|
4669
4669
|
TranslatePipe
|
|
4670
|
-
], standalone: true, template: "<div class=\"mt-2 p-0\">\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"!required && !isReadOnly\" [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()\">\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 [customDownload]=\"customDownload\"\r\n (downloadActionClicked)=\"customDownloadAction($event)\"\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"] }]
|
|
4670
|
+
], standalone: true, template: "<div class=\"mt-2 p-0\">\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"(required || mandatory ? false : true) && !isReadOnly\" [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()\">\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 [customDownload]=\"customDownload\"\r\n (downloadActionClicked)=\"customDownloadAction($event)\"\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"] }]
|
|
4671
4671
|
}], propDecorators: { className: [{
|
|
4672
4672
|
type: Input
|
|
4673
4673
|
}], downloadActionClicked: [{
|
|
@@ -4680,6 +4680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
4680
4680
|
type: Input
|
|
4681
4681
|
}], downloadAll: [{
|
|
4682
4682
|
type: Input
|
|
4683
|
+
}], isRequired: [{
|
|
4684
|
+
type: Input
|
|
4683
4685
|
}], descriptionRequired: [{
|
|
4684
4686
|
type: Input
|
|
4685
4687
|
}], commentsRequired: [{
|
|
@@ -4713,7 +4715,7 @@ class RadioComponent extends ControlValueAccessorDirective {
|
|
|
4713
4715
|
useExisting: forwardRef(() => RadioComponent),
|
|
4714
4716
|
multi: true,
|
|
4715
4717
|
},
|
|
4716
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
4718
|
+
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-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 if(isReadOnly && control.value) {\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"] }] });
|
|
4717
4719
|
}
|
|
4718
4720
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RadioComponent, decorators: [{
|
|
4719
4721
|
type: Component,
|
|
@@ -4729,7 +4731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
4729
4731
|
useExisting: forwardRef(() => RadioComponent),
|
|
4730
4732
|
multi: true,
|
|
4731
4733
|
},
|
|
4732
|
-
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
4734
|
+
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"required || mandatory ? false : true\" [tooltip]=\"tooltip\"></app-form-label>\r\n }\r\n <mat-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 if(isReadOnly && control.value) {\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"] }]
|
|
4733
4735
|
}], propDecorators: { options: [{
|
|
4734
4736
|
type: Input
|
|
4735
4737
|
}] } });
|
|
@@ -7633,7 +7635,7 @@ class RequestDetailsSectionComponent {
|
|
|
7633
7635
|
this.pageSize = event.pageSize;
|
|
7634
7636
|
}
|
|
7635
7637
|
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 });
|
|
7636
|
-
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 {{formGroup.valid}}\r\n <app-input class=\"section-item full\" [isReadOnly]=\"false\" [
|
|
7638
|
+
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 {{formGroup.valid}}\r\n <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n<!-- <app-checkbox\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"checkbox\"\r\n termsLabel=\"Terms and conditions\"\r\n label=\"check-box\"\r\n [containTerms]=\"true\"></app-checkbox>-->\r\n <!--\r\n <app-search-employee\r\n class=\"section-item full\"\r\n [multiple]=\"true\"\r\n [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"searchEmployee\"\r\n label=\"Search-employee\"></app-search-employee>\r\n <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n <app-custom-searchable\r\n class=\"section-item mb-0 full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"customSearchable\"\r\n label=\"Custom-searchable\"\r\n [options]=\"lov?.['approverActions']?.options\"\r\n [displayedLabel]=\"'name'\"\r\n [key]=\"'name'\"></app-custom-searchable>\r\n <app-checkbox\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"checkbox\"\r\n termsLabel=\"Terms and conditions\"\r\n label=\"check-box\"\r\n [containTerms]=\"true\"></app-checkbox>\r\n <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n\r\n <app-date-range-picker\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"datePickerRange\"\r\n label=\"Date-picker-range\"\r\n [matSuffix]=\"true\"></app-date-range-picker>\r\n <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>-->\r\n <!-- <app-toggle-button\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"toggle\"\r\n [options]=\"lov?.['decision']?.options\"\r\n label=\"Toggle-button\"\r\n [displayedLabel]=\"'description'\"\r\n [key]=\"'value'\"></app-toggle-button>-->\r\n <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\r\n <app-file-uploader\r\n class=\"section-item full\"\r\n [callApi]=\"true\"\r\n [isReadOnly]=\"isReadOnly\"\r\n [multiple]=\"false\"\r\n label=\"attachment\"\r\n formControlName=\"attachment\"></app-file-uploader>\r\n\r\n <app-attachment-section\r\n class=\"section-item full\"\r\n [descriptionRequired]=\"false\"\r\n label=\"Attachment section\"\r\n [commentsRequired]=\"false\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"attachmentSection\"></app-attachment-section>\r\n-->\r\n\r\n\r\n\r\n <!-- <app-table\r\n [columnsConfig]=\"columnsConfig\"\r\n [columns]=\"columns\"\r\n [isError]=\"isError\"\r\n [isLoading]=\"isLoading\"\r\n [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n [totalElements]=\"totalElements\"\r\n (pageChange)=\"pageChanged($event)\"\r\n class=\"new-primary-table full\">\r\n </app-table> -->\r\n\r\n<!-- <app-datepicker\r\n class=\"section-item full\"\r\n [isReadOnly]=\"false\"\r\n formControlName=\"datePicker\"\r\n [matSuffix]=\"true\"\r\n label=\"Date-picker\"></app-datepicker>-->\r\n\r\n\r\n </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n <div class=\"mt-4\">\r\n <lib-action-buttons\r\n [lovOptions]=\"lov?.['decision']?.options\"\r\n [lovType]=\"lov?.['decision']?.type\"\r\n [section]=\"section\"\r\n [form]=\"form\"\r\n [sections]=\"form.sections\"\r\n [showApprovalCycle]=\"true\"\r\n [customCall]=\"false\"\r\n [fieldsForm]=\"formGroup\"\r\n (customCallEmit)=\"customCallSubmit($event)\"\r\n (resetFormEmit)=\"resetForm()\"\r\n />\r\n </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: 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"] }] });
|
|
7637
7639
|
}
|
|
7638
7640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
|
|
7639
7641
|
type: Component,
|
|
@@ -7658,7 +7660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
7658
7660
|
AttachmentSectionComponent,
|
|
7659
7661
|
TableComponent,
|
|
7660
7662
|
TranslatePipe
|
|
7661
|
-
], 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 {{formGroup.valid}}\r\n <app-input class=\"section-item full\" [isReadOnly]=\"false\" [
|
|
7663
|
+
], 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 {{formGroup.valid}}\r\n <app-input class=\"section-item full\" [isReadOnly]=\"false\" [mandatory]=\"true\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n<!-- <app-checkbox\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"checkbox\"\r\n termsLabel=\"Terms and conditions\"\r\n label=\"check-box\"\r\n [containTerms]=\"true\"></app-checkbox>-->\r\n <!--\r\n <app-search-employee\r\n class=\"section-item full\"\r\n [multiple]=\"true\"\r\n [arrayList]=\"formGroup.get('searchEmployee').value\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"searchEmployee\"\r\n label=\"Search-employee\"></app-search-employee>\r\n <app-input class=\"section-item full\" [isReadOnly]=\"isReadOnly\" [loading]=\"true\" type=\"enOnly\" formControlName=\"input\" label=\"Input\"></app-input>\r\n <app-input-currency class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"currencyInput\" label=\"currency\"></app-input-currency>\r\n <app-input-email class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"emailInput\" label=\"email\"></app-input-email>\r\n <app-input-number class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"numberInput\" label=\"number\"></app-input-number>\r\n <app-custom-searchable\r\n class=\"section-item mb-0 full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"customSearchable\"\r\n label=\"Custom-searchable\"\r\n [options]=\"lov?.['approverActions']?.options\"\r\n [displayedLabel]=\"'name'\"\r\n [key]=\"'name'\"></app-custom-searchable>\r\n <app-checkbox\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"checkbox\"\r\n termsLabel=\"Terms and conditions\"\r\n label=\"check-box\"\r\n [containTerms]=\"true\"></app-checkbox>\r\n <app-textarea class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"textArea\" label=\"Text-area\"></app-textarea>\r\n\r\n <app-date-range-picker\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"datePickerRange\"\r\n label=\"Date-picker-range\"\r\n [matSuffix]=\"true\"></app-date-range-picker>\r\n <app-radio class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"radio\" [options]=\"options\" label=\"Radio\"></app-radio>-->\r\n <!-- <app-toggle-button\r\n class=\"section-item full\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"toggle\"\r\n [options]=\"lov?.['decision']?.options\"\r\n label=\"Toggle-button\"\r\n [displayedLabel]=\"'description'\"\r\n [key]=\"'value'\"></app-toggle-button>-->\r\n <!--<app-input-telephone class=\"section-item full\" [isReadOnly]=\"isReadOnly\" formControlName=\"telephone\" label=\"Telephone\"></app-input-telephone>\r\n\r\n <app-file-uploader\r\n class=\"section-item full\"\r\n [callApi]=\"true\"\r\n [isReadOnly]=\"isReadOnly\"\r\n [multiple]=\"false\"\r\n label=\"attachment\"\r\n formControlName=\"attachment\"></app-file-uploader>\r\n\r\n <app-attachment-section\r\n class=\"section-item full\"\r\n [descriptionRequired]=\"false\"\r\n label=\"Attachment section\"\r\n [commentsRequired]=\"false\"\r\n [isReadOnly]=\"isReadOnly\"\r\n formControlName=\"attachmentSection\"></app-attachment-section>\r\n-->\r\n\r\n\r\n\r\n <!-- <app-table\r\n [columnsConfig]=\"columnsConfig\"\r\n [columns]=\"columns\"\r\n [isError]=\"isError\"\r\n [isLoading]=\"isLoading\"\r\n [rows]=\"categoryData\" [hasPaginator]=\"true\"\r\n [pageSize]=\"pageSize\" [currentPage]=\"pageNumber\"\r\n [totalElements]=\"totalElements\"\r\n (pageChange)=\"pageChanged($event)\"\r\n class=\"new-primary-table full\">\r\n </app-table> -->\r\n\r\n<!-- <app-datepicker\r\n class=\"section-item full\"\r\n [isReadOnly]=\"false\"\r\n formControlName=\"datePicker\"\r\n [matSuffix]=\"true\"\r\n label=\"Date-picker\"></app-datepicker>-->\r\n\r\n\r\n </form>\r\n\r\n\r\n</div>\r\n@if (!section?.header?.readOnly) {\r\n <div class=\"mt-4\">\r\n <lib-action-buttons\r\n [lovOptions]=\"lov?.['decision']?.options\"\r\n [lovType]=\"lov?.['decision']?.type\"\r\n [section]=\"section\"\r\n [form]=\"form\"\r\n [sections]=\"form.sections\"\r\n [showApprovalCycle]=\"true\"\r\n [customCall]=\"false\"\r\n [fieldsForm]=\"formGroup\"\r\n (customCallEmit)=\"customCallSubmit($event)\"\r\n (resetFormEmit)=\"resetForm()\"\r\n />\r\n </div>\r\n}\r\n", styles: [".form-section-divide{--form-section-columns: 1fr 1fr}@media (max-width: 756px){.form-section-divide{--form-section-columns: 100%}}.form-section-divide .full{grid-column:1/-1}.head-title{position:relative;margin-bottom:12px}.head-title h3{display:inline-block;color:#8e9aa0;font-size:14px;font-weight:500;background-color:#fff;padding-inline-end:20px;position:relative;z-index:2;margin:0}.head-title:after{content:\"\";position:absolute;width:100%;height:1px;background-color:#dee0e2;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1}.chamber{margin-bottom:20px}.chamber .chamber-content{background-color:#f8f8f8;padding:20px}.chamber .chamber-content .chamber-select{display:flex}.chamber .chamber-content mat-checkbox{font-size:14px}.section-item{margin-bottom:20px}\n"] }]
|
|
7662
7664
|
}], ctorParameters: () => [{ type: CoreI18nService }, { type: i4.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
|
|
7663
7665
|
type: Input
|
|
7664
7666
|
}], section: [{
|