@acorex/components 7.4.8 → 7.5.1

package/fesm2022/acorex-components-select-box.mjs

@@ -1,9 +1,10 @@
-import { AXClosbaleComponent, AXSearchableComponent, AXValuableComponent, AXCommonModule } from '@acorex/components/common';
+import { AXClosbaleComponent, AXSearchableComponent, AXValuableComponent, MXSelectionValueComponent, MXLookComponent, AXComponent, AXFocusableComponent, AXClearableComponent, AXCommonModule } from '@acorex/components/common';
 import * as i1 from '@acorex/core/platform';
+import { AXPlatform } from '@acorex/core/platform';
 import * as i7 from '@acorex/core/translation';
 import { AXTranslator, AXTranslationModule } from '@acorex/core/translation';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ContentChild, Input, HostListener, HostBinding, NgModule } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ContentChild, Input, HostListener, HostBinding, inject, forwardRef, NgModule } from '@angular/core';
 import { findLast, first, last, findLastIndex, nth } from 'lodash-es';
 import { AXBaseSelectionDropdownMixin } from '@acorex/components/mixin';
 import * as i4 from '@acorex/components/popover';
@@ -17,10 +18,16 @@ import * as i5 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i6 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import { FormsModule } from '@angular/forms';
 import { AXBadgeModule } from '@acorex/components/badge';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
+import * as i2$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import * as i5$1 from '@acorex/components/dropdown';
+import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent, AXDropdownModule } from '@acorex/components/dropdown';
+import * as i6$1 from '@acorex/components/list';
+import { AXListComponent, AXListModule } from '@acorex/components/list';
 import { AXTextBoxModule } from '@acorex/components/text-box';
+import { classes } from 'polytype';
 
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event
@@ -313,14 +320,14 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         super._fetchData({ searchQuery: this._searchBox?.value });
     }
     get __hostClass() {
-        return `ax-editor-container ax-drop-down ax-appearance-solid`;
+        return `ax-editor-container ax-drop-down ax-look-solid`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.AXPlatform }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", allowNull: "allowNull", value: "value", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", readonly: "readonly", pageSize: "pageSize", items: "items", valueField: "valueField", textField: "textField", disabledField: "disabledField", disabledCallback: "disabledCallback", multiple: "multiple", selectionMode: "selectionMode", clearButton: "clearButton", checkbox: "checkbox" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
             { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent },
             { provide: AXValuableComponent, useExisting: AXSelectBoxComponent },
-        ], queries: [{ propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\n  <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\n    (blur)=\"_emitOnBlurEvent($event)\">\n    <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\n      <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\n      <ng-template #singleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n        </ng-container>\n      </ng-template>\n      <ng-template #multipleSelectedTemplate>\n        <div class=\"ax-select-box-multi-selection\">\n          <ng-container *ngFor=\"let item of selectedItems\">\n            <div class=\"ax-select-multi-item\">\n              {{ _getItemDisplayTextTemplte(item) }}\n              <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-template #showPlaceholder>\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n    </ng-template>\n  </div>\n</div>\n<button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"clear()\" [tabIndex]=\"-1\"\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\n  <span class=\"ax-icon ax-icon-close\"></span>\n</button>\n<button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button ax-button-icon\"\n  (click)=\"_handleArrowClickEvent($event)\">\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\n    <ax-loading type=\"spinner\"></ax-loading>\n  </ng-container>\n  <ng-template #iconTemplate>\n    <span class=\"ax-icon ax-icon-chevron-left ax-transition-all\" [ngClass]=\"{\n        '-ax-rotation-90': !isOpen,\n        'ax-rotation-90': isOpen\n      }\"></span>\n  </ng-template>\n</button>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ax-popover [target]=\"_target\" [placement]=\"position\" [openOn]=\"'manual'\" [closeOn]=\"'clickout'\"\n  [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\n  <div class=\"ax-overlay-pane\" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\" [class.ax-full]=\"_searchBox || isLazy\"\n    [style.min-width.px]=\"_popoverWidth\">\n    <div class=\"ax-list\">\n      <ax-header *ngIf=\"_isActionSheet\">\n        <ax-title>{{ _popoverTitle }}</ax-title>\n        <ax-close-button class=\"ax-icon\"\n          [icon]=\"multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      <div class=\"ax-search-box-container\" [class.ax-state-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox != null\">\n        <ng-content select=\"ax-search-box\"></ng-content>\n      </div>\n      <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n          <ul>\n            <ng-container *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\"> </ng-container>\n            <ng-template #tmpTree let-list=\"list\">\n              <ng-container *ngFor=\"let item of list; let i = index; trackBy: _trackByFunction\">\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\n                  <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event, item)\"\n                    [attr.data-id]=\"item[this.valueField]\">\n                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, direction: direction }\">\n                    </ng-container>\n                  </li>\n                </ng-container>\n                <ng-template #defualtTemplate>\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\n                    <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                      <ul *ngIf=\"item.children?.length > 0\">\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context: { list: item.children }\"> </ng-container>\n                      </ul>\n                    </li>\n                  </ng-container>\n                  <ng-template #tmpItem>\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\n                      <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\" [attr.data-id]=\"item[this.valueField]\">\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                        <span class=\"ax-icon ax-icon-done ax-selected-icon\" *ngIf=\"isItemSelected(item)\"></span>\n                      </li>\n                    </ng-container>\n                    <ng-template #multipleTemplate>\n                      <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\" [class.ax-state-checkbox]=\"checkbox\"\n                        [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span>\n                          <input class=\"ax-checkbox\" type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                            *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\" />\n                          <span class=\"ax-checkbox-label\">{{ _getItemDisplayTextTemplte(item) }}</span>\n                        </span>\n                        <span class=\"ax-icon ax-icon-done ax-selected-icon\"\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\n                      </li>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </ng-container>\n            </ng-template>\n          </ul>\n        </ng-container>\n        <ng-container *ngIf=\"isLoading\">\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n          </ng-container>\n          <ng-template #elseLoadingTemplate>\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n              <ax-loading [context]=\"_loadingOptions\"></ax-loading>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #tmpEmpty>\n          <ng-container *ngIf=\"!isLoading\">\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n            </ng-container>\n            <ng-template #elseEmptyTemplate>\n              <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\" [innerHTML]=\"\n                  'common.no-result-for'\n                    | trans\n                      : {\n                          exp: this._searchBox ? this._searchBox.value : ''\n                        }\n                \"></div>\n            </ng-template>\n          </ng-container>\n        </ng-template>\n      </div>\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\n                >\n               \n            </div> -->\n      <!-- <div class=\"ax-footer\">footer</div> -->\n    </div>\n  </div>\n</ax-popover>", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-default));color:rgba(var(--ax-color-default-fore));border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-select-box .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;outline:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-select-box-selection>span{padding-inline-start:1rem;padding-inline-end:.75rem;white-space:nowrap}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}ax-select-box .ax-select-box-multi-selection{padding:0 .5rem;display:flex;justify-content:center;align-items:center}ax-select-box .ax-placeholder{padding-inline-start:1rem;padding-inline-end:.75rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title" }, { kind: "component", type: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "directive", type: i6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\n  <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\n    (blur)=\"_emitOnBlurEvent($event)\">\n    <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\n      <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\n      <ng-template #singleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n        </ng-container>\n      </ng-template>\n      <ng-template #multipleSelectedTemplate>\n        <div class=\"ax-select-box-multi-selection\">\n          <ng-container *ngFor=\"let item of selectedItems\">\n            <div class=\"ax-select-multi-item\">\n              {{ _getItemDisplayTextTemplte(item) }}\n              <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-template #showPlaceholder>\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n    </ng-template>\n  </div>\n</div>\n<button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"clear()\" [tabIndex]=\"-1\"\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\n  <span class=\"ax-icon ax-icon-close\"></span>\n</button>\n<button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button ax-button-icon\"\n  (click)=\"_handleArrowClickEvent($event)\">\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\n    <ax-loading type=\"spinner\"></ax-loading>\n  </ng-container>\n  <ng-template #iconTemplate>\n    <span class=\"ax-icon ax-icon-chevron-left ax-arrow-button\" [ngClass]=\"{\n        '-rotation-90': !isOpen,\n        'rotation-90': isOpen\n      }\"></span>\n  </ng-template>\n</button>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ax-popover [target]=\"_target\" [placement]=\"position\" [openOn]=\"'manual'\" [closeOn]=\"'clickOut'\"\n  [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\n  <div class=\"ax-overlay-pane\" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\" [class.ax-full]=\"_searchBox || isLazy\"\n    [style.min-width.px]=\"_popoverWidth\">\n    <div class=\"ax-list\">\n      <ax-header *ngIf=\"_isActionSheet\">\n        <ax-title>{{ _popoverTitle }}</ax-title>\n        <ax-close-button class=\"ax-icon\"\n          [icon]=\"multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      <div class=\"ax-search-box-container\" [class.ax-state-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox != null\">\n        <ng-content select=\"ax-search-box\"></ng-content>\n      </div>\n      <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n          <ul>\n            <ng-container *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\"> </ng-container>\n            <ng-template #tmpTree let-list=\"list\">\n              <ng-container *ngFor=\"let item of list; let i = index; trackBy: _trackByFunction\">\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\n                  <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event, item)\"\n                    [attr.data-id]=\"item[this.valueField]\">\n                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, direction: direction }\">\n                    </ng-container>\n                  </li>\n                </ng-container>\n                <ng-template #defualtTemplate>\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\n                    <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                      <ul *ngIf=\"item.children?.length > 0\">\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context: { list: item.children }\">\n                        </ng-container>\n                      </ul>\n                    </li>\n                  </ng-container>\n                  <ng-template #tmpItem>\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\n                      <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\" [attr.data-id]=\"item[this.valueField]\">\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                        <span class=\"ax-icon ax-icon-done ax-selected-icon\" *ngIf=\"isItemSelected(item)\"></span>\n                      </li>\n                    </ng-container>\n                    <ng-template #multipleTemplate>\n                      <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\" [class.ax-state-checkbox]=\"checkbox\"\n                        [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span>\n                          <input class=\"ax-checkbox\" type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                            *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\" />\n                          <span class=\"ax-checkbox-label\">{{ _getItemDisplayTextTemplte(item) }}</span>\n                        </span>\n                        <span class=\"ax-icon ax-icon-done ax-selected-icon\"\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\n                      </li>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </ng-container>\n            </ng-template>\n          </ul>\n        </ng-container>\n        <ng-container *ngIf=\"isLoading\">\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n          </ng-container>\n          <ng-template #elseLoadingTemplate>\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n              <ax-loading [context]=\"_loadingOptions\"></ax-loading>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #tmpEmpty>\n          <ng-container *ngIf=\"!isLoading\">\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n            </ng-container>\n            <ng-template #elseEmptyTemplate>\n              <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\" [innerHTML]=\"\n                  'common.no-result-for'\n                    | trans\n                      : {\n                          exp: this._searchBox ? this._searchBox.value : ''\n                        }\n                \"></div>\n            </ng-template>\n          </ng-container>\n        </ng-template>\n      </div>\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\n                >\n               \n            </div> -->\n      <!-- <div class=\"ax-footer\">footer</div> -->\n    </div>\n  </div>\n</ax-popover>", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-select-box .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;outline:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-select-box-selection>span{padding-inline-start:1rem;padding-inline-end:.75rem;white-space:nowrap}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}ax-select-box .ax-select-box-multi-selection{display:flex;justify-content:center;flex-wrap:wrap;gap:.25rem;padding:.25rem}ax-select-box .ax-placeholder{padding-inline-start:1rem;padding-inline-end:.75rem}ax-select-box .ax-general-button .ax-arrow-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-select-box .ax-general-button .ax-arrow-button.-rotation-90{transform:rotate(-90deg)}ax-select-box .ax-general-button .ax-arrow-button.rotation-90{transform:rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title" }, { kind: "component", type: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "directive", type: i6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i7.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
@@ -352,7 +359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                         { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
                         { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent },
                         { provide: AXValuableComponent, useExisting: AXSelectBoxComponent },
-                    ], template: "<ng-content select=\"ax-prefix\"> </ng-content>\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\n  <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\n    (blur)=\"_emitOnBlurEvent($event)\">\n    <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\n      <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\n      <ng-template #singleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n        </ng-container>\n      </ng-template>\n      <ng-template #multipleSelectedTemplate>\n        <div class=\"ax-select-box-multi-selection\">\n          <ng-container *ngFor=\"let item of selectedItems\">\n            <div class=\"ax-select-multi-item\">\n              {{ _getItemDisplayTextTemplte(item) }}\n              <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-template #showPlaceholder>\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n    </ng-template>\n  </div>\n</div>\n<button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"clear()\" [tabIndex]=\"-1\"\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\n  <span class=\"ax-icon ax-icon-close\"></span>\n</button>\n<button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button ax-button-icon\"\n  (click)=\"_handleArrowClickEvent($event)\">\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\n    <ax-loading type=\"spinner\"></ax-loading>\n  </ng-container>\n  <ng-template #iconTemplate>\n    <span class=\"ax-icon ax-icon-chevron-left ax-transition-all\" [ngClass]=\"{\n        '-ax-rotation-90': !isOpen,\n        'ax-rotation-90': isOpen\n      }\"></span>\n  </ng-template>\n</button>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ax-popover [target]=\"_target\" [placement]=\"position\" [openOn]=\"'manual'\" [closeOn]=\"'clickout'\"\n  [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\n  <div class=\"ax-overlay-pane\" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\" [class.ax-full]=\"_searchBox || isLazy\"\n    [style.min-width.px]=\"_popoverWidth\">\n    <div class=\"ax-list\">\n      <ax-header *ngIf=\"_isActionSheet\">\n        <ax-title>{{ _popoverTitle }}</ax-title>\n        <ax-close-button class=\"ax-icon\"\n          [icon]=\"multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      <div class=\"ax-search-box-container\" [class.ax-state-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox != null\">\n        <ng-content select=\"ax-search-box\"></ng-content>\n      </div>\n      <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n          <ul>\n            <ng-container *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\"> </ng-container>\n            <ng-template #tmpTree let-list=\"list\">\n              <ng-container *ngFor=\"let item of list; let i = index; trackBy: _trackByFunction\">\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\n                  <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event, item)\"\n                    [attr.data-id]=\"item[this.valueField]\">\n                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, direction: direction }\">\n                    </ng-container>\n                  </li>\n                </ng-container>\n                <ng-template #defualtTemplate>\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\n                    <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                      <ul *ngIf=\"item.children?.length > 0\">\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context: { list: item.children }\"> </ng-container>\n                      </ul>\n                    </li>\n                  </ng-container>\n                  <ng-template #tmpItem>\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\n                      <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\" [attr.data-id]=\"item[this.valueField]\">\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                        <span class=\"ax-icon ax-icon-done ax-selected-icon\" *ngIf=\"isItemSelected(item)\"></span>\n                      </li>\n                    </ng-container>\n                    <ng-template #multipleTemplate>\n                      <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\" [class.ax-state-checkbox]=\"checkbox\"\n                        [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span>\n                          <input class=\"ax-checkbox\" type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                            *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\" />\n                          <span class=\"ax-checkbox-label\">{{ _getItemDisplayTextTemplte(item) }}</span>\n                        </span>\n                        <span class=\"ax-icon ax-icon-done ax-selected-icon\"\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\n                      </li>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </ng-container>\n            </ng-template>\n          </ul>\n        </ng-container>\n        <ng-container *ngIf=\"isLoading\">\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n          </ng-container>\n          <ng-template #elseLoadingTemplate>\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n              <ax-loading [context]=\"_loadingOptions\"></ax-loading>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #tmpEmpty>\n          <ng-container *ngIf=\"!isLoading\">\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n            </ng-container>\n            <ng-template #elseEmptyTemplate>\n              <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\" [innerHTML]=\"\n                  'common.no-result-for'\n                    | trans\n                      : {\n                          exp: this._searchBox ? this._searchBox.value : ''\n                        }\n                \"></div>\n            </ng-template>\n          </ng-container>\n        </ng-template>\n      </div>\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\n                >\n               \n            </div> -->\n      <!-- <div class=\"ax-footer\">footer</div> -->\n    </div>\n  </div>\n</ax-popover>", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-default));color:rgba(var(--ax-color-default-fore));border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-select-box .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;outline:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-select-box-selection>span{padding-inline-start:1rem;padding-inline-end:.75rem;white-space:nowrap}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}ax-select-box .ax-select-box-multi-selection{padding:0 .5rem;display:flex;justify-content:center;align-items:center}ax-select-box .ax-placeholder{padding-inline-start:1rem;padding-inline-end:.75rem}\n"] }]
+                    ], template: "<ng-content select=\"ax-prefix\"> </ng-content>\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\n  <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\n    (blur)=\"_emitOnBlurEvent($event)\">\n    <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\n      <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\n      <ng-template #singleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n        </ng-container>\n      </ng-template>\n      <ng-template #multipleSelectedTemplate>\n        <div class=\"ax-select-box-multi-selection\">\n          <ng-container *ngFor=\"let item of selectedItems\">\n            <div class=\"ax-select-multi-item\">\n              {{ _getItemDisplayTextTemplte(item) }}\n              <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-template #showPlaceholder>\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n    </ng-template>\n  </div>\n</div>\n<button type=\"button\" class=\"ax-general-button ax-button-icon\" (click)=\"clear()\" [tabIndex]=\"-1\"\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\n  <span class=\"ax-icon ax-icon-close\"></span>\n</button>\n<button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button ax-button-icon\"\n  (click)=\"_handleArrowClickEvent($event)\">\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\n    <ax-loading type=\"spinner\"></ax-loading>\n  </ng-container>\n  <ng-template #iconTemplate>\n    <span class=\"ax-icon ax-icon-chevron-left ax-arrow-button\" [ngClass]=\"{\n        '-rotation-90': !isOpen,\n        'rotation-90': isOpen\n      }\"></span>\n  </ng-template>\n</button>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ax-popover [target]=\"_target\" [placement]=\"position\" [openOn]=\"'manual'\" [closeOn]=\"'clickOut'\"\n  [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\n  <div class=\"ax-overlay-pane\" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\" [class.ax-full]=\"_searchBox || isLazy\"\n    [style.min-width.px]=\"_popoverWidth\">\n    <div class=\"ax-list\">\n      <ax-header *ngIf=\"_isActionSheet\">\n        <ax-title>{{ _popoverTitle }}</ax-title>\n        <ax-close-button class=\"ax-icon\"\n          [icon]=\"multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      <div class=\"ax-search-box-container\" [class.ax-state-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox != null\">\n        <ng-content select=\"ax-search-box\"></ng-content>\n      </div>\n      <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n          <ul>\n            <ng-container *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\"> </ng-container>\n            <ng-template #tmpTree let-list=\"list\">\n              <ng-container *ngFor=\"let item of list; let i = index; trackBy: _trackByFunction\">\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\n                  <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event, item)\"\n                    [attr.data-id]=\"item[this.valueField]\">\n                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, direction: direction }\">\n                    </ng-container>\n                  </li>\n                </ng-container>\n                <ng-template #defualtTemplate>\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\n                    <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                      <ul *ngIf=\"item.children?.length > 0\">\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context: { list: item.children }\">\n                        </ng-container>\n                      </ul>\n                    </li>\n                  </ng-container>\n                  <ng-template #tmpItem>\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\n                      <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\" [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\" [attr.data-id]=\"item[this.valueField]\">\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                        <span class=\"ax-icon ax-icon-done ax-selected-icon\" *ngIf=\"isItemSelected(item)\"></span>\n                      </li>\n                    </ng-container>\n                    <ng-template #multipleTemplate>\n                      <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\" [class.ax-state-checkbox]=\"checkbox\"\n                        [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span>\n                          <input class=\"ax-checkbox\" type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                            *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\" />\n                          <span class=\"ax-checkbox-label\">{{ _getItemDisplayTextTemplte(item) }}</span>\n                        </span>\n                        <span class=\"ax-icon ax-icon-done ax-selected-icon\"\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\n                      </li>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </ng-container>\n            </ng-template>\n          </ul>\n        </ng-container>\n        <ng-container *ngIf=\"isLoading\">\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n          </ng-container>\n          <ng-template #elseLoadingTemplate>\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n              <ax-loading [context]=\"_loadingOptions\"></ax-loading>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #tmpEmpty>\n          <ng-container *ngIf=\"!isLoading\">\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n            </ng-container>\n            <ng-template #elseEmptyTemplate>\n              <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\" [innerHTML]=\"\n                  'common.no-result-for'\n                    | trans\n                      : {\n                          exp: this._searchBox ? this._searchBox.value : ''\n                        }\n                \"></div>\n            </ng-template>\n          </ng-container>\n        </ng-template>\n      </div>\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\n                >\n               \n            </div> -->\n      <!-- <div class=\"ax-footer\">footer</div> -->\n    </div>\n  </div>\n</ax-popover>", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-select-box .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;outline:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-select-box-selection>span{padding-inline-start:1rem;padding-inline-end:.75rem;white-space:nowrap}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}ax-select-box .ax-select-box-multi-selection{display:flex;justify-content:center;flex-wrap:wrap;gap:.25rem;padding:.25rem}ax-select-box .ax-placeholder{padding-inline-start:1rem;padding-inline-end:.75rem}ax-select-box .ax-general-button .ax-arrow-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-select-box .ax-general-button .ax-arrow-button.-rotation-90{transform:rotate(-90deg)}ax-select-box .ax-general-button .ax-arrow-button.rotation-90{transform:rotate(90deg)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]
@@ -377,9 +384,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXSelectBox2Component extends classes(MXDropdownBoxBaseComponent, MXSelectionValueComponent, MXLookComponent) {
+    constructor() {
+        super(...arguments);
+        this.isLoading = false;
+        this.renderList = false;
+        //_dataSource:AXDate
+        this.source = [];
+        this.autoHeight = false;
+        this.platform = inject(AXPlatform);
+    }
+    ngOnInit() {
+        this.setDropdownSize();
+    }
+    getItemByKey(key) {
+        return { [this.valueField]: key, [this.textField]: key };
+    }
+    _handleOnOpenedEvent() {
+        this.renderList = true;
+        this.list?.render();
+        setTimeout(() => {
+            this.list?.focus();
+        }, 100);
+    }
+    _handleOnClosedEvent() {
+        //this.input.focus();
+    }
+    _handleBadgeRemove(e, item) {
+        this.unselectItems(item);
+    }
+    _handleOnDataLoad(items) {
+        this.setDropdownSize(items.length);
+    }
+    _handleValueChanged(e) {
+        if (e.isUserInteraction)
+            this.commitValue(e.value, e.isUserInteraction);
+    }
+    internalValueChanged() {
+        if (!this.multiple)
+            this.close();
+        setTimeout(() => {
+            this.detectAutoHeight();
+        }, 100);
+    }
+    detectAutoHeight() {
+        const containerWidth = this.getHostElement().querySelector('.ax-select-box-selection').clientWidth;
+        const itemsWidth = Array.from(this.getHostElement().querySelectorAll('.ax-select-multi-item')).reduce((a, i) => a + i.clientWidth, 0);
+        this.autoHeight = containerWidth - itemsWidth <= 8;
+        this.dropdown.updatePosition();
+        this.cdr.markForCheck();
+    }
+    setDropdownSize(count = 0) {
+        this.dropdownSizes = {
+            width: this.platform.is('SM') ? '100%' : `${this.getHostElement().offsetWidth}px`,
+            height: count == 0 ? 'auto' : `${Math.min(5, count) * 40}px`,
+        };
+    }
+    _handleKeydown(e) {
+        if (e.code === 'ArrowDown' || e.code === 'ArrowUp') {
+            this.selectItemByNav(e.code === 'ArrowDown' ? 1 : -1);
+            e.preventDefault();
+        }
+        else if (e.code === 'Backspace') {
+            this.unselectItems(this.selectedItems.pop());
+            e.preventDefault();
+        }
+        // if ((e.code === 'Space' || e.code === 'Enter') && this.hasItems) {
+        //     if (this.readonly || this.disabled) {
+        //         e.preventDefault();
+        //         e.stopPropagation();
+        //         return;
+        //     }
+        //     const id = document.activeElement?.closest('li')?.dataset?.id;
+        //     this.toggleSelect(id);
+        //     e.preventDefault();
+        //     e.stopPropagation()
+        // }
+    }
+    selectItemByNav(sign) {
+        if (Array.isArray(this.source) && !this.multiple) {
+            const items = this.normalizeItemsList(this.source);
+            const _last = last(this.selectedItems);
+            let i = -1;
+            if (_last) {
+                i = findLastIndex(items, [this.valueField, _last[this.valueField]]);
+            }
+            i += sign;
+            if (i < 0 || i >= items.length)
+                return;
+            const next = nth(items, i);
+            if (next) {
+                this.selectItems(next);
+            }
+        }
+        else {
+            this.open();
+        }
+    }
+    search(term) {
+        this.source;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXSelectBox2Component, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXSelectBox2Component, selector: "ax-select-box2", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", minValue: "minValue", maxValue: "maxValue", value: "value", state: "state", name: "name", id: "id", type: "type", look: "look", multiple: "multiple", source: "source", itemTemplate: "itemTemplate", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { listeners: { "keydown": "_handleKeydown($event)" } }, providers: [
+            { provide: AXComponent, useExisting: AXSelectBox2Component },
+            { provide: AXFocusableComponent, useExisting: AXSelectBox2Component },
+            { provide: AXValuableComponent, useExisting: AXSelectBox2Component },
+            { provide: AXClearableComponent, useExisting: AXSelectBox2Component },
+            { provide: AXSearchableComponent, useExisting: AXSelectBox2Component },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXSelectBox2Component),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent()\" (onClosed)=\"_handleOnClosedEvent()\"\n  [look]=\"look\" [class.ax-auto-height]=\"autoHeight\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-select-box-selection ax-select-box-multi-selection\" [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" (click)=\"toggle()\">\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\" *ngIf=\"selectedItems.length === 0\">\n        {{ placeholder }}\n      </div>\n      <ng-container *ngFor=\"let item of selectedItems\">\n        <div class=\"ax-select-multi-item\">\n          {{ item[textField] }}\n          <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"\n            *ngIf=\"selectedItems.length > 1\">\n          </span>\n        </div>\n      </ng-container>\n    </div>\n    <ng-content select=\" ax-clear-button\"></ng-content>\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\">\n      <ng-container *ngIf=\"isLoading && !isOpen; else iconTemplate\">\n        <ax-loading type=\"spinner\"></ax-loading>\n      </ng-container>\n      <ng-template #iconTemplate>\n        <span class=\"ax-icon ax-icon-chevron-left ax-arrow-button\" [ngClass]=\"{\n            '-rotation-90': !isOpen,\n            'rotation-90': isOpen\n          }\"></span>\n      </ng-template>\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <div class=\"ax-select-box2-panel\">\n      <ax-header class=\"ax-default\" *ngIf=\"dropdown.isActionsheetStyle\">\n        <ax-title>{{ placeholder }}</ax-title>\n        <ax-close-button\n          [icon]=\"multiple ? 'ax-icon ax-icon-done !ax-text-primary-500' : 'ax-icon ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      <div class=\"ax-search-container\">\n        <ng-content select=\"ax-search-box\"> </ng-content>\n      </div>\n      <ax-list *ngIf=\"renderList\" [source]=\"source\" [multiple]=\"multiple\" [style.width]=\"dropdownSizes.width\"\n        [style.height]=\"dropdownSizes.height\" [emptyTemplate]=\"emptyTemplate ?? empty\" [itemTemplate]=\"itemTemplate\"\n        [loadingTemplate]=\"loadingTemplate\" [ngModel]=\"value\" (onValueChanged)=\"_handleValueChanged($event)\"\n        (onDataLoad)=\"_handleOnDataLoad($event)\">\n        <ng-template #empty> No Items! </ng-template>\n      </ax-list>\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: ["ax-select-box2 ax-dropdown-box.ax-auto-height{height:auto!important}ax-select-box2 .ax-editor-container.ax-look-fill .ax-select-multi-item{background-color:rgba(var(--ax-color-surface))!important}ax-select-box2 .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default)}ax-select-box2 .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box2 .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;outline:transparent;-webkit-user-select:none;user-select:none;cursor:pointer;justify-content:flex-start;flex:1}ax-select-box2 .ax-select-box-selection>span{padding-inline-start:1rem;padding-inline-end:.75rem;white-space:nowrap}ax-select-box2 .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}ax-select-box2 .ax-select-box-multi-selection{display:flex;flex-wrap:wrap;gap:.25rem;padding:.25rem}ax-select-box2 .ax-placeholder{padding-inline-start:1rem;padding-inline-end:.75rem}ax-select-box2 .ax-general-button .ax-arrow-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-select-box2 .ax-general-button .ax-arrow-button.-rotation-90{transform:rotate(-90deg)}ax-select-box2 .ax-general-button .ax-arrow-button.rotation-90{transform:rotate(90deg)}.ax-select-box2-panel>ax-header.ax-default{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}.ax-select-box2-panel .ax-search-container{padding:.5rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title , ax-sub-title" }, { kind: "component", type: i5.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i5$1.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: i6$1.AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "disabledField", "multiple", "source", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readOnlyChange", "onBlur", "onFocus", "onDataLoad", "onScrolledIndexChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXSelectBox2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-select-box2', inputs: [
+                        'disabled',
+                        'readonly',
+                        'tabIndex',
+                        'placeholder',
+                        'minValue',
+                        'maxValue',
+                        'value',
+                        'state',
+                        'name',
+                        'id',
+                        'type',
+                        'look',
+                        'multiple',
+                    ], outputs: [
+                        'valueChange',
+                        'stateChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        'readonlyChange',
+                        'disabledChange',
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: AXComponent, useExisting: AXSelectBox2Component },
+                        { provide: AXFocusableComponent, useExisting: AXSelectBox2Component },
+                        { provide: AXValuableComponent, useExisting: AXSelectBox2Component },
+                        { provide: AXClearableComponent, useExisting: AXSelectBox2Component },
+                        { provide: AXSearchableComponent, useExisting: AXSelectBox2Component },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXSelectBox2Component),
+                            multi: true,
+                        },
+                    ], template: "<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent()\" (onClosed)=\"_handleOnClosedEvent()\"\n  [look]=\"look\" [class.ax-auto-height]=\"autoHeight\">\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-select-box-selection ax-select-box-multi-selection\" [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\" (blur)=\"emitOnBlurEvent($event)\" (click)=\"toggle()\">\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\" *ngIf=\"selectedItems.length === 0\">\n        {{ placeholder }}\n      </div>\n      <ng-container *ngFor=\"let item of selectedItems\">\n        <div class=\"ax-select-multi-item\">\n          {{ item[textField] }}\n          <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"\n            *ngIf=\"selectedItems.length > 1\">\n          </span>\n        </div>\n      </ng-container>\n    </div>\n    <ng-content select=\" ax-clear-button\"></ng-content>\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\">\n      <ng-container *ngIf=\"isLoading && !isOpen; else iconTemplate\">\n        <ax-loading type=\"spinner\"></ax-loading>\n      </ng-container>\n      <ng-template #iconTemplate>\n        <span class=\"ax-icon ax-icon-chevron-left ax-arrow-button\" [ngClass]=\"{\n            '-rotation-90': !isOpen,\n            'rotation-90': isOpen\n          }\"></span>\n      </ng-template>\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <div class=\"ax-select-box2-panel\">\n      <ax-header class=\"ax-default\" *ngIf=\"dropdown.isActionsheetStyle\">\n        <ax-title>{{ placeholder }}</ax-title>\n        <ax-close-button\n          [icon]=\"multiple ? 'ax-icon ax-icon-done !ax-text-primary-500' : 'ax-icon ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      <div class=\"ax-search-container\">\n        <ng-content select=\"ax-search-box\"> </ng-content>\n      </div>\n      <ax-list *ngIf=\"renderList\" [source]=\"source\" [multiple]=\"multiple\" [style.width]=\"dropdownSizes.width\"\n        [style.height]=\"dropdownSizes.height\" [emptyTemplate]=\"emptyTemplate ?? empty\" [itemTemplate]=\"itemTemplate\"\n        [loadingTemplate]=\"loadingTemplate\" [ngModel]=\"value\" (onValueChanged)=\"_handleValueChanged($event)\"\n        (onDataLoad)=\"_handleOnDataLoad($event)\">\n        <ng-template #empty> No Items! </ng-template>\n      </ax-list>\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: ["ax-select-box2 ax-dropdown-box.ax-auto-height{height:auto!important}ax-select-box2 .ax-editor-container.ax-look-fill .ax-select-multi-item{background-color:rgba(var(--ax-color-surface))!important}ax-select-box2 .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default)}ax-select-box2 .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box2 .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;outline:transparent;-webkit-user-select:none;user-select:none;cursor:pointer;justify-content:flex-start;flex:1}ax-select-box2 .ax-select-box-selection>span{padding-inline-start:1rem;padding-inline-end:.75rem;white-space:nowrap}ax-select-box2 .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}ax-select-box2 .ax-select-box-multi-selection{display:flex;flex-wrap:wrap;gap:.25rem;padding:.25rem}ax-select-box2 .ax-placeholder{padding-inline-start:1rem;padding-inline-end:.75rem}ax-select-box2 .ax-general-button .ax-arrow-button{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-select-box2 .ax-general-button .ax-arrow-button.-rotation-90{transform:rotate(-90deg)}ax-select-box2 .ax-general-button .ax-arrow-button.rotation-90{transform:rotate(90deg)}.ax-select-box2-panel>ax-header.ax-default{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}.ax-select-box2-panel .ax-search-container{padding:.5rem}\n"] }]
+        }], propDecorators: { source: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], emptyTemplate: [{
+                type: Input
+            }], loadingTemplate: [{
+                type: Input
+            }], list: [{
+                type: ViewChild,
+                args: [AXListComponent]
+            }], dropdown: [{
+                type: ViewChild,
+                args: [AXDropdownBoxComponent, { static: true }]
+            }], _handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
 class AXSelectBoxModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent, AXSelectBox2Component], imports: [CommonModule,
             AXCommonModule,
             FormsModule,
             AXCheckBoxModule,
@@ -389,7 +572,9 @@ class AXSelectBoxModule {
             AXPopoverModule,
             AXLoadingModule,
             A11yModule,
-            AXTextBoxModule], exports: [AXSelectBoxComponent] }); }
+            AXTextBoxModule,
+            AXDropdownModule,
+            AXListModule], exports: [AXSelectBoxComponent, AXSelectBox2Component] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXSelectBoxModule, imports: [CommonModule,
             AXCommonModule,
             FormsModule,
@@ -400,7 +585,9 @@ class AXSelectBoxModule {
             AXPopoverModule,
             AXLoadingModule,
             A11yModule,
-            AXTextBoxModule] }); }
+            AXTextBoxModule,
+            AXDropdownModule,
+            AXListModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXSelectBoxModule, decorators: [{
             type: NgModule,
@@ -417,9 +604,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                         AXLoadingModule,
                         A11yModule,
                         AXTextBoxModule,
+                        AXDropdownModule,
+                        AXListModule,
                     ],
-                    exports: [AXSelectBoxComponent],
-                    declarations: [AXSelectBoxComponent],
+                    exports: [AXSelectBoxComponent, AXSelectBox2Component],
+                    declarations: [AXSelectBoxComponent, AXSelectBox2Component],
                     providers: [],
                 }]
         }] });
@@ -428,5 +617,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXSelectBoxComponent, AXSelectBoxModule };
+export { AXSelectBox2Component, AXSelectBoxComponent, AXSelectBoxModule };
 //# sourceMappingURL=acorex-components-select-box.mjs.map