@corp-products/ui-components 3.7.0 → 3.7.1

package/fesm2022/corp-products-ui-components.mjs

@@ -594,13 +594,11 @@ class DatePickerComponent extends BaseInputComponent {
         this.onAfterClearDate.emit();
     }
     onDateChange(value) {
-        if (!this.withoutTime || !value)
-            return;
         const dateOnly = value instanceof Date ? formatDate(value, 'yyyy-MM-dd', 'en-US') : value;
         this.control.setValue(dateOnly, { emitEvent: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerComponent, isStandalone: true, selector: "stc-date-picker", inputs: { showIcon: "showIcon", showClear: "showClear", basicInput: "basicInput", isTimeOnly: "isTimeOnly", minDate: "minDate", maxDate: "maxDate", hourFormat: "hourFormat", selectionMode: "selectionMode", variant: "variant", withoutTime: "withoutTime" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n      (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n      [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n      [class]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n      [maxDate]=\"maxDate\">\r\n      @if (isTimeOnly) {\r\n      <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n        <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\">\r\n        <div class=\"p-datepicker-buttonbar\">\r\n          <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n          </button>\r\n          <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n        </div>\r\n      </ng-template>\r\n      }\r\n    </p-datepicker>\r\n\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatlabel>\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  }\r\n  @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br>\r\n    }\r\n  </small>\r\n  }\r\n</div>\r\n", styles: [".p-datepicker{@apply relative;}.p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.text-required{color:red}.p-error{color:#dc2626}stc-date-picker.w-full,stc-date-picker.w-full .field,stc-date-picker.w-full .p-floatlabel,stc-date-picker.w-full .p-datepicker,stc-date-picker.w-full .p-inputtext{@apply w-full;}stc-date-picker.w-full .p-datepicker{@apply block;}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerComponent, isStandalone: true, selector: "stc-date-picker", inputs: { showIcon: "showIcon", showClear: "showClear", basicInput: "basicInput", isTimeOnly: "isTimeOnly", minDate: "minDate", maxDate: "maxDate", hourFormat: "hourFormat", selectionMode: "selectionMode", variant: "variant", withoutTime: "withoutTime" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n      (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n      [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n      [class]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n      [maxDate]=\"maxDate\">\r\n      @if (isTimeOnly) {\r\n      <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n        <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\">\r\n        <div class=\"p-datepicker-buttonbar\">\r\n          <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n          </button>\r\n          <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n        </div>\r\n      </ng-template>\r\n      }\r\n    </p-datepicker>\r\n\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatlabel>\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  }\r\n  @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br>\r\n    }\r\n  </small>\r\n  }\r\n</div>\r\n", styles: [".p-datepicker{@apply relative;}.p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.text-required{color:red}.p-error{color:#dc2626}stc-date-picker.w-full,stc-date-picker.w-full .field,stc-date-picker.w-full .p-floatlabel,stc-date-picker.w-full .p-datepicker,stc-date-picker.w-full .p-inputtext{@apply w-full;}stc-date-picker input{width:100%}stc-date-picker.w-full .p-datepicker{@apply block;}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -612,7 +610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         DatePickerModule,
                         ValidationErrorsPipe,
                         FloatLabelModule,
-                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n      (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n      [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n      [class]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n      [maxDate]=\"maxDate\">\r\n      @if (isTimeOnly) {\r\n      <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n        <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\">\r\n        <div class=\"p-datepicker-buttonbar\">\r\n          <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n          </button>\r\n          <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n        </div>\r\n      </ng-template>\r\n      }\r\n    </p-datepicker>\r\n\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatlabel>\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  }\r\n  @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br>\r\n    }\r\n  </small>\r\n  }\r\n</div>\r\n", styles: [".p-datepicker{@apply relative;}.p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.text-required{color:red}.p-error{color:#dc2626}stc-date-picker.w-full,stc-date-picker.w-full .field,stc-date-picker.w-full .p-floatlabel,stc-date-picker.w-full .p-datepicker,stc-date-picker.w-full .p-inputtext{@apply w-full;}stc-date-picker.w-full .p-datepicker{@apply block;}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n      (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n      [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\" [showIcon]=\"showIcon\"\r\n      [class]=\"'w-full'\" appendTo=\"body\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\" [minDate]=\"minDate\"\r\n      [maxDate]=\"maxDate\">\r\n      @if (isTimeOnly) {\r\n      <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n        <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\">\r\n        <div class=\"p-datepicker-buttonbar\">\r\n          <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n          </button>\r\n          <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n        </div>\r\n      </ng-template>\r\n      }\r\n    </p-datepicker>\r\n\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n    </label>\r\n  </p-floatlabel>\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\r\n  }\r\n  @if (isInvalid && (control.dirty || control.touched)) {\r\n  <small class=\"p-error\">\r\n    @for (error of control.errors | validationErrors; track error) {\r\n    {{ error }}<br>\r\n    }\r\n  </small>\r\n  }\r\n</div>\r\n", styles: [".p-datepicker{@apply relative;}.p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.text-required{color:red}.p-error{color:#dc2626}stc-date-picker.w-full,stc-date-picker.w-full .field,stc-date-picker.w-full .p-floatlabel,stc-date-picker.w-full .p-datepicker,stc-date-picker.w-full .p-inputtext{@apply w-full;}stc-date-picker input{width:100%}stc-date-picker.w-full .p-datepicker{@apply block;}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showIcon: [{
                 type: Input
             }], showClear: [{
@@ -1596,7 +1594,7 @@ var UploadStatus;
     UploadStatus["FAILED"] = "failed";
 })(UploadStatus || (UploadStatus = {}));
 
-class FileManagementComponent {
+class FileManagementComponent extends BaseInputComponent {
     // Inputs
     existingFiles = input([], ...(ngDevMode ? [{ debugName: "existingFiles" }] : []));
     acceptedTypes = input('*', ...(ngDevMode ? [{ debugName: "acceptedTypes" }] : []));
@@ -1616,7 +1614,6 @@ class FileManagementComponent {
     uploadError = new EventEmitter();
     newFilesChange = new EventEmitter();
     fileInput;
-    destroy$ = new Subject();
     // State - separate new uploads from existing files
     isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
     newFiles = signal([], ...(ngDevMode ? [{ debugName: "newFiles" }] : [])); // Files being uploaded or newly uploaded
@@ -1648,17 +1645,6 @@ class FileManagementComponent {
             .join(', ');
     }, ...(ngDevMode ? [{ debugName: "formattedAcceptedTypes" }] : []));
     // Table configuration
-    constructor() {
-        // Emit when new files change
-        effect(() => {
-            const newFilesList = this.newFiles();
-            this.newFilesChange.emit(newFilesList);
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
     // Drag & Drop handlers
     onDragOver(event) {
         event.preventDefault();
@@ -1824,13 +1810,13 @@ class FileManagementComponent {
         const i = Math.floor(Math.log(bytes) / Math.log(k));
         return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FileManagementComponent, isStandalone: true, selector: "app-file-management", inputs: { existingFiles: { classPropertyName: "existingFiles", publicName: "existingFiles", isSignal: true, isRequired: false, transformFunction: null }, acceptedTypes: { classPropertyName: "acceptedTypes", publicName: "acceptedTypes", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxConcurrentUploads: { classPropertyName: "maxConcurrentUploads", publicName: "maxConcurrentUploads", isSignal: true, isRequired: false, transformFunction: null }, showTable: { classPropertyName: "showTable", publicName: "showTable", isSignal: true, isRequired: false, transformFunction: null }, showDropZone: { classPropertyName: "showDropZone", publicName: "showDropZone", isSignal: true, isRequired: false, transformFunction: null }, allowPreview: { classPropertyName: "allowPreview", publicName: "allowPreview", isSignal: true, isRequired: false, transformFunction: null }, permissonKey: { classPropertyName: "permissonKey", publicName: "permissonKey", isSignal: true, isRequired: false, transformFunction: null }, allowedActions: { classPropertyName: "allowedActions", publicName: "allowedActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesUploaded: "filesUploaded", fileDeleted: "fileDeleted", filePreview: "filePreview", fileDownload: "fileDownload", uploadError: "uploadError", newFilesChange: "newFilesChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"file-management\">\r\n  <!-- Drop Zone -->\r\n  @if (showDropZone()) {\r\n    <div\r\n      class=\"drop-zone upload-container\"\r\n      [class.drag-over]=\"isDragOver()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n    >\r\n      <div class=\"drop-zone-content\">\r\n        <p class=\"drop-text\">{{ 'file.drag_drop_files' | translate }}</p>\r\n        <p-button\r\n          [label]=\"'file.browse' | translate\"\r\n          severity=\"danger\"\r\n          [outlined]=\"true\"\r\n          (onClick)=\"onBrowseClick()\"\r\n        />\r\n        <p class=\"drop-hint text-xs text-gray-500 mt-2\">\r\n          {{ 'file.max_size_hint' | translate }}: {{ maxFileSize() | fileSize: 2 : 'MB' }}\r\n        </p>\r\n        @if (formattedAcceptedTypes()) {\r\n          <p class=\"accepted-types text-xs text-gray-400\">\r\n            {{ 'file.accepted_types' | translate }}: {{ formattedAcceptedTypes() }}\r\n          </p>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- Hidden file input (always present for programmatic access) -->\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    [accept]=\"acceptedTypes()\"\r\n    multiple\r\n    hidden\r\n    (change)=\"onFileInputChange($event)\"\r\n  />\r\n\r\n  @if(uploadedFile().length) {\r\n    @for(file of uploadedFile() ; track file) {\r\n      <div class=\"uploaded-files \"  >\r\n         <p>{{file.name}}</p>\r\n         <i class=\"pi pi-trash\" style=\"font-size: 1.5rem; color: #f00\" (click)=\"deleteFile()\"></i>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Files Table -->\r\n\r\n</div>\r\n", styles: [".file-management{width:100%}.drop-zone{@apply cursor-pointer rounded-l border-2 border-dashed border-gray-300 p-8 bg-purple-light3 text-center transition-all duration-200 ease-in-out;}.drop-zone.drag-over{@apply border-purple-200 bg-purple-light;}.drop-zone-content{@apply flex flex-col items-center gap-2;}.drop-icon{font-size:3rem;color:var(--gray-400, #9ca3af);margin-bottom:.5rem}.drop-text{font-size:1rem;color:var(--gray-700, #374151);margin:0}.drop-or{font-size:.875rem;color:var(--gray-500, #6b7280);margin:.25rem 0}.drop-hint{margin-top:.75rem}.files-table{border:1px solid var(--gray-200, #e5e7eb);border-radius:8px;overflow:hidden}:host-context([dir=rtl]) .drop-zone-content{direction:rtl}.uploaded-files{background-color:#f3f3f7;border:1px solid #DFE0E6;display:flex;justify-content:space-between;align-items:center;padding:15px;margin-bottom:10px}.uploaded-files .pi-trash{cursor:pointer}.uploaded-files p{margin-block-start:0;margin-block-end:0}.upload-container{background-color:#f3f3f7;padding:15px;border:1px dashed #DFE0E6;margin-bottom:15px;display:flex;justify-content:center;align-items:center;border-radius:2px}.upload-container .drop-zone-content{display:flex;align-items:center;flex-direction:column}.upload-container .drop-zone-content .drop-text{margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileManagementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FileManagementComponent, isStandalone: true, selector: "app-file-management", inputs: { existingFiles: { classPropertyName: "existingFiles", publicName: "existingFiles", isSignal: true, isRequired: false, transformFunction: null }, acceptedTypes: { classPropertyName: "acceptedTypes", publicName: "acceptedTypes", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxConcurrentUploads: { classPropertyName: "maxConcurrentUploads", publicName: "maxConcurrentUploads", isSignal: true, isRequired: false, transformFunction: null }, showTable: { classPropertyName: "showTable", publicName: "showTable", isSignal: true, isRequired: false, transformFunction: null }, showDropZone: { classPropertyName: "showDropZone", publicName: "showDropZone", isSignal: true, isRequired: false, transformFunction: null }, allowPreview: { classPropertyName: "allowPreview", publicName: "allowPreview", isSignal: true, isRequired: false, transformFunction: null }, permissonKey: { classPropertyName: "permissonKey", publicName: "permissonKey", isSignal: true, isRequired: false, transformFunction: null }, allowedActions: { classPropertyName: "allowedActions", publicName: "allowedActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesUploaded: "filesUploaded", fileDeleted: "fileDeleted", filePreview: "filePreview", fileDownload: "fileDownload", uploadError: "uploadError", newFilesChange: "newFilesChange" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"file-management\">\r\n  <!-- Drop Zone -->\r\n  @if (showDropZone()) {\r\n    <div\r\n      class=\"drop-zone upload-container\"\r\n      [class.drag-over]=\"isDragOver()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n    >\r\n      <div class=\"drop-zone-content\">\r\n        <p class=\"drop-text\">{{ 'file.drag_drop_files' | translate }}</p>\r\n        <p-button\r\n          [label]=\"'file.browse' | translate\"\r\n          severity=\"danger\"\r\n          [outlined]=\"true\"\r\n          (onClick)=\"onBrowseClick()\"\r\n        />\r\n        <p class=\"drop-hint text-xs text-gray-500 mt-2\">\r\n          {{ 'file.max_size_hint' | translate }}: {{ maxFileSize() | fileSize: 2 : 'MB' }}\r\n        </p>\r\n        @if (formattedAcceptedTypes()) {\r\n          <p class=\"accepted-types text-xs text-gray-400\">\r\n            {{ 'file.accepted_types' | translate }}: {{ formattedAcceptedTypes() }}\r\n          </p>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- Hidden file input (always present for programmatic access) -->\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    [accept]=\"acceptedTypes()\"\r\n    multiple\r\n    hidden\r\n    (change)=\"onFileInputChange($event)\"\r\n  />\r\n\r\n  @if(uploadedFile().length) {\r\n    @for(file of uploadedFile() ; track file) {\r\n      <div class=\"uploaded-files \"  >\r\n         <p>{{file.name}}</p>\r\n         <i class=\"pi pi-trash\" style=\"font-size: 1.5rem; color: #f00\" (click)=\"deleteFile()\"></i>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Files Table -->\r\n\r\n</div>\r\n", styles: [".file-management{width:100%}.drop-zone{@apply cursor-pointer rounded-l border-2 border-dashed border-gray-300 p-8 bg-purple-light3 text-center transition-all duration-200 ease-in-out;}.drop-zone.drag-over{@apply border-purple-200 bg-purple-light;}.drop-zone-content{@apply flex flex-col items-center gap-2;}.drop-icon{font-size:3rem;color:var(--gray-400, #9ca3af);margin-bottom:.5rem}.drop-text{font-size:1rem;color:var(--gray-700, #374151);margin:0}.drop-or{font-size:.875rem;color:var(--gray-500, #6b7280);margin:.25rem 0}.drop-hint{margin-top:.75rem}.files-table{border:1px solid var(--gray-200, #e5e7eb);border-radius:8px;overflow:hidden}:host-context([dir=rtl]) .drop-zone-content{direction:rtl}.uploaded-files{background-color:#f3f3f7;border:1px solid #DFE0E6;display:flex;justify-content:space-between;align-items:center;padding:15px;margin-bottom:10px}.uploaded-files .pi-trash{cursor:pointer}.uploaded-files p{margin-block-start:0;margin-block-end:0}.upload-container{background-color:#f3f3f7;padding:15px;border:1px dashed #DFE0E6;margin-bottom:15px;display:flex;justify-content:center;align-items:center;border-radius:2px}.upload-container .drop-zone-content{display:flex;align-items:center;flex-direction:column}.upload-container .drop-zone-content .drop-text{margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileManagementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-file-management', imports: [CommonModule, TranslatePipe, ButtonModule, TooltipModule, FileSizePipe], template: "<div class=\"file-management\">\r\n  <!-- Drop Zone -->\r\n  @if (showDropZone()) {\r\n    <div\r\n      class=\"drop-zone upload-container\"\r\n      [class.drag-over]=\"isDragOver()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n    >\r\n      <div class=\"drop-zone-content\">\r\n        <p class=\"drop-text\">{{ 'file.drag_drop_files' | translate }}</p>\r\n        <p-button\r\n          [label]=\"'file.browse' | translate\"\r\n          severity=\"danger\"\r\n          [outlined]=\"true\"\r\n          (onClick)=\"onBrowseClick()\"\r\n        />\r\n        <p class=\"drop-hint text-xs text-gray-500 mt-2\">\r\n          {{ 'file.max_size_hint' | translate }}: {{ maxFileSize() | fileSize: 2 : 'MB' }}\r\n        </p>\r\n        @if (formattedAcceptedTypes()) {\r\n          <p class=\"accepted-types text-xs text-gray-400\">\r\n            {{ 'file.accepted_types' | translate }}: {{ formattedAcceptedTypes() }}\r\n          </p>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- Hidden file input (always present for programmatic access) -->\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    [accept]=\"acceptedTypes()\"\r\n    multiple\r\n    hidden\r\n    (change)=\"onFileInputChange($event)\"\r\n  />\r\n\r\n  @if(uploadedFile().length) {\r\n    @for(file of uploadedFile() ; track file) {\r\n      <div class=\"uploaded-files \"  >\r\n         <p>{{file.name}}</p>\r\n         <i class=\"pi pi-trash\" style=\"font-size: 1.5rem; color: #f00\" (click)=\"deleteFile()\"></i>\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <!-- Files Table -->\r\n\r\n</div>\r\n", styles: [".file-management{width:100%}.drop-zone{@apply cursor-pointer rounded-l border-2 border-dashed border-gray-300 p-8 bg-purple-light3 text-center transition-all duration-200 ease-in-out;}.drop-zone.drag-over{@apply border-purple-200 bg-purple-light;}.drop-zone-content{@apply flex flex-col items-center gap-2;}.drop-icon{font-size:3rem;color:var(--gray-400, #9ca3af);margin-bottom:.5rem}.drop-text{font-size:1rem;color:var(--gray-700, #374151);margin:0}.drop-or{font-size:.875rem;color:var(--gray-500, #6b7280);margin:.25rem 0}.drop-hint{margin-top:.75rem}.files-table{border:1px solid var(--gray-200, #e5e7eb);border-radius:8px;overflow:hidden}:host-context([dir=rtl]) .drop-zone-content{direction:rtl}.uploaded-files{background-color:#f3f3f7;border:1px solid #DFE0E6;display:flex;justify-content:space-between;align-items:center;padding:15px;margin-bottom:10px}.uploaded-files .pi-trash{cursor:pointer}.uploaded-files p{margin-block-start:0;margin-block-end:0}.upload-container{background-color:#f3f3f7;padding:15px;border:1px dashed #DFE0E6;margin-bottom:15px;display:flex;justify-content:center;align-items:center;border-radius:2px}.upload-container .drop-zone-content{display:flex;align-items:center;flex-direction:column}.upload-container .drop-zone-content .drop-text{margin-bottom:10px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { existingFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFiles", required: false }] }], acceptedTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptedTypes", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxConcurrentUploads: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxConcurrentUploads", required: false }] }], showTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTable", required: false }] }], showDropZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropZone", required: false }] }], allowPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowPreview", required: false }] }], permissonKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "permissonKey", required: false }] }], allowedActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedActions", required: false }] }], filesUploaded: [{
+        }], propDecorators: { existingFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFiles", required: false }] }], acceptedTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptedTypes", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxConcurrentUploads: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxConcurrentUploads", required: false }] }], showTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTable", required: false }] }], showDropZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropZone", required: false }] }], allowPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowPreview", required: false }] }], permissonKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "permissonKey", required: false }] }], allowedActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedActions", required: false }] }], filesUploaded: [{
                 type: Output
             }], fileDeleted: [{
                 type: Output
@@ -1869,6 +1855,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
+const FileExtentions = [
+    'jpeg',
+    'pptx',
+    'xlsx',
+    'xls',
+    'doc',
+    'docx',
+    'jpg',
+    'png',
+    'pdf',
+    'txt',
+    'csv',
+    'msg',
+    'zip',
+    'win',
+    'xlsb',
+    'ppt',
+    'rar',
+];
+
 class DynamicFormComponent {
     dynamicFormData;
     // Generic field change outputs (optional for consumers)
@@ -1889,6 +1895,9 @@ class DynamicFormComponent {
         this.inputsMap = this.dynamicFormData?.inputsMap;
         this.inputsNames = Object.keys(this.inputsMap || {});
     }
+    getAcceptedTypes() {
+        return FileExtentions.toString();
+    }
     onFilesUploaded(file) {
         this.popUpFilesUploaded.emit(file);
     }
@@ -1896,7 +1905,7 @@ class DynamicFormComponent {
         this.fileDeleted.emit(file);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, outputs: { selectButtonChange: "selectButtonChange", selectChange: "selectChange", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect", popUpFilesUploaded: "popUpFilesUploaded", fileDeleted: "fileDeleted" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"grid grid-cols-12 gap-x-2\">\r\n    @for (inputName of inputsNames; track $index) {\r\n    <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n      @switch (inputsMap[inputName].fieldType) {\r\n      @case (fieldType.HIJRI_DATE_PICKER) {\r\n      <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\"></app-dual-calendar>\r\n      }\r\n\r\n      @case (fieldType.DATE_PICKER) {\r\n      <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n        [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n      }\r\n      @case (fieldType.SELECT_BUTTON) {\r\n      <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n        [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n        (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n      }\r\n      @case (fieldType.INPUT) {\r\n      <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n        [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n        [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\r\n        [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n        @if(inputsMap[inputName].maxLength){\r\n        <span class=\"text-xs text-gray-700\">\r\n          {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n          <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n        </span>\r\n        }\r\n      </stc-input>\r\n      }\r\n      @case (fieldType.SELECT) {\r\n      <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n        [optionLabel]=\"inputsMap[inputName]?.translatable\r\n        ? ((inputsMap[inputName]?.optionLabel || 'label') | localizedLabel)\r\n        : (inputsMap[inputName]?.optionLabel || 'label')\"\r\n        [filter]=\"inputsMap[inputName].filter || false\"\r\n        [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n        [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\" />\r\n      }\r\n      @case (fieldType.SWITCH) {\r\n      <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n        [checked]=\"getFormControl(inputName, formGroup).value\"\r\n        (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n      }\r\n      @case (fieldType.AUTO_COMPLETE) {\r\n      <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n        [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n        (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n        (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n      }\r\n      @case(fieldType.UPLOAD_FILE) {\r\n      <app-file-management #fileManager #groupFileManager [maxFileSize]=\"262144000\" [maxConcurrentUploads]=\"1\"\r\n        [allowPreview]=\"true\" (filesUploaded)=\"onFilesUploaded($event)\" (fileDeleted)=\"onFileDeleted($event)\" />\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n\r\n\r\n\r\n  </div>\r\n  <div class=\"col-span-12\">\r\n    <small class=\"p-error text-red-700\">\r\n      @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n      track error) {\r\n      {{ error }}\r\n      }\r\n    </small>\r\n  </div>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode", "variant", "withoutTime"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "component", type: DualCalendarComponent, selector: "app-dual-calendar", inputs: ["control", "label", "name", "withTime", "isDatePickerShow", "currentLang", "isShown"], outputs: ["gregorianUTC", "onClose"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "canClear", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "iconClass", "iconPosition"] }, { kind: "component", type: FileManagementComponent, selector: "app-file-management", inputs: ["existingFiles", "acceptedTypes", "maxFileSize", "maxConcurrentUploads", "showTable", "showDropZone", "allowPreview", "permissonKey", "allowedActions"], outputs: ["filesUploaded", "fileDeleted", "filePreview", "fileDownload", "uploadError", "newFilesChange"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "optionValue", "emptyMessage", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "selectAllLabel", "dataKey", "size", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: LocalizedLabelPipe, name: "localizedLabel" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, outputs: { selectButtonChange: "selectButtonChange", selectChange: "selectChange", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect", popUpFilesUploaded: "popUpFilesUploaded", fileDeleted: "fileDeleted" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"grid grid-cols-12 gap-x-2 dynamic-form__content\">\r\n    @for (inputName of inputsNames; track $index) {\r\n    <div [ngClass]=\"inputsMap[inputName].rowSize\"  >\r\n      @switch (inputsMap[inputName].fieldType) {\r\n      @case (fieldType.HIJRI_DATE_PICKER) {\r\n      <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\"></app-dual-calendar>\r\n      }\r\n\r\n      @case (fieldType.DATE_PICKER) {\r\n      <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n        [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n      }\r\n      @case (fieldType.SELECT_BUTTON) {\r\n      <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n        [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n        (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n      }\r\n      @case (fieldType.INPUT) {\r\n      <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n        [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n        [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\r\n        [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n        @if(inputsMap[inputName].maxLength){\r\n        <span class=\"text-xs text-gray-700\">\r\n          {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n          <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n        </span>\r\n        }\r\n      </stc-input>\r\n      }\r\n      @case (fieldType.SELECT) {\r\n      <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n        [optionLabel]=\"inputsMap[inputName]?.translatable\r\n        ? ((inputsMap[inputName]?.optionLabel || 'label') | localizedLabel)\r\n        : (inputsMap[inputName]?.optionLabel || 'label')\"\r\n        [filter]=\"inputsMap[inputName].filter || false\"\r\n        [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n        [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\" />\r\n      }\r\n      @case (fieldType.SWITCH) {\r\n      <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n        [checked]=\"getFormControl(inputName, formGroup).value\"\r\n        (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n      }\r\n      @case (fieldType.AUTO_COMPLETE) {\r\n      <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n        [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n        (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n        (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n      }\r\n      @case(fieldType.UPLOAD_FILE) {\r\n      <app-file-management #fileManager #groupFileManager [maxFileSize]=\"262144000\" [maxConcurrentUploads]=\"1\"\r\n        [allowPreview]=\"true\"   [acceptedTypes]=\"getAcceptedTypes()\" (filesUploaded)=\"onFilesUploaded($event)\" [control]=\"getFormControl(inputName, formGroup)\" (fileDeleted)=\"onFileDeleted($event)\" />\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n\r\n\r\n\r\n  </div>\r\n  <div class=\"col-span-12\">\r\n    <small class=\"p-error text-red-700\">\r\n      @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n      track error) {\r\n      {{ error }}\r\n      }\r\n    </small>\r\n  </div>\r\n</form>\r\n", styles: [".dynamic-form__content>div{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode", "variant", "withoutTime"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "component", type: DualCalendarComponent, selector: "app-dual-calendar", inputs: ["control", "label", "name", "withTime", "isDatePickerShow", "currentLang", "isShown"], outputs: ["gregorianUTC", "onClose"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "canClear", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "iconClass", "iconPosition"] }, { kind: "component", type: FileManagementComponent, selector: "app-file-management", inputs: ["existingFiles", "acceptedTypes", "maxFileSize", "maxConcurrentUploads", "showTable", "showDropZone", "allowPreview", "permissonKey", "allowedActions"], outputs: ["filesUploaded", "fileDeleted", "filePreview", "fileDownload", "uploadError", "newFilesChange"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "optionValue", "emptyMessage", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "selectAllLabel", "dataKey", "size", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: LocalizedLabelPipe, name: "localizedLabel" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
@@ -1914,7 +1923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AutoCompleteComponent,
                         SwitchComponent,
                         LocalizedLabelPipe
-                    ], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"grid grid-cols-12 gap-x-2\">\r\n    @for (inputName of inputsNames; track $index) {\r\n    <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n      @switch (inputsMap[inputName].fieldType) {\r\n      @case (fieldType.HIJRI_DATE_PICKER) {\r\n      <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\"></app-dual-calendar>\r\n      }\r\n\r\n      @case (fieldType.DATE_PICKER) {\r\n      <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n        [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n      }\r\n      @case (fieldType.SELECT_BUTTON) {\r\n      <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n        [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n        (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n      }\r\n      @case (fieldType.INPUT) {\r\n      <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n        [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n        [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\r\n        [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n        @if(inputsMap[inputName].maxLength){\r\n        <span class=\"text-xs text-gray-700\">\r\n          {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n          <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n        </span>\r\n        }\r\n      </stc-input>\r\n      }\r\n      @case (fieldType.SELECT) {\r\n      <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n        [optionLabel]=\"inputsMap[inputName]?.translatable\r\n        ? ((inputsMap[inputName]?.optionLabel || 'label') | localizedLabel)\r\n        : (inputsMap[inputName]?.optionLabel || 'label')\"\r\n        [filter]=\"inputsMap[inputName].filter || false\"\r\n        [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n        [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\" />\r\n      }\r\n      @case (fieldType.SWITCH) {\r\n      <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n        [checked]=\"getFormControl(inputName, formGroup).value\"\r\n        (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n      }\r\n      @case (fieldType.AUTO_COMPLETE) {\r\n      <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n        [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n        (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n        (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n      }\r\n      @case(fieldType.UPLOAD_FILE) {\r\n      <app-file-management #fileManager #groupFileManager [maxFileSize]=\"262144000\" [maxConcurrentUploads]=\"1\"\r\n        [allowPreview]=\"true\" (filesUploaded)=\"onFilesUploaded($event)\" (fileDeleted)=\"onFileDeleted($event)\" />\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n\r\n\r\n\r\n  </div>\r\n  <div class=\"col-span-12\">\r\n    <small class=\"p-error text-red-700\">\r\n      @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n      track error) {\r\n      {{ error }}\r\n      }\r\n    </small>\r\n  </div>\r\n</form>\r\n" }]
+                    ], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"grid grid-cols-12 gap-x-2 dynamic-form__content\">\r\n    @for (inputName of inputsNames; track $index) {\r\n    <div [ngClass]=\"inputsMap[inputName].rowSize\"  >\r\n      @switch (inputsMap[inputName].fieldType) {\r\n      @case (fieldType.HIJRI_DATE_PICKER) {\r\n      <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\"></app-dual-calendar>\r\n      }\r\n\r\n      @case (fieldType.DATE_PICKER) {\r\n      <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n        [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n      }\r\n      @case (fieldType.SELECT_BUTTON) {\r\n      <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n        [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n        (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n      }\r\n      @case (fieldType.INPUT) {\r\n      <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n        [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n        [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n        [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\r\n        [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n        @if(inputsMap[inputName].maxLength){\r\n        <span class=\"text-xs text-gray-700\">\r\n          {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n          <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n        </span>\r\n        }\r\n      </stc-input>\r\n      }\r\n      @case (fieldType.SELECT) {\r\n      <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n        [optionLabel]=\"inputsMap[inputName]?.translatable\r\n        ? ((inputsMap[inputName]?.optionLabel || 'label') | localizedLabel)\r\n        : (inputsMap[inputName]?.optionLabel || 'label')\"\r\n        [filter]=\"inputsMap[inputName].filter || false\"\r\n        [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n        [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        (change)=\"selectChange.emit({ name: inputName, event: $event })\" />\r\n      }\r\n      @case (fieldType.SWITCH) {\r\n      <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n        [checked]=\"getFormControl(inputName, formGroup).value\"\r\n        (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n      }\r\n      @case (fieldType.AUTO_COMPLETE) {\r\n      <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n        [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n        [hint]=\"inputsMap[inputName].hint\"\r\n        [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n        [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n        [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n        (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n        (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n        [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n      }\r\n      @case(fieldType.UPLOAD_FILE) {\r\n      <app-file-management #fileManager #groupFileManager [maxFileSize]=\"262144000\" [maxConcurrentUploads]=\"1\"\r\n        [allowPreview]=\"true\"   [acceptedTypes]=\"getAcceptedTypes()\" (filesUploaded)=\"onFilesUploaded($event)\" [control]=\"getFormControl(inputName, formGroup)\" (fileDeleted)=\"onFileDeleted($event)\" />\r\n      }\r\n      }\r\n    </div>\r\n    }\r\n\r\n\r\n\r\n  </div>\r\n  <div class=\"col-span-12\">\r\n    <small class=\"p-error text-red-700\">\r\n      @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n      track error) {\r\n      {{ error }}\r\n      }\r\n    </small>\r\n  </div>\r\n</form>\r\n", styles: [".dynamic-form__content>div{margin-bottom:15px}\n"] }]
         }], propDecorators: { dynamicFormData: [{
                 type: Input,
                 args: [{ required: true }]