@corp-products/ui-components 4.2.4 → 4.2.6

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, input, signal, computed, ViewChild, Injectable, Renderer2, ChangeDetectorRef, effect, HostListener, 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, ElementRef, 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';
@@ -32,14 +32,14 @@ import * as i3$1 from 'primeng/floatlabel';
 import { FloatLabel, FloatLabelModule } from 'primeng/floatlabel';
 import { DatePicker, DatePickerModule } from 'primeng/datepicker';
 import { DateTime } from 'luxon';
-import { InputText } from 'primeng/inputtext';
-import { Textarea } from 'primeng/textarea';
 import * as i4$1 from 'primeng/iconfield';
 import { IconField, IconFieldModule } from 'primeng/iconfield';
 import * as i3$3 from 'primeng/inputicon';
 import { InputIcon, InputIconModule } from 'primeng/inputicon';
 import * as i3$2 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
+import { InputText } from 'primeng/inputtext';
+import { Textarea } from 'primeng/textarea';
 import * as i2$2 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import * as i2$3 from 'primeng/multiselect';
@@ -1218,10 +1218,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class InputComponent extends BaseInputComponent {
     type = 'text';
     contentType = 'text';
-    size = "small";
+    size = 'small';
     prefix;
     rows = 2;
     cols = 20;
+    maxLength = null;
     autoResize = false;
     basicInput;
     noStyle;
@@ -1239,7 +1240,7 @@ class InputComponent extends BaseInputComponent {
         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  @case ('number'){\r\n    <p-floatlabel [variant]=\"variant\">\r\n    <p-inputnumber [id]=\"inputId\"\r\n        [showButtons]=\"true\" inputId=\"minmax-buttons\" [showClear]=\"true\"\r\n     [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        \" [disabled]=\"disabled\" [name]=\"name\"  [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  }\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\"\r\n     [type]=\"type\"\r\n\r\n\r\n     [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>\r\n", 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: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$2.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
+    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", maxLength: "maxLength", 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\"\r\n      [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  @case ('number'){\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <p-inputnumber [id]=\"inputId\" [showButtons]=\"true\" inputId=\"minmax-buttons\" [showClear]=\"true\"\r\n      [formControl]=\"control\" [readonly]=\"readonly\" [maxlength]=\"maxLength\" [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\" [ngStyle]=\"{'direction': inputDirection || 'inherit'}\" 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  }\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]=\"type\" [formControl]=\"control\" [readonly]=\"readonly\" [pSize]=\"size\" [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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$2.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -1255,7 +1256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         InputIcon,
                         IconField,
                         InputNumberModule,
-                    ], 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  @case ('number'){\r\n    <p-floatlabel [variant]=\"variant\">\r\n    <p-inputnumber [id]=\"inputId\"\r\n        [showButtons]=\"true\" inputId=\"minmax-buttons\" [showClear]=\"true\"\r\n     [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        \" [disabled]=\"disabled\" [name]=\"name\"  [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  }\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\"\r\n     [type]=\"type\"\r\n\r\n\r\n     [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>\r\n", 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"] }]
+                    ], 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\"\r\n      [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  @case ('number'){\r\n  <p-floatlabel [variant]=\"variant\">\r\n    <p-inputnumber [id]=\"inputId\" [showButtons]=\"true\" inputId=\"minmax-buttons\" [showClear]=\"true\"\r\n      [formControl]=\"control\" [readonly]=\"readonly\" [maxlength]=\"maxLength\" [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\" [ngStyle]=\"{'direction': inputDirection || 'inherit'}\" 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  }\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]=\"type\" [formControl]=\"control\" [readonly]=\"readonly\" [pSize]=\"size\" [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: [{
@@ -1268,6 +1269,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], cols: [{
                 type: Input
+            }], maxLength: [{
+                type: Input
             }], autoResize: [{
                 type: Input
             }], basicInput: [{
@@ -1928,6 +1931,7 @@ class DualCalendarComponent {
     calendarContainer;
     hijriCal = new NgbCalendarIslamicUmalqura();
     renderer = inject(Renderer2);
+    hostEl = inject(ElementRef);
     constructor() {
         effect(() => {
             this.currentLang(); // 👈 track signal
@@ -1937,6 +1941,7 @@ class DualCalendarComponent {
     ngOnChanges(changes) {
         if (changes['isShown']?.currentValue) {
             this.wrapperVisible();
+            setTimeout(() => this.positionCalendar());
         }
         else {
             this.wrapperHidden();
@@ -1975,6 +1980,31 @@ class DualCalendarComponent {
             return;
         this.renderer.setStyle(this.calendarWrapper.nativeElement, 'visibility', 'hidden');
     }
+    positionCalendar() {
+        if (!this.calendarWrapper)
+            return;
+        const anchor = this.hostEl.nativeElement.previousElementSibling || this.hostEl.nativeElement;
+        const triggerRect = anchor.getBoundingClientRect();
+        const el = this.calendarWrapper.nativeElement;
+        const calendarHeight = el.scrollHeight || 370;
+        const calendarWidth = el.scrollWidth || 375;
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
+        if (spaceBelow >= calendarHeight || spaceBelow >= spaceAbove) {
+            el.style.top = `${triggerRect.bottom}px`;
+            el.style.bottom = 'auto';
+        }
+        else {
+            el.style.bottom = `${window.innerHeight - triggerRect.top}px`;
+            el.style.top = 'auto';
+        }
+        let left = triggerRect.right - calendarWidth;
+        if (left < 8)
+            left = 8;
+        if (left + calendarWidth > window.innerWidth - 8)
+            left = window.innerWidth - calendarWidth - 8;
+        el.style.left = `${left}px`;
+    }
     setDate(value) {
         if (!value)
             return;
@@ -1991,7 +2021,7 @@ class DualCalendarComponent {
     }
     onDocumentClick(event) {
         event.stopPropagation();
-        if (!this.calendarContainer)
+        if (!this.calendarContainer || !this.isShown)
             return;
         const clickedInside = this.calendarContainer.nativeElement.contains(event.target);
         this.onClose.emit(!clickedInside);
@@ -2043,6 +2073,7 @@ class DualCalendarComponent {
         this.isShown = isOpen;
         if (isOpen) {
             this.wrapperVisible();
+            setTimeout(() => this.positionCalendar());
         }
         else {
             this.wrapperHidden();
@@ -2066,17 +2097,19 @@ class DualCalendarComponent {
     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", appedToBody: "appedToBody" }, outputs: { gregorianUTC: "gregorianUTC", onClose: "onClose" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
-        ], viewQueries: [{ propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true }, { propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: 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 (click)=\"$event.stopPropagation()\" [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\"  #calendarWrapper>\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;width:100%;height:100%;border-radius:4px;margin:0}.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}.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:32px!important;height:32px!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: [
+        ], viewQueries: [{ propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true }, { propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: 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 (click)=\"$event.stopPropagation()\" [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\"  #calendarWrapper>\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;position:fixed;z-index:9999;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.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;width:100%;height:100%;border-radius:4px;margin:0}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.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}.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:32px!important;height:32px!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'
+                    overflow: 'hidden',
+                    pointerEvents: 'none',
                 })),
                 state('open', style({
                     height: '*',
                     opacity: 1,
-                    overflow: 'hidden'
+                    overflow: 'hidden',
+                    pointerEvents: 'auto',
                 })),
                 transition('closed <=> open', [
                     animate('300ms ease')
@@ -2091,12 +2124,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             state('closed', style({
                                 height: '0px',
                                 opacity: 0,
-                                overflow: 'hidden'
+                                overflow: 'hidden',
+                                pointerEvents: 'none',
                             })),
                             state('open', style({
                                 height: '*',
                                 opacity: 1,
-                                overflow: 'hidden'
+                                overflow: 'hidden',
+                                pointerEvents: 'auto',
                             })),
                             transition('closed <=> open', [
                                 animate('300ms ease')
@@ -2105,7 +2140,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     ], imports: [
                         NgbDatepickerModule,
                         FormsModule,
-                        FormsModule,
                         ReactiveFormsModule,
                         DatePickerModule,
                         FloatLabelModule,
@@ -2115,7 +2149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         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 (click)=\"$event.stopPropagation()\" [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\"  #calendarWrapper>\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;width:100%;height:100%;border-radius:4px;margin:0}.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}.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:32px!important;height:32px!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"] }]
+                    ], 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 (click)=\"$event.stopPropagation()\" [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\"  #calendarWrapper>\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;position:fixed;z-index:9999;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.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;width:100%;height:100%;border-radius:4px;margin:0}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.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}.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:32px!important;height:32px!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: { calendarWrapper: [{
                 type: ViewChild,
                 args: ['calendarWrapper']
@@ -2199,7 +2233,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", selectClicked: "selectClicked", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect", popUpFilesUploaded: "popUpFilesUploaded", fileDeleted: "fileDeleted" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"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        [withoutTime]=\"inputsMap[inputName].withoutTime || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || true\" />\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      <ng-template #optionTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n          <div class=\"flex items-center gap-3\">\r\n            @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n              <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n                   [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n                   class=\"w-8 h-8 rounded-full object-cover flex-shrink-0\" />\r\n            }\r\n            <div class=\"flex flex-col min-w-0\">\r\n              <span class=\"font-medium truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n              @if (inputsMap[inputName].optionTemplate!.subTextKey && item[inputsMap[inputName].optionTemplate!.subTextKey!]) {\r\n                <span class=\"text-sm text-gray-500 truncate\">{{ item[inputsMap[inputName].optionTemplate!.subTextKey!] }}</span>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </ng-template>\r\n      <ng-template #selectedTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n          <div class=\"flex items-center gap-2\">\r\n            @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n              <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n                   [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n                   class=\"w-6 h-6 rounded-full object-cover flex-shrink-0\" />\r\n            }\r\n            <span class=\"truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n          </div>\r\n        }\r\n      </ng-template>\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')\" [optionValue]=\"inputsMap[inputName]?.optionValue || ''\"\r\n        [filter]=\"inputsMap[inputName].filter || false\" [multiple]=\"inputsMap[inputName].multiple || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || false\" [checkmark]=\"inputsMap[inputName].checkmark ?? true\"\r\n        [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [optionTemplate]=\"inputsMap[inputName].optionTemplate ? optionTpl : null\"\r\n        [selectedItemTemplate]=\"inputsMap[inputName].optionTemplate ? selectedTpl : null\"\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.CHECKBOX) {\r\n      <div class=\"flex items-center gap-2 my-3\">\r\n        <p-checkbox [inputId]=\"inputsMap[inputName].inputId || inputName\" [binary]=\"true\"\r\n          [formControl]=\"getFormControl(inputName, formGroup)\" [disabled]=\"inputsMap[inputName].disabled || false\" />\r\n        <label [for]=\"inputsMap[inputName].inputId || inputName\">{{ inputsMap[inputName].label }}</label>\r\n      </div>\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        [allowedDomains]=\"inputsMap[inputName]?.allowedDomains\" />\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>\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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", "appendTo", "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", "appedToBody"], 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", "appendTo", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change", "clicked"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant", "allowedDomains"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { 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: 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" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"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        [withoutTime]=\"inputsMap[inputName].withoutTime || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || true\" />\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'\" [maxLength]=\"inputsMap[inputName].maxLength || null\">\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      <ng-template #optionTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n        <div class=\"flex items-center gap-3\">\r\n          @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n          <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n            [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n            class=\"w-8 h-8 rounded-full object-cover flex-shrink-0\" />\r\n          }\r\n          <div class=\"flex flex-col min-w-0\">\r\n            <span class=\"font-medium truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n            @if (inputsMap[inputName].optionTemplate!.subTextKey &&\r\n            item[inputsMap[inputName].optionTemplate!.subTextKey!]) {\r\n            <span class=\"text-sm text-gray-500 truncate\">{{ item[inputsMap[inputName].optionTemplate!.subTextKey!]\r\n              }}</span>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </ng-template>\r\n      <ng-template #selectedTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n        <div class=\"flex items-center gap-2\">\r\n          @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n          <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n            [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n            class=\"w-6 h-6 rounded-full object-cover flex-shrink-0\" />\r\n          }\r\n          <span class=\"truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n        </div>\r\n        }\r\n      </ng-template>\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')\" [optionValue]=\"inputsMap[inputName]?.optionValue || ''\"\r\n        [filter]=\"inputsMap[inputName].filter || false\" [multiple]=\"inputsMap[inputName].multiple || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || false\" [checkmark]=\"inputsMap[inputName].checkmark ?? true\"\r\n        [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [optionTemplate]=\"inputsMap[inputName].optionTemplate ? optionTpl : null\"\r\n        [selectedItemTemplate]=\"inputsMap[inputName].optionTemplate ? selectedTpl : null\"\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.CHECKBOX) {\r\n      <div class=\"flex items-center gap-2 my-3\">\r\n        <p-checkbox [inputId]=\"inputsMap[inputName].inputId || inputName\" [binary]=\"true\"\r\n          [formControl]=\"getFormControl(inputName, formGroup)\" [disabled]=\"inputsMap[inputName].disabled || false\" />\r\n        <label [for]=\"inputsMap[inputName].inputId || inputName\">{{ inputsMap[inputName].label }}</label>\r\n      </div>\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'\" [allowedDomains]=\"inputsMap[inputName]?.allowedDomains\" />\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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", "appendTo", "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", "appedToBody"], outputs: ["gregorianUTC", "onClose"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "maxLength", "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", "appendTo", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change", "clicked"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant", "allowedDomains"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { 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: LocalizedLabelPipe, name: "localizedLabel" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
@@ -2218,7 +2252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         SwitchComponent,
                         LocalizedLabelPipe,
                         CheckboxModule,
-                    ], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"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        [withoutTime]=\"inputsMap[inputName].withoutTime || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || true\" />\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      <ng-template #optionTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n          <div class=\"flex items-center gap-3\">\r\n            @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n              <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n                   [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n                   class=\"w-8 h-8 rounded-full object-cover flex-shrink-0\" />\r\n            }\r\n            <div class=\"flex flex-col min-w-0\">\r\n              <span class=\"font-medium truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n              @if (inputsMap[inputName].optionTemplate!.subTextKey && item[inputsMap[inputName].optionTemplate!.subTextKey!]) {\r\n                <span class=\"text-sm text-gray-500 truncate\">{{ item[inputsMap[inputName].optionTemplate!.subTextKey!] }}</span>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </ng-template>\r\n      <ng-template #selectedTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n          <div class=\"flex items-center gap-2\">\r\n            @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n              <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n                   [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n                   class=\"w-6 h-6 rounded-full object-cover flex-shrink-0\" />\r\n            }\r\n            <span class=\"truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n          </div>\r\n        }\r\n      </ng-template>\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')\" [optionValue]=\"inputsMap[inputName]?.optionValue || ''\"\r\n        [filter]=\"inputsMap[inputName].filter || false\" [multiple]=\"inputsMap[inputName].multiple || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || false\" [checkmark]=\"inputsMap[inputName].checkmark ?? true\"\r\n        [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [optionTemplate]=\"inputsMap[inputName].optionTemplate ? optionTpl : null\"\r\n        [selectedItemTemplate]=\"inputsMap[inputName].optionTemplate ? selectedTpl : null\"\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.CHECKBOX) {\r\n      <div class=\"flex items-center gap-2 my-3\">\r\n        <p-checkbox [inputId]=\"inputsMap[inputName].inputId || inputName\" [binary]=\"true\"\r\n          [formControl]=\"getFormControl(inputName, formGroup)\" [disabled]=\"inputsMap[inputName].disabled || false\" />\r\n        <label [for]=\"inputsMap[inputName].inputId || inputName\">{{ inputsMap[inputName].label }}</label>\r\n      </div>\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        [allowedDomains]=\"inputsMap[inputName]?.allowedDomains\" />\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>\r\n", styles: [".dynamic-form__content>div{margin-bottom:15px}\n"] }]
+                    ], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n  <div class=\"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        [withoutTime]=\"inputsMap[inputName].withoutTime || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || true\" />\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'\" [maxLength]=\"inputsMap[inputName].maxLength || null\">\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      <ng-template #optionTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n        <div class=\"flex items-center gap-3\">\r\n          @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n          <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n            [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n            class=\"w-8 h-8 rounded-full object-cover flex-shrink-0\" />\r\n          }\r\n          <div class=\"flex flex-col min-w-0\">\r\n            <span class=\"font-medium truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n            @if (inputsMap[inputName].optionTemplate!.subTextKey &&\r\n            item[inputsMap[inputName].optionTemplate!.subTextKey!]) {\r\n            <span class=\"text-sm text-gray-500 truncate\">{{ item[inputsMap[inputName].optionTemplate!.subTextKey!]\r\n              }}</span>\r\n            }\r\n          </div>\r\n        </div>\r\n        }\r\n      </ng-template>\r\n      <ng-template #selectedTpl let-item>\r\n        @if (inputsMap[inputName].optionTemplate) {\r\n        <div class=\"flex items-center gap-2\">\r\n          @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n          <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n            [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n            class=\"w-6 h-6 rounded-full object-cover flex-shrink-0\" />\r\n          }\r\n          <span class=\"truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n        </div>\r\n        }\r\n      </ng-template>\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')\" [optionValue]=\"inputsMap[inputName]?.optionValue || ''\"\r\n        [filter]=\"inputsMap[inputName].filter || false\" [multiple]=\"inputsMap[inputName].multiple || false\"\r\n        [showClear]=\"inputsMap[inputName].showClear || false\" [checkmark]=\"inputsMap[inputName].checkmark ?? true\"\r\n        [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n        [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n        [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n        [optionTemplate]=\"inputsMap[inputName].optionTemplate ? optionTpl : null\"\r\n        [selectedItemTemplate]=\"inputsMap[inputName].optionTemplate ? selectedTpl : null\"\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.CHECKBOX) {\r\n      <div class=\"flex items-center gap-2 my-3\">\r\n        <p-checkbox [inputId]=\"inputsMap[inputName].inputId || inputName\" [binary]=\"true\"\r\n          [formControl]=\"getFormControl(inputName, formGroup)\" [disabled]=\"inputsMap[inputName].disabled || false\" />\r\n        <label [for]=\"inputsMap[inputName].inputId || inputName\">{{ inputsMap[inputName].label }}</label>\r\n      </div>\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'\" [allowedDomains]=\"inputsMap[inputName]?.allowedDomains\" />\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 }]