@corp-products/ui-components 3.7.1 → 3.7.3

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, inject, Pipe, EventEmitter, Output, Injectable, Renderer2, ChangeDetectorRef, signal, effect, HostListener, ViewChild, input, computed, InjectionToken, Injector, createComponent, ViewContainerRef, ApplicationRef, EnvironmentInjector, DestroyRef } from '@angular/core';
+import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, inject, Pipe, EventEmitter, Output, input, signal, computed, ViewChild, Injectable, Renderer2, ChangeDetectorRef, effect, HostListener, InjectionToken, Injector, createComponent, ViewContainerRef, ApplicationRef, EnvironmentInjector, DestroyRef } from '@angular/core';
 import * as i1 from 'primeng/button';
 import { Button, ButtonModule, ButtonStyle } from 'primeng/button';
 import * as i1$1 from '@angular/common';
@@ -35,11 +35,11 @@ import { IconField } from 'primeng/iconfield';
 import { InputIcon } from 'primeng/inputicon';
 import * as i2$2 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
+import * as i4 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
 import * as i2$3 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { Select } from 'primeng/select';
-import * as i4 from 'primeng/checkbox';
-import { CheckboxModule } from 'primeng/checkbox';
 import * as i1$5 from 'primeng/toggleswitch';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
 import * as i1$6 from '@ng-bootstrap/ng-bootstrap';
@@ -298,128 +298,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }] } });
 
-class FormUtils {
-    static getFormControl(controlName, form) {
-        if (!form)
-            throw new Error(`Form is not initialized.`);
-        const formControl = form.get(controlName);
-        if (!formControl)
-            throw new Error(`There's no form control with given name. '${controlName}'`);
-        return formControl;
+class LocalizedLabelPipe {
+    translateService = inject(TranslateService);
+    transform(label) {
+        if (!label)
+            return '';
+        const lang = this.translateService.getCurrentLang() || 'ar';
+        const suffix = lang.charAt(0).toUpperCase() + lang.slice(1);
+        const key = label + `${suffix}`;
+        return key;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LocalizedLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: LocalizedLabelPipe, isStandalone: true, name: "localizedLabel", pure: false });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LocalizedLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'localizedLabel',
+                    standalone: true,
+                    pure: false,
+                }]
+        }] });
 
-var BasicErrorKeysEnum;
-(function (BasicErrorKeysEnum) {
-    BasicErrorKeysEnum["required"] = "REQUIRED";
-    BasicErrorKeysEnum["email"] = "EMAIL";
-    BasicErrorKeysEnum["pattern"] = "PATTERN";
-    BasicErrorKeysEnum["invalidArFormat"] = "INVALID_AR_FORMAT";
-    BasicErrorKeysEnum["invalidLink"] = "INVALID_LINK";
-    BasicErrorKeysEnum["endDateBeforeStartDate"] = "END_DATE_BEFORE_START_DATE";
-    BasicErrorKeysEnum["startDateEqualsEndDate"] = "START_DATE_EQUALS_END_DATE";
-    BasicErrorKeysEnum["endTimeBeforeStartTime"] = "END_TIME_BEFORE_START_TIME";
-    BasicErrorKeysEnum["startTimeEqualsEndTime"] = "START_TIME_EQUALS_END_TIME";
-    BasicErrorKeysEnum["integer"] = "INTEGER";
-    BasicErrorKeysEnum["positiveNumber"] = "POSITIVE_NUMBER";
-    BasicErrorKeysEnum["fileSelected"] = "FILE_SELECTED";
-    BasicErrorKeysEnum["default"] = "DEFAULT";
-    BasicErrorKeysEnum["numbersOnly"] = "NUMBERS_ONLY";
-})(BasicErrorKeysEnum || (BasicErrorKeysEnum = {}));
-var ErrorsWithValuesKeysEnum;
-(function (ErrorsWithValuesKeysEnum) {
-    ErrorsWithValuesKeysEnum["minlength"] = "MIN_LENGTH";
-    ErrorsWithValuesKeysEnum["maxlength"] = "MAX_LENGTH";
-    ErrorsWithValuesKeysEnum["min"] = "MIN";
-    ErrorsWithValuesKeysEnum["max"] = "MAX";
-    ErrorsWithValuesKeysEnum["maxSize"] = "MAX_SIZE";
-    ErrorsWithValuesKeysEnum["maxFiles"] = "MAX_FILES";
-    ErrorsWithValuesKeysEnum["allowedTypes"] = "ALLOWED_TYPES";
-})(ErrorsWithValuesKeysEnum || (ErrorsWithValuesKeysEnum = {}));
+const FileExtentions = [
+    'jpeg',
+    'pptx',
+    'xlsx',
+    'xls',
+    'doc',
+    'docx',
+    'jpg',
+    'png',
+    'pdf',
+    'txt',
+    'csv',
+    'msg',
+    'zip',
+    'win',
+    'xlsb',
+    'ppt',
+    'rar',
+];
 
-class FormValidationService {
-    translate = inject(TranslateService);
-    getTranslation(key, interpolateParams) {
-        return this.translate.instant(`VALIDATION.${key}`, interpolateParams);
-    }
-    getErrorMessage(errorKey, errorValue) {
-        if (this.isBasicErrorKey(errorKey)) {
-            return this.getTranslation(BasicErrorKeysEnum[errorKey]);
+/**
+ * Transforms file size from bytes to readable format (B, KB, MB, GB, TB).
+ *
+ * Usage:
+ *   {{ fileSize | fileSize }}           // Default: auto unit, 2 decimals
+ *   {{ fileSize | fileSize:0 }}         // Auto unit, 0 decimals
+ *   {{ fileSize | fileSize:2:'MB' }}    // Force MB, 2 decimals
+ *
+ * @param value - File size in bytes
+ * @param decimals - Number of decimal places (default: 2)
+ * @param unit - Unit: 'B', 'KB', 'MB', 'GB', 'TB' (default: auto)
+ */
+class FileSizePipe {
+    units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    k = 1024;
+    transform(bytes, decimals = 2, unit) {
+        if (bytes === null || bytes === undefined || isNaN(bytes)) {
+            return '0 B';
         }
-        if (this.isErrorWithValueKey(errorKey)) {
-            return this.getErrorWithValueMessage(errorKey, errorValue);
+        if (bytes === 0) {
+            return '0 B';
         }
-        return this.getTranslation(BasicErrorKeysEnum.default);
-    }
-    // Basic error keys are the keys that don't have any values to interpolate. like required, email, etc.
-    isBasicErrorKey(key) {
-        return Object.keys(BasicErrorKeysEnum).includes(key);
-    }
-    // Error keys with values are the keys that have values to interpolate. like minlength, maxlength, etc.
-    isErrorWithValueKey(key) {
-        return Object.keys(ErrorsWithValuesKeysEnum).includes(key);
+        // If a specific unit is requested
+        if (unit) {
+            const unitIndex = this.units.indexOf(unit);
+            if (unitIndex === -1) {
+                return this.autoFormat(bytes, decimals);
+            }
+            const divisor = Math.pow(this.k, unitIndex);
+            const value = bytes / divisor;
+            return `${this.formatNumber(value, decimals)} ${unit}`;
+        }
+        // Auto-detect the best unit
+        return this.autoFormat(bytes, decimals);
     }
-    getErrorWithValueMessage(errorKey, errorValue) {
-        const messages = {
-            minlength: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.minlength, {
-                requiredLength: val?.requiredLength,
-                actualLength: val?.actualLength,
-            }),
-            maxlength: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxlength, {
-                requiredLength: val?.requiredLength,
-                actualLength: val?.actualLength,
-            }),
-            min: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.min, { min: val?.min }),
-            max: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.max, { max: val?.max }),
-            maxSize: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxSize, { size: val?.requiredLength }),
-            maxFiles: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxFiles, { size: val?.requiredLength }),
-            allowedTypes: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.allowedTypes, { types: val?.join(', ') }),
-        };
-        return messages[errorKey](errorValue);
+    autoFormat(bytes, decimals) {
+        const i = Math.floor(Math.log(Math.abs(bytes)) / Math.log(this.k));
+        const unitIndex = Math.min(i, this.units.length - 1);
+        const value = bytes / Math.pow(this.k, unitIndex);
+        return `${this.formatNumber(value, decimals)} ${this.units[unitIndex]}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class ValidationErrorsPipe {
-    formValidationService = inject(FormValidationService);
-    // allowed keys here to handle errors in case of cross-validators like startDate and endDate validators,
-    // we pass this custom key to handle the error messages only for the allowed keys
-    transform(errors, allowedKeys) {
-        if (!errors)
-            return [];
-        return Object.keys(errors)
-            .filter((errorKey) => !allowedKeys || allowedKeys.includes(errorKey)) // Filter errors if allowedKeys are provided
-            .map((errorKey) => {
-            return this.formValidationService.getErrorMessage(errorKey, errors[errorKey]);
-        });
+    formatNumber(value, decimals) {
+        return parseFloat(value.toFixed(decimals)).toString();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, isStandalone: true, name: "validationErrors" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileSizePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: "validationErrors",
+                    name: 'fileSize',
                     standalone: true,
-                    pure: true
                 }]
         }] });
 
-function numbersOnlyValidator(control) {
-    const value = control.value;
-    if (value === null || value === undefined || value === '') {
-        return null;
-    }
-    const isNumbersOnly = /^[0-9]+$/.test(value);
-    return isNumbersOnly ? null : { numbersOnly: true };
-}
+var UploadStatus;
+(function (UploadStatus) {
+    UploadStatus["PENDING"] = "pending";
+    UploadStatus["SUCCESS"] = "success";
+    UploadStatus["UPLOADING"] = "uploading";
+    UploadStatus["FAILED"] = "failed";
+})(UploadStatus || (UploadStatus = {}));
 
 class BaseInputComponent {
     control;
@@ -470,1416 +452,1441 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }] } });
 
-class AutoCompleteComponent extends BaseInputComponent {
-    selectedItemTemplate = null;
-    // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-    onSearch = new EventEmitter();
-    selectOption = new EventEmitter();
-    items = [];
-    minLengthToSearch = 3;
-    delay = 300; // default value
-    basicInput;
-    typeAhead = false;
-    variant = 'over';
-    constructor() {
-        super();
-    }
-    search(event) {
-        this.onSearch.emit(event.query);
-    }
-    onSelect(event) {
-        this.selectOption.emit(event);
-    }
-    onKeyDown(event) {
-        if (!['Enter', 'Tab', ' '].includes(event.key))
-            return;
-        event.preventDefault();
-        const input = event.target;
-        this.addValueFromInput(input);
-    }
-    onBlur(event) {
-        const input = event.target;
-        this.addValueFromInput(input);
-    }
-    addValueFromInput(input) {
-        const value = input.value?.trim();
-        if (!value)
-            return;
-        const current = this.control.value ?? [];
-        if (!current.includes(value)) {
-            this.control.setValue([...current, value]);
-            this.control.markAsDirty();
-        }
-        input.value = '';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AutoCompleteComponent, isStandalone: true, selector: "stc-auto-complete", inputs: { selectedItemTemplate: "selectedItemTemplate", items: "items", minLengthToSearch: "minLengthToSearch", delay: "delay", basicInput: "basicInput", typeAhead: "typeAhead", variant: "variant" }, outputs: { onSearch: "onSearch", selectOption: "selectOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  @if (!required) {\r\n  <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n  }\r\n  <p-floatlabel [variant]=\"variant\" class=\"autoComplete\">\r\n    <p-auto-complete (keydown)=\"onKeyDown($event)\"  (onBlur)=\"onBlur($event)\" (completeMethod)=\"search($event)\" (onSelect)=\"onSelect($event)\" [delay]=\"delay\"\r\n      [disabled]=\"disabled\" [formControl]=\"control\" [id]=\"inputId\" fluid [typeahead]=\"typeAhead\"\r\n      [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n      [minLength]=\"minLengthToSearch\" [name]=\"name\" [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n      [placeholder]=\"placeholder\" [styleClass]=\"'w-full'\" multiple [suggestions]=\"items\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        @if (selectedItemTemplate) {\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n        }\r\n      </ng-template>\r\n    </p-auto-complete>\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"isInvalid\">*</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\r\n</div>\r\n", styles: [".text-required{color:red}.p-error{color:#dc2626}.autoComplete .p-floatlabel-in{height:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'stc-auto-complete', standalone: true, imports: [
-                        ReactiveFormsModule,
-                        AutoComplete,
-                        PrimeTemplate,
-                        NgIf,
-                        NgTemplateOutlet,
-                        NgClass,
-                        JsonPipe,
-                        ValidationErrorsPipe,
-                        TranslatePipe,
-                        FloatLabel,
-                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  @if (!required) {\r\n  <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n  }\r\n  <p-floatlabel [variant]=\"variant\" class=\"autoComplete\">\r\n    <p-auto-complete (keydown)=\"onKeyDown($event)\"  (onBlur)=\"onBlur($event)\" (completeMethod)=\"search($event)\" (onSelect)=\"onSelect($event)\" [delay]=\"delay\"\r\n      [disabled]=\"disabled\" [formControl]=\"control\" [id]=\"inputId\" fluid [typeahead]=\"typeAhead\"\r\n      [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n      [minLength]=\"minLengthToSearch\" [name]=\"name\" [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n      [placeholder]=\"placeholder\" [styleClass]=\"'w-full'\" multiple [suggestions]=\"items\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        @if (selectedItemTemplate) {\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n        }\r\n      </ng-template>\r\n    </p-auto-complete>\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"isInvalid\">*</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\r\n</div>\r\n", styles: [".text-required{color:red}.p-error{color:#dc2626}.autoComplete .p-floatlabel-in{height:auto!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
-                type: Input
-            }], onSearch: [{
-                type: Output
-            }], selectOption: [{
-                type: Output
-            }], items: [{
-                type: Input
-            }], minLengthToSearch: [{
-                type: Input
-            }], delay: [{
-                type: Input
-            }], basicInput: [{
-                type: Input
-            }], typeAhead: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }] } });
-
-class DatePickerComponent extends BaseInputComponent {
-    showIcon = false;
-    showClear = false;
-    basicInput;
-    isTimeOnly = false;
-    minDate;
-    maxDate;
-    hourFormat = '12';
-    nowTime = new Date();
-    selectionMode = 'single';
-    onAfterClearDate = new EventEmitter();
-    variant = 'over';
-    withoutTime = false;
-    innerControl = new FormControl(null);
-    constructor() {
-        super();
-    }
-    ngOnInit() {
-        if (typeof this.control?.value === 'string') {
-            const date = new Date(this.control.value);
-            if (date) {
-                this.innerControl.setValue(date, { emitEvent: false });
-            }
-        }
-        this.control.valueChanges.subscribe((value) => {
-            if (!value)
-                this.innerControl.reset();
-        });
-    }
-    selectCurrentTime(e) {
-        if (this.withoutTime) {
-            const d = new Date();
-            this.control.setValue(d.toISOString().split('T')[0]);
-            return;
-        }
-        this.control.setValue(this.nowTime);
-    }
-    clearButtonClick(e) {
-        this.control.setValue(null);
-    }
-    afterClearDate() {
-        this.control.reset();
-        this.onAfterClearDate.emit();
-    }
-    onDateChange(value) {
-        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 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,
-            args: [{ selector: 'stc-date-picker', standalone: true, imports: [
-                        FormsModule,
-                        DatePicker,
-                        ReactiveFormsModule,
-                        NgClass,
-                        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 input{width:100%}stc-date-picker.w-full .p-datepicker{@apply block;}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { showIcon: [{
-                type: Input
-            }], showClear: [{
-                type: Input
-            }], basicInput: [{
-                type: Input
-            }], isTimeOnly: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], hourFormat: [{
-                type: Input
-            }], selectionMode: [{
-                type: Input
-            }], onAfterClearDate: [{
-                type: Output
-            }], variant: [{
-                type: Input
-            }], withoutTime: [{
-                type: Input
-            }] } });
-
-class InputComponent extends BaseInputComponent {
-    type = 'text';
-    contentType = 'text';
-    size = "small";
-    prefix;
-    rows = 2;
-    cols = 20;
-    autoResize = false;
-    basicInput;
-    noStyle;
-    canClear;
-    hideOptionalLabel;
-    inputDirection = 'inherit';
-    variant = 'over';
-    defaultColor = '#DFE0E6';
-    iconClass;
-    iconPosition = 'left';
-    constructor() {
-        super();
-    }
-    clearInput() {
-        this.control.reset();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: InputComponent, isStandalone: true, selector: "stc-input", inputs: { type: "type", contentType: "contentType", size: "size", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", canClear: "canClear", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant", defaultColor: "defaultColor", iconClass: "iconClass", iconPosition: "iconPosition" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  <!-- input text align will be handled according to lang when implemented -->\r\n\r\n  @switch (type) {\r\n  @case ('textarea') {\r\n  @if (label) {\r\n  <div class=\"flex items-center justify-between gap-2\">\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n      <!-- @else if (!hideOptionalLabel) {\r\n        <span span class=\"optional-label\">{{'forms.config.optional' | translate}}</span>\r\n      } -->\r\n    </label>\r\n    <ng-content></ng-content>\r\n  </div>\r\n  }\r\n  <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\" [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n    [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\">\r\n  </textarea>\r\n  }\r\n  @case ('withIcon') {\r\n  <p-iconfield class=\"filter-input\">\r\n    <p-inputicon>\r\n      <i [class]=\"iconClass\"></i>\r\n    </p-inputicon>\r\n    <input pInputText [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\"\r\n      [class]=\"\r\n          'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n    @if (canClear && control.value) {\r\n    <p-inputIcon (click)=\"clearInput()\">\r\n      <i class=\"pi pi-times cursor-pointer text-sm text-gray-400 hover:text-gray-600\"></i>\r\n      </p-inputIcon>\r\n    }\r\n\r\n  </p-iconfield>\r\n  }\r\n  @default {\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n    <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\" [pSize]=\"size\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n      class=\"w-full\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\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 (prefix) {\r\n  <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n    {{ prefix }}\r\n  </span>\r\n  }\r\n\r\n\r\n  }\r\n  }\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>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}textarea,.p-select,input{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover,input:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus,input:not(.p-disabled).p-focus,input:not(.p-disabled).p-focus:hover,input:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.text-required{color:red}.p-error{color:#dc2626}.optional-label{@apply text-[10px] text-gray-400;margin-inline-start:4px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'stc-input', standalone: true, imports: [
-                        ReactiveFormsModule,
-                        InputText,
-                        Textarea,
-                        ValidationErrorsPipe,
-                        NgClass,
-                        NgStyle,
-                        TranslatePipe,
-                        FloatLabelModule,
-                        InputIcon,
-                        IconField,
-                    ], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  <!-- input text align will be handled according to lang when implemented -->\r\n\r\n  @switch (type) {\r\n  @case ('textarea') {\r\n  @if (label) {\r\n  <div class=\"flex items-center justify-between gap-2\">\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n      <!-- @else if (!hideOptionalLabel) {\r\n        <span span class=\"optional-label\">{{'forms.config.optional' | translate}}</span>\r\n      } -->\r\n    </label>\r\n    <ng-content></ng-content>\r\n  </div>\r\n  }\r\n  <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\" [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n    [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\">\r\n  </textarea>\r\n  }\r\n  @case ('withIcon') {\r\n  <p-iconfield class=\"filter-input\">\r\n    <p-inputicon>\r\n      <i [class]=\"iconClass\"></i>\r\n    </p-inputicon>\r\n    <input pInputText [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\"\r\n      [class]=\"\r\n          'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n    @if (canClear && control.value) {\r\n    <p-inputIcon (click)=\"clearInput()\">\r\n      <i class=\"pi pi-times cursor-pointer text-sm text-gray-400 hover:text-gray-600\"></i>\r\n      </p-inputIcon>\r\n    }\r\n\r\n  </p-iconfield>\r\n  }\r\n  @default {\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n    <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\" [pSize]=\"size\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n      class=\"w-full\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\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 (prefix) {\r\n  <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n    {{ prefix }}\r\n  </span>\r\n  }\r\n\r\n\r\n  }\r\n  }\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>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}textarea,.p-select,input{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover,input:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus,input:not(.p-disabled).p-focus,input:not(.p-disabled).p-focus:hover,input:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.text-required{color:red}.p-error{color:#dc2626}.optional-label{@apply text-[10px] text-gray-400;margin-inline-start:4px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { type: [{
-                type: Input
-            }], contentType: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], prefix: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], cols: [{
-                type: Input
-            }], autoResize: [{
-                type: Input
-            }], basicInput: [{
-                type: Input
-            }], noStyle: [{
-                type: Input
-            }], canClear: [{
-                type: Input
-            }], hideOptionalLabel: [{
-                type: Input
-            }], inputDirection: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], defaultColor: [{
-                type: Input
-            }], iconClass: [{
-                type: Input
-            }], iconPosition: [{
-                type: Input
-            }] } });
-
-class SelectButtonComponent extends BaseInputComponent {
-    onChange = new EventEmitter();
-    options;
-    title;
-    changeValue(e) {
-        this.onChange.emit(e.value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SelectButtonComponent, isStandalone: true, selector: "stc-select-button", inputs: { options: "options", title: "title" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-0 items-end\">\r\n  <div class=\"col-span-12\">\r\n    <div class=\"text-[14px] font-bold mb-1\">{{ title }}</div>\r\n    <div class=\"grid w-100 bg-gray-100 rounded drop-shadow-basic\">\r\n      <p-selectButton [disabled]=\"disabled\"\r\n                      [options]=\"options\"\r\n                      [formControl]=\"control\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                      class=\"rounded\"\r\n                      [styleClass]=\"'full-width'\"\r\n                      (onChange)=\"changeValue($event)\">\r\n        <ng-template let-item class=\"flex w-100\">\r\n          <div class=\"col-span-4\">\r\n            <span>{{ item.value }}</span>\r\n          </div>\r\n        </ng-template>\r\n      </p-selectButton>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "stc-select-button", standalone: true, imports: [ReactiveFormsModule, SelectButtonModule, FormsModule], template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-0 items-end\">\r\n  <div class=\"col-span-12\">\r\n    <div class=\"text-[14px] font-bold mb-1\">{{ title }}</div>\r\n    <div class=\"grid w-100 bg-gray-100 rounded drop-shadow-basic\">\r\n      <p-selectButton [disabled]=\"disabled\"\r\n                      [options]=\"options\"\r\n                      [formControl]=\"control\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                      class=\"rounded\"\r\n                      [styleClass]=\"'full-width'\"\r\n                      (onChange)=\"changeValue($event)\">\r\n        <ng-template let-item class=\"flex w-100\">\r\n          <div class=\"col-span-4\">\r\n            <span>{{ item.value }}</span>\r\n          </div>\r\n        </ng-template>\r\n      </p-selectButton>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }], propDecorators: { onChange: [{
-                type: Output
-            }], options: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }] } });
-
-class SelectComponent extends BaseInputComponent {
-    selectedItemTemplate = null;
-    optionTemplate = null;
-    options = [];
-    optionLabel;
-    optionValue;
-    emptyMessage;
-    checkmark = true;
-    showClear = false;
-    editable = false;
-    filter = false;
-    multiple = false;
-    filterBy;
-    selectAllLabel;
-    dataKey;
-    size = 'small';
-    selectedItemsLabel;
-    basicInput;
-    variant = 'over';
-    // eslint-disable-next-line @angular-eslint/no-output-native
-    change = new EventEmitter();
-    defaultColor = '#DFE0E6';
-    allSelectd = false;
-    constructor() {
-        super();
-    }
-    toggleAll(event) {
-        if (!event.checked) {
-            this.control.setValue([]);
-            return;
-        }
-        const values = this.optionValue
-            ? this.options.map((o) => o[this.optionValue])
-            : this.options;
-        this.control.setValue([...values]);
-    }
-    onMultiSelectClear() {
-        this.allSelectd = false;
-    }
-    onChange(e) {
-        this.change.emit(e);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectComponent, isStandalone: true, selector: "stc-select", inputs: { selectedItemTemplate: "selectedItemTemplate", optionTemplate: "optionTemplate", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", emptyMessage: "emptyMessage", checkmark: "checkmark", showClear: "showClear", editable: "editable", filter: "filter", multiple: "multiple", filterBy: "filterBy", selectAllLabel: "selectAllLabel", dataKey: "dataKey", size: "size", selectedItemsLabel: "selectedItemsLabel", basicInput: "basicInput", variant: "variant", defaultColor: "defaultColor" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  @if(multiple) {\r\n   <p-floatLabel [variant]=\"variant\">\r\n\r\n    <p-multiselect\r\n    [disabled]=\"disabled\"\r\n    [filterBy]=\"filterBy\"\r\n    [filter]=\"filter\"\r\n    [formControl]=\"control\"\r\n    [id]=\"inputId\"\r\n    [name]=\"name\"\r\n    [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue\"\r\n    [options]=\"options\"\r\n    [showToggleAll]=\"false\"\r\n    [placeholder]=\"placeholder\"\r\n    [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n    [readonly]=\"readonly\"\r\n    [showClear]=\"showClear\"\r\n    (onClear)=\"onMultiSelectClear()\"\r\n    class=\"w-full\"\r\n     [size]=\"size\"\r\n    [selectedItemsLabel]=\"selectedItemsLabel || ('shared.Items_Selected'| translate: {count: '{0}'})\"\r\n    [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n    (onChange)=\"onChange($event)\"\r\n    [ngClass]=\"{ 'basic-style': basicInput }\"\r\n     >\r\n\r\n      @if (selectAllLabel) {\r\n       <ng-template #filter>\r\n         <p-checkbox\r\n         binary=\"true\"\r\n         [(ngModel)]=\"allSelectd\"\r\n         (onChange)=\"toggleAll($event)\"\r\n         inputId=\"toggleAll\">\r\n         </p-checkbox>\r\n         <span>{{selectAllLabel}}</span>\r\n       </ng-template>\r\n      }\r\n\r\n      @if(optionTemplate){\r\n      <ng-template let-item #item>\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n      </ng-template>\r\n      }\r\n\r\n\r\n\r\n\r\n\r\n    </p-multiselect>\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\r\n  </p-floatLabel>\r\n\r\n  } @else {\r\n      <p-floatLabel [variant]=\"variant\">\r\n    <p-select\r\n      [dataKey]=\"dataKey\"\r\n      [checkmark]=\"checkmark\"\r\n      [disabled]=\"disabled\"\r\n      [editable]=\"editable\"\r\n      [filterBy]=\"filterBy\"\r\n      [filter]=\"filter\"\r\n      [formControl]=\"control\"\r\n      [id]=\"inputId\"\r\n      [name]=\"name\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n      [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n      [optionLabel]=\"optionLabel\"\r\n      [optionValue]=\"optionValue\"\r\n      [options]=\"options\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [showClear]=\"showClear\"\r\n       [size]=\"size\"\r\n      class=\"w-full\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n      (onChange)=\"onChange($event)\"\r\n      [ngClass]=\"{ 'basic-style': basicInput }\"\r\n    >\r\n\r\n      @if (optionTemplate) {\r\n        <ng-template let-item pTemplate=\"item\">\r\n          <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n        </ng-template>\r\n      }\r\n      @if (selectedItemTemplate) {\r\n        <ng-template let-item pTemplate=\"selectedItem\">\r\n          <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n        </ng-template>\r\n      }\r\n    </p-select>\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  }\r\n\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\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: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}.edit-search .p-select-label{padding:1rem 1rem 1rem 2.2rem!important}.edit-search .p-floatlabel>label{padding-inline-start:25px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'stc-select', standalone: true, imports: [
-                        FormsModule,
-                        Select,
-                        ReactiveFormsModule,
-                        NgClass,
-                        NgTemplateOutlet,
-                        PrimeTemplate,
-                        ValidationErrorsPipe,
-                        MultiSelectModule,
-                        FloatLabelModule,
-                        TranslatePipe,
-                        CheckboxModule,
-                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  @if(multiple) {\r\n   <p-floatLabel [variant]=\"variant\">\r\n\r\n    <p-multiselect\r\n    [disabled]=\"disabled\"\r\n    [filterBy]=\"filterBy\"\r\n    [filter]=\"filter\"\r\n    [formControl]=\"control\"\r\n    [id]=\"inputId\"\r\n    [name]=\"name\"\r\n    [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue\"\r\n    [options]=\"options\"\r\n    [showToggleAll]=\"false\"\r\n    [placeholder]=\"placeholder\"\r\n    [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n    [readonly]=\"readonly\"\r\n    [showClear]=\"showClear\"\r\n    (onClear)=\"onMultiSelectClear()\"\r\n    class=\"w-full\"\r\n     [size]=\"size\"\r\n    [selectedItemsLabel]=\"selectedItemsLabel || ('shared.Items_Selected'| translate: {count: '{0}'})\"\r\n    [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n    (onChange)=\"onChange($event)\"\r\n    [ngClass]=\"{ 'basic-style': basicInput }\"\r\n     >\r\n\r\n      @if (selectAllLabel) {\r\n       <ng-template #filter>\r\n         <p-checkbox\r\n         binary=\"true\"\r\n         [(ngModel)]=\"allSelectd\"\r\n         (onChange)=\"toggleAll($event)\"\r\n         inputId=\"toggleAll\">\r\n         </p-checkbox>\r\n         <span>{{selectAllLabel}}</span>\r\n       </ng-template>\r\n      }\r\n\r\n      @if(optionTemplate){\r\n      <ng-template let-item #item>\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n      </ng-template>\r\n      }\r\n\r\n\r\n\r\n\r\n\r\n    </p-multiselect>\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\r\n  </p-floatLabel>\r\n\r\n  } @else {\r\n      <p-floatLabel [variant]=\"variant\">\r\n    <p-select\r\n      [dataKey]=\"dataKey\"\r\n      [checkmark]=\"checkmark\"\r\n      [disabled]=\"disabled\"\r\n      [editable]=\"editable\"\r\n      [filterBy]=\"filterBy\"\r\n      [filter]=\"filter\"\r\n      [formControl]=\"control\"\r\n      [id]=\"inputId\"\r\n      [name]=\"name\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n      [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\"\r\n      [optionLabel]=\"optionLabel\"\r\n      [optionValue]=\"optionValue\"\r\n      [options]=\"options\"\r\n      [placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [showClear]=\"showClear\"\r\n       [size]=\"size\"\r\n      class=\"w-full\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n      (onChange)=\"onChange($event)\"\r\n      [ngClass]=\"{ 'basic-style': basicInput }\"\r\n    >\r\n\r\n      @if (optionTemplate) {\r\n        <ng-template let-item pTemplate=\"item\">\r\n          <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n        </ng-template>\r\n      }\r\n      @if (selectedItemTemplate) {\r\n        <ng-template let-item pTemplate=\"selectedItem\">\r\n          <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n        </ng-template>\r\n      }\r\n    </p-select>\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  }\r\n\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\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: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}.edit-search .p-select-label{padding:1rem 1rem 1rem 2.2rem!important}.edit-search .p-floatlabel>label{padding-inline-start:25px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
-                type: Input
-            }], optionTemplate: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], optionLabel: [{
-                type: Input
-            }], optionValue: [{
-                type: Input
-            }], emptyMessage: [{
-                type: Input
-            }], checkmark: [{
-                type: Input
-            }], showClear: [{
-                type: Input
-            }], editable: [{
-                type: Input
-            }], filter: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], filterBy: [{
-                type: Input
-            }], selectAllLabel: [{
-                type: Input
-            }], dataKey: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], selectedItemsLabel: [{
-                type: Input
-            }], basicInput: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }], defaultColor: [{
-                type: Input
-            }] } });
-
-class SwitchComponent {
-    label;
-    key;
-    checked = false;
-    onChange = new EventEmitter();
-    // checked: boolean = false;
-    sendUpdatedValue(value) {
-        if (value) {
-            this.onChange.emit(value.checked);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SwitchComponent, isStandalone: true, selector: "stc-switch", inputs: { label: "label", key: "key", checked: "checked" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"flex items-center mr-2\">\r\n    <p-toggleswitch [(ngModel)]=\"checked\" [inputId]=\"key\" (onChange)=\"sendUpdatedValue($event)\" class=\"flex\">\r\n    </p-toggleswitch>\r\n    <label [for]=\"key\" class=\"text-[12px] mx-2\">{{label}}</label>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i1$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SwitchComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "stc-switch", standalone: true, imports: [CommonModule, ToggleSwitchModule, FormsModule], template: "<div class=\"flex items-center mr-2\">\r\n    <p-toggleswitch [(ngModel)]=\"checked\" [inputId]=\"key\" (onChange)=\"sendUpdatedValue($event)\" class=\"flex\">\r\n    </p-toggleswitch>\r\n    <label [for]=\"key\" class=\"text-[12px] mx-2\">{{label}}</label>\r\n</div>" }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], key: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], onChange: [{
-                type: Output
-            }] } });
-
-var FormFieldTypeEnum;
-(function (FormFieldTypeEnum) {
-    FormFieldTypeEnum["DATE_PICKER"] = "date-picker";
-    FormFieldTypeEnum["SELECT_BUTTON"] = "select-button";
-    FormFieldTypeEnum["INPUT"] = "input";
-    FormFieldTypeEnum["SELECT"] = "select";
-    FormFieldTypeEnum["SWITCH"] = "switch";
-    FormFieldTypeEnum["AUTO_COMPLETE"] = "auto-complete";
-    FormFieldTypeEnum["HIJRI_DATE_PICKER"] = "hijri-date";
-    FormFieldTypeEnum["UPLOAD_FILE"] = "upload-file";
-})(FormFieldTypeEnum || (FormFieldTypeEnum = {}));
-
-const WEEKDAYS = {
-    ar: ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'],
-    en: ['M', 'T', 'W', 'T', 'F', 'S', 'S']
-};
-const MONTHS_GREGORIAN = {
-    ar: [
-        'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
-        'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
-    ],
-    en: [
-        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
-    ]
-};
-const MONTHS_HIJRI = {
-    ar: [
-        'محرم',
-        'صفر',
-        'ربيع الأول',
-        'ربيع الآخر',
-        'جمادى الأولى',
-        'جمادى الآخرة',
-        'رجب',
-        'شعبان',
-        'رمضان',
-        'شوال',
-        'ذو القعدة',
-        'ذو الحجة'
-    ],
-    en: [
-        'Muharram',
-        'Safar',
-        'Rabi Al-Awwal',
-        'Rabi Al-Thani',
-        'Jumada Al-Awwal',
-        'Jumada Al-Thani',
-        'Rajab',
-        'Shaaban',
-        'Ramadan',
-        'Shawwal',
-        'Dhul-Qi’dah',
-        'Dhul-Hijjah'
-    ]
-};
-function getGregorianMonthName(lang, month) {
-    return MONTHS_GREGORIAN[lang][month - 1] || '';
-}
-function getHijriMonthName(lang, month) {
-    return MONTHS_HIJRI[lang][month - 1] || '';
-}
-function getWeekdayName(lang, weekday) {
-    return WEEKDAYS[lang][weekday - 1];
-}
-
-class IslamicI18n extends NgbDatepickerI18n {
-    getMonthShortName(month) {
-        return MONTHS_HIJRI.ar[month - 1];
-    }
-    getMonthFullName(month) {
-        return MONTHS_HIJRI.ar[month - 1];
-    }
-    getWeekdayLabel(weekday) {
-        return WEEKDAYS.ar[weekday - 1];
-    }
-    getWeekdayShortName(weekday) {
-        return WEEKDAYS.ar[weekday - 1];
-    }
-    getDayAriaLabel(date) {
-        return `${date.day}-${date.month}-${date.year}`;
-    }
-    getYearNumerals(year) {
-        return String(year);
-    }
-    getWeekNumerals(weekNumber) {
-        return String(weekNumber);
-    }
-    getDayNumerals(date) {
-        return String(date.day);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n, decorators: [{
-            type: Injectable
-        }] });
-class HijriEnglishI18n extends NgbDatepickerI18n {
-    getMonthShortName(month) {
-        return MONTHS_HIJRI.en[month - 1].substring(0, 3);
-    }
-    getMonthFullName(month) {
-        return MONTHS_HIJRI.en[month - 1];
-    }
-    getWeekdayLabel(weekday) {
-        return WEEKDAYS.en[weekday - 1];
-    }
-    getWeekdayShortName(weekday) {
-        return WEEKDAYS.en[weekday - 1];
-    }
-    getDayAriaLabel(date) {
-        return `${date.day}-${date.month}-${date.year}`;
+class FileManagementComponent extends BaseInputComponent {
+    // Inputs
+    existingFiles = input([], ...(ngDevMode ? [{ debugName: "existingFiles" }] : []));
+    acceptedTypes = input('*', ...(ngDevMode ? [{ debugName: "acceptedTypes" }] : []));
+    maxFileSize = input(10485760, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : [])); //250 MB
+    maxConcurrentUploads = input(3, ...(ngDevMode ? [{ debugName: "maxConcurrentUploads" }] : []));
+    showTable = input(true, ...(ngDevMode ? [{ debugName: "showTable" }] : []));
+    showDropZone = input(true, ...(ngDevMode ? [{ debugName: "showDropZone" }] : []));
+    allowPreview = input(true, ...(ngDevMode ? [{ debugName: "allowPreview" }] : []));
+    permissonKey = input('', ...(ngDevMode ? [{ debugName: "permissonKey" }] : []));
+    allowedActions = input([], ...(ngDevMode ? [{ debugName: "allowedActions" }] : []));
+    uploadedFile = signal([], ...(ngDevMode ? [{ debugName: "uploadedFile" }] : []));
+    // Outputs
+    filesUploaded = new EventEmitter();
+    fileDeleted = new EventEmitter();
+    filePreview = new EventEmitter();
+    fileDownload = new EventEmitter();
+    uploadError = new EventEmitter();
+    newFilesChange = new EventEmitter();
+    fileInput;
+    // State - separate new uploads from existing files
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
+    newFiles = signal([], ...(ngDevMode ? [{ debugName: "newFiles" }] : [])); // Files being uploaded or newly uploaded
+    uploadedResponses = [];
+    // Combined files list for the table (existing + new)
+    allFiles = computed(() => {
+        const existing = this.existingFiles().map((f) => ({
+            ...f,
+            status: undefined, // Don't show status for existing files
+            isNew: false,
+        }));
+        const newOnes = this.newFiles();
+        return [...newOnes, ...existing];
+    }, ...(ngDevMode ? [{ debugName: "allFiles" }] : []));
+    // Get only successfully uploaded new file IDs
+    uploadedNewFileIds = computed(() => {
+        return this.newFiles()
+            .filter((f) => f.status === UploadStatus.SUCCESS && f.id && !f.id.startsWith('temp-'))
+            .map((f) => f.id);
+    }, ...(ngDevMode ? [{ debugName: "uploadedNewFileIds" }] : []));
+    // Formatted accepted file types for display
+    formattedAcceptedTypes = computed(() => {
+        const accepted = this.acceptedTypes();
+        if (accepted === '*' || accepted === '*/*')
+            return '';
+        return accepted
+            .split(',')
+            .map((type) => type.trim().replace('.', '').toUpperCase())
+            .join(', ');
+    }, ...(ngDevMode ? [{ debugName: "formattedAcceptedTypes" }] : []));
+    // Table configuration
+    // Drag & Drop handlers
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(true);
     }
-    getYearNumerals(year) {
-        return String(year);
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
     }
-    getWeekNumerals(weekNumber) {
-        return String(weekNumber);
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        const droppedFiles = event.dataTransfer?.files;
+        if (droppedFiles) {
+            this.handleFiles(Array.from(droppedFiles));
+        }
     }
-    getDayNumerals(date) {
-        return String(date.day);
+    // Browse button handler
+    onBrowseClick() {
+        this.fileInput.nativeElement.click();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n, decorators: [{
-            type: Injectable
-        }] });
-class DynamicHijriI18n extends NgbDatepickerI18n {
-    currentLang = 'ar';
-    arabicI18n = new IslamicI18n();
-    englishI18n = new HijriEnglishI18n();
-    setLanguage(lang) {
-        this.currentLang = lang;
+    onFileInputChange(event) {
+        const input = event.target;
+        if (input.files) {
+            this.handleFiles(Array.from(input.files));
+            // Reset input to allow selecting the same file again
+            input.value = '';
+        }
     }
-    get activeI18n() {
-        return this.currentLang === 'ar' ? this.arabicI18n : this.englishI18n;
+    // Public method to trigger file selection from parent
+    triggerFileInput() {
+        this.fileInput?.nativeElement?.click();
     }
-    getMonthShortName(month) {
-        return this.activeI18n.getMonthShortName(month);
+    // Public method to append file selection from parent
+    appendFileFromParent(file) {
+        this.handleFiles([file]);
     }
-    getMonthFullName(month) {
-        return this.activeI18n.getMonthFullName(month);
+    // Public method to upload files programmatically from parent
+    uploadFilesFromParent(files) {
+        this.handleFiles(files);
     }
-    getWeekdayLabel(weekday) {
-        return this.activeI18n.getWeekdayLabel(weekday);
+    // Public method to get new uploaded file IDs
+    getUploadedFileIds() {
+        return this.uploadedNewFileIds();
     }
-    getWeekdayShortName(weekday) {
-        return this.activeI18n.getWeekdayShortName(weekday);
+    // Public method to clear new files (after save)
+    clearNewFiles() {
+        this.newFiles.set([]);
+        this.uploadedResponses = [];
     }
-    getDayAriaLabel(date) {
-        return this.activeI18n.getDayAriaLabel(date);
+    // Public method to remove a new file by ID
+    removeNewFile(fileId) {
+        this.newFiles.update((files) => files.filter((f) => f.id !== fileId));
     }
-    getYearNumerals(year) {
-        return this.activeI18n.getYearNumerals(year);
+    // Check if there are pending/uploading files
+    // File handling
+    handleFiles(filesToProcess) {
+        const validFiles = [];
+        for (const file of filesToProcess) {
+            // Validate file size
+            if (file.size > this.maxFileSize()) {
+                this.uploadError.emit({
+                    file,
+                    error: `File ${file.name} exceeds maximum size of ${this.formatFileSize(this.maxFileSize())}`,
+                });
+                continue;
+            }
+            // Validate file type
+            // if (!this.isValidFileType(file)) {
+            //   this.uploadError.emit({
+            //     file,
+            //     error: `File type not allowed: ${file.type}`,
+            //   });
+            //   continue;
+            // }
+            validFiles.push(file);
+        }
+        if (validFiles.length > 0) {
+            // this.uploadFiles(validFiles);
+            this.uploadedFile.set(validFiles);
+            this.filesUploaded.emit(validFiles);
+            console.log('uploadedFile', this.uploadedFile());
+        }
     }
-    getWeekNumerals(weekNumber) {
-        return this.activeI18n.getWeekNumerals(weekNumber);
+    deleteFile() {
+        this.uploadedFile.set([]);
+        this.filesUploaded.emit([]);
     }
-    getDayNumerals(date) {
-        return this.activeI18n.getDayNumerals(date);
+    isValidFileType(file) {
+        const accepted = this.acceptedTypes();
+        if (accepted === '*' || accepted === '*/*')
+            return true;
+        const acceptedTypes = accepted.split(',').map((t) => t.trim().toLowerCase());
+        const fileType = file.type.toLowerCase();
+        const fileExt = '.' + file.name.split('.').pop()?.toLowerCase();
+        return acceptedTypes.some((type) => {
+            if (type.startsWith('.')) {
+                return fileExt === type;
+            }
+            if (type.endsWith('/*')) {
+                return fileType.startsWith(type.replace('/*', '/'));
+            }
+            return fileType === type;
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n, decorators: [{
-            type: Injectable
-        }] });
-
-class HijriCalendarComponent {
-    i18n;
-    cdr;
-    model;
-    dateSelected = new EventEmitter();
-    language = 'en';
-    renderer = inject(Renderer2);
-    startDate;
-    calendar = new NgbCalendarIslamicUmalqura();
-    constructor(i18n, cdr) {
-        this.i18n = i18n;
-        this.cdr = cdr;
+    updateFileFromAttachment(attachment) {
+        this.newFiles.update((currentFiles) => {
+            return currentFiles.map((file) => {
+                // Match by file name and size
+                if (file.fileName === attachment.nameFile && file.size === attachment.size) {
+                    const updatedFile = {
+                        ...file,
+                        progress: attachment.status?.percentage ?? 0,
+                        error: attachment.errorMessage,
+                    };
+                    // If upload succeeded, update with response data from serverResponse
+                    if (attachment.uploadStatus === UploadStatus.SUCCESS && attachment.serverResponse) {
+                        const serverData = attachment.serverResponse;
+                        const responseFile = {
+                            id: attachment.id || serverData?.id || file.id,
+                            fileName: serverData?.fileName || attachment.nameFile,
+                            size: serverData?.size || attachment.size,
+                            mimeType: serverData?.mimeType || file.mimeType,
+                        };
+                        this.uploadedResponses.push(responseFile);
+                        return {
+                            ...updatedFile,
+                            id: responseFile.id,
+                        };
+                    }
+                    return updatedFile;
+                }
+                return file;
+            });
+        });
     }
-    ngOnChanges(changes) {
-        if (changes['model'] && changes['model'].currentValue) {
-            this.startDate = { ...changes['model'].currentValue };
-            console.log('Hijri navigating to:', this.startDate);
-        }
-        if (changes['language'] && this.i18n instanceof DynamicHijriI18n) {
-            this.i18n.setLanguage(this.language);
-            this.cdr.detectChanges(); // Force re-render to update labels
+    // Actions
+    onDeleteFile(file) {
+        const isNewFile = file.isNew;
+        this.fileDeleted.emit({ fileId: file.id, isNew: !!isNewFile });
+        if (isNewFile) {
+            // Remove from newFiles list immediately for new uploads
+            this.newFiles.update((files) => files.filter((f) => f.id !== file.id));
         }
     }
-    ngAfterViewInit() {
-        const buttons = document.querySelectorAll('.ngb-dp-arrow-btn');
-        buttons.forEach(btn => {
-            this.renderer.removeAttribute(btn, 'title');
-        });
+    onPreviewFile(file) {
+        this.filePreview.emit(file);
     }
-    onDateChange(date) {
-        this.model = date;
-        this.startDate = { ...date };
+    removeFileFromList(fileId) {
+        this.newFiles.update((current) => current.filter((f) => f.id !== fileId));
     }
-    isToday(date) {
-        const today = this.calendar.getToday();
-        return date.year === today.year &&
-            date.month === today.month &&
-            date.day === today.day;
+    generateTempId(file) {
+        return `temp-${file.name}-${file.size}-${Date.now()}`;
     }
-    isDisabled = () => false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriCalendarComponent, deps: [{ token: i1$6.NgbDatepickerI18n }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriCalendarComponent, isStandalone: true, selector: "app-hijri-calendar", inputs: { model: "model", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
-            { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
-            { provide: NgbDatepickerI18n, useClass: DynamicHijriI18n }
-        ], usesOnChanges: true, ngImport: i0, template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n  [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n  [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n  <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n    [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n    {{ date.day }}\r\n  </span>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1$6.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        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: 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: HijriCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileManagementComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-hijri-calendar", standalone: true, imports: [NgbDatepickerModule, FormsModule], providers: [
-                        { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
-                        { provide: NgbDatepickerI18n, useClass: DynamicHijriI18n }
-                    ], template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n  [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n  [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n  <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n    [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n    {{ date.day }}\r\n  </span>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: () => [{ type: i1$6.NgbDatepickerI18n }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
-                type: Input
-            }], dateSelected: [{
+            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"] }]
+        }], 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
-            }], language: [{
-                type: Input
+            }], fileDeleted: [{
+                type: Output
+            }], filePreview: [{
+                type: Output
+            }], fileDownload: [{
+                type: Output
+            }], uploadError: [{
+                type: Output
+            }], newFilesChange: [{
+                type: Output
+            }], fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
             }] } });
 
-class GregorianArabicI18n extends NgbDatepickerI18n {
-    getMonthShortName(month) {
-        return MONTHS_GREGORIAN.ar[month - 1];
-    }
-    getMonthFullName(month) {
-        return MONTHS_GREGORIAN.ar[month - 1];
-    }
-    getWeekdayLabel(weekday) {
-        return WEEKDAYS.ar[weekday - 1];
+class FormUtils {
+    static getFormControl(controlName, form) {
+        if (!form)
+            throw new Error(`Form is not initialized.`);
+        const formControl = form.get(controlName);
+        if (!formControl)
+            throw new Error(`There's no form control with given name. '${controlName}'`);
+        return formControl;
     }
-    getWeekdayShortName(weekday) {
-        return WEEKDAYS.ar[weekday - 1];
+}
+
+var BasicErrorKeysEnum;
+(function (BasicErrorKeysEnum) {
+    BasicErrorKeysEnum["required"] = "REQUIRED";
+    BasicErrorKeysEnum["email"] = "EMAIL";
+    BasicErrorKeysEnum["pattern"] = "PATTERN";
+    BasicErrorKeysEnum["invalidArFormat"] = "INVALID_AR_FORMAT";
+    BasicErrorKeysEnum["invalidLink"] = "INVALID_LINK";
+    BasicErrorKeysEnum["endDateBeforeStartDate"] = "END_DATE_BEFORE_START_DATE";
+    BasicErrorKeysEnum["startDateEqualsEndDate"] = "START_DATE_EQUALS_END_DATE";
+    BasicErrorKeysEnum["endTimeBeforeStartTime"] = "END_TIME_BEFORE_START_TIME";
+    BasicErrorKeysEnum["startTimeEqualsEndTime"] = "START_TIME_EQUALS_END_TIME";
+    BasicErrorKeysEnum["integer"] = "INTEGER";
+    BasicErrorKeysEnum["positiveNumber"] = "POSITIVE_NUMBER";
+    BasicErrorKeysEnum["fileSelected"] = "FILE_SELECTED";
+    BasicErrorKeysEnum["default"] = "DEFAULT";
+    BasicErrorKeysEnum["numbersOnly"] = "NUMBERS_ONLY";
+})(BasicErrorKeysEnum || (BasicErrorKeysEnum = {}));
+var ErrorsWithValuesKeysEnum;
+(function (ErrorsWithValuesKeysEnum) {
+    ErrorsWithValuesKeysEnum["minlength"] = "MIN_LENGTH";
+    ErrorsWithValuesKeysEnum["maxlength"] = "MAX_LENGTH";
+    ErrorsWithValuesKeysEnum["min"] = "MIN";
+    ErrorsWithValuesKeysEnum["max"] = "MAX";
+    ErrorsWithValuesKeysEnum["maxSize"] = "MAX_SIZE";
+    ErrorsWithValuesKeysEnum["maxFiles"] = "MAX_FILES";
+    ErrorsWithValuesKeysEnum["allowedTypes"] = "ALLOWED_TYPES";
+})(ErrorsWithValuesKeysEnum || (ErrorsWithValuesKeysEnum = {}));
+
+class FormValidationService {
+    translate = inject(TranslateService);
+    getTranslation(key, interpolateParams) {
+        return this.translate.instant(`VALIDATION.${key}`, interpolateParams);
     }
-    getDayAriaLabel(date) {
-        return `${date.day}-${date.month}-${date.year}`;
+    getErrorMessage(errorKey, errorValue) {
+        if (this.isBasicErrorKey(errorKey)) {
+            return this.getTranslation(BasicErrorKeysEnum[errorKey]);
+        }
+        if (this.isErrorWithValueKey(errorKey)) {
+            return this.getErrorWithValueMessage(errorKey, errorValue);
+        }
+        return this.getTranslation(BasicErrorKeysEnum.default);
     }
-    getYearNumerals(year) {
-        return String(year);
+    // Basic error keys are the keys that don't have any values to interpolate. like required, email, etc.
+    isBasicErrorKey(key) {
+        return Object.keys(BasicErrorKeysEnum).includes(key);
     }
-    getWeekNumerals(weekNumber) {
-        return String(weekNumber);
+    // Error keys with values are the keys that have values to interpolate. like minlength, maxlength, etc.
+    isErrorWithValueKey(key) {
+        return Object.keys(ErrorsWithValuesKeysEnum).includes(key);
     }
-    getDayNumerals(date) {
-        return String(date.day);
+    getErrorWithValueMessage(errorKey, errorValue) {
+        const messages = {
+            minlength: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.minlength, {
+                requiredLength: val?.requiredLength,
+                actualLength: val?.actualLength,
+            }),
+            maxlength: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxlength, {
+                requiredLength: val?.requiredLength,
+                actualLength: val?.actualLength,
+            }),
+            min: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.min, { min: val?.min }),
+            max: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.max, { max: val?.max }),
+            maxSize: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxSize, { size: val?.requiredLength }),
+            maxFiles: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.maxFiles, { size: val?.requiredLength }),
+            allowedTypes: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.allowedTypes, { types: val?.join(', ') }),
+        };
+        return messages[errorKey](errorValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormValidationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
-class GregorianEnglishI18n extends NgbDatepickerI18n {
-    getMonthShortName(month) {
-        return MONTHS_GREGORIAN.en[month - 1].substring(0, 3);
-    }
-    getMonthFullName(month) {
-        return MONTHS_GREGORIAN.en[month - 1];
-    }
-    getWeekdayLabel(weekday) {
-        return WEEKDAYS.en[weekday - 1];
-    }
-    getWeekdayShortName(weekday) {
-        return WEEKDAYS.en[weekday - 1];
-    }
-    getDayAriaLabel(date) {
-        return `${date.day}-${date.month}-${date.year}`;
+
+class ValidationErrorsPipe {
+    formValidationService = inject(FormValidationService);
+    // allowed keys here to handle errors in case of cross-validators like startDate and endDate validators,
+    // we pass this custom key to handle the error messages only for the allowed keys
+    transform(errors, allowedKeys) {
+        if (!errors)
+            return [];
+        return Object.keys(errors)
+            .filter((errorKey) => !allowedKeys || allowedKeys.includes(errorKey)) // Filter errors if allowedKeys are provided
+            .map((errorKey) => {
+            return this.formValidationService.getErrorMessage(errorKey, errors[errorKey]);
+        });
     }
-    getYearNumerals(year) {
-        return String(year);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, isStandalone: true, name: "validationErrors" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ValidationErrorsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "validationErrors",
+                    standalone: true,
+                    pure: true
+                }]
+        }] });
+
+function numbersOnlyValidator(control) {
+    const value = control.value;
+    if (value === null || value === undefined || value === '') {
+        return null;
     }
-    getWeekNumerals(weekNumber) {
-        return String(weekNumber);
+    const isNumbersOnly = /^[0-9]+$/.test(value);
+    return isNumbersOnly ? null : { numbersOnly: true };
+}
+
+class AutoCompleteComponent extends BaseInputComponent {
+    selectedItemTemplate = null;
+    // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+    onSearch = new EventEmitter();
+    selectOption = new EventEmitter();
+    items = [];
+    minLengthToSearch = 3;
+    delay = 300; // default value
+    basicInput;
+    typeAhead = false;
+    variant = 'over';
+    constructor() {
+        super();
     }
-    getDayNumerals(date) {
-        return String(date.day);
+    search(event) {
+        this.onSearch.emit(event.query);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n, decorators: [{
-            type: Injectable
-        }] });
-// ============ Dynamic I18N Factory ============
-class DynamicGregorianI18n extends NgbDatepickerI18n {
-    currentLang = 'en';
-    arabicI18n = new GregorianArabicI18n();
-    englishI18n = new GregorianEnglishI18n();
-    setLanguage(lang) {
-        this.currentLang = lang;
+    onSelect(event) {
+        this.selectOption.emit(event);
     }
-    get activeI18n() {
-        return this.currentLang === 'ar' ? this.arabicI18n : this.englishI18n;
+    onKeyDown(event) {
+        if (!['Enter', 'Tab', ' '].includes(event.key))
+            return;
+        event.preventDefault();
+        const input = event.target;
+        this.addValueFromInput(input);
     }
-    getMonthShortName(month) {
-        return this.activeI18n.getMonthShortName(month);
+    onBlur(event) {
+        const input = event.target;
+        this.addValueFromInput(input);
     }
-    getMonthFullName(month) {
-        return this.activeI18n.getMonthFullName(month);
+    addValueFromInput(input) {
+        const value = input.value?.trim();
+        if (!value)
+            return;
+        const current = this.control.value ?? [];
+        if (!current.includes(value)) {
+            this.control.setValue([...current, value]);
+            this.control.markAsDirty();
+        }
+        input.value = '';
     }
-    getWeekdayLabel(weekday) {
-        return this.activeI18n.getWeekdayLabel(weekday);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AutoCompleteComponent, isStandalone: true, selector: "stc-auto-complete", inputs: { selectedItemTemplate: "selectedItemTemplate", items: "items", minLengthToSearch: "minLengthToSearch", delay: "delay", basicInput: "basicInput", typeAhead: "typeAhead", variant: "variant" }, outputs: { onSearch: "onSearch", selectOption: "selectOption" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  @if (!required) {\r\n  <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n  }\r\n  <p-floatlabel [variant]=\"variant\" class=\"autoComplete\">\r\n    <p-auto-complete (keydown)=\"onKeyDown($event)\"  (onBlur)=\"onBlur($event)\" (completeMethod)=\"search($event)\" (onSelect)=\"onSelect($event)\" [delay]=\"delay\"\r\n      [disabled]=\"disabled\" [formControl]=\"control\" [id]=\"inputId\" fluid [typeahead]=\"typeAhead\"\r\n      [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n      [minLength]=\"minLengthToSearch\" [name]=\"name\" [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n      [placeholder]=\"placeholder\" [styleClass]=\"'w-full'\" multiple [suggestions]=\"items\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        @if (selectedItemTemplate) {\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n        }\r\n      </ng-template>\r\n    </p-auto-complete>\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"isInvalid\">*</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\r\n</div>\r\n", styles: [".text-required{color:red}.p-error{color:#dc2626}.autoComplete .p-floatlabel-in{height:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AutoCompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'stc-auto-complete', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        AutoComplete,
+                        PrimeTemplate,
+                        NgIf,
+                        NgTemplateOutlet,
+                        NgClass,
+                        JsonPipe,
+                        ValidationErrorsPipe,
+                        TranslatePipe,
+                        FloatLabel,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n  @if (!required) {\r\n  <span class=\"absolute top-[6px] left-0 text-[10px] text-gray-400\">{{'forms.config.optional' | translate}}</span>\r\n  }\r\n  <p-floatlabel [variant]=\"variant\" class=\"autoComplete\">\r\n    <p-auto-complete (keydown)=\"onKeyDown($event)\"  (onBlur)=\"onBlur($event)\" (completeMethod)=\"search($event)\" (onSelect)=\"onSelect($event)\" [delay]=\"delay\"\r\n      [disabled]=\"disabled\" [formControl]=\"control\" [id]=\"inputId\" fluid [typeahead]=\"typeAhead\"\r\n      [inputStyleClass]=\"'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')\"\r\n      [minLength]=\"minLengthToSearch\" [name]=\"name\" [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid}\"\r\n      [placeholder]=\"placeholder\" [styleClass]=\"'w-full'\" multiple [suggestions]=\"items\">\r\n      <ng-template let-item pTemplate=\"item\">\r\n        @if (selectedItemTemplate) {\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n        }\r\n      </ng-template>\r\n    </p-auto-complete>\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"isInvalid\">*</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\r\n</div>\r\n", styles: [".text-required{color:red}.p-error{color:#dc2626}.autoComplete .p-floatlabel-in{height:auto!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
+                type: Input
+            }], onSearch: [{
+                type: Output
+            }], selectOption: [{
+                type: Output
+            }], items: [{
+                type: Input
+            }], minLengthToSearch: [{
+                type: Input
+            }], delay: [{
+                type: Input
+            }], basicInput: [{
+                type: Input
+            }], typeAhead: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }] } });
+
+class DatePickerComponent extends BaseInputComponent {
+    showIcon = false;
+    showClear = false;
+    basicInput;
+    isTimeOnly = false;
+    minDate;
+    maxDate;
+    hourFormat = '12';
+    nowTime = new Date();
+    selectionMode = 'single';
+    onAfterClearDate = new EventEmitter();
+    variant = 'over';
+    withoutTime = false;
+    innerControl = new FormControl(null);
+    constructor() {
+        super();
     }
-    getWeekdayShortName(weekday) {
-        return this.activeI18n.getWeekdayShortName(weekday);
+    ngOnInit() {
+        if (typeof this.control?.value === 'string') {
+            const date = new Date(this.control.value);
+            if (date) {
+                this.innerControl.setValue(date, { emitEvent: false });
+            }
+        }
+        this.control.valueChanges.subscribe((value) => {
+            if (!value)
+                this.innerControl.reset();
+        });
     }
-    getDayAriaLabel(date) {
-        return this.activeI18n.getDayAriaLabel(date);
+    selectCurrentTime(e) {
+        if (this.withoutTime) {
+            const d = new Date();
+            this.control.setValue(d.toISOString().split('T')[0]);
+            return;
+        }
+        this.control.setValue(this.nowTime);
     }
-    getYearNumerals(year) {
-        return this.activeI18n.getYearNumerals(year);
+    clearButtonClick(e) {
+        this.control.setValue(null);
     }
-    getWeekNumerals(weekNumber) {
-        return this.activeI18n.getWeekNumerals(weekNumber);
+    afterClearDate() {
+        this.control.reset();
+        this.onAfterClearDate.emit();
     }
-    getDayNumerals(date) {
-        return this.activeI18n.getDayNumerals(date);
+    onDateChange(value) {
+        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: DynamicGregorianI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicGregorianI18n });
+    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 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: DynamicGregorianI18n, decorators: [{
-            type: Injectable
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'stc-date-picker', standalone: true, imports: [
+                        FormsModule,
+                        DatePicker,
+                        ReactiveFormsModule,
+                        NgClass,
+                        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 input{width:100%}stc-date-picker.w-full .p-datepicker{@apply block;}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { showIcon: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], basicInput: [{
+                type: Input
+            }], isTimeOnly: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], hourFormat: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], onAfterClearDate: [{
+                type: Output
+            }], variant: [{
+                type: Input
+            }], withoutTime: [{
+                type: Input
+            }] } });
 
-class GregorianCalendarComponent {
-    model;
-    dateSelected = new EventEmitter();
-    renderer = inject(Renderer2);
-    language = 'en';
-    startDate;
-    calendar = new NgbCalendarGregorian();
-    i18n = inject(NgbDatepickerI18n);
-    cdr = inject(ChangeDetectorRef);
-    calendarKey = 0;
-    ngOnChanges(changes) {
-        if (changes['model'] && changes['model'].currentValue) {
-            this.startDate = { ...changes['model'].currentValue };
-        }
-        if (changes['language'] && this.i18n instanceof DynamicGregorianI18n) {
-            this.i18n.setLanguage(this.language);
-            this.calendarKey++; // Increment to force recreation
-        }
-    }
-    ngAfterViewInit() {
-        const buttons = document.querySelectorAll('.ngb-dp-arrow-btn');
-        buttons.forEach(btn => {
-            this.renderer.removeAttribute(btn, 'title');
-        });
+class InputComponent extends BaseInputComponent {
+    type = 'text';
+    contentType = 'text';
+    size = "small";
+    prefix;
+    rows = 2;
+    cols = 20;
+    autoResize = false;
+    basicInput;
+    noStyle;
+    canClear;
+    hideOptionalLabel;
+    inputDirection = 'inherit';
+    variant = 'over';
+    defaultColor = '#DFE0E6';
+    iconClass;
+    iconPosition = 'left';
+    constructor() {
+        super();
     }
-    onDateChange(date) {
-        this.model = date;
-        this.startDate = { ...date };
+    clearInput() {
+        this.control.reset();
     }
-    isToday(date) {
-        const today = this.calendar.getToday();
-        return date.year === today.year &&
-            date.month === today.month &&
-            date.day === today.day;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: InputComponent, isStandalone: true, selector: "stc-input", inputs: { type: "type", contentType: "contentType", size: "size", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", canClear: "canClear", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant", defaultColor: "defaultColor", iconClass: "iconClass", iconPosition: "iconPosition" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  <!-- input text align will be handled according to lang when implemented -->\r\n\r\n  @switch (type) {\r\n  @case ('textarea') {\r\n  @if (label) {\r\n  <div class=\"flex items-center justify-between gap-2\">\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n      <!-- @else if (!hideOptionalLabel) {\r\n        <span span class=\"optional-label\">{{'forms.config.optional' | translate}}</span>\r\n      } -->\r\n    </label>\r\n    <ng-content></ng-content>\r\n  </div>\r\n  }\r\n  <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\" [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n    [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\">\r\n  </textarea>\r\n  }\r\n  @case ('withIcon') {\r\n  <p-iconfield class=\"filter-input\">\r\n    <p-inputicon>\r\n      <i [class]=\"iconClass\"></i>\r\n    </p-inputicon>\r\n    <input pInputText [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\"\r\n      [class]=\"\r\n          'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n    @if (canClear && control.value) {\r\n    <p-inputIcon (click)=\"clearInput()\">\r\n      <i class=\"pi pi-times cursor-pointer text-sm text-gray-400 hover:text-gray-600\"></i>\r\n      </p-inputIcon>\r\n    }\r\n\r\n  </p-iconfield>\r\n  }\r\n  @default {\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n    <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\" [pSize]=\"size\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n      class=\"w-full\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\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 (prefix) {\r\n  <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n    {{ prefix }}\r\n  </span>\r\n  }\r\n\r\n\r\n  }\r\n  }\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>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}textarea,.p-select,input{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover,input:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus,input:not(.p-disabled).p-focus,input:not(.p-disabled).p-focus:hover,input:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.text-required{color:red}.p-error{color:#dc2626}.optional-label{@apply text-[10px] text-gray-400;margin-inline-start:4px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'stc-input', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        InputText,
+                        Textarea,
+                        ValidationErrorsPipe,
+                        NgClass,
+                        NgStyle,
+                        TranslatePipe,
+                        FloatLabelModule,
+                        InputIcon,
+                        IconField,
+                    ], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  <!-- input text align will be handled according to lang when implemented -->\r\n\r\n  @switch (type) {\r\n  @case ('textarea') {\r\n  @if (label) {\r\n  <div class=\"flex items-center justify-between gap-2\">\r\n    <label [for]=\"inputId\">\r\n      {{ label }}\r\n      @if (required) {\r\n      <span [class.text-required]=\"required\">*</span>\r\n      }\r\n      <!-- @else if (!hideOptionalLabel) {\r\n        <span span class=\"optional-label\">{{'forms.config.optional' | translate}}</span>\r\n      } -->\r\n    </label>\r\n    <ng-content></ng-content>\r\n  </div>\r\n  }\r\n  <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n    [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\" [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \"\r\n    [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\">\r\n  </textarea>\r\n  }\r\n  @case ('withIcon') {\r\n  <p-iconfield class=\"filter-input\">\r\n    <p-inputicon>\r\n      <i [class]=\"iconClass\"></i>\r\n    </p-inputicon>\r\n    <input pInputText [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\"\r\n      [class]=\"\r\n          'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n    @if (canClear && control.value) {\r\n    <p-inputIcon (click)=\"clearInput()\">\r\n      <i class=\"pi pi-times cursor-pointer text-sm text-gray-400 hover:text-gray-600\"></i>\r\n      </p-inputIcon>\r\n    }\r\n\r\n  </p-iconfield>\r\n  }\r\n  @default {\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n    <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\" [pSize]=\"size\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n      class=\"w-full\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\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 (prefix) {\r\n  <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n    {{ prefix }}\r\n  </span>\r\n  }\r\n\r\n\r\n  }\r\n  }\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>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}textarea,.p-select,input{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover,input:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus,input:not(.p-disabled).p-focus,input:not(.p-disabled).p-focus:hover,input:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.text-required{color:red}.p-error{color:#dc2626}.optional-label{@apply text-[10px] text-gray-400;margin-inline-start:4px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], contentType: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], autoResize: [{
+                type: Input
+            }], basicInput: [{
+                type: Input
+            }], noStyle: [{
+                type: Input
+            }], canClear: [{
+                type: Input
+            }], hideOptionalLabel: [{
+                type: Input
+            }], inputDirection: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], defaultColor: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }] } });
+
+class SelectButtonComponent extends BaseInputComponent {
+    onChange = new EventEmitter();
+    options;
+    title;
+    changeValue(e) {
+        this.onChange.emit(e.value);
     }
-    isDisabled = () => false;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: GregorianCalendarComponent, isStandalone: true, selector: "app-gregorian-calendar", inputs: { model: "model", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
-            { provide: NgbCalendar, useClass: NgbCalendarGregorian },
-            { provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
-        ], usesOnChanges: true, ngImport: i0, template: "@for(item of [calendarKey]; track item) {\r\n  <ngb-datepicker #dp\r\n    [class.rtl]=\"language === 'ar'\"\r\n    [class.ltr]=\"language === 'en'\"\r\n    [ngModel]=\"model\"\r\n    [startDate]=\"startDate\"\r\n    (ngModelChange)=\"onDateChange($event)\"\r\n    (dateSelect)=\"dateSelected.emit($event)\"\r\n    [dayTemplate]=\"dayTemplate\"\r\n    [markDisabled]=\"isDisabled\">\r\n  </ngb-datepicker>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n    <span class=\"custom-day\"\r\n      [class.today]=\"isToday(date)\"\r\n      [class.selected]=\"selected\"\r\n      [class.outside]=\"date.month !== currentMonth\"\r\n      [class.disabled]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1$6.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SelectButtonComponent, isStandalone: true, selector: "stc-select-button", inputs: { options: "options", title: "title" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-0 items-end\">\r\n  <div class=\"col-span-12\">\r\n    <div class=\"text-[14px] font-bold mb-1\">{{ title }}</div>\r\n    <div class=\"grid w-100 bg-gray-100 rounded drop-shadow-basic\">\r\n      <p-selectButton [disabled]=\"disabled\"\r\n                      [options]=\"options\"\r\n                      [formControl]=\"control\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                      class=\"rounded\"\r\n                      [styleClass]=\"'full-width'\"\r\n                      (onChange)=\"changeValue($event)\">\r\n        <ng-template let-item class=\"flex w-100\">\r\n          <div class=\"col-span-4\">\r\n            <span>{{ item.value }}</span>\r\n          </div>\r\n        </ng-template>\r\n      </p-selectButton>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i2$2.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-gregorian-calendar", standalone: true, imports: [NgbDatepickerModule, FormsModule], providers: [
-                        { provide: NgbCalendar, useClass: NgbCalendarGregorian },
-                        { provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
-                    ], encapsulation: ViewEncapsulation.None, template: "@for(item of [calendarKey]; track item) {\r\n  <ngb-datepicker #dp\r\n    [class.rtl]=\"language === 'ar'\"\r\n    [class.ltr]=\"language === 'en'\"\r\n    [ngModel]=\"model\"\r\n    [startDate]=\"startDate\"\r\n    (ngModelChange)=\"onDateChange($event)\"\r\n    (dateSelect)=\"dateSelected.emit($event)\"\r\n    [dayTemplate]=\"dayTemplate\"\r\n    [markDisabled]=\"isDisabled\">\r\n  </ngb-datepicker>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n    <span class=\"custom-day\"\r\n      [class.today]=\"isToday(date)\"\r\n      [class.selected]=\"selected\"\r\n      [class.outside]=\"date.month !== currentMonth\"\r\n      [class.disabled]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n}\r\n" }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], dateSelected: [{
+            args: [{ selector: "stc-select-button", standalone: true, imports: [ReactiveFormsModule, SelectButtonModule, FormsModule], template: "<div class=\"grid grid-cols-12 gap-x-4 gap-y-0 items-end\">\r\n  <div class=\"col-span-12\">\r\n    <div class=\"text-[14px] font-bold mb-1\">{{ title }}</div>\r\n    <div class=\"grid w-100 bg-gray-100 rounded drop-shadow-basic\">\r\n      <p-selectButton [disabled]=\"disabled\"\r\n                      [options]=\"options\"\r\n                      [formControl]=\"control\"\r\n                      optionLabel=\"label\"\r\n                      optionValue=\"value\"\r\n                      class=\"rounded\"\r\n                      [styleClass]=\"'full-width'\"\r\n                      (onChange)=\"changeValue($event)\">\r\n        <ng-template let-item class=\"flex w-100\">\r\n          <div class=\"col-span-4\">\r\n            <span>{{ item.value }}</span>\r\n          </div>\r\n        </ng-template>\r\n      </p-selectButton>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { onChange: [{
                 type: Output
-            }], language: [{
+            }], options: [{
+                type: Input
+            }], title: [{
                 type: Input
             }] } });
 
-class DatePickerSwitcherComponent extends BaseInputComponent {
-    type = 'text';
-    contentType = 'text';
-    size = "small";
-    prefix;
-    rows = 2;
-    cols = 20;
-    autoResize = true;
+class SelectComponent extends BaseInputComponent {
+    selectedItemTemplate = null;
+    optionTemplate = null;
+    options = [];
+    optionLabel;
+    optionValue;
+    emptyMessage;
+    checkmark = true;
+    showClear = false;
+    editable = false;
+    filter = false;
+    multiple = false;
+    filterBy;
+    selectAllLabel;
+    dataKey;
+    size = 'small';
+    selectedItemsLabel;
     basicInput;
-    noStyle;
-    hideOptionalLabel;
-    inputDirection = 'inherit';
     variant = 'over';
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    change = new EventEmitter();
+    clicked = new EventEmitter();
     defaultColor = '#DFE0E6';
-    formattedDate = '';
-    openCalender = new EventEmitter();
+    allSelectd = false;
     constructor() {
         super();
     }
-    ngOnChanges(changes) {
-        if (changes['formattedDate'] && changes['formattedDate'].currentValue) {
-            // Update the FormControl value if parent changes the formattedDate
-            this.control.setValue(changes['formattedDate'].currentValue, { emitEvent: false });
+    toggleAll(event) {
+        if (!event.checked) {
+            this.control.setValue([]);
+            return;
         }
+        const values = this.optionValue
+            ? this.options.map((o) => o[this.optionValue])
+            : this.options;
+        this.control.setValue([...values]);
     }
-    ngOnInit() {
-        this.control.setValue(this.formattedDate);
+    onMultiSelectClear() {
+        this.allSelectd = false;
     }
-    clearButtonClick(e) {
-        this.control.setValue(null);
+    onChange(e) {
+        this.change.emit(e);
     }
-    openCalendar(isOpen) {
-        this.openCalender.emit(isOpen);
+    onClick(event) {
+        this.clicked.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerSwitcherComponent, isStandalone: true, selector: "stc-date-picker-switcher", inputs: { type: "type", contentType: "contentType", size: "size", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant", defaultColor: "defaultColor", formattedDate: "formattedDate" }, outputs: { openCalender: "openCalender" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n    <p-floatlabel [variant]=\"variant\">\r\n    <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"true\" (focus)=\"openCalendar(true)\"\r\n      (click)=\"openCalendar(true)\" [pSize]=\"'small'\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" [disabled]=\"disabled\" [name]=\"name\" pInputText\r\n      class=\"w-full\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\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-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.my-custom-datepicker-panel{display:none!important}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DatePickerModule }, { 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectComponent, isStandalone: true, selector: "stc-select", inputs: { selectedItemTemplate: "selectedItemTemplate", optionTemplate: "optionTemplate", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", emptyMessage: "emptyMessage", checkmark: "checkmark", showClear: "showClear", editable: "editable", filter: "filter", multiple: "multiple", filterBy: "filterBy", selectAllLabel: "selectAllLabel", dataKey: "dataKey", size: "size", selectedItemsLabel: "selectedItemsLabel", basicInput: "basicInput", variant: "variant", defaultColor: "defaultColor" }, outputs: { change: "change", clicked: "clicked" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  @if(multiple) {\r\n  <p-floatLabel [variant]=\"variant\">\r\n\r\n    <p-multiselect [disabled]=\"disabled\" [filterBy]=\"filterBy\" [filter]=\"filter\" [formControl]=\"control\" [id]=\"inputId\"\r\n      [name]=\"name\" [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [optionLabel]=\"optionLabel\"\r\n      [optionValue]=\"optionValue\" [options]=\"options\" [showToggleAll]=\"false\" [placeholder]=\"placeholder\"\r\n      [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\" [readonly]=\"readonly\"\r\n      [showClear]=\"showClear\" (onClear)=\"onMultiSelectClear()\" class=\"w-full\" [size]=\"size\"\r\n      [selectedItemsLabel]=\"selectedItemsLabel || ('shared.Items_Selected'| translate: {count: '{0}'})\" [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" (onChange)=\"onChange($event)\" [ngClass]=\"{ 'basic-style': basicInput }\">\r\n\r\n      @if (selectAllLabel) {\r\n      <ng-template #filter>\r\n        <p-checkbox binary=\"true\" [(ngModel)]=\"allSelectd\" (onChange)=\"toggleAll($event)\" inputId=\"toggleAll\">\r\n        </p-checkbox>\r\n        <span>{{selectAllLabel}}</span>\r\n      </ng-template>\r\n      }\r\n\r\n      @if(optionTemplate){\r\n      <ng-template let-item #item>\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n      </ng-template>\r\n      }\r\n\r\n\r\n\r\n\r\n\r\n    </p-multiselect>\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\r\n  </p-floatLabel>\r\n\r\n  } @else {\r\n  <p-floatLabel [variant]=\"variant\">\r\n    <p-select [dataKey]=\"dataKey\" [checkmark]=\"checkmark\" [disabled]=\"disabled\" [editable]=\"editable\"\r\n      [filterBy]=\"filterBy\" [filter]=\"filter\" [formControl]=\"control\" [id]=\"inputId\" [name]=\"name\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n      [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\" [optionLabel]=\"optionLabel\"\r\n      [optionValue]=\"optionValue\" [options]=\"options\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n      [showClear]=\"showClear\" [size]=\"size\" class=\"w-full\" [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" (onChange)=\"onChange($event)\" (click)=\"clicked.emit($event)\" [ngClass]=\"{ 'basic-style': basicInput }\">\r\n\r\n      @if (optionTemplate) {\r\n      <ng-template let-item pTemplate=\"item\">\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n      </ng-template>\r\n      }\r\n      @if (selectedItemTemplate) {\r\n      <ng-template let-item pTemplate=\"selectedItem\">\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n      </ng-template>\r\n      }\r\n    </p-select>\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  }\r\n\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\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>", styles: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}.edit-search .p-select-label{padding:1rem 1rem 1rem 2.2rem!important}.edit-search .p-floatlabel>label{padding-inline-start:25px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2$3.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'stc-date-picker-switcher', standalone: true, imports: [
+            args: [{ selector: 'stc-select', standalone: true, imports: [
                         FormsModule,
+                        Select,
                         ReactiveFormsModule,
                         NgClass,
-                        InputText,
-                        DatePickerModule,
+                        NgTemplateOutlet,
+                        PrimeTemplate,
                         ValidationErrorsPipe,
-                        TranslatePipe,
+                        MultiSelectModule,
                         FloatLabelModule,
-                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n    <p-floatlabel [variant]=\"variant\">\r\n    <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"true\" (focus)=\"openCalendar(true)\"\r\n      (click)=\"openCalendar(true)\" [pSize]=\"'small'\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" [disabled]=\"disabled\" [name]=\"name\" pInputText\r\n      class=\"w-full\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\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-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.my-custom-datepicker-panel{display:none!important}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { type: [{
+                        TranslatePipe,
+                        CheckboxModule,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n  @if(multiple) {\r\n  <p-floatLabel [variant]=\"variant\">\r\n\r\n    <p-multiselect [disabled]=\"disabled\" [filterBy]=\"filterBy\" [filter]=\"filter\" [formControl]=\"control\" [id]=\"inputId\"\r\n      [name]=\"name\" [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [optionLabel]=\"optionLabel\"\r\n      [optionValue]=\"optionValue\" [options]=\"options\" [showToggleAll]=\"false\" [placeholder]=\"placeholder\"\r\n      [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\" [readonly]=\"readonly\"\r\n      [showClear]=\"showClear\" (onClear)=\"onMultiSelectClear()\" class=\"w-full\" [size]=\"size\"\r\n      [selectedItemsLabel]=\"selectedItemsLabel || ('shared.Items_Selected'| translate: {count: '{0}'})\" [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" (onChange)=\"onChange($event)\" [ngClass]=\"{ 'basic-style': basicInput }\">\r\n\r\n      @if (selectAllLabel) {\r\n      <ng-template #filter>\r\n        <p-checkbox binary=\"true\" [(ngModel)]=\"allSelectd\" (onChange)=\"toggleAll($event)\" inputId=\"toggleAll\">\r\n        </p-checkbox>\r\n        <span>{{selectAllLabel}}</span>\r\n      </ng-template>\r\n      }\r\n\r\n      @if(optionTemplate){\r\n      <ng-template let-item #item>\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n      </ng-template>\r\n      }\r\n\r\n\r\n\r\n\r\n\r\n    </p-multiselect>\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\r\n  </p-floatLabel>\r\n\r\n  } @else {\r\n  <p-floatLabel [variant]=\"variant\">\r\n    <p-select [dataKey]=\"dataKey\" [checkmark]=\"checkmark\" [disabled]=\"disabled\" [editable]=\"editable\"\r\n      [filterBy]=\"filterBy\" [filter]=\"filter\" [formControl]=\"control\" [id]=\"inputId\" [name]=\"name\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\"\r\n      [emptyMessage]=\"emptyMessage || ('shared.no_results_found'|translate)\" [optionLabel]=\"optionLabel\"\r\n      [optionValue]=\"optionValue\" [options]=\"options\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n      [showClear]=\"showClear\" [size]=\"size\" class=\"w-full\" [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" (onChange)=\"onChange($event)\" (click)=\"clicked.emit($event)\" [ngClass]=\"{ 'basic-style': basicInput }\">\r\n\r\n      @if (optionTemplate) {\r\n      <ng-template let-item pTemplate=\"item\">\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"optionTemplate\" />\r\n      </ng-template>\r\n      }\r\n      @if (selectedItemTemplate) {\r\n      <ng-template let-item pTemplate=\"selectedItem\">\r\n        <ng-container [ngTemplateOutletContext]=\"{ $implicit: item }\" [ngTemplateOutlet]=\"selectedItemTemplate\" />\r\n      </ng-template>\r\n      }\r\n    </p-select>\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  }\r\n\r\n  @if (hint) {\r\n  <small class=\"p-mt-1\">{{ hint }}</small>\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>", styles: ["textarea,.p-select{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.p-select .p-select-label{padding-block-end:1rem!important;padding-block-start:1rem!important}.text-required{color:red}.p-error{color:#dc2626}.edit-search .p-select-label{padding:1rem 1rem 1rem 2.2rem!important}.edit-search .p-floatlabel>label{padding-inline-start:25px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedItemTemplate: [{
                 type: Input
-            }], contentType: [{
+            }], optionTemplate: [{
                 type: Input
-            }], size: [{
+            }], options: [{
                 type: Input
-            }], prefix: [{
+            }], optionLabel: [{
                 type: Input
-            }], rows: [{
+            }], optionValue: [{
                 type: Input
-            }], cols: [{
+            }], emptyMessage: [{
                 type: Input
-            }], autoResize: [{
+            }], checkmark: [{
                 type: Input
-            }], basicInput: [{
+            }], showClear: [{
                 type: Input
-            }], noStyle: [{
+            }], editable: [{
                 type: Input
-            }], hideOptionalLabel: [{
+            }], filter: [{
                 type: Input
-            }], inputDirection: [{
+            }], multiple: [{
+                type: Input
+            }], filterBy: [{
+                type: Input
+            }], selectAllLabel: [{
+                type: Input
+            }], dataKey: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], selectedItemsLabel: [{
+                type: Input
+            }], basicInput: [{
                 type: Input
             }], variant: [{
                 type: Input
+            }], change: [{
+                type: Output
+            }], clicked: [{
+                type: Output
             }], defaultColor: [{
                 type: Input
-            }], formattedDate: [{
+            }] } });
+
+class SwitchComponent {
+    label;
+    key;
+    checked = false;
+    onChange = new EventEmitter();
+    // checked: boolean = false;
+    sendUpdatedValue(value) {
+        if (value) {
+            this.onChange.emit(value.checked);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SwitchComponent, isStandalone: true, selector: "stc-switch", inputs: { label: "label", key: "key", checked: "checked" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"flex items-center mr-2\">\r\n    <p-toggleswitch [(ngModel)]=\"checked\" [inputId]=\"key\" (onChange)=\"sendUpdatedValue($event)\" class=\"flex\">\r\n    </p-toggleswitch>\r\n    <label [for]=\"key\" class=\"text-[12px] mx-2\">{{label}}</label>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i1$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "stc-switch", standalone: true, imports: [CommonModule, ToggleSwitchModule, FormsModule], template: "<div class=\"flex items-center mr-2\">\r\n    <p-toggleswitch [(ngModel)]=\"checked\" [inputId]=\"key\" (onChange)=\"sendUpdatedValue($event)\" class=\"flex\">\r\n    </p-toggleswitch>\r\n    <label [for]=\"key\" class=\"text-[12px] mx-2\">{{label}}</label>\r\n</div>" }]
+        }], propDecorators: { label: [{
                 type: Input
-            }], openCalender: [{
+            }], key: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], onChange: [{
                 type: Output
             }] } });
 
-var DateFormats;
-(function (DateFormats) {
-    DateFormats["DATE_ONLY"] = "yyyy-MM-dd";
-    DateFormats["DATE_UTC"] = "yyyy-MM-dd'T'HH:mm:ss'Z'";
-    DateFormats["DATE_TIME_FULL"] = "dd MMMM yyyy - hh:mm a";
-    DateFormats["DATE_TIME_SEMI"] = "yyyy/MM/dd - hh:mm a";
-    DateFormats["DATE"] = "dd MMMM yyyy";
-    DateFormats["DATE_TWO"] = "yyyy/MM/dd";
-    DateFormats["DAY_ONLY"] = "cccc";
-    DateFormats["TIME_ONLY"] = "hh:mm";
-    DateFormats["AM_PM"] = "a";
-    DateFormats["TIME"] = "hh:mm a";
-    DateFormats["YEAR"] = "yyyy";
-    DateFormats["MONTH"] = "MM";
-    DateFormats["DAY"] = "dd";
-})(DateFormats || (DateFormats = {}));
-var TimeFormats;
-(function (TimeFormats) {
-    TimeFormats["HOURS12Format"] = "hh";
-    TimeFormats["HOURS24Format"] = "HH";
-    TimeFormats["MINUTES"] = "mm";
-    TimeFormats["SECONDS"] = "ss";
-})(TimeFormats || (TimeFormats = {}));
-
-class DualCalendarComponent {
-    selectedDate = '';
-    control = new FormControl({ value: null, disabled: false }, []);
-    label = '';
-    name = '';
-    withTime = true;
-    isDatePickerShow = true;
-    mode = 'gregorian';
-    gregorianModel;
-    hijriModel;
-    currentLang = signal('ar', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
-    gregorianUTC = new EventEmitter();
-    onClose = new EventEmitter();
-    gregorianUTCValue = '';
-    isShown = false;
-    calendarContainer;
-    hijriCal = new NgbCalendarIslamicUmalqura();
-    constructor() {
-        effect(() => {
-            this.currentLang(); // 👈 track signal
-            this.setDate(this.gregorianUTCValue);
-        });
+const WEEKDAYS = {
+    ar: ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'],
+    en: ['M', 'T', 'W', 'T', 'F', 'S', 'S']
+};
+const MONTHS_GREGORIAN = {
+    ar: [
+        'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+        'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    en: [
+        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+    ]
+};
+const MONTHS_HIJRI = {
+    ar: [
+        'محرم',
+        'صفر',
+        'ربيع الأول',
+        'ربيع الآخر',
+        'جمادى الأولى',
+        'جمادى الآخرة',
+        'رجب',
+        'شعبان',
+        'رمضان',
+        'شوال',
+        'ذو القعدة',
+        'ذو الحجة'
+    ],
+    en: [
+        'Muharram',
+        'Safar',
+        'Rabi Al-Awwal',
+        'Rabi Al-Thani',
+        'Jumada Al-Awwal',
+        'Jumada Al-Thani',
+        'Rajab',
+        'Shaaban',
+        'Ramadan',
+        'Shawwal',
+        'Dhul-Qi’dah',
+        'Dhul-Hijjah'
+    ]
+};
+function getGregorianMonthName(lang, month) {
+    return MONTHS_GREGORIAN[lang][month - 1] || '';
+}
+function getHijriMonthName(lang, month) {
+    return MONTHS_HIJRI[lang][month - 1] || '';
+}
+function getWeekdayName(lang, weekday) {
+    return WEEKDAYS[lang][weekday - 1];
+}
+
+class IslamicI18n extends NgbDatepickerI18n {
+    getMonthShortName(month) {
+        return MONTHS_HIJRI.ar[month - 1];
     }
-    ngOnInit() {
-        this.setDate(this.control?.value);
+    getMonthFullName(month) {
+        return MONTHS_HIJRI.ar[month - 1];
     }
-    setDate(value) {
-        if (!value)
-            return;
-        const jsDate = new Date(value);
-        if (isNaN(jsDate.getTime()))
-            return;
-        const ngbDate = {
-            year: jsDate.getFullYear(),
-            month: jsDate.getMonth() + 1,
-            day: jsDate.getDate()
-        };
-        // 🔥 Reuse existing logic
-        this.onSelectGregorian(ngbDate);
+    getWeekdayLabel(weekday) {
+        return WEEKDAYS.ar[weekday - 1];
     }
-    onDocumentClick(event) {
-        event.stopPropagation();
-        if (!this.calendarContainer)
-            return;
-        const clickedInside = this.calendarContainer.nativeElement.contains(event.target);
-        this.onClose.emit(!clickedInside);
-        if (!clickedInside) {
-            this.isShown = false;
-        }
+    getWeekdayShortName(weekday) {
+        return WEEKDAYS.ar[weekday - 1];
     }
-    structToNgbDate(d) {
-        return new NgbDate(d.year, d.month, d.day);
+    getDayAriaLabel(date) {
+        return `${date.day}-${date.month}-${date.year}`;
     }
-    onSelectGregorian(date) {
-        this.gregorianModel = date;
-        // Convert to NgbDate
-        const jsDate = new Date(date.year, date.month - 1, date.day);
-        // fromGregorian expects NgbDate or JS Date (depending on version)
-        const hijri = this.hijriCal.fromGregorian(jsDate);
-        const isoUTC = jsDate.toISOString();
-        this.gregorianUTCValue = this.withTime ? isoUTC : formatDate(jsDate, DateFormats.DATE_ONLY, 'en');
-        this.gregorianUTC.emit(this.gregorianUTCValue);
-        this.hijriModel = {
-            year: hijri.year,
-            month: hijri.month,
-            day: hijri.day
-        }; // datepicker
-        this.selectedDate = this.formatHijri(this.structToNgbDate(this.hijriModel)); //input
-        this.isShown = false;
+    getYearNumerals(year) {
+        return String(year);
     }
-    onSelectHijri(date) {
-        this.hijriModel = date;
-        const ngbDate = this.structToNgbDate(date);
-        const greg = this.hijriCal.toGregorian(ngbDate);
-        const isoUTC = greg.toISOString();
-        this.gregorianModel = {
-            year: greg.getFullYear(),
-            month: greg.getMonth() + 1,
-            day: greg.getDate()
-        };
-        const jsDate = new Date(this.gregorianModel.year, this.gregorianModel.month - 1, this.gregorianModel.day);
-        this.gregorianUTCValue = this.withTime ? isoUTC : formatDate(jsDate, DateFormats.DATE_ONLY, 'en');
-        this.gregorianUTC.emit(this.gregorianUTCValue);
-        this.selectedDate = this.formatHijri(ngbDate);
-        this.isShown = false;
+    getWeekNumerals(weekNumber) {
+        return String(weekNumber);
     }
-    showCalender(isOpen) {
-        this.isShown = isOpen;
+    getDayNumerals(date) {
+        return String(date.day);
     }
-    formatHijri(h) {
-        const hijriDay = h.day;
-        const hijriMonth = getHijriMonthName(this.currentLang(), h.month);
-        const hijriYear = h.year;
-        const greg = this.hijriCal.toGregorian(h);
-        const gregorianDay = greg.getDate();
-        const gregorianMonth = getGregorianMonthName(this.currentLang(), greg.getMonth() + 1);
-        const gregorianYear = greg.getFullYear();
-        return `${gregorianDay} ${gregorianMonth} ${gregorianYear} - ${hijriDay} ${hijriMonth} ${hijriYear}`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IslamicI18n, decorators: [{
+            type: Injectable
+        }] });
+class HijriEnglishI18n extends NgbDatepickerI18n {
+    getMonthShortName(month) {
+        return MONTHS_HIJRI.en[month - 1].substring(0, 3);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DualCalendarComponent, isStandalone: true, selector: "app-dual-calendar", inputs: { control: "control", label: "label", name: "name", withTime: "withTime", isDatePickerShow: "isDatePickerShow", currentLang: "currentLang", isShown: "isShown" }, outputs: { gregorianUTC: "gregorianUTC", onClose: "onClose" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
-            { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
-        ], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], ngImport: i0, template: "<div class=\"calender-content\"   #calendarContainer>\r\n  @if(isDatePickerShow) {\r\n    <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n    [control]=\"control\" [formattedDate]='selectedDate'  >\r\n    </stc-date-picker-switcher>\r\n  }\r\n\r\n  <!-- calender.html -->\r\n  <div [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\"  >\r\n    <div class=\"header-tabs\">\r\n      <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n      <div class=\"tabs\">\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\"  type=\"button\" (click)=\"  mode='gregorian'\">\r\n          {{'calender.gregorian' | translate}}\r\n        </button>\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n          {{'calender.hijri' | translate}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if(mode === 'gregorian') {\r\n    <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n      (dateSelected)=\"onSelectGregorian($event)\">\r\n    </app-gregorian-calendar>\r\n    }\r\n\r\n    @if(mode === 'hijri') {\r\n    <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\" (dateSelected)=\"onSelectHijri($event)\">\r\n    </app-hijri-calendar>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.calendar-wrapper{position:absolute;top:100%;left:0;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: HijriCalendarComponent, selector: "app-hijri-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "component", type: DatePickerSwitcherComponent, selector: "stc-date-picker-switcher", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "formattedDate"], outputs: ["openCalender"] }, { kind: "component", type: GregorianCalendarComponent, selector: "app-gregorian-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
-            trigger('slideDown', [
-                state('closed', style({
-                    height: '0px',
-                    opacity: 0,
-                    overflow: 'hidden'
-                })),
-                state('open', style({
-                    height: '*',
-                    opacity: 1,
-                    overflow: 'hidden'
-                })),
-                transition('closed <=> open', [
-                    animate('300ms ease')
-                ])
-            ])
-        ], encapsulation: i0.ViewEncapsulation.None });
+    getMonthFullName(month) {
+        return MONTHS_HIJRI.en[month - 1];
+    }
+    getWeekdayLabel(weekday) {
+        return WEEKDAYS.en[weekday - 1];
+    }
+    getWeekdayShortName(weekday) {
+        return WEEKDAYS.en[weekday - 1];
+    }
+    getDayAriaLabel(date) {
+        return `${date.day}-${date.month}-${date.year}`;
+    }
+    getYearNumerals(year) {
+        return String(year);
+    }
+    getWeekNumerals(weekNumber) {
+        return String(weekNumber);
+    }
+    getDayNumerals(date) {
+        return String(date.day);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-dual-calendar', animations: [
-                        trigger('slideDown', [
-                            state('closed', style({
-                                height: '0px',
-                                opacity: 0,
-                                overflow: 'hidden'
-                            })),
-                            state('open', style({
-                                height: '*',
-                                opacity: 1,
-                                overflow: 'hidden'
-                            })),
-                            transition('closed <=> open', [
-                                animate('300ms ease')
-                            ])
-                        ])
-                    ], imports: [
-                        NgbDatepickerModule,
-                        FormsModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        DatePickerModule,
-                        FloatLabelModule,
-                        HijriCalendarComponent,
-                        DatePickerSwitcherComponent,
-                        TranslatePipe,
-                        GregorianCalendarComponent
-                    ], providers: [
-                        { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
-                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"calender-content\"   #calendarContainer>\r\n  @if(isDatePickerShow) {\r\n    <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n    [control]=\"control\" [formattedDate]='selectedDate'  >\r\n    </stc-date-picker-switcher>\r\n  }\r\n\r\n  <!-- calender.html -->\r\n  <div [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\"  >\r\n    <div class=\"header-tabs\">\r\n      <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n      <div class=\"tabs\">\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\"  type=\"button\" (click)=\"  mode='gregorian'\">\r\n          {{'calender.gregorian' | translate}}\r\n        </button>\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n          {{'calender.hijri' | translate}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if(mode === 'gregorian') {\r\n    <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n      (dateSelected)=\"onSelectGregorian($event)\">\r\n    </app-gregorian-calendar>\r\n    }\r\n\r\n    @if(mode === 'hijri') {\r\n    <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\" (dateSelected)=\"onSelectHijri($event)\">\r\n    </app-hijri-calendar>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.calendar-wrapper{position:absolute;top:100%;left:0;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { control: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], withTime: [{
-                type: Input
-            }], isDatePickerShow: [{
-                type: Input
-            }], currentLang: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriEnglishI18n, decorators: [{
+            type: Injectable
+        }] });
+class DynamicHijriI18n extends NgbDatepickerI18n {
+    currentLang = 'ar';
+    arabicI18n = new IslamicI18n();
+    englishI18n = new HijriEnglishI18n();
+    setLanguage(lang) {
+        this.currentLang = lang;
+    }
+    get activeI18n() {
+        return this.currentLang === 'ar' ? this.arabicI18n : this.englishI18n;
+    }
+    getMonthShortName(month) {
+        return this.activeI18n.getMonthShortName(month);
+    }
+    getMonthFullName(month) {
+        return this.activeI18n.getMonthFullName(month);
+    }
+    getWeekdayLabel(weekday) {
+        return this.activeI18n.getWeekdayLabel(weekday);
+    }
+    getWeekdayShortName(weekday) {
+        return this.activeI18n.getWeekdayShortName(weekday);
+    }
+    getDayAriaLabel(date) {
+        return this.activeI18n.getDayAriaLabel(date);
+    }
+    getYearNumerals(year) {
+        return this.activeI18n.getYearNumerals(year);
+    }
+    getWeekNumerals(weekNumber) {
+        return this.activeI18n.getWeekNumerals(weekNumber);
+    }
+    getDayNumerals(date) {
+        return this.activeI18n.getDayNumerals(date);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicHijriI18n, decorators: [{
+            type: Injectable
+        }] });
+
+class HijriCalendarComponent {
+    i18n;
+    cdr;
+    model;
+    dateSelected = new EventEmitter();
+    language = 'en';
+    renderer = inject(Renderer2);
+    startDate;
+    calendar = new NgbCalendarIslamicUmalqura();
+    constructor(i18n, cdr) {
+        this.i18n = i18n;
+        this.cdr = cdr;
+    }
+    ngOnChanges(changes) {
+        if (changes['model'] && changes['model'].currentValue) {
+            this.startDate = { ...changes['model'].currentValue };
+            console.log('Hijri navigating to:', this.startDate);
+        }
+        if (changes['language'] && this.i18n instanceof DynamicHijriI18n) {
+            this.i18n.setLanguage(this.language);
+            this.cdr.detectChanges(); // Force re-render to update labels
+        }
+    }
+    ngAfterViewInit() {
+        const buttons = document.querySelectorAll('.ngb-dp-arrow-btn');
+        buttons.forEach(btn => {
+            this.renderer.removeAttribute(btn, 'title');
+        });
+    }
+    onDateChange(date) {
+        this.model = date;
+        this.startDate = { ...date };
+    }
+    isToday(date) {
+        const today = this.calendar.getToday();
+        return date.year === today.year &&
+            date.month === today.month &&
+            date.day === today.day;
+    }
+    isDisabled = () => false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriCalendarComponent, deps: [{ token: i1$6.NgbDatepickerI18n }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: HijriCalendarComponent, isStandalone: true, selector: "app-hijri-calendar", inputs: { model: "model", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
+            { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
+            { provide: NgbDatepickerI18n, useClass: DynamicHijriI18n }
+        ], usesOnChanges: true, ngImport: i0, template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n  [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n  [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n  <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n    [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n    {{ date.day }}\r\n  </span>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1$6.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HijriCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-hijri-calendar", standalone: true, imports: [NgbDatepickerModule, FormsModule], providers: [
+                        { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
+                        { provide: NgbDatepickerI18n, useClass: DynamicHijriI18n }
+                    ], template: "<ngb-datepicker #dp [class.rtl]=\"language === 'ar'\" [class.ltr]=\"language === 'en'\" [ngModel]=\"model\"\r\n  [startDate]=\"startDate\" (ngModelChange)=\"onDateChange($event)\" (dateSelect)=\"dateSelected.emit($event)\"\r\n  [dayTemplate]=\"dayTemplate\" [markDisabled]=\"isDisabled\">\r\n</ngb-datepicker>\r\n<ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n  <span class=\"custom-day\" [class.today]=\"isToday(date)\" [class.selected]=\"selected\"\r\n    [class.outside]=\"date.month !== currentMonth\" [class.disabled]=\"disabled\">\r\n    {{ date.day }}\r\n  </span>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [{ type: i1$6.NgbDatepickerI18n }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
                 type: Input
-            }], gregorianUTC: [{
-                type: Output
-            }], onClose: [{
+            }], dateSelected: [{
                 type: Output
-            }], isShown: [{
+            }], language: [{
                 type: Input
-            }], calendarContainer: [{
-                type: ViewChild,
-                args: ['calendarContainer']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }] } });
 
-/**
- * Transforms file size from bytes to readable format (B, KB, MB, GB, TB).
- *
- * Usage:
- *   {{ fileSize | fileSize }}           // Default: auto unit, 2 decimals
- *   {{ fileSize | fileSize:0 }}         // Auto unit, 0 decimals
- *   {{ fileSize | fileSize:2:'MB' }}    // Force MB, 2 decimals
- *
- * @param value - File size in bytes
- * @param decimals - Number of decimal places (default: 2)
- * @param unit - Unit: 'B', 'KB', 'MB', 'GB', 'TB' (default: auto)
- */
-class FileSizePipe {
-    units = ['B', 'KB', 'MB', 'GB', 'TB'];
-    k = 1024;
-    transform(bytes, decimals = 2, unit) {
-        if (bytes === null || bytes === undefined || isNaN(bytes)) {
-            return '0 B';
-        }
-        if (bytes === 0) {
-            return '0 B';
-        }
-        // If a specific unit is requested
-        if (unit) {
-            const unitIndex = this.units.indexOf(unit);
-            if (unitIndex === -1) {
-                return this.autoFormat(bytes, decimals);
-            }
-            const divisor = Math.pow(this.k, unitIndex);
-            const value = bytes / divisor;
-            return `${this.formatNumber(value, decimals)} ${unit}`;
-        }
-        // Auto-detect the best unit
-        return this.autoFormat(bytes, decimals);
+class GregorianArabicI18n extends NgbDatepickerI18n {
+    getMonthShortName(month) {
+        return MONTHS_GREGORIAN.ar[month - 1];
     }
-    autoFormat(bytes, decimals) {
-        const i = Math.floor(Math.log(Math.abs(bytes)) / Math.log(this.k));
-        const unitIndex = Math.min(i, this.units.length - 1);
-        const value = bytes / Math.pow(this.k, unitIndex);
-        return `${this.formatNumber(value, decimals)} ${this.units[unitIndex]}`;
+    getMonthFullName(month) {
+        return MONTHS_GREGORIAN.ar[month - 1];
     }
-    formatNumber(value, decimals) {
-        return parseFloat(value.toFixed(decimals)).toString();
+    getWeekdayLabel(weekday) {
+        return WEEKDAYS.ar[weekday - 1];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" });
+    getWeekdayShortName(weekday) {
+        return WEEKDAYS.ar[weekday - 1];
+    }
+    getDayAriaLabel(date) {
+        return `${date.day}-${date.month}-${date.year}`;
+    }
+    getYearNumerals(year) {
+        return String(year);
+    }
+    getWeekNumerals(weekNumber) {
+        return String(weekNumber);
+    }
+    getDayNumerals(date) {
+        return String(date.day);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileSizePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'fileSize',
-                    standalone: true,
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianArabicI18n, decorators: [{
+            type: Injectable
         }] });
-
-var UploadStatus;
-(function (UploadStatus) {
-    UploadStatus["PENDING"] = "pending";
-    UploadStatus["SUCCESS"] = "success";
-    UploadStatus["UPLOADING"] = "uploading";
-    UploadStatus["FAILED"] = "failed";
-})(UploadStatus || (UploadStatus = {}));
-
-class FileManagementComponent extends BaseInputComponent {
-    // Inputs
-    existingFiles = input([], ...(ngDevMode ? [{ debugName: "existingFiles" }] : []));
-    acceptedTypes = input('*', ...(ngDevMode ? [{ debugName: "acceptedTypes" }] : []));
-    maxFileSize = input(10485760, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : [])); //250 MB
-    maxConcurrentUploads = input(3, ...(ngDevMode ? [{ debugName: "maxConcurrentUploads" }] : []));
-    showTable = input(true, ...(ngDevMode ? [{ debugName: "showTable" }] : []));
-    showDropZone = input(true, ...(ngDevMode ? [{ debugName: "showDropZone" }] : []));
-    allowPreview = input(true, ...(ngDevMode ? [{ debugName: "allowPreview" }] : []));
-    permissonKey = input('', ...(ngDevMode ? [{ debugName: "permissonKey" }] : []));
-    allowedActions = input([], ...(ngDevMode ? [{ debugName: "allowedActions" }] : []));
-    uploadedFile = signal([], ...(ngDevMode ? [{ debugName: "uploadedFile" }] : []));
-    // Outputs
-    filesUploaded = new EventEmitter();
-    fileDeleted = new EventEmitter();
-    filePreview = new EventEmitter();
-    fileDownload = new EventEmitter();
-    uploadError = new EventEmitter();
-    newFilesChange = new EventEmitter();
-    fileInput;
-    // State - separate new uploads from existing files
-    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
-    newFiles = signal([], ...(ngDevMode ? [{ debugName: "newFiles" }] : [])); // Files being uploaded or newly uploaded
-    uploadedResponses = [];
-    // Combined files list for the table (existing + new)
-    allFiles = computed(() => {
-        const existing = this.existingFiles().map((f) => ({
-            ...f,
-            status: undefined, // Don't show status for existing files
-            isNew: false,
-        }));
-        const newOnes = this.newFiles();
-        return [...newOnes, ...existing];
-    }, ...(ngDevMode ? [{ debugName: "allFiles" }] : []));
-    // Get only successfully uploaded new file IDs
-    uploadedNewFileIds = computed(() => {
-        return this.newFiles()
-            .filter((f) => f.status === UploadStatus.SUCCESS && f.id && !f.id.startsWith('temp-'))
-            .map((f) => f.id);
-    }, ...(ngDevMode ? [{ debugName: "uploadedNewFileIds" }] : []));
-    // Formatted accepted file types for display
-    formattedAcceptedTypes = computed(() => {
-        const accepted = this.acceptedTypes();
-        if (accepted === '*' || accepted === '*/*')
-            return '';
-        return accepted
-            .split(',')
-            .map((type) => type.trim().replace('.', '').toUpperCase())
-            .join(', ');
-    }, ...(ngDevMode ? [{ debugName: "formattedAcceptedTypes" }] : []));
-    // Table configuration
-    // Drag & Drop handlers
-    onDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(true);
+class GregorianEnglishI18n extends NgbDatepickerI18n {
+    getMonthShortName(month) {
+        return MONTHS_GREGORIAN.en[month - 1].substring(0, 3);
     }
-    onDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(false);
+    getMonthFullName(month) {
+        return MONTHS_GREGORIAN.en[month - 1];
     }
-    onDrop(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(false);
-        const droppedFiles = event.dataTransfer?.files;
-        if (droppedFiles) {
-            this.handleFiles(Array.from(droppedFiles));
-        }
+    getWeekdayLabel(weekday) {
+        return WEEKDAYS.en[weekday - 1];
     }
-    // Browse button handler
-    onBrowseClick() {
-        this.fileInput.nativeElement.click();
+    getWeekdayShortName(weekday) {
+        return WEEKDAYS.en[weekday - 1];
     }
-    onFileInputChange(event) {
-        const input = event.target;
-        if (input.files) {
-            this.handleFiles(Array.from(input.files));
-            // Reset input to allow selecting the same file again
-            input.value = '';
-        }
+    getDayAriaLabel(date) {
+        return `${date.day}-${date.month}-${date.year}`;
+    }
+    getYearNumerals(year) {
+        return String(year);
+    }
+    getWeekNumerals(weekNumber) {
+        return String(weekNumber);
+    }
+    getDayNumerals(date) {
+        return String(date.day);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianEnglishI18n, decorators: [{
+            type: Injectable
+        }] });
+// ============ Dynamic I18N Factory ============
+class DynamicGregorianI18n extends NgbDatepickerI18n {
+    currentLang = 'en';
+    arabicI18n = new GregorianArabicI18n();
+    englishI18n = new GregorianEnglishI18n();
+    setLanguage(lang) {
+        this.currentLang = lang;
+    }
+    get activeI18n() {
+        return this.currentLang === 'ar' ? this.arabicI18n : this.englishI18n;
+    }
+    getMonthShortName(month) {
+        return this.activeI18n.getMonthShortName(month);
+    }
+    getMonthFullName(month) {
+        return this.activeI18n.getMonthFullName(month);
+    }
+    getWeekdayLabel(weekday) {
+        return this.activeI18n.getWeekdayLabel(weekday);
+    }
+    getWeekdayShortName(weekday) {
+        return this.activeI18n.getWeekdayShortName(weekday);
+    }
+    getDayAriaLabel(date) {
+        return this.activeI18n.getDayAriaLabel(date);
+    }
+    getYearNumerals(year) {
+        return this.activeI18n.getYearNumerals(year);
     }
-    // Public method to trigger file selection from parent
-    triggerFileInput() {
-        this.fileInput?.nativeElement?.click();
+    getWeekNumerals(weekNumber) {
+        return this.activeI18n.getWeekNumerals(weekNumber);
     }
-    // Public method to append file selection from parent
-    appendFileFromParent(file) {
-        this.handleFiles([file]);
+    getDayNumerals(date) {
+        return this.activeI18n.getDayNumerals(date);
     }
-    // Public method to upload files programmatically from parent
-    uploadFilesFromParent(files) {
-        this.handleFiles(files);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicGregorianI18n, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicGregorianI18n });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicGregorianI18n, decorators: [{
+            type: Injectable
+        }] });
+
+class GregorianCalendarComponent {
+    model;
+    dateSelected = new EventEmitter();
+    renderer = inject(Renderer2);
+    language = 'en';
+    startDate;
+    calendar = new NgbCalendarGregorian();
+    i18n = inject(NgbDatepickerI18n);
+    cdr = inject(ChangeDetectorRef);
+    calendarKey = 0;
+    ngOnChanges(changes) {
+        if (changes['model'] && changes['model'].currentValue) {
+            this.startDate = { ...changes['model'].currentValue };
+        }
+        if (changes['language'] && this.i18n instanceof DynamicGregorianI18n) {
+            this.i18n.setLanguage(this.language);
+            this.calendarKey++; // Increment to force recreation
+        }
     }
-    // Public method to get new uploaded file IDs
-    getUploadedFileIds() {
-        return this.uploadedNewFileIds();
+    ngAfterViewInit() {
+        const buttons = document.querySelectorAll('.ngb-dp-arrow-btn');
+        buttons.forEach(btn => {
+            this.renderer.removeAttribute(btn, 'title');
+        });
     }
-    // Public method to clear new files (after save)
-    clearNewFiles() {
-        this.newFiles.set([]);
-        this.uploadedResponses = [];
+    onDateChange(date) {
+        this.model = date;
+        this.startDate = { ...date };
     }
-    // Public method to remove a new file by ID
-    removeNewFile(fileId) {
-        this.newFiles.update((files) => files.filter((f) => f.id !== fileId));
+    isToday(date) {
+        const today = this.calendar.getToday();
+        return date.year === today.year &&
+            date.month === today.month &&
+            date.day === today.day;
     }
-    // Check if there are pending/uploading files
-    // File handling
-    handleFiles(filesToProcess) {
-        const validFiles = [];
-        for (const file of filesToProcess) {
-            // Validate file size
-            if (file.size > this.maxFileSize()) {
-                this.uploadError.emit({
-                    file,
-                    error: `File ${file.name} exceeds maximum size of ${this.formatFileSize(this.maxFileSize())}`,
-                });
-                continue;
-            }
-            // Validate file type
-            // if (!this.isValidFileType(file)) {
-            //   this.uploadError.emit({
-            //     file,
-            //     error: `File type not allowed: ${file.type}`,
-            //   });
-            //   continue;
-            // }
-            validFiles.push(file);
-        }
-        if (validFiles.length > 0) {
-            // this.uploadFiles(validFiles);
-            this.uploadedFile.set(validFiles);
-            this.filesUploaded.emit(validFiles);
-            console.log('uploadedFile', this.uploadedFile());
+    isDisabled = () => false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: GregorianCalendarComponent, isStandalone: true, selector: "app-gregorian-calendar", inputs: { model: "model", language: "language" }, outputs: { dateSelected: "dateSelected" }, providers: [
+            { provide: NgbCalendar, useClass: NgbCalendarGregorian },
+            { provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
+        ], usesOnChanges: true, ngImport: i0, template: "@for(item of [calendarKey]; track item) {\r\n  <ngb-datepicker #dp\r\n    [class.rtl]=\"language === 'ar'\"\r\n    [class.ltr]=\"language === 'en'\"\r\n    [ngModel]=\"model\"\r\n    [startDate]=\"startDate\"\r\n    (ngModelChange)=\"onDateChange($event)\"\r\n    (dateSelect)=\"dateSelected.emit($event)\"\r\n    [dayTemplate]=\"dayTemplate\"\r\n    [markDisabled]=\"isDisabled\">\r\n  </ngb-datepicker>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n    <span class=\"custom-day\"\r\n      [class.today]=\"isToday(date)\"\r\n      [class.selected]=\"selected\"\r\n      [class.outside]=\"date.month !== currentMonth\"\r\n      [class.disabled]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i1$6.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GregorianCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-gregorian-calendar", standalone: true, imports: [NgbDatepickerModule, FormsModule], providers: [
+                        { provide: NgbCalendar, useClass: NgbCalendarGregorian },
+                        { provide: NgbDatepickerI18n, useClass: DynamicGregorianI18n }
+                    ], encapsulation: ViewEncapsulation.None, template: "@for(item of [calendarKey]; track item) {\r\n  <ngb-datepicker #dp\r\n    [class.rtl]=\"language === 'ar'\"\r\n    [class.ltr]=\"language === 'en'\"\r\n    [ngModel]=\"model\"\r\n    [startDate]=\"startDate\"\r\n    (ngModelChange)=\"onDateChange($event)\"\r\n    (dateSelect)=\"dateSelected.emit($event)\"\r\n    [dayTemplate]=\"dayTemplate\"\r\n    [markDisabled]=\"isDisabled\">\r\n  </ngb-datepicker>\r\n  <ng-template #dayTemplate let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\">\r\n    <span class=\"custom-day\"\r\n      [class.today]=\"isToday(date)\"\r\n      [class.selected]=\"selected\"\r\n      [class.outside]=\"date.month !== currentMonth\"\r\n      [class.disabled]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n}\r\n" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], dateSelected: [{
+                type: Output
+            }], language: [{
+                type: Input
+            }] } });
+
+class DatePickerSwitcherComponent extends BaseInputComponent {
+    type = 'text';
+    contentType = 'text';
+    size = "small";
+    prefix;
+    rows = 2;
+    cols = 20;
+    autoResize = true;
+    basicInput;
+    noStyle;
+    hideOptionalLabel;
+    inputDirection = 'inherit';
+    variant = 'over';
+    defaultColor = '#DFE0E6';
+    formattedDate = '';
+    openCalender = new EventEmitter();
+    constructor() {
+        super();
+    }
+    ngOnChanges(changes) {
+        if (changes['formattedDate'] && changes['formattedDate'].currentValue) {
+            // Update the FormControl value if parent changes the formattedDate
+            this.control.setValue(changes['formattedDate'].currentValue, { emitEvent: false });
         }
     }
-    deleteFile() {
-        this.uploadedFile.set([]);
-        this.filesUploaded.emit([]);
+    ngOnInit() {
+        this.control.setValue(this.formattedDate);
     }
-    isValidFileType(file) {
-        const accepted = this.acceptedTypes();
-        if (accepted === '*' || accepted === '*/*')
-            return true;
-        const acceptedTypes = accepted.split(',').map((t) => t.trim().toLowerCase());
-        const fileType = file.type.toLowerCase();
-        const fileExt = '.' + file.name.split('.').pop()?.toLowerCase();
-        return acceptedTypes.some((type) => {
-            if (type.startsWith('.')) {
-                return fileExt === type;
-            }
-            if (type.endsWith('/*')) {
-                return fileType.startsWith(type.replace('/*', '/'));
-            }
-            return fileType === type;
-        });
+    clearButtonClick(e) {
+        this.control.setValue(null);
     }
-    updateFileFromAttachment(attachment) {
-        this.newFiles.update((currentFiles) => {
-            return currentFiles.map((file) => {
-                // Match by file name and size
-                if (file.fileName === attachment.nameFile && file.size === attachment.size) {
-                    const updatedFile = {
-                        ...file,
-                        progress: attachment.status?.percentage ?? 0,
-                        error: attachment.errorMessage,
-                    };
-                    // If upload succeeded, update with response data from serverResponse
-                    if (attachment.uploadStatus === UploadStatus.SUCCESS && attachment.serverResponse) {
-                        const serverData = attachment.serverResponse;
-                        const responseFile = {
-                            id: attachment.id || serverData?.id || file.id,
-                            fileName: serverData?.fileName || attachment.nameFile,
-                            size: serverData?.size || attachment.size,
-                            mimeType: serverData?.mimeType || file.mimeType,
-                        };
-                        this.uploadedResponses.push(responseFile);
-                        return {
-                            ...updatedFile,
-                            id: responseFile.id,
-                        };
-                    }
-                    return updatedFile;
-                }
-                return file;
-            });
+    openCalendar(isOpen) {
+        this.openCalender.emit(isOpen);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerSwitcherComponent, isStandalone: true, selector: "stc-date-picker-switcher", inputs: { type: "type", contentType: "contentType", size: "size", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant", defaultColor: "defaultColor", formattedDate: "formattedDate" }, outputs: { openCalender: "openCalender" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n    <p-floatlabel [variant]=\"variant\">\r\n    <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"true\" (focus)=\"openCalendar(true)\"\r\n      (click)=\"openCalendar(true)\" [pSize]=\"'small'\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" [disabled]=\"disabled\" [name]=\"name\" pInputText\r\n      class=\"w-full\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\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-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.my-custom-datepicker-panel{display:none!important}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: DatePickerModule }, { 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: DatePickerSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'stc-date-picker-switcher', standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgClass,
+                        InputText,
+                        DatePickerModule,
+                        ValidationErrorsPipe,
+                        TranslatePipe,
+                        FloatLabelModule,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n    <p-floatlabel [variant]=\"variant\">\r\n    <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"true\" (focus)=\"openCalendar(true)\"\r\n      (click)=\"openCalendar(true)\" [pSize]=\"'small'\"\r\n      [class]=\"\r\n        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n        \" [disabled]=\"disabled\" [name]=\"name\" pInputText\r\n      class=\"w-full\"\r\n      [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\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-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.my-custom-datepicker-panel{display:none!important}.d-ltr{direction:ltr}.text-required{color:red}.p-error{color:#dc2626}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], contentType: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], autoResize: [{
+                type: Input
+            }], basicInput: [{
+                type: Input
+            }], noStyle: [{
+                type: Input
+            }], hideOptionalLabel: [{
+                type: Input
+            }], inputDirection: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], defaultColor: [{
+                type: Input
+            }], formattedDate: [{
+                type: Input
+            }], openCalender: [{
+                type: Output
+            }] } });
+
+var DateFormats;
+(function (DateFormats) {
+    DateFormats["DATE_ONLY"] = "yyyy-MM-dd";
+    DateFormats["DATE_UTC"] = "yyyy-MM-dd'T'HH:mm:ss'Z'";
+    DateFormats["DATE_TIME_FULL"] = "dd MMMM yyyy - hh:mm a";
+    DateFormats["DATE_TIME_SEMI"] = "yyyy/MM/dd - hh:mm a";
+    DateFormats["DATE"] = "dd MMMM yyyy";
+    DateFormats["DATE_TWO"] = "yyyy/MM/dd";
+    DateFormats["DAY_ONLY"] = "cccc";
+    DateFormats["TIME_ONLY"] = "hh:mm";
+    DateFormats["AM_PM"] = "a";
+    DateFormats["TIME"] = "hh:mm a";
+    DateFormats["YEAR"] = "yyyy";
+    DateFormats["MONTH"] = "MM";
+    DateFormats["DAY"] = "dd";
+})(DateFormats || (DateFormats = {}));
+var TimeFormats;
+(function (TimeFormats) {
+    TimeFormats["HOURS12Format"] = "hh";
+    TimeFormats["HOURS24Format"] = "HH";
+    TimeFormats["MINUTES"] = "mm";
+    TimeFormats["SECONDS"] = "ss";
+})(TimeFormats || (TimeFormats = {}));
+
+class DualCalendarComponent {
+    selectedDate = '';
+    control = new FormControl({ value: null, disabled: false }, []);
+    label = '';
+    name = '';
+    withTime = true;
+    isDatePickerShow = true;
+    mode = 'gregorian';
+    gregorianModel;
+    hijriModel;
+    currentLang = signal('ar', ...(ngDevMode ? [{ debugName: "currentLang" }] : []));
+    gregorianUTC = new EventEmitter();
+    onClose = new EventEmitter();
+    gregorianUTCValue = '';
+    isShown = false;
+    calendarContainer;
+    hijriCal = new NgbCalendarIslamicUmalqura();
+    constructor() {
+        effect(() => {
+            this.currentLang(); // 👈 track signal
+            this.setDate(this.gregorianUTCValue);
         });
     }
-    // Actions
-    onDeleteFile(file) {
-        const isNewFile = file.isNew;
-        this.fileDeleted.emit({ fileId: file.id, isNew: !!isNewFile });
-        if (isNewFile) {
-            // Remove from newFiles list immediately for new uploads
-            this.newFiles.update((files) => files.filter((f) => f.id !== file.id));
+    ngOnInit() {
+        this.setDate(this.control?.value);
+    }
+    setDate(value) {
+        if (!value)
+            return;
+        const jsDate = new Date(value);
+        if (isNaN(jsDate.getTime()))
+            return;
+        const ngbDate = {
+            year: jsDate.getFullYear(),
+            month: jsDate.getMonth() + 1,
+            day: jsDate.getDate()
+        };
+        // 🔥 Reuse existing logic
+        this.onSelectGregorian(ngbDate);
+    }
+    onDocumentClick(event) {
+        event.stopPropagation();
+        if (!this.calendarContainer)
+            return;
+        const clickedInside = this.calendarContainer.nativeElement.contains(event.target);
+        this.onClose.emit(!clickedInside);
+        if (!clickedInside) {
+            this.isShown = false;
         }
     }
-    onPreviewFile(file) {
-        this.filePreview.emit(file);
+    structToNgbDate(d) {
+        return new NgbDate(d.year, d.month, d.day);
     }
-    removeFileFromList(fileId) {
-        this.newFiles.update((current) => current.filter((f) => f.id !== fileId));
+    onSelectGregorian(date) {
+        this.gregorianModel = date;
+        // Convert to NgbDate
+        const jsDate = new Date(date.year, date.month - 1, date.day);
+        // fromGregorian expects NgbDate or JS Date (depending on version)
+        const hijri = this.hijriCal.fromGregorian(jsDate);
+        const isoUTC = jsDate.toISOString();
+        this.gregorianUTCValue = this.withTime ? isoUTC : formatDate(jsDate, DateFormats.DATE_ONLY, 'en');
+        this.gregorianUTC.emit(this.gregorianUTCValue);
+        this.hijriModel = {
+            year: hijri.year,
+            month: hijri.month,
+            day: hijri.day
+        }; // datepicker
+        this.selectedDate = this.formatHijri(this.structToNgbDate(this.hijriModel)); //input
+        this.isShown = false;
     }
-    generateTempId(file) {
-        return `temp-${file.name}-${file.size}-${Date.now()}`;
+    onSelectHijri(date) {
+        this.hijriModel = date;
+        const ngbDate = this.structToNgbDate(date);
+        const greg = this.hijriCal.toGregorian(ngbDate);
+        const isoUTC = greg.toISOString();
+        this.gregorianModel = {
+            year: greg.getFullYear(),
+            month: greg.getMonth() + 1,
+            day: greg.getDate()
+        };
+        const jsDate = new Date(this.gregorianModel.year, this.gregorianModel.month - 1, this.gregorianModel.day);
+        this.gregorianUTCValue = this.withTime ? isoUTC : formatDate(jsDate, DateFormats.DATE_ONLY, 'en');
+        this.gregorianUTC.emit(this.gregorianUTCValue);
+        this.selectedDate = this.formatHijri(ngbDate);
+        this.isShown = false;
     }
-    formatFileSize(bytes) {
-        if (bytes === 0)
-            return '0 B';
-        const k = 1024;
-        const sizes = ['B', 'KB', 'MB', 'GB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    showCalender(isOpen) {
+        this.isShown = isOpen;
     }
-    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" }] });
+    formatHijri(h) {
+        const hijriDay = h.day;
+        const hijriMonth = getHijriMonthName(this.currentLang(), h.month);
+        const hijriYear = h.year;
+        const greg = this.hijriCal.toGregorian(h);
+        const gregorianDay = greg.getDate();
+        const gregorianMonth = getGregorianMonthName(this.currentLang(), greg.getMonth() + 1);
+        const gregorianYear = greg.getFullYear();
+        return `${gregorianDay} ${gregorianMonth} ${gregorianYear} - ${hijriDay} ${hijriMonth} ${hijriYear}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DualCalendarComponent, isStandalone: true, selector: "app-dual-calendar", inputs: { control: "control", label: "label", name: "name", withTime: "withTime", isDatePickerShow: "isDatePickerShow", currentLang: "currentLang", isShown: "isShown" }, outputs: { gregorianUTC: "gregorianUTC", onClose: "onClose" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+            { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
+        ], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], ngImport: i0, template: "<div class=\"calender-content\"   #calendarContainer>\r\n  @if(isDatePickerShow) {\r\n    <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n    [control]=\"control\" [formattedDate]='selectedDate'  >\r\n    </stc-date-picker-switcher>\r\n  }\r\n\r\n  <!-- calender.html -->\r\n  <div [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\"  >\r\n    <div class=\"header-tabs\">\r\n      <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n      <div class=\"tabs\">\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\"  type=\"button\" (click)=\"  mode='gregorian'\">\r\n          {{'calender.gregorian' | translate}}\r\n        </button>\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n          {{'calender.hijri' | translate}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if(mode === 'gregorian') {\r\n    <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n      (dateSelected)=\"onSelectGregorian($event)\">\r\n    </app-gregorian-calendar>\r\n    }\r\n\r\n    @if(mode === 'hijri') {\r\n    <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\" (dateSelected)=\"onSelectHijri($event)\">\r\n    </app-hijri-calendar>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.calendar-wrapper{position:absolute;top:100%;left:0;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: HijriCalendarComponent, selector: "app-hijri-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "component", type: DatePickerSwitcherComponent, selector: "stc-date-picker-switcher", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "formattedDate"], outputs: ["openCalender"] }, { kind: "component", type: GregorianCalendarComponent, selector: "app-gregorian-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+            trigger('slideDown', [
+                state('closed', style({
+                    height: '0px',
+                    opacity: 0,
+                    overflow: 'hidden'
+                })),
+                state('open', style({
+                    height: '*',
+                    opacity: 1,
+                    overflow: 'hidden'
+                })),
+                transition('closed <=> open', [
+                    animate('300ms ease')
+                ])
+            ])
+        ], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileManagementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, 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"] }]
-        }], 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
-            }], filePreview: [{
-                type: Output
-            }], fileDownload: [{
-                type: Output
-            }], uploadError: [{
+            args: [{ selector: 'app-dual-calendar', animations: [
+                        trigger('slideDown', [
+                            state('closed', style({
+                                height: '0px',
+                                opacity: 0,
+                                overflow: 'hidden'
+                            })),
+                            state('open', style({
+                                height: '*',
+                                opacity: 1,
+                                overflow: 'hidden'
+                            })),
+                            transition('closed <=> open', [
+                                animate('300ms ease')
+                            ])
+                        ])
+                    ], imports: [
+                        NgbDatepickerModule,
+                        FormsModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        DatePickerModule,
+                        FloatLabelModule,
+                        HijriCalendarComponent,
+                        DatePickerSwitcherComponent,
+                        TranslatePipe,
+                        GregorianCalendarComponent
+                    ], providers: [
+                        { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"calender-content\"   #calendarContainer>\r\n  @if(isDatePickerShow) {\r\n    <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n    [control]=\"control\" [formattedDate]='selectedDate'  >\r\n    </stc-date-picker-switcher>\r\n  }\r\n\r\n  <!-- calender.html -->\r\n  <div [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\"  >\r\n    <div class=\"header-tabs\">\r\n      <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n      <div class=\"tabs\">\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\"  type=\"button\" (click)=\"  mode='gregorian'\">\r\n          {{'calender.gregorian' | translate}}\r\n        </button>\r\n        <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n          {{'calender.hijri' | translate}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if(mode === 'gregorian') {\r\n    <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n      (dateSelected)=\"onSelectGregorian($event)\">\r\n    </app-gregorian-calendar>\r\n    }\r\n\r\n    @if(mode === 'hijri') {\r\n    <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\" (dateSelected)=\"onSelectHijri($event)\">\r\n    </app-hijri-calendar>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.calendar-wrapper{position:absolute;top:100%;left:0;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], withTime: [{
+                type: Input
+            }], isDatePickerShow: [{
+                type: Input
+            }], currentLang: [{
+                type: Input
+            }], gregorianUTC: [{
                 type: Output
-            }], newFilesChange: [{
+            }], onClose: [{
                 type: Output
-            }], fileInput: [{
+            }], isShown: [{
+                type: Input
+            }], calendarContainer: [{
                 type: ViewChild,
-                args: ['fileInput']
+                args: ['calendarContainer']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
-class LocalizedLabelPipe {
-    translateService = inject(TranslateService);
-    transform(label) {
-        if (!label)
-            return '';
-        const lang = this.translateService.getCurrentLang() || 'ar';
-        const suffix = lang.charAt(0).toUpperCase() + lang.slice(1);
-        const key = label + `${suffix}`;
-        return key;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LocalizedLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: LocalizedLabelPipe, isStandalone: true, name: "localizedLabel", pure: false });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LocalizedLabelPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'localizedLabel',
-                    standalone: true,
-                    pure: false,
-                }]
-        }] });
-
-const FileExtentions = [
-    'jpeg',
-    'pptx',
-    'xlsx',
-    'xls',
-    'doc',
-    'docx',
-    'jpg',
-    'png',
-    'pdf',
-    'txt',
-    'csv',
-    'msg',
-    'zip',
-    'win',
-    'xlsb',
-    'ppt',
-    'rar',
-];
+var FormFieldTypeEnum;
+(function (FormFieldTypeEnum) {
+    FormFieldTypeEnum["DATE_PICKER"] = "date-picker";
+    FormFieldTypeEnum["SELECT_BUTTON"] = "select-button";
+    FormFieldTypeEnum["INPUT"] = "input";
+    FormFieldTypeEnum["SELECT"] = "select";
+    FormFieldTypeEnum["SWITCH"] = "switch";
+    FormFieldTypeEnum["AUTO_COMPLETE"] = "auto-complete";
+    FormFieldTypeEnum["HIJRI_DATE_PICKER"] = "hijri-date";
+    FormFieldTypeEnum["UPLOAD_FILE"] = "upload-file";
+})(FormFieldTypeEnum || (FormFieldTypeEnum = {}));
 
 class DynamicFormComponent {
     dynamicFormData;
     // Generic field change outputs (optional for consumers)
     selectButtonChange = new EventEmitter();
     selectChange = new EventEmitter();
+    selectClicked = new EventEmitter();
     switchChange = new EventEmitter();
     autoCompleteSearch = new EventEmitter();
     autoCompleteSelect = new EventEmitter();
@@ -1905,7 +1912,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 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" }] });
+    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", selectClicked: "selectClicked", 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')\" [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        (click)=\"selectClicked.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)\"\r\n        [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>", 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", "clicked"] }, { 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,
@@ -1922,8 +1929,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         SelectComponent,
                         AutoCompleteComponent,
                         SwitchComponent,
-                        LocalizedLabelPipe
-                    ], 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"] }]
+                        LocalizedLabelPipe,
+                    ], 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')\" [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        (click)=\"selectClicked.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)\"\r\n        [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>", styles: [".dynamic-form__content>div{margin-bottom:15px}\n"] }]
         }], propDecorators: { dynamicFormData: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1931,6 +1938,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], selectChange: [{
                 type: Output
+            }], selectClicked: [{
+                type: Output
             }], switchChange: [{
                 type: Output
             }], autoCompleteSearch: [{
@@ -1983,7 +1992,7 @@ class ConfirmationDialogComponent extends DynamicDialogRef {
     onFileDeleted(file) {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirm-dialog", providers: [DialogService, DynamicDialogStyle], usesInheritance: true, ngImport: i0, template: "@if (dynamicDialogConfig.data) {\r\n<div class=\"confirmation-dialog\">\r\n  <div class=\"dialog-wrapper\">\r\n    @if (dynamicDialogConfig.data) {\r\n    <div class=\"confirmation-dialog__content my-4\">\r\n      @if (dynamicDialogConfig.data.dialogIcon) {\r\n      <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n      }\r\n      <p class=\"confirmation-dialog__message text-xl mb-2\">\r\n        {{ dynamicDialogConfig.data.message }}\r\n      </p>\r\n      @if (dynamicDialogConfig.data.hint) {\r\n      <p class=\"confirmation-dialog__hint font-normal text-base\">\r\n        {{ dynamicDialogConfig.data.hint }}\r\n      </p>\r\n      }\r\n      @if (dynamicDialogConfig.data.inputForm) {\r\n      <app-dynamic-form [dynamicFormData]=\"dialogFormData\"  (popUpFilesUploaded)=\"onPopFilesUploaded($event)\" (fileDeleted)=\"onFileDeleted($event)\" ></app-dynamic-form>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"confirmation-dialog__actions flex gap-2 mt-4\">\r\n      <app-button [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\"\r\n        [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\" [severity]=\"'primary'\"\r\n        [id]=\"dynamicDialogConfig.data.confirmBtnId\" [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n        [label]=\"dynamicDialogConfig.data.confirmBtnLabel\"\r\n        [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\" [styleClass]=\"'confirmation-btn'\"\r\n        (click)=\"submit()\" />\r\n      <app-button [title]=\"dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)\"\r\n        [severity]=\"'primary'\" variant=\"outlined\" [label]=\"dynamicDialogConfig.data.cancelBtnLabel\"\r\n        [id]=\"dynamicDialogConfig.data.cancelBtnId\" [styleClass]=\"'cancel-btn confirmation-btn cancel-btn'\"\r\n        (click)=\"close()\" />\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["dynamicFormData"], outputs: ["selectButtonChange", "selectChange", "switchChange", "autoCompleteSearch", "autoCompleteSelect", "popUpFilesUploaded", "fileDeleted"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirm-dialog", providers: [DialogService, DynamicDialogStyle], usesInheritance: true, ngImport: i0, template: "@if (dynamicDialogConfig.data) {\r\n<div class=\"confirmation-dialog\">\r\n  <div class=\"dialog-wrapper\">\r\n    @if (dynamicDialogConfig.data) {\r\n    <div class=\"confirmation-dialog__content my-4\">\r\n      @if (dynamicDialogConfig.data.dialogIcon) {\r\n      <em [class]=\"dynamicDialogConfig.data.dialogIcon\"></em>\r\n      }\r\n      <p class=\"confirmation-dialog__message text-xl mb-2\">\r\n        {{ dynamicDialogConfig.data.message }}\r\n      </p>\r\n      @if (dynamicDialogConfig.data.hint) {\r\n      <p class=\"confirmation-dialog__hint font-normal text-base\">\r\n        {{ dynamicDialogConfig.data.hint }}\r\n      </p>\r\n      }\r\n      @if (dynamicDialogConfig.data.inputForm) {\r\n      <app-dynamic-form [dynamicFormData]=\"dialogFormData\"  (popUpFilesUploaded)=\"onPopFilesUploaded($event)\" (fileDeleted)=\"onFileDeleted($event)\" ></app-dynamic-form>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"confirmation-dialog__actions flex gap-2 mt-4\">\r\n      <app-button [title]=\"dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)\"\r\n        [disabled]=\"!!(dialogFormData && dialogFormData.formGroup?.invalid)\" [severity]=\"'primary'\"\r\n        [id]=\"dynamicDialogConfig.data.confirmBtnId\" [icon]=\"dynamicDialogConfig.data.confirmBtnIcon || ''\"\r\n        [label]=\"dynamicDialogConfig.data.confirmBtnLabel\"\r\n        [iconPos]=\"dynamicDialogConfig.data.confirmBtnPosition || 'left'\" [styleClass]=\"'confirmation-btn'\"\r\n        (click)=\"submit()\" />\r\n      <app-button [title]=\"dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)\"\r\n        [severity]=\"'primary'\" variant=\"outlined\" [label]=\"dynamicDialogConfig.data.cancelBtnLabel\"\r\n        [id]=\"dynamicDialogConfig.data.cancelBtnId\" [styleClass]=\"'cancel-btn confirmation-btn cancel-btn'\"\r\n        (click)=\"close()\" />\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: AppButtonComponent, selector: "app-button" }, { kind: "ngmodule", type: AvatarModule }, { kind: "ngmodule", type: DynamicDialogModule }, { kind: "component", type: DynamicFormComponent, selector: "app-dynamic-form", inputs: ["dynamicFormData"], outputs: ["selectButtonChange", "selectChange", "selectClicked", "switchChange", "autoCompleteSearch", "autoCompleteSelect", "popUpFilesUploaded", "fileDeleted"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,