bpm-core 0.0.97 → 0.0.99
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 +3 -3
- package/esm2022/lib/components/shared-components/form-field/input-email/input-email.component.mjs +3 -3
- package/esm2022/lib/components/shared-components/form-field/input-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/directives/currency.directive.mjs +4 -2
- package/esm2022/lib/testComponent/request-details-section/request-details-section.component.mjs +3 -3
- package/fesm2022/bpm-core.mjs +48 -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/lib/components/shared-components/form-field/shared-imports.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: [{
|
|
@@ -3029,7 +3029,9 @@ class MycurrencyDirective {
|
|
|
3029
3029
|
this.el = this.elementRef.nativeElement;
|
|
3030
3030
|
}
|
|
3031
3031
|
ngOnInit() {
|
|
3032
|
-
|
|
3032
|
+
setTimeout(() => {
|
|
3033
|
+
this.el.value = this.formatcurrencypipe.transform(this.el.value);
|
|
3034
|
+
});
|
|
3033
3035
|
}
|
|
3034
3036
|
onFocus(value, event) {
|
|
3035
3037
|
this.el.value = this.formatcurrencypipe.parse(value); // opossite of transform
|
|
@@ -3114,7 +3116,7 @@ class InputCurrencyComponent extends ControlValueAccessorDirective {
|
|
|
3114
3116
|
multi: true,
|
|
3115
3117
|
},
|
|
3116
3118
|
MycurrencyPipe
|
|
3117
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3119
|
+
], 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
3120
|
}
|
|
3119
3121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputCurrencyComponent, decorators: [{
|
|
3120
3122
|
type: Component,
|
|
@@ -3132,7 +3134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3132
3134
|
multi: true,
|
|
3133
3135
|
},
|
|
3134
3136
|
MycurrencyPipe
|
|
3135
|
-
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3137
|
+
], 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"] }]
|
|
3136
3138
|
}], propDecorators: { floatLabel: [{
|
|
3137
3139
|
type: Input
|
|
3138
3140
|
}], className: [{
|
|
@@ -3196,7 +3198,7 @@ class InputTelephoneComponent extends ControlValueAccessorDirective {
|
|
|
3196
3198
|
useExisting: forwardRef(() => InputTelephoneComponent),
|
|
3197
3199
|
multi: true,
|
|
3198
3200
|
},
|
|
3199
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3201
|
+
], 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"] }] });
|
|
3200
3202
|
}
|
|
3201
3203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputTelephoneComponent, decorators: [{
|
|
3202
3204
|
type: Component,
|
|
@@ -3211,7 +3213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3211
3213
|
useExisting: forwardRef(() => InputTelephoneComponent),
|
|
3212
3214
|
multi: true,
|
|
3213
3215
|
},
|
|
3214
|
-
], template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3216
|
+
], 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"] }]
|
|
3215
3217
|
}], propDecorators: { floatLabel: [{
|
|
3216
3218
|
type: Input
|
|
3217
3219
|
}], className: [{
|
|
@@ -3343,7 +3345,7 @@ class SearchEmployeeComponent extends ControlValueAccessorDirective {
|
|
|
3343
3345
|
useExisting: forwardRef(() => SearchEmployeeComponent),
|
|
3344
3346
|
multi: true,
|
|
3345
3347
|
},
|
|
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\"\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" }] });
|
|
3348
|
+
], 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" }] });
|
|
3347
3349
|
}
|
|
3348
3350
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SearchEmployeeComponent, decorators: [{
|
|
3349
3351
|
type: Component,
|
|
@@ -3361,7 +3363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3361
3363
|
useExisting: forwardRef(() => SearchEmployeeComponent),
|
|
3362
3364
|
multi: true,
|
|
3363
3365
|
},
|
|
3364
|
-
], template: "@if (!isReadOnly) {\r\n<ng-container>\r\n @if(label) {\r\n <app-form-label\r\n [label]=\"label\"\r\n [optional]=\"
|
|
3366
|
+
], 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"] }]
|
|
3365
3367
|
}], propDecorators: { valueName: [{
|
|
3366
3368
|
type: Input
|
|
3367
3369
|
}], className: [{
|
|
@@ -3590,7 +3592,7 @@ class TextareaComponent extends ControlValueAccessorDirective {
|
|
|
3590
3592
|
useExisting: forwardRef(() => TextareaComponent),
|
|
3591
3593
|
multi: true,
|
|
3592
3594
|
},
|
|
3593
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3595
|
+
], 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]" }] });
|
|
3594
3596
|
}
|
|
3595
3597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
3596
3598
|
type: Component,
|
|
@@ -3604,7 +3606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3604
3606
|
useExisting: forwardRef(() => TextareaComponent),
|
|
3605
3607
|
multi: true,
|
|
3606
3608
|
},
|
|
3607
|
-
], template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3609
|
+
], 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" }]
|
|
3608
3610
|
}], propDecorators: { className: [{
|
|
3609
3611
|
type: Input
|
|
3610
3612
|
}], preventSpecailChar: [{
|
|
@@ -3688,7 +3690,7 @@ class ToggleButtonComponent extends ControlValueAccessorDirective {
|
|
|
3688
3690
|
useExisting: forwardRef(() => ToggleButtonComponent),
|
|
3689
3691
|
multi: true,
|
|
3690
3692
|
},
|
|
3691
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3693
|
+
], 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"] }] });
|
|
3692
3694
|
}
|
|
3693
3695
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: ToggleButtonComponent, decorators: [{
|
|
3694
3696
|
type: Component,
|
|
@@ -3703,7 +3705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
3703
3705
|
useExisting: forwardRef(() => ToggleButtonComponent),
|
|
3704
3706
|
multi: true,
|
|
3705
3707
|
},
|
|
3706
|
-
], standalone: true, template: "@if(!isReadOnly){\r\n <ng-container>\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
3708
|
+
], 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" }]
|
|
3707
3709
|
}], propDecorators: { className: [{
|
|
3708
3710
|
type: Input
|
|
3709
3711
|
}], data: [{
|
|
@@ -3971,12 +3973,11 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
|
|
|
3971
3973
|
.subscribe(res => {
|
|
3972
3974
|
if (!this.isReadOnly && this.control.enabled) {
|
|
3973
3975
|
this.control.reset();
|
|
3974
|
-
if (this.required) {
|
|
3975
|
-
|
|
3976
|
-
}
|
|
3977
|
-
|
|
3978
|
-
|
|
3979
|
-
}
|
|
3976
|
+
// if (this.required) {
|
|
3977
|
+
// this.control.setValidators(this.Validators.required)
|
|
3978
|
+
// } else {
|
|
3979
|
+
// this.control.setValidators(null)
|
|
3980
|
+
// }
|
|
3980
3981
|
}
|
|
3981
3982
|
});
|
|
3982
3983
|
}
|
|
@@ -4264,7 +4265,7 @@ class DocsUploaderComponent extends ControlValueAccessorDirective {
|
|
|
4264
4265
|
useExisting: forwardRef(() => DocsUploaderComponent),
|
|
4265
4266
|
multi: true,
|
|
4266
4267
|
},
|
|
4267
|
-
], 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" }] });
|
|
4268
|
+
], 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" }] });
|
|
4268
4269
|
}
|
|
4269
4270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DocsUploaderComponent, decorators: [{
|
|
4270
4271
|
type: Component,
|
|
@@ -4282,7 +4283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
4282
4283
|
useExisting: forwardRef(() => DocsUploaderComponent),
|
|
4283
4284
|
multi: true,
|
|
4284
4285
|
},
|
|
4285
|
-
], 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"] }]
|
|
4286
|
+
], 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"] }]
|
|
4286
4287
|
}], propDecorators: { useCrop: [{
|
|
4287
4288
|
type: Input
|
|
4288
4289
|
}], formKey: [{
|
|
@@ -4489,7 +4490,7 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
|
|
|
4489
4490
|
isSortable = false;
|
|
4490
4491
|
downloadAll = false;
|
|
4491
4492
|
popupData = {};
|
|
4492
|
-
|
|
4493
|
+
isRequired = false;
|
|
4493
4494
|
descriptionRequired;
|
|
4494
4495
|
commentsRequired;
|
|
4495
4496
|
allowedExtensions = '';
|
|
@@ -4631,13 +4632,13 @@ class AttachmentSectionComponent extends ControlValueAccessorDirective {
|
|
|
4631
4632
|
this.downloadActionClicked.emit(event);
|
|
4632
4633
|
}
|
|
4633
4634
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4634
|
-
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: [
|
|
4635
|
+
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: [
|
|
4635
4636
|
{
|
|
4636
4637
|
provide: NG_VALUE_ACCESSOR,
|
|
4637
4638
|
useExisting: forwardRef(() => AttachmentSectionComponent),
|
|
4638
4639
|
multi: true,
|
|
4639
4640
|
},
|
|
4640
|
-
], 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" }] });
|
|
4641
|
+
], 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" }] });
|
|
4641
4642
|
}
|
|
4642
4643
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AttachmentSectionComponent, decorators: [{
|
|
4643
4644
|
type: Component,
|
|
@@ -4668,7 +4669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
4668
4669
|
MatRowDef,
|
|
4669
4670
|
FormLabelComponent,
|
|
4670
4671
|
TranslatePipe
|
|
4671
|
-
], 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"] }]
|
|
4672
|
+
], 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"] }]
|
|
4672
4673
|
}], propDecorators: { className: [{
|
|
4673
4674
|
type: Input
|
|
4674
4675
|
}], downloadActionClicked: [{
|
|
@@ -4681,6 +4682,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
4681
4682
|
type: Input
|
|
4682
4683
|
}], downloadAll: [{
|
|
4683
4684
|
type: Input
|
|
4685
|
+
}], isRequired: [{
|
|
4686
|
+
type: Input
|
|
4684
4687
|
}], descriptionRequired: [{
|
|
4685
4688
|
type: Input
|
|
4686
4689
|
}], commentsRequired: [{
|
|
@@ -4714,7 +4717,7 @@ class RadioComponent extends ControlValueAccessorDirective {
|
|
|
4714
4717
|
useExisting: forwardRef(() => RadioComponent),
|
|
4715
4718
|
multi: true,
|
|
4716
4719
|
},
|
|
4717
|
-
], usesInheritance: true, ngImport: i0, template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
4720
|
+
], 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"] }] });
|
|
4718
4721
|
}
|
|
4719
4722
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RadioComponent, decorators: [{
|
|
4720
4723
|
type: Component,
|
|
@@ -4730,7 +4733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
4730
4733
|
useExisting: forwardRef(() => RadioComponent),
|
|
4731
4734
|
multi: true,
|
|
4732
4735
|
},
|
|
4733
|
-
], template: "@if(!isReadOnly){\r\n @if(label){\r\n <app-form-label [label]=\"label\" [optional]=\"
|
|
4736
|
+
], 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"] }]
|
|
4734
4737
|
}], propDecorators: { options: [{
|
|
4735
4738
|
type: Input
|
|
4736
4739
|
}] } });
|
|
@@ -7634,7 +7637,7 @@ class RequestDetailsSectionComponent {
|
|
|
7634
7637
|
this.pageSize = event.pageSize;
|
|
7635
7638
|
}
|
|
7636
7639
|
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 });
|
|
7637
|
-
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\" [
|
|
7640
|
+
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"] }] });
|
|
7638
7641
|
}
|
|
7639
7642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: RequestDetailsSectionComponent, decorators: [{
|
|
7640
7643
|
type: Component,
|
|
@@ -7659,7 +7662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
7659
7662
|
AttachmentSectionComponent,
|
|
7660
7663
|
TableComponent,
|
|
7661
7664
|
TranslatePipe
|
|
7662
|
-
], 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\" [
|
|
7665
|
+
], 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"] }]
|
|
7663
7666
|
}], ctorParameters: () => [{ type: CoreI18nService }, { type: i4.FormBuilder }, { type: ActionStateService }], propDecorators: { isReadOnly: [{
|
|
7664
7667
|
type: Input
|
|
7665
7668
|
}], section: [{
|