nira-falcon 1.0.5 → 1.0.7

package/fesm2022/nira-falcon.mjs

@@ -251,12 +251,17 @@ class CoreCheckboxComponent {
     change(event) {
         this.onChange.emit(event);
     }
+    handleKey(event) {
+        if (event.key === 'Enter') {
+            this.checked = !this.checked;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: { label: "label", name: "name", checked: "checked", inputFormControl: "inputFormControl" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"flex gap-3\">\r\n  <input\r\n    type=\"checkbox\"\r\n    [name]=\"name\"\r\n    [(ngModel)]=\"checked\"\r\n    (change)=\"change($event)\"\r\n  />\r\n  <span class=\"checkmark\">{{ label }}</span>\r\n</div>\r\n", styles: [".container{display:inline;position:relative;padding-left:35px;margin-bottom:12px;cursor:pointer;font-size:18px;padding-inline:8px;-webkit-user-select:none;user-select:none}.label{padding-right:8px}.container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container:hover input~.checkmark{background-color:var(--default-checkbox-input-hover-background-color)}.container input:checked~.checkmark{background-color:var(--default-checkbox-input-checked-background-color)}.checkmark:after{content:\"\";position:absolute;display:none}.container input:checked~.checkmark:after{display:block}.container .checkmark:after{left:10px;top:4px;width:4px;height:10px;border:solid white;border-width:0 3px 3px 0;transform:rotate(45deg)}.container{font-size:13px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: { label: "label", name: "name", checked: "checked", inputFormControl: "inputFormControl" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"flex gap-3\" (keydown)=\"handleKey($event)\">\r\n  <input\r\n    type=\"checkbox\"\r\n    [name]=\"name\"\r\n    [(ngModel)]=\"checked\"\r\n    (change)=\"change($event)\"\r\n  />\r\n  <span class=\"checkmark\">{{ label }}</span>\r\n</div>\r\n", styles: [".container{display:inline;position:relative;padding-left:35px;margin-bottom:12px;cursor:pointer;font-size:18px;padding-inline:8px;-webkit-user-select:none;user-select:none}.label{padding-right:8px}.container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container:hover input~.checkmark{background-color:var(--default-checkbox-input-hover-background-color)}.container input:checked~.checkmark{background-color:var(--default-checkbox-input-checked-background-color)}.checkmark:after{content:\"\";position:absolute;display:none}.container input:checked~.checkmark:after{display:block}.container .checkmark:after{left:10px;top:4px;width:4px;height:10px;border:solid white;border-width:0 3px 3px 0;transform:rotate(45deg)}.container{font-size:13px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-checkbox', template: "<div class=\"flex gap-3\">\r\n  <input\r\n    type=\"checkbox\"\r\n    [name]=\"name\"\r\n    [(ngModel)]=\"checked\"\r\n    (change)=\"change($event)\"\r\n  />\r\n  <span class=\"checkmark\">{{ label }}</span>\r\n</div>\r\n", styles: [".container{display:inline;position:relative;padding-left:35px;margin-bottom:12px;cursor:pointer;font-size:18px;padding-inline:8px;-webkit-user-select:none;user-select:none}.label{padding-right:8px}.container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container:hover input~.checkmark{background-color:var(--default-checkbox-input-hover-background-color)}.container input:checked~.checkmark{background-color:var(--default-checkbox-input-checked-background-color)}.checkmark:after{content:\"\";position:absolute;display:none}.container input:checked~.checkmark:after{display:block}.container .checkmark:after{left:10px;top:4px;width:4px;height:10px;border:solid white;border-width:0 3px 3px 0;transform:rotate(45deg)}.container{font-size:13px;font-weight:500}\n"] }]
+            args: [{ selector: 'core-checkbox', template: "<div class=\"flex gap-3\" (keydown)=\"handleKey($event)\">\r\n  <input\r\n    type=\"checkbox\"\r\n    [name]=\"name\"\r\n    [(ngModel)]=\"checked\"\r\n    (change)=\"change($event)\"\r\n  />\r\n  <span class=\"checkmark\">{{ label }}</span>\r\n</div>\r\n", styles: [".container{display:inline;position:relative;padding-left:35px;margin-bottom:12px;cursor:pointer;font-size:18px;padding-inline:8px;-webkit-user-select:none;user-select:none}.label{padding-right:8px}.container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container:hover input~.checkmark{background-color:var(--default-checkbox-input-hover-background-color)}.container input:checked~.checkmark{background-color:var(--default-checkbox-input-checked-background-color)}.checkmark:after{content:\"\";position:absolute;display:none}.container input:checked~.checkmark:after{display:block}.container .checkmark:after{left:10px;top:4px;width:4px;height:10px;border:solid white;border-width:0 3px 3px 0;transform:rotate(45deg)}.container{font-size:13px;font-weight:500}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], name: [{
@@ -660,6 +665,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+class CalendarTodayIconComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarTodayIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CalendarTodayIconComponent, selector: "calendar-today-icon", ngImport: i0, template: "<svg\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  height=\"100%\"\r\n  viewBox=\"0 -960 960 960\"\r\n  width=\"100%\"\r\n>\r\n  <path\r\n    d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z\"\r\n  />\r\n</svg>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CalendarTodayIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'calendar-today-icon', template: "<svg\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  height=\"100%\"\r\n  viewBox=\"0 -960 960 960\"\r\n  width=\"100%\"\r\n>\r\n  <path\r\n    d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z\"\r\n  />\r\n</svg>\r\n" }]
+        }] });
+
 class CoreDatePickerComponent {
     set inputFormControl(value) {
         this._inputFormControl = value;
@@ -675,6 +689,20 @@ class CoreDatePickerComponent {
         this.date = '';
     }
     ngOnInit() { }
+    onInput(event) {
+        const raw = event.target.value.replace(/\D/g, '');
+        if (raw.length > 8)
+            return;
+        let formatted = raw;
+        if (raw.length > 4) {
+            formatted = raw.slice(0, 4) + '-' + raw.slice(4);
+        }
+        if (raw.length > 6) {
+            formatted = formatted.slice(0, 7) + '-' + formatted.slice(7);
+        }
+        this.date = formatted;
+        this._inputFormControl.setValue(formatted);
+    }
     ngAfterViewInit() {
         this.changeDetectorRef.detectChanges();
     }
@@ -687,11 +715,11 @@ class CoreDatePickerComponent {
         this._inputFormControl.setValue(todayDate);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreDatePickerComponent, selector: "core-date-picker", inputs: { canSelectToday: "canSelectToday", defaultDate: "defaultDate", label: "label", inputFormControl: "inputFormControl", size: "size" }, ngImport: i0, template: "<core-input\r\n  [placeholder]=\"label\"\r\n  [inputFormControl]=\"_inputFormControl\"\r\n  (click)=\"isOpenCalendar = true\"\r\n>\r\n</core-input>\r\n<lib-nira-date-picker\r\n  [(isOpenCalendar)]=\"isOpenCalendar\"\r\n  [defaultDate]=\"date ? date : defaultDate\"\r\n  (datePickerResult)=\"onDatePickerResult($event)\"\r\n  [selectToday]=\"canSelectToday\"\r\n  (todayDate)=\"onTodayDate($event)\"\r\n>\r\n</lib-nira-date-picker>\r\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.NiraDatePickerComponent, selector: "lib-nira-date-picker", inputs: ["selectToday", "disable", "changableYears", "theme", "defaultDate", "isOpenCalendar"], outputs: ["isOpenCalendarChange", "todayDate", "datePickerResult"] }, { kind: "component", type: CoreInputComponent, selector: "core-input", inputs: ["type", "canShowWordifyFa", "canSplitNumber", "canHighlightBackground", "maxLength", "size", "inputFormControl", "disable", "placeholder", "errorMessages"], outputs: ["onChange", "onBlurEmit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreDatePickerComponent, selector: "core-date-picker", inputs: { canSelectToday: "canSelectToday", defaultDate: "defaultDate", label: "label", inputFormControl: "inputFormControl", size: "size" }, ngImport: i0, template: "<div class=\"container\">\r\n  <core-input\r\n    [placeholder]=\"''\"\r\n    (input)=\"onInput($event)\"\r\n    [inputFormControl]=\"_inputFormControl\"\r\n  >\r\n  </core-input>\r\n  <!-- <input type=\"text\" [value]=\"date\" (input)=\"onInput($event)\" /> -->\r\n  <calendar-today-icon\r\n    class=\"icon\"\r\n    (click)=\"isOpenCalendar = true\"\r\n  ></calendar-today-icon>\r\n</div>\r\n<lib-nira-date-picker\r\n  [(isOpenCalendar)]=\"isOpenCalendar\"\r\n  [defaultDate]=\"date ? date : defaultDate\"\r\n  (datePickerResult)=\"onDatePickerResult($event)\"\r\n  [selectToday]=\"canSelectToday\"\r\n  (todayDate)=\"onTodayDate($event)\"\r\n>\r\n</lib-nira-date-picker>\r\n", styles: [".container{position:relative}.container .icon{position:absolute;cursor:pointer;left:8px;top:6px;width:24px;height:24px;fill:#383838}\n"], dependencies: [{ kind: "component", type: i1$2.NiraDatePickerComponent, selector: "lib-nira-date-picker", inputs: ["selectToday", "disable", "changableYears", "theme", "defaultDate", "isOpenCalendar"], outputs: ["isOpenCalendarChange", "todayDate", "datePickerResult"] }, { kind: "component", type: CoreInputComponent, selector: "core-input", inputs: ["type", "canShowWordifyFa", "canSplitNumber", "canHighlightBackground", "maxLength", "size", "inputFormControl", "disable", "placeholder", "errorMessages"], outputs: ["onChange", "onBlurEmit"] }, { kind: "component", type: CalendarTodayIconComponent, selector: "calendar-today-icon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-date-picker', template: "<core-input\r\n  [placeholder]=\"label\"\r\n  [inputFormControl]=\"_inputFormControl\"\r\n  (click)=\"isOpenCalendar = true\"\r\n>\r\n</core-input>\r\n<lib-nira-date-picker\r\n  [(isOpenCalendar)]=\"isOpenCalendar\"\r\n  [defaultDate]=\"date ? date : defaultDate\"\r\n  (datePickerResult)=\"onDatePickerResult($event)\"\r\n  [selectToday]=\"canSelectToday\"\r\n  (todayDate)=\"onTodayDate($event)\"\r\n>\r\n</lib-nira-date-picker>\r\n" }]
+            args: [{ selector: 'core-date-picker', template: "<div class=\"container\">\r\n  <core-input\r\n    [placeholder]=\"''\"\r\n    (input)=\"onInput($event)\"\r\n    [inputFormControl]=\"_inputFormControl\"\r\n  >\r\n  </core-input>\r\n  <!-- <input type=\"text\" [value]=\"date\" (input)=\"onInput($event)\" /> -->\r\n  <calendar-today-icon\r\n    class=\"icon\"\r\n    (click)=\"isOpenCalendar = true\"\r\n  ></calendar-today-icon>\r\n</div>\r\n<lib-nira-date-picker\r\n  [(isOpenCalendar)]=\"isOpenCalendar\"\r\n  [defaultDate]=\"date ? date : defaultDate\"\r\n  (datePickerResult)=\"onDatePickerResult($event)\"\r\n  [selectToday]=\"canSelectToday\"\r\n  (todayDate)=\"onTodayDate($event)\"\r\n>\r\n</lib-nira-date-picker>\r\n", styles: [".container{position:relative}.container .icon{position:absolute;cursor:pointer;left:8px;top:6px;width:24px;height:24px;fill:#383838}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { canSelectToday: [{
                 type: Input
             }], defaultDate: [{
@@ -770,12 +798,31 @@ class CoreRadioButtonsComponent {
         this.selectedItem = item;
         this.onChange.emit(String(item.value));
     }
+    handleKey(event) {
+        const currentIndex = this.newItems.findIndex((item) => item.value === this.selectedItem.value);
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (this.newItems.length - 1 > currentIndex) {
+                    this.selectedItem = this.newItems[currentIndex + 1];
+                    this.onChange.emit(String(this.selectedItem.value));
+                }
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (currentIndex > 0) {
+                    this.selectedItem = this.newItems[currentIndex - 1];
+                    this.onChange.emit(String(this.selectedItem.value));
+                }
+                break;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreRadioButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreRadioButtonsComponent, selector: "core-radio-buttons", inputs: { items: "items", defaultValue: "defaultValue", titleKey: "titleKey", valueKey: "valueKey", layout: "layout", name: "name" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"root\" [ngClass]=\"{ 'container-row': layout == 'row' }\">\r\n  <div\r\n    class=\"radio-bottom\"\r\n    [ngClass]=\"{ 'item-row-reverse': layout == 'row' }\"\r\n    *ngFor=\"let item of newItems\"\r\n    (click)=\"onItemClick(item)\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [name]=\"name\"\r\n      [value]=\"item.value == selectedItem.value\"\r\n      [checked]=\"item.value == selectedItem.value\"\r\n      (click)=\"onItemClick(item)\"\r\n    />\r\n    <span class=\"label\">{{ item.title }}</span>\r\n  </div>\r\n</div>\r\n", styles: [".root{display:flex;flex-direction:column;gap:6px}.container-row{flex-direction:row}.item-row-reverse{display:flex;flex-direction:row-reverse}.radio-bottom{display:inline-flex;flex-direction:row;align-items:center;margin-left:auto;cursor:pointer;-webkit-user-select:none;user-select:none}input[type=radio]{appearance:none;width:18px;height:18px;border-radius:50%;background-clip:content-box;border:1px solid var(--default-radio-buttons-input-border-color);background-color:var(--default-radio-buttons-input-background-color)}input[type=radio]:checked{background-color:var(--default-radio-buttons-background-color);padding:4px;border:2px solid var(--default-radio-buttons-border-color)}.label{font-size:small;font-weight:500;margin-inline:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreRadioButtonsComponent, selector: "core-radio-buttons", inputs: { items: "items", defaultValue: "defaultValue", titleKey: "titleKey", valueKey: "valueKey", layout: "layout", name: "name" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div\r\n  class=\"root\"\r\n  (keydown)=\"handleKey($event)\"\r\n  [ngClass]=\"{ 'container-row': layout == 'row' }\"\r\n>\r\n  <div\r\n    class=\"radio-bottom\"\r\n    [ngClass]=\"{ 'item-row-reverse': layout == 'row' }\"\r\n    *ngFor=\"let item of newItems\"\r\n    (click)=\"onItemClick(item)\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [name]=\"name\"\r\n      [value]=\"item.value == selectedItem.value\"\r\n      [checked]=\"item.value == selectedItem.value\"\r\n      (click)=\"onItemClick(item)\"\r\n    />\r\n    <span class=\"label\">{{ item.title }}</span>\r\n  </div>\r\n</div>\r\n", styles: [".root{display:flex;flex-direction:column;gap:6px}.container-row{flex-direction:row}.item-row-reverse{display:flex;flex-direction:row-reverse}.radio-bottom{display:inline-flex;flex-direction:row;align-items:center;margin-left:auto;cursor:pointer;-webkit-user-select:none;user-select:none}input[type=radio]{appearance:none;width:18px;height:18px;border-radius:50%;background-clip:content-box;border:1px solid var(--default-radio-buttons-input-border-color);background-color:var(--default-radio-buttons-input-background-color)}input[type=radio]:checked{background-color:var(--default-radio-buttons-background-color);padding:4px;border:2px solid var(--default-radio-buttons-border-color)}.label{font-size:small;font-weight:500;margin-inline:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreRadioButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-radio-buttons', template: "<div class=\"root\" [ngClass]=\"{ 'container-row': layout == 'row' }\">\r\n  <div\r\n    class=\"radio-bottom\"\r\n    [ngClass]=\"{ 'item-row-reverse': layout == 'row' }\"\r\n    *ngFor=\"let item of newItems\"\r\n    (click)=\"onItemClick(item)\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [name]=\"name\"\r\n      [value]=\"item.value == selectedItem.value\"\r\n      [checked]=\"item.value == selectedItem.value\"\r\n      (click)=\"onItemClick(item)\"\r\n    />\r\n    <span class=\"label\">{{ item.title }}</span>\r\n  </div>\r\n</div>\r\n", styles: [".root{display:flex;flex-direction:column;gap:6px}.container-row{flex-direction:row}.item-row-reverse{display:flex;flex-direction:row-reverse}.radio-bottom{display:inline-flex;flex-direction:row;align-items:center;margin-left:auto;cursor:pointer;-webkit-user-select:none;user-select:none}input[type=radio]{appearance:none;width:18px;height:18px;border-radius:50%;background-clip:content-box;border:1px solid var(--default-radio-buttons-input-border-color);background-color:var(--default-radio-buttons-input-background-color)}input[type=radio]:checked{background-color:var(--default-radio-buttons-background-color);padding:4px;border:2px solid var(--default-radio-buttons-border-color)}.label{font-size:small;font-weight:500;margin-inline:4px}\n"] }]
+            args: [{ selector: 'core-radio-buttons', template: "<div\r\n  class=\"root\"\r\n  (keydown)=\"handleKey($event)\"\r\n  [ngClass]=\"{ 'container-row': layout == 'row' }\"\r\n>\r\n  <div\r\n    class=\"radio-bottom\"\r\n    [ngClass]=\"{ 'item-row-reverse': layout == 'row' }\"\r\n    *ngFor=\"let item of newItems\"\r\n    (click)=\"onItemClick(item)\"\r\n  >\r\n    <input\r\n      type=\"radio\"\r\n      [name]=\"name\"\r\n      [value]=\"item.value == selectedItem.value\"\r\n      [checked]=\"item.value == selectedItem.value\"\r\n      (click)=\"onItemClick(item)\"\r\n    />\r\n    <span class=\"label\">{{ item.title }}</span>\r\n  </div>\r\n</div>\r\n", styles: [".root{display:flex;flex-direction:column;gap:6px}.container-row{flex-direction:row}.item-row-reverse{display:flex;flex-direction:row-reverse}.radio-bottom{display:inline-flex;flex-direction:row;align-items:center;margin-left:auto;cursor:pointer;-webkit-user-select:none;user-select:none}input[type=radio]{appearance:none;width:18px;height:18px;border-radius:50%;background-clip:content-box;border:1px solid var(--default-radio-buttons-input-border-color);background-color:var(--default-radio-buttons-input-background-color)}input[type=radio]:checked{background-color:var(--default-radio-buttons-background-color);padding:4px;border:2px solid var(--default-radio-buttons-border-color)}.label{font-size:small;font-weight:500;margin-inline:4px}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], defaultValue: [{
@@ -854,6 +901,7 @@ class CoreSelectComponent {
         this.cdr = cdr;
         this.elRef = elRef;
         this.selectedItem = {};
+        this.focusItem = undefined;
         this.newItems = [];
         this.isOpenMenu = false;
         this._items = [];
@@ -887,31 +935,33 @@ class CoreSelectComponent {
         if (this.disabled)
             return;
         this.isOpenMenu = !this.isOpenMenu;
-        if (this.isOpenMenu && canFocus) {
-            setTimeout(() => {
-                const element = this.focusableElements.toArray();
-                element[0].nativeElement.focus();
-            }, 50);
-        }
     }
     handleKey(event) {
-        const elements = this.focusableElements.toArray();
-        if (event.key === 'ArrowDown') {
-            this.currentIndex = (this.currentIndex + 1) % elements.length;
-            elements[this.currentIndex].nativeElement.focus();
-        }
-        if (event.key === 'ArrowUp') {
-            this.currentIndex =
-                (this.currentIndex - 1 + elements.length) % elements.length;
-            elements[this.currentIndex].nativeElement.focus();
-        }
-    }
-    dropdownItemKeypress(event, item) {
-        if (event.key === 'Enter') {
-            this.onItemSelect(item, true);
-        }
-        else if (event.key === 'Escape') {
-            this.isOpenMenu = false;
+        const currentItemIndex = this._items.findIndex((item) => item[this.valueKeyObject] === this.focusItem?.value);
+        switch (event.key) {
+            case 'Enter':
+                this.isOpenMenu = !this.isOpenMenu;
+                if (this.focusItem)
+                    this.selectedItem = this.focusItem;
+                break;
+            case ' ':
+                this.isOpenMenu = !this.isOpenMenu;
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.isOpenMenu = false;
+                break;
+            case 'ArrowDown':
+                if (this.isOpenMenu && this._items.length - 1 > currentItemIndex)
+                    this.focusItem = this._items[currentItemIndex + 1];
+                break;
+            case 'ArrowUp':
+                if (this.isOpenMenu && currentItemIndex > 0)
+                    this.focusItem = this._items[currentItemIndex - 1];
+                break;
+            case 'Tab':
+                this.isOpenMenu = false;
+                break;
         }
     }
     onItemSelect(selectedItem, isFromUi) {
@@ -920,19 +970,16 @@ class CoreSelectComponent {
         this.isOpenMenu = false;
         if (!selectedItem) {
             this.selectedItem = {};
+            this.focusItem = undefined;
             this.inputFormControl.reset();
             return;
         }
         this.selectedItem = selectedItem;
+        this.focusItem = selectedItem;
         const mainItem = this._items.find((item) => item[this.valueKeyObject] === selectedItem.value);
         this.inputFormControl.setValue(selectedItem.value);
         this.onItemSelected.emit(mainItem);
     }
-    onEnterPress(e) {
-        if (e.key === 'Enter') {
-            this.openMenuClick(true);
-        }
-    }
     focusOut(event) {
         const nextFocusedElement = event.relatedTarget;
         if (!nextFocusedElement ||
@@ -942,11 +989,11 @@ class CoreSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreSelectComponent, selector: "core-select", inputs: { titleKey: "titleKey", valueKey: "valueKey", size: "size", canHighlightBackground: "canHighlightBackground", items: "items", defaultValue: "defaultValue", label: "label", disabled: "disabled", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, viewQueries: [{ propertyName: "focusableElements", predicate: ["focusable"], descendants: true }], ngImport: i0, template: "<div class=\"dropdown\" (focusout)=\"focusOut($event)\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      'highlight-background':\r\n        canHighlightBackground &&\r\n        (selectedItem | json) === ({} | json) &&\r\n        !(inputFormControl.touched && inputFormControl.errors),\r\n      selectError: inputFormControl.touched && inputFormControl.errors ,\r\n      'disable-selector': disabled,\r\n\r\n    }\"\r\n    tabindex=\"0\"\r\n    (keypress)=\"onEnterPress($event)\"\r\n    (click)=\"openMenuClick(false)\"\r\n  >\r\n    <span\r\n      class=\"placeholder-top\"\r\n      *ngIf=\"(selectedItem | json) != ({} | json)\"\r\n      >{{ label }}</span\r\n    >\r\n    <arrow-down-icon\r\n      class=\"caret fill-secondary-text-color h-6\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    ></arrow-down-icon>\r\n\r\n    <span\r\n      [ngClass]=\"[\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? 'placeholder'\r\n          : 'selected'\r\n      ]\"\r\n      >{{\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? label\r\n          : selectedItem.title\r\n      }}</span\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"no-data\"\r\n    *ngIf=\"newItems.length === 0\"\r\n    [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n  >\r\n    <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n    <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n  </div>\r\n  <ul\r\n    class=\"menu dropdown\"\r\n    (keydown)=\"handleKey($event)\"\r\n    [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n  >\r\n    <li\r\n      *ngFor=\"let item of newItems\"\r\n      class=\"dropdown-item\"\r\n      #focusable\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n      (keypress)=\"dropdownItemKeypress($event, item)\"\r\n      tabindex=\"0\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n  <div class=\"label-error overflow-hidden\">\r\n    <span\r\n      *ngIf=\"\r\n       inputFormControl.touched  &&\r\n      inputFormControl.errors?.['required']\"\r\n      >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;height:42px;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:1px solid rgba(19,92,175,.397);outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu li:focus{outline:none}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WarningIconComponent, selector: "warning-icon" }, { kind: "component", type: ArrowDownIconComponent, selector: "arrow-down-icon" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreSelectComponent, selector: "core-select", inputs: { titleKey: "titleKey", valueKey: "valueKey", size: "size", canHighlightBackground: "canHighlightBackground", items: "items", defaultValue: "defaultValue", label: "label", disabled: "disabled", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, viewQueries: [{ propertyName: "focusableElements", predicate: ["focusable"], descendants: true }], ngImport: i0, template: "<div class=\"dropdown\" (focusout)=\"focusOut($event)\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      'highlight-background':\r\n        canHighlightBackground &&\r\n        (selectedItem | json) === ({} | json) &&\r\n        !(inputFormControl.touched && inputFormControl.errors),\r\n      selectError: inputFormControl.touched && inputFormControl.errors ,\r\n      'disable-selector': disabled,\r\n\r\n    }\"\r\n    tabindex=\"0\"\r\n    (keydown)=\"handleKey($event)\"\r\n    (click)=\"openMenuClick(false)\"\r\n  >\r\n    <span\r\n      class=\"placeholder-top\"\r\n      *ngIf=\"(selectedItem | json) != ({} | json)\"\r\n      >{{ label }}</span\r\n    >\r\n    <arrow-down-icon\r\n      class=\"caret fill-secondary-text-color h-6\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    ></arrow-down-icon>\r\n\r\n    <span\r\n      [ngClass]=\"[\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? 'placeholder'\r\n          : 'selected'\r\n      ]\"\r\n      >{{\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? label\r\n          : selectedItem.title\r\n      }}</span\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"no-data\"\r\n    *ngIf=\"newItems.length === 0\"\r\n    [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n  >\r\n    <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n    <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n  </div>\r\n  <ul\r\n    class=\"menu dropdown\"\r\n    tabindex=\"0\"\r\n    [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n  >\r\n    <li\r\n      *ngFor=\"let item of newItems\"\r\n      class=\"dropdown-item\"\r\n      #focusable\r\n      [ngClass]=\"{ active: item.value === focusItem?.value }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n  <div class=\"label-error overflow-hidden\">\r\n    <span\r\n      *ngIf=\"\r\n       inputFormControl.touched  &&\r\n      inputFormControl.errors?.['required']\"\r\n      >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;height:42px;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:2px solid rgba(37,112,198,.473);outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu li:focus{outline:none}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WarningIconComponent, selector: "warning-icon" }, { kind: "component", type: ArrowDownIconComponent, selector: "arrow-down-icon" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-select', template: "<div class=\"dropdown\" (focusout)=\"focusOut($event)\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      'highlight-background':\r\n        canHighlightBackground &&\r\n        (selectedItem | json) === ({} | json) &&\r\n        !(inputFormControl.touched && inputFormControl.errors),\r\n      selectError: inputFormControl.touched && inputFormControl.errors ,\r\n      'disable-selector': disabled,\r\n\r\n    }\"\r\n    tabindex=\"0\"\r\n    (keypress)=\"onEnterPress($event)\"\r\n    (click)=\"openMenuClick(false)\"\r\n  >\r\n    <span\r\n      class=\"placeholder-top\"\r\n      *ngIf=\"(selectedItem | json) != ({} | json)\"\r\n      >{{ label }}</span\r\n    >\r\n    <arrow-down-icon\r\n      class=\"caret fill-secondary-text-color h-6\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    ></arrow-down-icon>\r\n\r\n    <span\r\n      [ngClass]=\"[\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? 'placeholder'\r\n          : 'selected'\r\n      ]\"\r\n      >{{\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? label\r\n          : selectedItem.title\r\n      }}</span\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"no-data\"\r\n    *ngIf=\"newItems.length === 0\"\r\n    [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n  >\r\n    <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n    <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n  </div>\r\n  <ul\r\n    class=\"menu dropdown\"\r\n    (keydown)=\"handleKey($event)\"\r\n    [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n  >\r\n    <li\r\n      *ngFor=\"let item of newItems\"\r\n      class=\"dropdown-item\"\r\n      #focusable\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n      (keypress)=\"dropdownItemKeypress($event, item)\"\r\n      tabindex=\"0\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n  <div class=\"label-error overflow-hidden\">\r\n    <span\r\n      *ngIf=\"\r\n       inputFormControl.touched  &&\r\n      inputFormControl.errors?.['required']\"\r\n      >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;height:42px;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:1px solid rgba(19,92,175,.397);outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu li:focus{outline:none}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}\n"] }]
+            args: [{ selector: 'core-select', template: "<div class=\"dropdown\" (focusout)=\"focusOut($event)\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      'highlight-background':\r\n        canHighlightBackground &&\r\n        (selectedItem | json) === ({} | json) &&\r\n        !(inputFormControl.touched && inputFormControl.errors),\r\n      selectError: inputFormControl.touched && inputFormControl.errors ,\r\n      'disable-selector': disabled,\r\n\r\n    }\"\r\n    tabindex=\"0\"\r\n    (keydown)=\"handleKey($event)\"\r\n    (click)=\"openMenuClick(false)\"\r\n  >\r\n    <span\r\n      class=\"placeholder-top\"\r\n      *ngIf=\"(selectedItem | json) != ({} | json)\"\r\n      >{{ label }}</span\r\n    >\r\n    <arrow-down-icon\r\n      class=\"caret fill-secondary-text-color h-6\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    ></arrow-down-icon>\r\n\r\n    <span\r\n      [ngClass]=\"[\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? 'placeholder'\r\n          : 'selected'\r\n      ]\"\r\n      >{{\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? label\r\n          : selectedItem.title\r\n      }}</span\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"no-data\"\r\n    *ngIf=\"newItems.length === 0\"\r\n    [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n  >\r\n    <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n    <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n  </div>\r\n  <ul\r\n    class=\"menu dropdown\"\r\n    tabindex=\"0\"\r\n    [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n  >\r\n    <li\r\n      *ngFor=\"let item of newItems\"\r\n      class=\"dropdown-item\"\r\n      #focusable\r\n      [ngClass]=\"{ active: item.value === focusItem?.value }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n  <div class=\"label-error overflow-hidden\">\r\n    <span\r\n      *ngIf=\"\r\n       inputFormControl.touched  &&\r\n      inputFormControl.errors?.['required']\"\r\n      >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;height:42px;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:2px solid rgba(37,112,198,.473);outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu li:focus{outline:none}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { titleKey: [{
                 type: Input
             }], valueKey: [{
@@ -987,12 +1034,20 @@ class CoreSwitchComponent {
             this.toggle = this.icon.iconActive;
         this.value.emit(this.toggle);
     }
+    handleKey(event) {
+        if (event.key === 'Enter') {
+            if (this.toggle === this.icon.iconActive)
+                this.toggle = this.icon.iconInactive;
+            else
+                this.toggle = this.icon.iconActive;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreSwitchComponent, selector: "core-switch", inputs: { icon: "icon", label: "label", defaultValue: "defaultValue" }, outputs: { value: "value" }, ngImport: i0, template: "<div class=\"switch-container\" (click)=\"change()\">\r\n  <input\r\n    type=\"checkbox\"\r\n    class=\"switch\"\r\n    [checked]=\"toggle === icon.iconActive\"\r\n  />\r\n  <div class=\"switch-color\">\r\n    <span>{{ label }} </span>\r\n  </div>\r\n  <label for=\"switch\" class=\"label\"\r\n    ><span class=\"material-symbols-outlined\">{{ toggle }} </span>\r\n  </label>\r\n</div>\r\n", styles: [".switch-container{min-width:55px;max-width:118px;height:30px;border-radius:10em;border:1px solid var(--default-switch-border-color);position:relative;cursor:pointer;text-align:end}.switch-container .switch{display:none}.switch-container .switch:checked~.label{transform:translate(87px) rotate(360deg)}.switch-container .switch~.label{transition:all 1s cubic-bezier(.34,1.36,.2,1)}.switch-container .switch-color{width:100%;height:30px;background:var(--default-switch-background-color);border-radius:10em;z-index:0;position:absolute;transition:all .5s cubic-bezier(.34,1.36,.2,1)}.switch-container .label{width:25px;height:25px;text-align:center;border-radius:10em;background:var(--default-switch-background-label-color);position:absolute;top:2px;left:3px;box-shadow:2px 2px 10px 2px var(--default-switch-box-shadow-color);z-index:2;cursor:pointer;-webkit-user-select:none;user-select:none}.switch-container .label span{font-size:20px;padding-block-start:3px;padding-inline-start:1px;color:var(--default-switch-text-color)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreSwitchComponent, selector: "core-switch", inputs: { icon: "icon", label: "label", defaultValue: "defaultValue" }, outputs: { value: "value" }, ngImport: i0, template: "<div class=\"switch-container\" (keydown)=\"handleKey($event)\" (click)=\"change()\">\r\n  <input\r\n    type=\"checkbox\"\r\n    class=\"switch\"\r\n    [checked]=\"toggle === icon.iconActive\"\r\n  />\r\n  <div class=\"switch-color\">\r\n    <span>{{ label }} </span>\r\n  </div>\r\n  <label for=\"switch\" class=\"label\"\r\n    ><span class=\"material-symbols-outlined\">{{ toggle }} </span>\r\n  </label>\r\n</div>\r\n", styles: [".switch-container{min-width:55px;max-width:118px;height:30px;border-radius:10em;border:1px solid var(--default-switch-border-color);position:relative;cursor:pointer;text-align:end}.switch-container .switch{display:none}.switch-container .switch:checked~.label{transform:translate(87px) rotate(360deg)}.switch-container .switch~.label{transition:all 1s cubic-bezier(.34,1.36,.2,1)}.switch-container .switch-color{width:100%;height:30px;background:var(--default-switch-background-color);border-radius:10em;z-index:0;position:absolute;transition:all .5s cubic-bezier(.34,1.36,.2,1)}.switch-container .label{width:25px;height:25px;text-align:center;border-radius:10em;background:var(--default-switch-background-label-color);position:absolute;top:2px;left:3px;box-shadow:2px 2px 10px 2px var(--default-switch-box-shadow-color);z-index:2;cursor:pointer;-webkit-user-select:none;user-select:none}.switch-container .label span{font-size:20px;padding-block-start:3px;padding-inline-start:1px;color:var(--default-switch-text-color)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-switch', template: "<div class=\"switch-container\" (click)=\"change()\">\r\n  <input\r\n    type=\"checkbox\"\r\n    class=\"switch\"\r\n    [checked]=\"toggle === icon.iconActive\"\r\n  />\r\n  <div class=\"switch-color\">\r\n    <span>{{ label }} </span>\r\n  </div>\r\n  <label for=\"switch\" class=\"label\"\r\n    ><span class=\"material-symbols-outlined\">{{ toggle }} </span>\r\n  </label>\r\n</div>\r\n", styles: [".switch-container{min-width:55px;max-width:118px;height:30px;border-radius:10em;border:1px solid var(--default-switch-border-color);position:relative;cursor:pointer;text-align:end}.switch-container .switch{display:none}.switch-container .switch:checked~.label{transform:translate(87px) rotate(360deg)}.switch-container .switch~.label{transition:all 1s cubic-bezier(.34,1.36,.2,1)}.switch-container .switch-color{width:100%;height:30px;background:var(--default-switch-background-color);border-radius:10em;z-index:0;position:absolute;transition:all .5s cubic-bezier(.34,1.36,.2,1)}.switch-container .label{width:25px;height:25px;text-align:center;border-radius:10em;background:var(--default-switch-background-label-color);position:absolute;top:2px;left:3px;box-shadow:2px 2px 10px 2px var(--default-switch-box-shadow-color);z-index:2;cursor:pointer;-webkit-user-select:none;user-select:none}.switch-container .label span{font-size:20px;padding-block-start:3px;padding-inline-start:1px;color:var(--default-switch-text-color)}\n"] }]
+            args: [{ selector: 'core-switch', template: "<div class=\"switch-container\" (keydown)=\"handleKey($event)\" (click)=\"change()\">\r\n  <input\r\n    type=\"checkbox\"\r\n    class=\"switch\"\r\n    [checked]=\"toggle === icon.iconActive\"\r\n  />\r\n  <div class=\"switch-color\">\r\n    <span>{{ label }} </span>\r\n  </div>\r\n  <label for=\"switch\" class=\"label\"\r\n    ><span class=\"material-symbols-outlined\">{{ toggle }} </span>\r\n  </label>\r\n</div>\r\n", styles: [".switch-container{min-width:55px;max-width:118px;height:30px;border-radius:10em;border:1px solid var(--default-switch-border-color);position:relative;cursor:pointer;text-align:end}.switch-container .switch{display:none}.switch-container .switch:checked~.label{transform:translate(87px) rotate(360deg)}.switch-container .switch~.label{transition:all 1s cubic-bezier(.34,1.36,.2,1)}.switch-container .switch-color{width:100%;height:30px;background:var(--default-switch-background-color);border-radius:10em;z-index:0;position:absolute;transition:all .5s cubic-bezier(.34,1.36,.2,1)}.switch-container .label{width:25px;height:25px;text-align:center;border-radius:10em;background:var(--default-switch-background-label-color);position:absolute;top:2px;left:3px;box-shadow:2px 2px 10px 2px var(--default-switch-box-shadow-color);z-index:2;cursor:pointer;-webkit-user-select:none;user-select:none}.switch-container .label span{font-size:20px;padding-block-start:3px;padding-inline-start:1px;color:var(--default-switch-text-color)}\n"] }]
         }], propDecorators: { value: [{
                 type: Output
             }], icon: [{
@@ -2281,7 +2336,7 @@ class CoreTableComponent {
     }
     handleEnter(event) {
         const key = event;
-        if (document.activeElement === this.table.nativeElement) {
+        if (document.activeElement === this.table?.nativeElement) {
             if (key.key === 'ArrowDown') {
                 if (this.selectedItemIndex === this.sortedTableData.length - 1)
                     return;
@@ -3191,14 +3246,15 @@ class CoreSelectSearchComponent {
         this._defaultValue = data;
         this.init();
     }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
+    constructor(elRef) {
+        this.elRef = elRef;
         this.selectedItem = {};
+        this.focusItem = undefined;
         this.newItems = [];
         this.isOpenMenu = false;
         this._items = [];
         this.keys = [];
-        this.searchText = '';
+        this.currentItemIndex = 0;
         this.size = 'small';
         this.searchKeys = '';
         this.canAddValueKeyAndTitleKeyInSearchKeys = true;
@@ -3214,13 +3270,68 @@ class CoreSelectSearchComponent {
         this.valueKeyObject = this.valueKey;
         this.newItems = this.changeItemsType(this._items);
         this.inputFormControl.setValue(this._defaultValue);
-        this.onItemSelect(this.newItems.find((item) => item.value == this._defaultValue), false);
-        this.changeSearchText();
+        this.itemSelect(this.newItems.find((item) => item.value == this._defaultValue), false);
+        this.onChangeText();
     }
     ngOnInit() {
         this.keys = this.searchKeys.length > 0 ? this.searchKeys.split(',') : [];
         this.init();
-        this.changeSearchText();
+        this.onChangeText();
+        this.setInputFocus();
+    }
+    handleKey(event) {
+        const items = this.filteredItems.getValue();
+        this.currentItemIndex = items.findIndex((item) => item[this.valueKeyObject] === this.focusItem?.value);
+        switch (event.key) {
+            case 'Enter':
+                this.isOpenMenu = !this.isOpenMenu;
+                this.setInputFocus();
+                if (this.focusItem) {
+                    this.selectedItem = this.focusItem;
+                    this.inputFormControl.setValue(this.selectedItem.title);
+                    this.searchText = this.selectedItem.title;
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.isOpenMenu = false;
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (this.isOpenMenu && items.length - 1 > this.currentItemIndex)
+                    this.focusItem = items[this.currentItemIndex + 1];
+                this.scrollToActive();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.isOpenMenu && this.currentItemIndex > 0)
+                    this.focusItem = items[this.currentItemIndex - 1];
+                this.scrollToActive();
+                break;
+            case 'Tab':
+                this.isOpenMenu = false;
+                break;
+        }
+    }
+    itemSelect(selectedItem, isFromUi) {
+        if (isFromUi)
+            this.inputFormControl.markAsTouched();
+        this.isOpenMenu = false;
+        if (!selectedItem) {
+            this.selectedItem = {};
+            return;
+        }
+        this.selectedItem = selectedItem;
+        const mainItem = this._items.find((item) => item[this.valueKeyObject] === selectedItem.value);
+        this.inputFormControl.setValue(selectedItem.title);
+        this.searchText = selectedItem.title;
+        this.onItemSelected.emit(mainItem);
+        this.onChangeText();
+    }
+    onItemSelect(event, selectedItem, isFromUi) {
+        event.preventDefault();
+        this.focusItem = selectedItem;
+        this.itemSelect(selectedItem, isFromUi);
     }
     changeItemsType(items) {
         return items.map((item) => {
@@ -3234,70 +3345,51 @@ class CoreSelectSearchComponent {
             return result;
         });
     }
-    async changeSearchText() {
-        if (this.searchText.length > 0) {
-            this.filteredItems.next(this.newItems.filter((item) => {
-                let isMach = false;
-                if ((this.canAddValueKeyAndTitleKeyInSearchKeys ||
-                    this.keys.length == 0) &&
-                    (item.title.includes(this.searchText) ||
-                        item.value.toLowerCase().includes(this.searchText.toLowerCase()))) {
-                    isMach = true;
-                }
-                if (this.keys.length > 0) {
-                    this.keys.forEach((key) => {
-                        if (item[key]
-                            .toString()
-                            .toLowerCase()
-                            .includes(this.searchText.toLowerCase())) {
-                            isMach = true;
-                        }
-                    });
-                }
-                return isMach;
-            }));
+    async onChangeText() {
+        if (this.selectedItem.title === this.searchText) {
+            this.filteredItems.next(this.newItems);
+        }
+        else if (this.searchText) {
+            this.filteredItems.next(this.newItems.filter((item) => item.title.includes(this.searchText) ||
+                item.value.toLowerCase().includes(this.searchText)));
         }
         else {
             this.filteredItems.next(this.newItems);
         }
     }
+    setInputFocus() {
+        if (this.inputElement) {
+            setTimeout(() => {
+                this.inputElement.nativeElement?.focus();
+            });
+        }
+    }
     openMenuClick() {
         if (this.disabled)
             return;
         this.isOpenMenu = !this.isOpenMenu;
     }
-    onItemSelect(selectedItem, isFromUi) {
-        if (isFromUi)
-            this.inputFormControl.markAsTouched();
-        this.isOpenMenu = false;
-        if (!selectedItem) {
-            this.selectedItem = {};
-            return;
-        }
-        this.selectedItem = selectedItem;
-        const mainItem = this._items.find((item) => item[this.valueKeyObject] === selectedItem.value);
-        this.inputFormControl.setValue(selectedItem.value);
-        this.clearText();
-        this.onItemSelected.emit(mainItem);
+    scrollToActive() {
+        const element = document.getElementById('scroll' + this.currentItemIndex);
+        element?.scrollIntoView({
+            block: 'center',
+            behavior: 'smooth',
+        });
     }
     focusOut(event) {
-        const target = event.relatedTarget;
-        if (!this.elementRef.nativeElement.contains(target)) {
+        const nextFocusedElement = event.relatedTarget;
+        if (!nextFocusedElement ||
+            !this.elRef.nativeElement.contains(nextFocusedElement)) {
             this.isOpenMenu = false;
             this.inputFormControl.markAsTouched();
-            this.clearText();
         }
     }
-    clearText() {
-        this.searchText = '';
-        this.changeSearchText();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreSelectSearchComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreSelectSearchComponent, selector: "core-select-search", inputs: { titleKey: "titleKey", valueKey: "valueKey", size: "size", searchKeys: "searchKeys", canAddValueKeyAndTitleKeyInSearchKeys: "canAddValueKeyAndTitleKeyInSearchKeys", canHighlightBackground: "canHighlightBackground", items: "items", defaultValue: "defaultValue", label: "label", disabled: "disabled", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut($event)\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      'highlight-background':\r\n        canHighlightBackground &&\r\n        (selectedItem | json) === ({} | json) &&\r\n        !(inputFormControl.touched && inputFormControl.errors),\r\n      selectError: inputFormControl.touched && inputFormControl.errors ,\r\n      'disable-selector': disabled,\r\n    }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <span\r\n      class=\"placeholder-top\"\r\n      *ngIf=\"(selectedItem | json) != ({} | json)\"\r\n      >{{ label }}</span\r\n    >\r\n    <arrow-down-icon\r\n      class=\"caret fill-secondary-text-color h-6\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    ></arrow-down-icon>\r\n\r\n    <span\r\n      [ngClass]=\"[\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? 'placeholder'\r\n          : 'selected'\r\n      ]\"\r\n      >{{\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? label\r\n          : selectedItem.title\r\n      }}</span\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"no-data\"\r\n    *ngIf=\"newItems.length === 0\"\r\n    [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n  >\r\n    <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n    <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n  </div>\r\n  <ul\r\n    class=\"menu\"\r\n    *ngIf=\"newItems.length > 0\"\r\n    [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n  >\r\n    <div\r\n      *ngIf=\"newItems.length > 4\"\r\n      class=\"grid grid-cols-12 h-11 items-center pe-5 ps-5 bg-white shadow-md\"\r\n    >\r\n      <input\r\n        placeholder=\"\u062C\u0633\u062A\u062C\u0648 \"\r\n        class=\"col-span-11 bg-transparent focus:outline-none min-h-9\"\r\n        [(ngModel)]=\"searchText\"\r\n        (keyup)=\"changeSearchText()\"\r\n      />\r\n      <span class=\"md:h-7 flex justify-center\">\r\n        <search-icon\r\n          class=\"transform scale-x-[-1] fill-icon-color hover:fill-primary-color hover:cursor-pointer\"\r\n        >\r\n        </search-icon\r\n      ></span>\r\n    </div>\r\n    <li\r\n      *ngFor=\"let item of filteredItems | async\"\r\n      [ngClass]=\"{ active: item.value === selectedItem.value }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n  <div class=\"label-error overflow-hidden\">\r\n    <span\r\n      *ngIf=\"\r\n       inputFormControl.touched  &&\r\n      inputFormControl.errors?.['required']\"\r\n      >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SearchIconComponent, selector: "search-icon" }, { kind: "component", type: WarningIconComponent, selector: "warning-icon" }, { kind: "component", type: ArrowDownIconComponent, selector: "arrow-down-icon" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreSelectSearchComponent, selector: "core-select-search", inputs: { titleKey: "titleKey", valueKey: "valueKey", size: "size", searchKeys: "searchKeys", canAddValueKeyAndTitleKeyInSearchKeys: "canAddValueKeyAndTitleKeyInSearchKeys", canHighlightBackground: "canHighlightBackground", items: "items", defaultValue: "defaultValue", label: "label", disabled: "disabled", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputSearch"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"dropdown\"\r\n  id=\"container\"\r\n  (focusin)=\"setInputFocus()\"\r\n  (focusout)=\"focusOut($event)\"\r\n>\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      'highlight-background':\r\n        canHighlightBackground &&\r\n        (selectedItem | json) === ({} | json) &&\r\n        !(inputFormControl.touched && inputFormControl.errors),\r\n      selectError: inputFormControl.touched && inputFormControl.errors ,\r\n      'disable-selector': disabled,\r\n    }\"\r\n    (click)=\"openMenuClick()\"\r\n    tabindex=\"0\"\r\n    (keydown)=\"handleKey($event)\"\r\n  >\r\n    <span class=\"placeholder-top\" *ngIf=\"searchText\">{{ label }}</span>\r\n    <arrow-down-icon\r\n      class=\"caret fill-secondary-text-color h-6\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    ></arrow-down-icon>\r\n    <input\r\n      #inputSearch\r\n      autocomplete=\"off\"\r\n      id=\"inputSearch\"\r\n      class=\"col-span-11 bg-transparent focus:outline-none\"\r\n      [(ngModel)]=\"searchText\"\r\n      [placeholder]=\"label\"\r\n      (keyup)=\"onChangeText()\"\r\n    />\r\n    <!-- <span\r\n      [ngClass]=\"[\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? 'placeholder'\r\n          : 'selected'\r\n      ]\"\r\n      >{{\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? label\r\n          : selectedItem.title\r\n      }}</span\r\n    > -->\r\n  </div>\r\n  <div\r\n    class=\"no-data\"\r\n    *ngIf=\"newItems.length === 0\"\r\n    [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n  >\r\n    <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n    <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n  </div>\r\n  <ul\r\n    class=\"menu\"\r\n    *ngIf=\"newItems.length > 0\"\r\n    [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n    tabindex=\"0\"\r\n    (keydown)=\"handleKey($event)\"\r\n  >\r\n    <li\r\n      *ngFor=\"let item of filteredItems | async; let i = index\"\r\n      [id]=\"'scroll' + i\"\r\n      [ngClass]=\"{ active: item.value === focusItem?.value }\"\r\n      (click)=\"onItemSelect($event, item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n  <div class=\"label-error overflow-hidden\">\r\n    <span\r\n      *ngIf=\"\r\n       inputFormControl.touched  &&\r\n      inputFormControl.errors?.['required']\"\r\n      >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:2px solid rgba(37,112,198,.473)!important;outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: WarningIconComponent, selector: "warning-icon" }, { kind: "component", type: ArrowDownIconComponent, selector: "arrow-down-icon" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreSelectSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-select-search', template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut($event)\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      'highlight-background':\r\n        canHighlightBackground &&\r\n        (selectedItem | json) === ({} | json) &&\r\n        !(inputFormControl.touched && inputFormControl.errors),\r\n      selectError: inputFormControl.touched && inputFormControl.errors ,\r\n      'disable-selector': disabled,\r\n    }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <span\r\n      class=\"placeholder-top\"\r\n      *ngIf=\"(selectedItem | json) != ({} | json)\"\r\n      >{{ label }}</span\r\n    >\r\n    <arrow-down-icon\r\n      class=\"caret fill-secondary-text-color h-6\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    ></arrow-down-icon>\r\n\r\n    <span\r\n      [ngClass]=\"[\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? 'placeholder'\r\n          : 'selected'\r\n      ]\"\r\n      >{{\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? label\r\n          : selectedItem.title\r\n      }}</span\r\n    >\r\n  </div>\r\n  <div\r\n    class=\"no-data\"\r\n    *ngIf=\"newItems.length === 0\"\r\n    [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n  >\r\n    <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n    <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n  </div>\r\n  <ul\r\n    class=\"menu\"\r\n    *ngIf=\"newItems.length > 0\"\r\n    [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n  >\r\n    <div\r\n      *ngIf=\"newItems.length > 4\"\r\n      class=\"grid grid-cols-12 h-11 items-center pe-5 ps-5 bg-white shadow-md\"\r\n    >\r\n      <input\r\n        placeholder=\"\u062C\u0633\u062A\u062C\u0648 \"\r\n        class=\"col-span-11 bg-transparent focus:outline-none min-h-9\"\r\n        [(ngModel)]=\"searchText\"\r\n        (keyup)=\"changeSearchText()\"\r\n      />\r\n      <span class=\"md:h-7 flex justify-center\">\r\n        <search-icon\r\n          class=\"transform scale-x-[-1] fill-icon-color hover:fill-primary-color hover:cursor-pointer\"\r\n        >\r\n        </search-icon\r\n      ></span>\r\n    </div>\r\n    <li\r\n      *ngFor=\"let item of filteredItems | async\"\r\n      [ngClass]=\"{ active: item.value === selectedItem.value }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n  <div class=\"label-error overflow-hidden\">\r\n    <span\r\n      *ngIf=\"\r\n       inputFormControl.touched  &&\r\n      inputFormControl.errors?.['required']\"\r\n      >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}\n"] }]
+            args: [{ selector: 'core-select-search', template: "<div\r\n  class=\"dropdown\"\r\n  id=\"container\"\r\n  (focusin)=\"setInputFocus()\"\r\n  (focusout)=\"focusOut($event)\"\r\n>\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      'highlight-background':\r\n        canHighlightBackground &&\r\n        (selectedItem | json) === ({} | json) &&\r\n        !(inputFormControl.touched && inputFormControl.errors),\r\n      selectError: inputFormControl.touched && inputFormControl.errors ,\r\n      'disable-selector': disabled,\r\n    }\"\r\n    (click)=\"openMenuClick()\"\r\n    tabindex=\"0\"\r\n    (keydown)=\"handleKey($event)\"\r\n  >\r\n    <span class=\"placeholder-top\" *ngIf=\"searchText\">{{ label }}</span>\r\n    <arrow-down-icon\r\n      class=\"caret fill-secondary-text-color h-6\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    ></arrow-down-icon>\r\n    <input\r\n      #inputSearch\r\n      autocomplete=\"off\"\r\n      id=\"inputSearch\"\r\n      class=\"col-span-11 bg-transparent focus:outline-none\"\r\n      [(ngModel)]=\"searchText\"\r\n      [placeholder]=\"label\"\r\n      (keyup)=\"onChangeText()\"\r\n    />\r\n    <!-- <span\r\n      [ngClass]=\"[\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? 'placeholder'\r\n          : 'selected'\r\n      ]\"\r\n      >{{\r\n        label.length > 0 && (selectedItem | json) == ({} | json)\r\n          ? label\r\n          : selectedItem.title\r\n      }}</span\r\n    > -->\r\n  </div>\r\n  <div\r\n    class=\"no-data\"\r\n    *ngIf=\"newItems.length === 0\"\r\n    [ngClass]=\"{ 'menu-open-no-data': isOpenMenu }\"\r\n  >\r\n    <warning-icon class=\"icon-color inline-block w-6\"></warning-icon>\r\n    <b class=\"content block\">\u0645\u0648\u0631\u062F\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F</b>\r\n  </div>\r\n  <ul\r\n    class=\"menu\"\r\n    *ngIf=\"newItems.length > 0\"\r\n    [ngClass]=\"{ 'menu-open': isOpenMenu }\"\r\n    tabindex=\"0\"\r\n    (keydown)=\"handleKey($event)\"\r\n  >\r\n    <li\r\n      *ngFor=\"let item of filteredItems | async; let i = index\"\r\n      [id]=\"'scroll' + i\"\r\n      [ngClass]=\"{ active: item.value === focusItem?.value }\"\r\n      (click)=\"onItemSelect($event, item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n  <div class=\"label-error overflow-hidden\">\r\n    <span\r\n      *ngIf=\"\r\n       inputFormControl.touched  &&\r\n      inputFormControl.errors?.['required']\"\r\n      >\u0627\u06CC\u0646 \u0641\u06CC\u0644\u062F \u062E\u0627\u0644\u06CC \u0627\u0633\u062A</span\r\n    >\r\n  </div>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .disable-selector{background-color:#f7f7f7!important;border:1px dashed #ced4da!important;cursor:no-drop!important}.dropdown .highlight-background{background-color:#dcf6ff!important}.dropdown .select{background:#fff;color:#304050;display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border:1px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:hover{background:#fbfbfb}.dropdown .select:focus{border:2px solid rgba(37,112,198,.473)!important;outline:none}.dropdown .select .selected{padding-inline:12px;font-size:14px;color:#000000b3;-webkit-user-select:none;user-select:none}.dropdown .select .placeholder-top{position:absolute;right:13px;background:#fff;top:-8px;padding-inline:6px;font-size:11px;color:#888}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:#888;padding-inline:16px}.dropdown .select-clicked{border:1px solid rgba(19,92,175,.397)}.dropdown .menu-open-no-data{display:flex!important;opacity:1}.dropdown .no-data{display:none;justify-content:center;align-items:center;font-size:small;flex-direction:column;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);transition:0,2s;z-index:10;height:120px;overflow:auto}.dropdown .no-data .icon-color{fill:var(--default-table-warning-icon-color)}.dropdown .no-data .content{color:var(--default-table-warning-color)}.dropdown .menu{list-style:none;padding-inline:0px;background:#fff;border:1px #e3e8f1 solid;box-shadow:0 .5em 1em #0003;border-radius:.5em;color:#595c5f;position:absolute;top:40px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:10;max-height:200px;overflow:auto}.dropdown .menu li{padding:.7em .5em;margin:.3em 0;margin-inline:4px;border-radius:.5em;font-size:14px;text-align:start;cursor:pointer}.dropdown .menu li:hover{background:#f6f6f6;box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:#ced4da!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:red;font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid #fe5f5f!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { titleKey: [{
                 type: Input
             }], valueKey: [{
@@ -3322,6 +3414,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], inputFormControl: [{
                 type: Input
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['inputSearch']
             }] } });
 
 class FalconLibModule {
@@ -3389,7 +3484,8 @@ class FalconLibModule {
             CoreRowPelakComponent,
             CoreTableDetailViewerForReportComponent,
             CalendarIconComponent,
-            ArrowDownIconComponent], imports: [CommonModule,
+            ArrowDownIconComponent,
+            CalendarTodayIconComponent], imports: [CommonModule,
             ReactiveFormsModule,
             FormsModule,
             NiraSnackBarModule,
@@ -3492,6 +3588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         CoreTableDetailViewerForReportComponent,
                         CalendarIconComponent,
                         ArrowDownIconComponent,
+                        CalendarTodayIconComponent,
                     ],
                     imports: [
                         CommonModule,