nira-falcon 0.1.56 → 0.1.57

package/esm2022/lib/core-auto-complete/core-auto-complete.component.mjs

@@ -61,11 +61,11 @@ export class CoreAutoCompleteComponent {
         this.filterItems = this.items.filter((item) => !item.title.indexOf(value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreAutoCompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreAutoCompleteComponent, selector: "core-auto-complete", inputs: { label: "label", titleKey: "titleKey", valueKey: "valueKey", items: "items", defaultValue: "defaultValue" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"dropdown\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{ 'select-clicked': isOpenMenu }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <input\r\n      class=\"selected\"\r\n      [placeholder]=\"label\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChanged($event)\"\r\n      (focusout)=\"focusOut()\"\r\n    />\r\n    <span\r\n      class=\"material-symbols-outlined caret\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    >\r\n      expand_more\r\n    </span>\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of _items\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .select{background:#fff;color:#304050;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;border:2px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:13px;-webkit-user-select:none;user-select:none}.dropdown .select:hover,.dropdown .select:hover .selected{background:#fbfbfb}.dropdown .select .selected{width:100%;font-size:13px;outline:none;border:none;-webkit-user-select:none;user-select:none}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select-clicked{border:2px #4f6883 solid;box-shadow:0 0 .8em #888}.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:42px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:3}.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}.dropdown .menu .active{background:#ced4da}.dropdown .menu-open{display:block;opacity:1}\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: 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreAutoCompleteComponent, selector: "core-auto-complete", inputs: { label: "label", titleKey: "titleKey", valueKey: "valueKey", items: "items", defaultValue: "defaultValue" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"dropdown\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{ 'select-clicked': isOpenMenu }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <input\r\n      class=\"selected\"\r\n      [placeholder]=\"label\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChanged($event)\"\r\n      (focusout)=\"focusOut()\"\r\n    />\r\n    <span\r\n      class=\"material-symbols-outlined caret\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    >\r\n      expand_more\r\n    </span>\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of _items\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .select{background:#fff;color:#304050;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;border:2px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:13px;-webkit-user-select:none;user-select:none}.dropdown .select:hover,.dropdown .select:hover .selected{background:#fbfbfb}.dropdown .select .selected{width:100%;font-size:13px;outline:none;border:none;-webkit-user-select:none;user-select:none}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select-clicked{border:2px #4f6883 solid;box-shadow:0 0 .8em #888}.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:42px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:3}.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}\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: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreAutoCompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-auto-complete', template: "<div class=\"dropdown\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{ 'select-clicked': isOpenMenu }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <input\r\n      class=\"selected\"\r\n      [placeholder]=\"label\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChanged($event)\"\r\n      (focusout)=\"focusOut()\"\r\n    />\r\n    <span\r\n      class=\"material-symbols-outlined caret\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    >\r\n      expand_more\r\n    </span>\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of _items\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .select{background:#fff;color:#304050;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;border:2px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:13px;-webkit-user-select:none;user-select:none}.dropdown .select:hover,.dropdown .select:hover .selected{background:#fbfbfb}.dropdown .select .selected{width:100%;font-size:13px;outline:none;border:none;-webkit-user-select:none;user-select:none}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select-clicked{border:2px #4f6883 solid;box-shadow:0 0 .8em #888}.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:42px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:3}.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}.dropdown .menu .active{background:#ced4da}.dropdown .menu-open{display:block;opacity:1}\n"] }]
+            args: [{ selector: 'core-auto-complete', template: "<div class=\"dropdown\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{ 'select-clicked': isOpenMenu }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <input\r\n      class=\"selected\"\r\n      [placeholder]=\"label\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChanged($event)\"\r\n      (focusout)=\"focusOut()\"\r\n    />\r\n    <span\r\n      class=\"material-symbols-outlined caret\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    >\r\n      expand_more\r\n    </span>\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of _items\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .select{background:#fff;color:#304050;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;border:2px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:13px;-webkit-user-select:none;user-select:none}.dropdown .select:hover,.dropdown .select:hover .selected{background:#fbfbfb}.dropdown .select .selected{width:100%;font-size:13px;outline:none;border:none;-webkit-user-select:none;user-select:none}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select-clicked{border:2px #4f6883 solid;box-shadow:0 0 .8em #888}.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:42px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:3}.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}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
                 type: Input
             }], titleKey: [{

package/esm2022/lib/core-multi-select/core-multi-select.component.mjs

@@ -124,11 +124,11 @@ export class CoreMultiSelectComponent {
         this.inputFormControl.markAsTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreMultiSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreMultiSelectComponent, selector: "core-multi-select", inputs: { titleKey: "titleKey", valueKey: "valueKey", items: "items", defaultValue: "defaultValue", label: "label", singleSelectItems: "singleSelectItems", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\r\n    }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <span class=\"placeholder-top\" *ngIf=\"isSelectedItems\">{{ 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\r\n    <span\r\n      class=\"text-content text-right\"\r\n      [ngClass]=\"[\r\n        label.length > 0 && !isSelectedItems ? 'placeholder' : 'selected'\r\n      ]\"\r\n      >{{ label.length > 0 && !isSelectedItems ? label : text }}</span\r\n    >\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <app-core-multi-select-row\r\n      *ngFor=\"let item of newItems\"\r\n      [item]=\"item\"\r\n      [isSelected]=\"selectedItems[item.value] ? true : false\"\r\n      (onSelect)=\"onItemSelect(item, true)\"\r\n    >\r\n    </app-core-multi-select-row>\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 .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 .text-content{white-space:nowrap;display:block;width:263px;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}.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{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}.dropdown .menu .active{background:#ced4da}.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: i2.CoreMultiSelectRowComponent, selector: "app-core-multi-select-row", inputs: ["isSelected", "item"], outputs: ["onSelect"] }, { kind: "component", type: i3.ArrowDownIconComponent, selector: "arrow-down-icon" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreMultiSelectComponent, selector: "core-multi-select", inputs: { titleKey: "titleKey", valueKey: "valueKey", items: "items", defaultValue: "defaultValue", label: "label", singleSelectItems: "singleSelectItems", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\r\n    }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <span class=\"placeholder-top\" *ngIf=\"isSelectedItems\">{{ 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\r\n    <span\r\n      class=\"text-content text-right\"\r\n      [ngClass]=\"[\r\n        label.length > 0 && !isSelectedItems ? 'placeholder' : 'selected'\r\n      ]\"\r\n      >{{ label.length > 0 && !isSelectedItems ? label : text }}</span\r\n    >\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <app-core-multi-select-row\r\n      *ngFor=\"let item of newItems\"\r\n      [item]=\"item\"\r\n      [isSelected]=\"selectedItems[item.value] ? true : false\"\r\n      (onSelect)=\"onItemSelect(item, true)\"\r\n    >\r\n    </app-core-multi-select-row>\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 .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 .text-content{white-space:nowrap;display:block;width:263px;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}.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{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: "component", type: i2.CoreMultiSelectRowComponent, selector: "app-core-multi-select-row", inputs: ["isSelected", "item"], outputs: ["onSelect"] }, { kind: "component", type: i3.ArrowDownIconComponent, selector: "arrow-down-icon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-multi-select', template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\r\n    }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <span class=\"placeholder-top\" *ngIf=\"isSelectedItems\">{{ 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\r\n    <span\r\n      class=\"text-content text-right\"\r\n      [ngClass]=\"[\r\n        label.length > 0 && !isSelectedItems ? 'placeholder' : 'selected'\r\n      ]\"\r\n      >{{ label.length > 0 && !isSelectedItems ? label : text }}</span\r\n    >\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <app-core-multi-select-row\r\n      *ngFor=\"let item of newItems\"\r\n      [item]=\"item\"\r\n      [isSelected]=\"selectedItems[item.value] ? true : false\"\r\n      (onSelect)=\"onItemSelect(item, true)\"\r\n    >\r\n    </app-core-multi-select-row>\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 .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 .text-content{white-space:nowrap;display:block;width:263px;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}.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{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}.dropdown .menu .active{background:#ced4da}.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-multi-select', template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\r\n    }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <span class=\"placeholder-top\" *ngIf=\"isSelectedItems\">{{ 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\r\n    <span\r\n      class=\"text-content text-right\"\r\n      [ngClass]=\"[\r\n        label.length > 0 && !isSelectedItems ? 'placeholder' : 'selected'\r\n      ]\"\r\n      >{{ label.length > 0 && !isSelectedItems ? label : text }}</span\r\n    >\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <app-core-multi-select-row\r\n      *ngFor=\"let item of newItems\"\r\n      [item]=\"item\"\r\n      [isSelected]=\"selectedItems[item.value] ? true : false\"\r\n      (onSelect)=\"onItemSelect(item, true)\"\r\n    >\r\n    </app-core-multi-select-row>\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 .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 .text-content{white-space:nowrap;display:block;width:263px;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}.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{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.ChangeDetectorRef }]; }, propDecorators: { titleKey: [{
                 type: Input
             }], valueKey: [{

package/esm2022/lib/core-select-search/core-select-search.component.mjs

@@ -91,11 +91,11 @@ export class CoreSelectSearchComponent {
         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", 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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <div\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{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}.dropdown .menu .active{background:#ced4da}.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: i3.SearchIconComponent, selector: "search-icon" }, { kind: "component", type: i4.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", 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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <div\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{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: i3.SearchIconComponent, selector: "search-icon" }, { kind: "component", type: i4.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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <div\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{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}.dropdown .menu .active{background:#ced4da}.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 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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <div\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{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: [{

package/esm2022/lib/core-table/core-column-selector/core-column-selector.component.mjs

@@ -79,11 +79,11 @@ export class CoreColumnSelectorComponent {
         this.onItemSelected.emit('');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreColumnSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreColumnSelectorComponent, selector: "core-column-selector", inputs: { items: "items", titleKey: "titleKey", valueKey: "valueKey", label: "label", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <close-icon\r\n    *ngIf=\"selectedItem.title\"\r\n    (click)=\"removedText()\"\r\n    class=\"absolute w-4 top-2 right-2 fill-gray-600\"\r\n  ></close-icon>\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of newItems\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:calc(100% - 34px);min-width:120px}.dropdown .select{color:var(--default-selector-text-color);display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border-bottom:1px solid var(--default-table-column-input-border-color);padding-block:3px;padding-inline-start:12px;outline:0;padding-inline-end:2px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:focus{border-bottom:1px solid #96bdf2}.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:var(--default-selector-label-background-color);top:-8px;padding-inline:6px;font-size:11px;color:var(--default-selector-label-text--color)}.dropdown .select .caret{fill:var(--default-selector-icon-color);color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:var(--default-selector-placeholder-text-color);padding-inline:16px}.dropdown .select-clicked{border-bottom:1px solid #96bdf2}.dropdown .menu{list-style:none;padding-inline:0px;background:var(--default-selector-menu-background-color);border:1px solid var(--default-selector-menu-border-color);box-shadow:0 .5em 1em #0003;border-radius:.5em;color:var(--default-selector-menu-text-color);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:var(--default-selector-menu-item-hover-color)}.dropdown .menu .active{background:var(--default-selector-menu-item-active-color)}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:var(--default-selector-validation-text-color);font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid var(--default-selector-validation-border-color)!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: i2.CloseIconComponent, selector: "close-icon" }, { kind: "component", type: i3.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: CoreColumnSelectorComponent, selector: "core-column-selector", inputs: { items: "items", titleKey: "titleKey", valueKey: "valueKey", label: "label", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <close-icon\r\n    *ngIf=\"selectedItem.title\"\r\n    (click)=\"removedText()\"\r\n    class=\"absolute w-4 top-2 right-2 fill-gray-600\"\r\n  ></close-icon>\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of newItems\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:calc(100% - 34px);min-width:120px}.dropdown .select{color:var(--default-selector-text-color);display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border-bottom:1px solid var(--default-table-column-input-border-color);padding-block:3px;padding-inline-start:12px;outline:0;padding-inline-end:2px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:focus{border-bottom:1px solid #96bdf2}.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:var(--default-selector-label-background-color);top:-8px;padding-inline:6px;font-size:11px;color:var(--default-selector-label-text--color)}.dropdown .select .caret{fill:var(--default-selector-icon-color);color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:var(--default-selector-placeholder-text-color);padding-inline:16px}.dropdown .select-clicked{border-bottom:1px solid #96bdf2}.dropdown .menu{list-style:none;padding-inline:0px;background:var(--default-selector-menu-background-color);border:1px solid var(--default-selector-menu-border-color);box-shadow:0 .5em 1em #0003;border-radius:.5em;color:var(--default-selector-menu-text-color);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:var(--default-selector-menu-item-hover-color);box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:var(--default-selector-menu-item-active-color)!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:var(--default-selector-validation-text-color);font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid var(--default-selector-validation-border-color)!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: i2.CloseIconComponent, selector: "close-icon" }, { kind: "component", type: i3.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: CoreColumnSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-column-selector', template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <close-icon\r\n    *ngIf=\"selectedItem.title\"\r\n    (click)=\"removedText()\"\r\n    class=\"absolute w-4 top-2 right-2 fill-gray-600\"\r\n  ></close-icon>\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of newItems\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:calc(100% - 34px);min-width:120px}.dropdown .select{color:var(--default-selector-text-color);display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border-bottom:1px solid var(--default-table-column-input-border-color);padding-block:3px;padding-inline-start:12px;outline:0;padding-inline-end:2px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:focus{border-bottom:1px solid #96bdf2}.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:var(--default-selector-label-background-color);top:-8px;padding-inline:6px;font-size:11px;color:var(--default-selector-label-text--color)}.dropdown .select .caret{fill:var(--default-selector-icon-color);color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:var(--default-selector-placeholder-text-color);padding-inline:16px}.dropdown .select-clicked{border-bottom:1px solid #96bdf2}.dropdown .menu{list-style:none;padding-inline:0px;background:var(--default-selector-menu-background-color);border:1px solid var(--default-selector-menu-border-color);box-shadow:0 .5em 1em #0003;border-radius:.5em;color:var(--default-selector-menu-text-color);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:var(--default-selector-menu-item-hover-color)}.dropdown .menu .active{background:var(--default-selector-menu-item-active-color)}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:var(--default-selector-validation-text-color);font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid var(--default-selector-validation-border-color)!important}\n"] }]
+            args: [{ selector: 'core-column-selector', template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <close-icon\r\n    *ngIf=\"selectedItem.title\"\r\n    (click)=\"removedText()\"\r\n    class=\"absolute w-4 top-2 right-2 fill-gray-600\"\r\n  ></close-icon>\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of newItems\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:calc(100% - 34px);min-width:120px}.dropdown .select{color:var(--default-selector-text-color);display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border-bottom:1px solid var(--default-table-column-input-border-color);padding-block:3px;padding-inline-start:12px;outline:0;padding-inline-end:2px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:focus{border-bottom:1px solid #96bdf2}.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:var(--default-selector-label-background-color);top:-8px;padding-inline:6px;font-size:11px;color:var(--default-selector-label-text--color)}.dropdown .select .caret{fill:var(--default-selector-icon-color);color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:var(--default-selector-placeholder-text-color);padding-inline:16px}.dropdown .select-clicked{border-bottom:1px solid #96bdf2}.dropdown .menu{list-style:none;padding-inline:0px;background:var(--default-selector-menu-background-color);border:1px solid var(--default-selector-menu-border-color);box-shadow:0 .5em 1em #0003;border-radius:.5em;color:var(--default-selector-menu-text-color);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:var(--default-selector-menu-item-hover-color);box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:var(--default-selector-menu-item-active-color)!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:var(--default-selector-validation-text-color);font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid var(--default-selector-validation-border-color)!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], titleKey: [{

package/fesm2022/nira-falcon.mjs

@@ -221,11 +221,11 @@ class CoreAutoCompleteComponent {
         this.filterItems = this.items.filter((item) => !item.title.indexOf(value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreAutoCompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreAutoCompleteComponent, selector: "core-auto-complete", inputs: { label: "label", titleKey: "titleKey", valueKey: "valueKey", items: "items", defaultValue: "defaultValue" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"dropdown\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{ 'select-clicked': isOpenMenu }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <input\r\n      class=\"selected\"\r\n      [placeholder]=\"label\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChanged($event)\"\r\n      (focusout)=\"focusOut()\"\r\n    />\r\n    <span\r\n      class=\"material-symbols-outlined caret\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    >\r\n      expand_more\r\n    </span>\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of _items\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .select{background:#fff;color:#304050;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;border:2px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:13px;-webkit-user-select:none;user-select:none}.dropdown .select:hover,.dropdown .select:hover .selected{background:#fbfbfb}.dropdown .select .selected{width:100%;font-size:13px;outline:none;border:none;-webkit-user-select:none;user-select:none}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select-clicked{border:2px #4f6883 solid;box-shadow:0 0 .8em #888}.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:42px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:3}.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}.dropdown .menu .active{background:#ced4da}.dropdown .menu-open{display:block;opacity:1}\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: 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreAutoCompleteComponent, selector: "core-auto-complete", inputs: { label: "label", titleKey: "titleKey", valueKey: "valueKey", items: "items", defaultValue: "defaultValue" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div class=\"dropdown\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{ 'select-clicked': isOpenMenu }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <input\r\n      class=\"selected\"\r\n      [placeholder]=\"label\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChanged($event)\"\r\n      (focusout)=\"focusOut()\"\r\n    />\r\n    <span\r\n      class=\"material-symbols-outlined caret\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    >\r\n      expand_more\r\n    </span>\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of _items\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .select{background:#fff;color:#304050;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;border:2px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:13px;-webkit-user-select:none;user-select:none}.dropdown .select:hover,.dropdown .select:hover .selected{background:#fbfbfb}.dropdown .select .selected{width:100%;font-size:13px;outline:none;border:none;-webkit-user-select:none;user-select:none}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select-clicked{border:2px #4f6883 solid;box-shadow:0 0 .8em #888}.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:42px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:3}.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}\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: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreAutoCompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-auto-complete', template: "<div class=\"dropdown\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{ 'select-clicked': isOpenMenu }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <input\r\n      class=\"selected\"\r\n      [placeholder]=\"label\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChanged($event)\"\r\n      (focusout)=\"focusOut()\"\r\n    />\r\n    <span\r\n      class=\"material-symbols-outlined caret\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    >\r\n      expand_more\r\n    </span>\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of _items\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .select{background:#fff;color:#304050;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;border:2px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:13px;-webkit-user-select:none;user-select:none}.dropdown .select:hover,.dropdown .select:hover .selected{background:#fbfbfb}.dropdown .select .selected{width:100%;font-size:13px;outline:none;border:none;-webkit-user-select:none;user-select:none}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select-clicked{border:2px #4f6883 solid;box-shadow:0 0 .8em #888}.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:42px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:3}.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}.dropdown .menu .active{background:#ced4da}.dropdown .menu-open{display:block;opacity:1}\n"] }]
+            args: [{ selector: 'core-auto-complete', template: "<div class=\"dropdown\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{ 'select-clicked': isOpenMenu }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <input\r\n      class=\"selected\"\r\n      [placeholder]=\"label\"\r\n      [(ngModel)]=\"value\"\r\n      (ngModelChange)=\"onChanged($event)\"\r\n      (focusout)=\"focusOut()\"\r\n    />\r\n    <span\r\n      class=\"material-symbols-outlined caret\"\r\n      [ngClass]=\"{ 'caret-rotate': isOpenMenu }\"\r\n    >\r\n      expand_more\r\n    </span>\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of _items\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:100%;min-width:120px}.dropdown .select{background:#fff;color:#304050;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;border:2px solid #ced4da;border-radius:4px;padding:8px;cursor:pointer;transition:background .3s;font-size:13px;-webkit-user-select:none;user-select:none}.dropdown .select:hover,.dropdown .select:hover .selected{background:#fbfbfb}.dropdown .select .selected{width:100%;font-size:13px;outline:none;border:none;-webkit-user-select:none;user-select:none}.dropdown .select .caret{color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select-clicked{border:2px #4f6883 solid;box-shadow:0 0 .8em #888}.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:42px;left:50%;width:100%;transform:translate(-50%);opacity:0;display:none;transition:0,2s;z-index:3}.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}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
                 type: Input
             }], titleKey: [{
@@ -1400,11 +1400,11 @@ class CoreColumnSelectorComponent {
         this.onItemSelected.emit('');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreColumnSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreColumnSelectorComponent, selector: "core-column-selector", inputs: { items: "items", titleKey: "titleKey", valueKey: "valueKey", label: "label", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <close-icon\r\n    *ngIf=\"selectedItem.title\"\r\n    (click)=\"removedText()\"\r\n    class=\"absolute w-4 top-2 right-2 fill-gray-600\"\r\n  ></close-icon>\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of newItems\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:calc(100% - 34px);min-width:120px}.dropdown .select{color:var(--default-selector-text-color);display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border-bottom:1px solid var(--default-table-column-input-border-color);padding-block:3px;padding-inline-start:12px;outline:0;padding-inline-end:2px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:focus{border-bottom:1px solid #96bdf2}.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:var(--default-selector-label-background-color);top:-8px;padding-inline:6px;font-size:11px;color:var(--default-selector-label-text--color)}.dropdown .select .caret{fill:var(--default-selector-icon-color);color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:var(--default-selector-placeholder-text-color);padding-inline:16px}.dropdown .select-clicked{border-bottom:1px solid #96bdf2}.dropdown .menu{list-style:none;padding-inline:0px;background:var(--default-selector-menu-background-color);border:1px solid var(--default-selector-menu-border-color);box-shadow:0 .5em 1em #0003;border-radius:.5em;color:var(--default-selector-menu-text-color);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:var(--default-selector-menu-item-hover-color)}.dropdown .menu .active{background:var(--default-selector-menu-item-active-color)}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:var(--default-selector-validation-text-color);font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid var(--default-selector-validation-border-color)!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: CloseIconComponent, selector: "close-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: CoreColumnSelectorComponent, selector: "core-column-selector", inputs: { items: "items", titleKey: "titleKey", valueKey: "valueKey", label: "label", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <close-icon\r\n    *ngIf=\"selectedItem.title\"\r\n    (click)=\"removedText()\"\r\n    class=\"absolute w-4 top-2 right-2 fill-gray-600\"\r\n  ></close-icon>\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of newItems\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:calc(100% - 34px);min-width:120px}.dropdown .select{color:var(--default-selector-text-color);display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border-bottom:1px solid var(--default-table-column-input-border-color);padding-block:3px;padding-inline-start:12px;outline:0;padding-inline-end:2px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:focus{border-bottom:1px solid #96bdf2}.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:var(--default-selector-label-background-color);top:-8px;padding-inline:6px;font-size:11px;color:var(--default-selector-label-text--color)}.dropdown .select .caret{fill:var(--default-selector-icon-color);color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:var(--default-selector-placeholder-text-color);padding-inline:16px}.dropdown .select-clicked{border-bottom:1px solid #96bdf2}.dropdown .menu{list-style:none;padding-inline:0px;background:var(--default-selector-menu-background-color);border:1px solid var(--default-selector-menu-border-color);box-shadow:0 .5em 1em #0003;border-radius:.5em;color:var(--default-selector-menu-text-color);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:var(--default-selector-menu-item-hover-color);box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:var(--default-selector-menu-item-active-color)!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:var(--default-selector-validation-text-color);font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid var(--default-selector-validation-border-color)!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: CloseIconComponent, selector: "close-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: CoreColumnSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-column-selector', template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <close-icon\r\n    *ngIf=\"selectedItem.title\"\r\n    (click)=\"removedText()\"\r\n    class=\"absolute w-4 top-2 right-2 fill-gray-600\"\r\n  ></close-icon>\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of newItems\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:calc(100% - 34px);min-width:120px}.dropdown .select{color:var(--default-selector-text-color);display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border-bottom:1px solid var(--default-table-column-input-border-color);padding-block:3px;padding-inline-start:12px;outline:0;padding-inline-end:2px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:focus{border-bottom:1px solid #96bdf2}.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:var(--default-selector-label-background-color);top:-8px;padding-inline:6px;font-size:11px;color:var(--default-selector-label-text--color)}.dropdown .select .caret{fill:var(--default-selector-icon-color);color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:var(--default-selector-placeholder-text-color);padding-inline:16px}.dropdown .select-clicked{border-bottom:1px solid #96bdf2}.dropdown .menu{list-style:none;padding-inline:0px;background:var(--default-selector-menu-background-color);border:1px solid var(--default-selector-menu-border-color);box-shadow:0 .5em 1em #0003;border-radius:.5em;color:var(--default-selector-menu-text-color);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:var(--default-selector-menu-item-hover-color)}.dropdown .menu .active{background:var(--default-selector-menu-item-active-color)}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:var(--default-selector-validation-text-color);font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid var(--default-selector-validation-border-color)!important}\n"] }]
+            args: [{ selector: 'core-column-selector', template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <close-icon\r\n    *ngIf=\"selectedItem.title\"\r\n    (click)=\"removedText()\"\r\n    class=\"absolute w-4 top-2 right-2 fill-gray-600\"\r\n  ></close-icon>\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <li\r\n      *ngFor=\"let item of newItems\"\r\n      [ngClass]=\"{ active: item == selectedItem }\"\r\n      (click)=\"onItemSelect(item, true)\"\r\n    >\r\n      {{ item.title }}\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".dropdown{min-width:15em;position:relative;width:calc(100% - 34px);min-width:120px}.dropdown .select{color:var(--default-selector-text-color);display:flex;justify-content:space-between;flex-direction:row-reverse;align-items:center;border-bottom:1px solid var(--default-table-column-input-border-color);padding-block:3px;padding-inline-start:12px;outline:0;padding-inline-end:2px;cursor:pointer;transition:background .3s;font-size:12px;-webkit-user-select:none;user-select:none}.dropdown .select:focus{border-bottom:1px solid #96bdf2}.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:var(--default-selector-label-background-color);top:-8px;padding-inline:6px;font-size:11px;color:var(--default-selector-label-text--color)}.dropdown .select .caret{fill:var(--default-selector-icon-color);color:#595c5f;-webkit-user-select:none;user-select:none}.dropdown .select .caret-rotate{transform:rotate(180deg)}.dropdown .select .placeholder{color:var(--default-selector-placeholder-text-color);padding-inline:16px}.dropdown .select-clicked{border-bottom:1px solid #96bdf2}.dropdown .menu{list-style:none;padding-inline:0px;background:var(--default-selector-menu-background-color);border:1px solid var(--default-selector-menu-border-color);box-shadow:0 .5em 1em #0003;border-radius:.5em;color:var(--default-selector-menu-text-color);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:var(--default-selector-menu-item-hover-color);box-shadow:0 1px 2px #00000021,0 4px 4px #0000001a}.dropdown .menu .active{background:var(--default-selector-menu-item-active-color)!important}.dropdown .menu-open{display:block;opacity:1}.dropdown .label-error{color:var(--default-selector-validation-text-color);font-size:13px;margin-block-start:4px;min-height:21px;width:100%;display:inline-block!important;text-align:start}.dropdown .selectError{border:1px solid var(--default-selector-validation-border-color)!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], titleKey: [{
@@ -3063,11 +3063,11 @@ class CoreMultiSelectComponent {
         this.inputFormControl.markAsTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreMultiSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreMultiSelectComponent, selector: "core-multi-select", inputs: { titleKey: "titleKey", valueKey: "valueKey", items: "items", defaultValue: "defaultValue", label: "label", singleSelectItems: "singleSelectItems", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\r\n    }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <span class=\"placeholder-top\" *ngIf=\"isSelectedItems\">{{ 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\r\n    <span\r\n      class=\"text-content text-right\"\r\n      [ngClass]=\"[\r\n        label.length > 0 && !isSelectedItems ? 'placeholder' : 'selected'\r\n      ]\"\r\n      >{{ label.length > 0 && !isSelectedItems ? label : text }}</span\r\n    >\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <app-core-multi-select-row\r\n      *ngFor=\"let item of newItems\"\r\n      [item]=\"item\"\r\n      [isSelected]=\"selectedItems[item.value] ? true : false\"\r\n      (onSelect)=\"onItemSelect(item, true)\"\r\n    >\r\n    </app-core-multi-select-row>\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 .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 .text-content{white-space:nowrap;display:block;width:263px;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}.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{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}.dropdown .menu .active{background:#ced4da}.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: CoreMultiSelectRowComponent, selector: "app-core-multi-select-row", inputs: ["isSelected", "item"], outputs: ["onSelect"] }, { kind: "component", type: ArrowDownIconComponent, selector: "arrow-down-icon" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CoreMultiSelectComponent, selector: "core-multi-select", inputs: { titleKey: "titleKey", valueKey: "valueKey", items: "items", defaultValue: "defaultValue", label: "label", singleSelectItems: "singleSelectItems", inputFormControl: "inputFormControl" }, outputs: { onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\r\n    }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <span class=\"placeholder-top\" *ngIf=\"isSelectedItems\">{{ 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\r\n    <span\r\n      class=\"text-content text-right\"\r\n      [ngClass]=\"[\r\n        label.length > 0 && !isSelectedItems ? 'placeholder' : 'selected'\r\n      ]\"\r\n      >{{ label.length > 0 && !isSelectedItems ? label : text }}</span\r\n    >\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <app-core-multi-select-row\r\n      *ngFor=\"let item of newItems\"\r\n      [item]=\"item\"\r\n      [isSelected]=\"selectedItems[item.value] ? true : false\"\r\n      (onSelect)=\"onItemSelect(item, true)\"\r\n    >\r\n    </app-core-multi-select-row>\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 .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 .text-content{white-space:nowrap;display:block;width:263px;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}.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{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: "component", type: CoreMultiSelectRowComponent, selector: "app-core-multi-select-row", inputs: ["isSelected", "item"], outputs: ["onSelect"] }, { kind: "component", type: ArrowDownIconComponent, selector: "arrow-down-icon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CoreMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-multi-select', template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\r\n    }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <span class=\"placeholder-top\" *ngIf=\"isSelectedItems\">{{ 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\r\n    <span\r\n      class=\"text-content text-right\"\r\n      [ngClass]=\"[\r\n        label.length > 0 && !isSelectedItems ? 'placeholder' : 'selected'\r\n      ]\"\r\n      >{{ label.length > 0 && !isSelectedItems ? label : text }}</span\r\n    >\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <app-core-multi-select-row\r\n      *ngFor=\"let item of newItems\"\r\n      [item]=\"item\"\r\n      [isSelected]=\"selectedItems[item.value] ? true : false\"\r\n      (onSelect)=\"onItemSelect(item, true)\"\r\n    >\r\n    </app-core-multi-select-row>\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 .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 .text-content{white-space:nowrap;display:block;width:263px;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}.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{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}.dropdown .menu .active{background:#ced4da}.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-multi-select', template: "<div tabindex=\"-1\" class=\"dropdown\" (focusout)=\"focusOut()\">\r\n  <div\r\n    class=\"select\"\r\n    [ngClass]=\"{\r\n      'select-clicked': isOpenMenu,\r\n      selectError: inputFormControl.touched && inputFormControl.errors\r\n    }\"\r\n    (click)=\"openMenuClick()\"\r\n  >\r\n    <span class=\"placeholder-top\" *ngIf=\"isSelectedItems\">{{ 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\r\n    <span\r\n      class=\"text-content text-right\"\r\n      [ngClass]=\"[\r\n        label.length > 0 && !isSelectedItems ? 'placeholder' : 'selected'\r\n      ]\"\r\n      >{{ label.length > 0 && !isSelectedItems ? label : text }}</span\r\n    >\r\n  </div>\r\n  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <app-core-multi-select-row\r\n      *ngFor=\"let item of newItems\"\r\n      [item]=\"item\"\r\n      [isSelected]=\"selectedItems[item.value] ? true : false\"\r\n      (onSelect)=\"onItemSelect(item, true)\"\r\n    >\r\n    </app-core-multi-select-row>\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 .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 .text-content{white-space:nowrap;display:block;width:263px;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}.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{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.ChangeDetectorRef }]; }, propDecorators: { titleKey: [{
                 type: Input
             }], valueKey: [{
@@ -3172,11 +3172,11 @@ class CoreSelectSearchComponent {
         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", 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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <div\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{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}.dropdown .menu .active{background:#ced4da}.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: 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", 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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <div\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{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: 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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <div\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{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}.dropdown .menu .active{background:#ced4da}.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 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  <ul class=\"menu\" [ngClass]=\"{ 'menu-open': isOpenMenu }\">\r\n    <div\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{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: [{