@acorex/components 7.5.0 → 7.8.0

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

@@ -1,31 +1,26 @@
-import { MXSelectionValueComponent, MXAppearanceComponent, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent, AXClosbaleComponent, AXSearchableComponent, AXCommonModule } from '@acorex/components/common';
-import * as i4 from '@acorex/components/dropdown';
+import { MXSelectionValueComponent, MXLookComponent, convertArrayToDataSource, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent, AXClosbaleComponent, AXSearchableComponent, AXCommonModule } from '@acorex/components/common';
+import * as i5 from '@acorex/components/dropdown';
 import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent, AXDropdownModule } from '@acorex/components/dropdown';
+import * as i6 from '@acorex/components/list';
+import { AXListComponent, AXListModule } from '@acorex/components/list';
+import { AXSearchBoxComponent } from '@acorex/components/search-box';
 import * as i0 from '@angular/core';
-import { forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, ContentChild, HostListener, HostBinding, NgModule } from '@angular/core';
-import * as i2$1 from '@angular/forms';
+import { forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, ContentChild, HostListener, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { last, findLastIndex, nth } from 'lodash-es';
 import { classes } from 'polytype';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@acorex/components/loading';
-import { AXLoadingModule } from '@acorex/components/loading';
-import * as i5 from '@acorex/components/list';
-import { AXListModule } from '@acorex/components/list';
-import * as i1 from '@acorex/core/platform';
-import * as i7 from '@acorex/core/translation';
-import { AXTranslator, AXTranslationModule } from '@acorex/core/translation';
-import { findLast, first, last, findLastIndex, nth } from 'lodash-es';
-import { AXBaseSelectionDropdownMixin } from '@acorex/components/mixin';
-import * as i4$1 from '@acorex/components/popover';
-import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
-import { AXSearchBoxComponent } from '@acorex/components/search-box';
-import * as i3$1 from '@acorex/components/decorators';
+import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i6 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
+import * as i4 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
 import { AXBadgeModule } from '@acorex/components/badge';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
+import { AXPopoverModule } from '@acorex/components/popover';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { A11yModule } from '@angular/cdk/a11y';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 
 /**
@@ -33,445 +28,220 @@ import { AXTextBoxModule } from '@acorex/components/text-box';
  *
  * @category Components
  */
-class AXSelectBox2Component extends classes(MXDropdownBoxBaseComponent, MXSelectionValueComponent, MXAppearanceComponent) {
+class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelectionValueComponent, MXLookComponent) {
     constructor() {
         super(...arguments);
         this.isLoading = false;
-        this.dropdownHeight = 180;
-        this.source = [];
+        this.renderList = false;
+        this.dropdownSizes = { width: 'auto', height: 'auto' };
+        this._listDataSource = convertArrayToDataSource([], {
+            key: this.valueField,
+            pageSize: 10,
+        });
+        this.autoHeight = false;
+    }
+    get dataSource() {
+        return this._dataSource;
+    }
+    set dataSource(v) {
+        this._dataSource = v;
+        if (Array.isArray(v)) {
+            this._listDataSource = convertArrayToDataSource(v, { key: this.valueField, pageSize: 10 });
+        }
+        else {
+            this._listDataSource = this.dataSource;
+        }
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.setDropdownSize();
     }
     getItemByKey(key) {
-        debugger;
-        return { [this.valueField]: key, [this.textField]: key };
+        return this._listDataSource.find(key);
     }
     _handleOnOpenedEvent() {
+        this.renderList = true;
+        this.list?.render();
+        setTimeout(() => {
+            this.list?.focus();
+        });
     }
     _handleOnClosedEvent() {
         //this.input.focus();
     }
     _handleBadgeRemove(e, item) {
         this.unselectItems(item);
-    }
-    _handleValueChanged(e) {
-        this.commitValue(e.value, true);
-    }
-    internalValueChanged() {
-        this.close();
-    }
-    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", appearance: "appearance", source: "source" }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, providers: [
-            { provide: AXComponent, useExisting: AXSelectBox2Component },
-            { provide: AXFocusableComponent, useExisting: AXSelectBox2Component },
-            { provide: AXValuableComponent, useExisting: AXSelectBox2Component },
-            { provide: AXClearableComponent, useExisting: AXSelectBox2Component },
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => AXSelectBox2Component),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent()\" (onClosed)=\"_handleOnClosedEvent()\"\n    [appearance]=\"appearance\">\n    <ng-container input>\n        <ng-content select=\"ax-prefix\"> </ng-content>\n        <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"emitOnFocusEvent($event)\"\n            (blur)=\"emitOnBlurEvent($event)\">\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)\"> </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-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-suffix\"> </ng-content>\n    </ng-container>\n    <ng-container panel>\n        <ax-list [source]=\"source\" [style.width.px]=\"getHostElement().offsetWidth\" [style.height.px]=\"dropdownHeight\"\n            [emptyTemplate]=\"emp\" [ngModel]=\"value\" (onValueChanged)=\"_handleValueChanged($event)\">\n            <ng-template #emp>Empty</ng-template>\n        </ax-list>\n    </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: ["ax-select-box2 .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-gray-200));color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}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;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{padding:0 .5rem;display:flex;justify-content:center;align-items:center}ax-select-box2 .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$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.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i4.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "appearance"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: i5.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"] }], 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',
-                        'appearance'
-                    ], 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: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AXSelectBox2Component),
-                            multi: true,
-                        },
-                    ], template: "<ax-dropdown-box [disabled]=\"disabled\" (onOpened)=\"_handleOnOpenedEvent()\" (onClosed)=\"_handleOnClosedEvent()\"\n    [appearance]=\"appearance\">\n    <ng-container input>\n        <ng-content select=\"ax-prefix\"> </ng-content>\n        <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"emitOnFocusEvent($event)\"\n            (blur)=\"emitOnBlurEvent($event)\">\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)\"> </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-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-suffix\"> </ng-content>\n    </ng-container>\n    <ng-container panel>\n        <ax-list [source]=\"source\" [style.width.px]=\"getHostElement().offsetWidth\" [style.height.px]=\"dropdownHeight\"\n            [emptyTemplate]=\"emp\" [ngModel]=\"value\" (onValueChanged)=\"_handleValueChanged($event)\">\n            <ng-template #emp>Empty</ng-template>\n        </ax-list>\n    </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>", styles: ["ax-select-box2 .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-gray-200));color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}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;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{padding:0 .5rem;display:flex;justify-content:center;align-items:center}ax-select-box2 .ax-placeholder{padding-inline-start:1rem;padding-inline-end:.75rem}\n"] }]
-        }], propDecorators: { source: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], dropdown: [{
-                type: ViewChild,
-                args: [AXDropdownBoxComponent]
-            }] } });
-
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
-    get emptyTemplate() {
-        return this._contentEmptyTemplate;
-    }
-    /**
-     *  @ignore
-     */
-    constructor(_elementRef, _cdr, _zone, _platform) {
-        super(_elementRef, _cdr);
-        this._elementRef = _elementRef;
-        this._cdr = _cdr;
-        this._zone = _zone;
-        this._platform = _platform;
-        /**
-         *  Defines the clearButton.
-         */
-        this.clearButton = false;
-        /**
-         *  Defines the checkbox.
-         */
-        this.checkbox = false;
-        this._isActionSheet = false;
-        this._forceFocus = false;
-        this._loadingOptions = {
-            text: AXTranslator.get('layout.loading.text'),
-        };
-        this._isActionSheet = this._platform.is('SM');
-        this._platform.resize.subscribe(() => {
-            this._isActionSheet = this._platform.is('SM');
-            this.popover.close();
-            this._detectPopupSize();
-        });
-    }
-    _handleArrowClickEvent(e) {
-        e.stopPropagation();
-        // e.nativeEvent.stopPropagation();
-        this.toggle();
-    }
-    _handleInputClickEvent(e) {
         e.stopPropagation();
-        this.toggle();
-    }
-    onInit() {
-        super.onInit();
-        this._target = this._elementRef.nativeElement;
-        this._updatePopupTitle();
-    }
-    onViewInit() {
-        super.onViewInit();
-        this._detectPopupSize();
-    }
-    refresh() {
-        this.value = null;
-        super.refresh();
     }
-    _updatePopupTitle() {
-        const count = this.selectedItems?.length || 0;
-        //this._popoverTitle = count > 1 ? `(${count}) items selected` : (this.placeholder || AXTranslator.get('selectbox.popover.title'));
-        this._popoverTitle = this.placeholder || AXTranslator.get('selectbox.popover.title');
+    _handleOnDataLoad(items) {
+        this.setDropdownSize(items.length);
     }
-    _detectPopupSize() {
-        this._popoverWidth = this._isActionSheet ? 0 : this._target.offsetWidth;
-    }
-    _handleOnItemClick(e, item) {
-        if (this.isItemDisabled(item)) {
-            return;
+    _handleValueChanged(e) {
+        if (e.isUserInteraction) {
+            this.commitValue(e.component.selectedItems, true);
         }
+        ;
+    }
+    internalValueChanged() {
         if (!this.multiple)
             this.close();
-        this.toggleSelect(item);
-        this._cdr.detectChanges();
-    }
-    _handleListScroll(e) {
-        const list = e.target;
-        if (list.scrollTop < list.scrollHeight - list.clientHeight) {
-            return;
+        setTimeout(() => {
+            this.detectAutoHeight();
+        }, 100);
+    }
+    detectAutoHeight() {
+        const containerWidth = this.getHostElement().querySelector('.ax-select-box-selection').clientWidth;
+        const itemsWidth = Array.from(this.getHostElement().querySelectorAll('.ax-selected-token')).reduce((a, i) => a + i.clientWidth, 0);
+        this.autoHeight = containerWidth - itemsWidth <= 8;
+        this.dropdown.updatePosition();
+        this.cdr.markForCheck();
+    }
+    setDropdownSize(count = 0) {
+        if (this.dropdown.isActionsheetStyle) {
+            this.dropdownSizes = {
+                width: '100%',
+                height: ['auto', '0px'].includes(this.dropdownSizes.height) ? `${Math.min(15, count) * 40}px` : this.dropdownSizes.height,
+            };
         }
-        this._fetchData();
-    }
-    _checkForLoadData() {
-        const list = this.listContainer.nativeElement;
-        if (this.loadedCount < this.totalCount && list.scrollHeight < list.parentElement.clientHeight * 1.5) {
-            this._fetchData();
-        }
-    }
-    _onDataLoaded() {
-        if (this.popover.isOpen) {
-            setTimeout(() => {
-                this._checkForLoadData();
-                this.popover.updatePosition();
-                if (this._forceFocus) {
-                    this._focusSelectedItem();
-                    this._forceFocus = false;
-                }
-                this._focusSearchBox();
-            }, 100);
+        else {
+            this.dropdownSizes = {
+                width: `${this.getHostElement().offsetWidth}px`,
+                height: count == 0 ? 'auto' : `${Math.min(5, count) * 40}px`,
+            };
         }
     }
-    _onValueChanged(oldValue, newValue) {
-        super._onValueChanged(oldValue, newValue);
-    }
-    _handleOnRemoveItemClick(e, item) {
-        this.unselectItems(item);
-        e.stopPropagation();
-    }
-    _handleBadgeRemove(e, item) {
-        this.unselectItems(item);
-        e.stopPropagation();
-        this.close();
-    }
     _handleKeydown(e) {
-        const isLetter = new RegExp(/[a-zA-Z0-9\-]/).test(String.fromCharCode(e.keyCode));
-        if (e.code === 'Backspace' &&
-            e.type === 'keydown' &&
-            ((this.allowNull === true && this.selectedItems.length > 0) ||
-                (this.allowNull !== true && this.selectedItems.length > 1))) {
-            this.isUserInput = true;
-            this.unselectItems(this.selectedItems.pop());
+        if (e.code === 'ArrowDown' || e.code === 'ArrowUp') {
+            this.selectItemByNav(e.code === 'ArrowDown' ? 1 : -1);
             e.preventDefault();
-            return;
         }
-        else if ((e.code === 'ArrowDown' || e.code === 'ArrowUp' || e.code === 'Space') &&
-            !this.popover.isOpen &&
-            e.type === 'keydown') {
-            if (this.multiple) {
-                this.open();
-            }
-            else {
-                this.isUserInput = true;
-                if (e.ctrlKey || e.code === 'Space') {
-                    this.open();
-                }
-                else {
-                    this._selectedItemByNav(e.key === 'ArrowDown' ? 1 : -1);
-                }
-            }
-            e.preventDefault();
-            return;
-        }
-        else if (isLetter) {
-            this.text = e.key;
-            this.open();
-            e.preventDefault();
-            return;
-        }
-    }
-    _handlePopoverKeydown(e) {
-        if (e.target.tagName == 'INPUT' && ['Space', 'Backspace'].includes(e.code))
-            return;
-        if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && this.displayItems.length > 0) {
-            this.isUserInput = true;
-            this._focusItemByNav(e.key === 'ArrowDown' ? 1 : -1);
-            e.preventDefault();
-        }
-        else if (e.code === 'Backspace' &&
-            ((this.allowNull === true && this.selectedItems.length > 0) ||
-                (this.allowNull !== true && this.selectedItems.length > 1))) {
-            this.isUserInput = true;
+        else if (e.code === 'Backspace') {
             this.unselectItems(this.selectedItems.pop());
             e.preventDefault();
         }
-        else if (e.code === 'Space' || e.code === 'Enter') {
-            e.preventDefault();
-            const focusedItemId = this.listContainer.nativeElement.querySelector('.ax-state-focus')?.dataset?.id;
-            const focusedItem = findLast(this.flatItems, [this.valueField, focusedItemId]);
-            if (focusedItem) {
-                if (this.isItemDisabled(focusedItem)) {
-                    return;
-                }
-                if (this.multiple) {
-                    this.isUserInput = true;
-                    this.toggleSelect(focusedItem);
-                }
-                else {
-                    this.isUserInput = true;
-                    this.selectItems(focusedItem);
-                    this.close();
-                }
+        // 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.dataSource) && !this.multiple) {
+            const items = this.normalizeItemsList(this.dataSource);
+            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 if (e.code === 'Tab') {
-            this.close();
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        else if (e.key === 'Escape') {
-            this.close();
-            e.preventDefault();
-            e.stopPropagation();
-        }
-    }
-    async _handlePopupOnOpened(e) {
-        this._detectPopupSize();
-        this.popover.focus();
-        if (this.displayItems.length == 0) {
-            this._forceFocus = true;
-            this._fetchData();
         }
         else {
-            this._focusSelectedItem();
-        }
-        this._focusSearchBox();
-    }
-    _handlePopupOnClosed(e) {
-        this.focus();
-    }
-    _focusSearchBox() {
-        if (this._searchBox && (!this._isActionSheet || this._searchBox.value)) {
-            this._searchBox.focus();
+            this.open();
         }
     }
-    _focusItemByNav(sign) {
-        const list = this.listContainer.nativeElement;
-        const fn = (s) => list.querySelector(s);
-        const itemDiv = fn(`.ax-list-item.ax-state-focus`) || fn(`.ax-list-item.ax-state-selected`) || fn(`.ax-list-item`);
-        let next = (sign == 1 ? itemDiv.nextElementSibling : itemDiv.previousElementSibling);
-        if (next) {
-            this._focusItemElement(next);
+    search(term) {
+        if (term) {
+            const q = {};
+            q[this.textField] = term;
+            this._listDataSource.filter(q);
         }
         else {
-            const parent = itemDiv.closest('.ax-list-item-group');
-            if (parent) {
-                const lis = (sign == 1 ? parent.nextElementSibling : parent.previousElementSibling)?.querySelectorAll('li');
-                const a = sign == 1 ? first(lis) : last(lis);
-                if (a) {
-                    this._focusItemElement(a);
-                }
-            }
+            this._listDataSource.filter();
         }
     }
-    _focusSelectedItem() {
-        this._zone.runOutsideAngular(() => {
-            const list = this.listContainer.nativeElement;
-            const fn = (s) => list.querySelector(s);
-            const itemDiv = fn(`.ax-list-item.ax-state-selected`) || fn(`.ax-list-item`);
-            if (itemDiv) {
-                this._focusItemElement(itemDiv);
-            }
-        });
-    }
-    _focusItemElement(el) {
-        this._zone.runOutsideAngular(() => {
-            const list = this.listContainer.nativeElement;
-            list.querySelectorAll('.ax-list-item').forEach((c) => {
-                if (c == el) {
-                    c.classList.add('ax-state-focus');
-                    el.scrollIntoView({ behavior: 'auto' });
-                }
-                else {
-                    c.classList.remove('ax-state-focus');
-                }
-            });
-            if (!this._isActionSheet && this._searchBox)
-                this._searchBox.focus();
-            else
-                el.focus();
-        });
-    }
-    _selectedItemByNav(sign) {
-        const _last = last(this.selectedItems);
-        let i = 0;
-        if (_last) {
-            i = findLastIndex(this.flatItems, [this.valueField, _last[this.valueField]]);
-        }
-        i += sign;
-        let next = nth(this.flatItems, i);
-        while (next?.children && next?.children.length) {
-            i += sign;
-            next = nth(this.flatItems, i);
-        }
-        if (next) {
-            this.selectItems(next);
-        }
-        else if (next == null && sign == 1) {
-            this._fetchData();
-        }
-    }
-    search(exp) {
-        this.empty();
-        this._forceFocus = true;
-        this._fetchData();
-    }
-    _fetchData() {
-        super._fetchData({ searchQuery: this._searchBox?.value });
-    }
-    get __hostClass() {
-        return `ax-editor-container ax-drop-down ax-appearance-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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXSelectBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.9", type: AXSelectBoxComponent, selector: "ax-select-box", 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", valueField: "valueField", textField: "textField", dataSource: "dataSource", 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: AXSelectBoxComponent },
+            { provide: AXFocusableComponent, useExisting: AXSelectBoxComponent },
+            { provide: AXValuableComponent, useExisting: AXSelectBoxComponent },
+            { provide: AXClearableComponent, useExisting: AXSelectBoxComponent },
             { 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 }\">\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-gray-200));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{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$1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i3$1.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$1.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i3.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 }); }
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXSelectBoxComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: 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\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent()\"\n  (onClosed)=\"_handleOnClosedEvent()\"\n  [look]=\"look\"\n  [class.ax-auto-height]=\"autoHeight\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div\n      class=\"ax-select-box-selection\"\n      [class.ax-multiple]=\"multiple\"\n      [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n      (click)=\"toggle()\"\n    >\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-selected-token\">\n          {{ getDisplayText(item) }}\n          <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\" *ngIf=\"multiple\">\n          </span>\n        </div>\n      </ng-container>\n    </div>\n    <ng-content select=\" ax-clear-button\"></ng-content>\n    <button\n      type=\"button\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\"\n    >\n      <ng-container *ngIf=\"isLoading && !isOpen; else iconTemplate\">\n        <ax-loading type=\"spinner\"></ax-loading>\n      </ng-container>\n      <ng-template #iconTemplate>\n        <span\n          class=\"ax-icon ax-icon-chevron-left ax-arrow-button\"\n          [ngClass]=\"{\n            '-rotation-90': !isOpen,\n            'rotation-90': isOpen\n          }\"\n        ></span>\n      </ng-template>\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div class=\"ax-select-box-panel\">\n      <ax-header class=\"ax-solid\" *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'\"\n        ></ax-close-button>\n      </ax-header>\n      <div class=\"ax-search-container\" *ngIf=\"searchBox\">\n        <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n      </div>\n      <ax-list\n        *ngIf=\"renderList\"\n        [dataSource]=\"_listDataSource\"\n        [multiple]=\"multiple\"\n        [style.width]=\"dropdownSizes.width\"\n        [style.height]=\"dropdownSizes.height\"\n        [valueField]=\"valueField\"\n        [textField]=\"textField\"\n        [emptyTemplate]=\"emptyTemplate ?? empty\"\n        [itemTemplate]=\"itemTemplate\"\n        [loadingTemplate]=\"loadingTemplate\"\n        [ngModel]=\"value\"\n        (onValueChanged)=\"_handleValueChanged($event)\"\n        (onDataLoad)=\"_handleOnDataLoad($event)\"\n        [selectionMode]=\"'item'\"\n      >\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>\n", styles: ["ax-select-box ax-dropdown-box.ax-auto-height{height:auto!important}ax-select-box .ax-editor-container.ax-look-fill .ax-selected-token{background-color:rgba(var(--ax-color-surface))!important}ax-select-box .ax-selected-token{display:flex;align-items:center;padding:.25rem .5rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default)}ax-select-box .ax-selected-token .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;cursor:pointer;justify-content:flex-start;flex:1;flex-wrap:wrap;gap:.25rem;padding:.25rem}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-selection.ax-multiple .ax-selected-token{background-color:rgba(var(--ax-color-on-surface))}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)}.ax-select-box-panel>ax-header.ax-solid{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}.ax-select-box-panel .ax-search-container{padding:.5rem}\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.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.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: i5.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: i6.AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "disabledField", "multiple", "selectionMode", "dataSource", "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: AXSelectBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-select-box', inputs: [
-                        'isOpen',
-                        'fitParent',
-                        'dropdownWidth',
-                        'position',
                         'disabled',
+                        'readonly',
                         'tabIndex',
-                        'allowNull',
+                        'placeholder',
+                        'minValue',
+                        'maxValue',
                         'value',
+                        'state',
                         'name',
-                        'checked',
-                        'placeholder',
-                        'maxLength',
+                        'id',
                         'type',
-                        'autoComplete',
-                        'readonly',
-                        'pageSize',
-                        'items',
+                        'look',
+                        'multiple',
                         'valueField',
                         'textField',
-                        'disabledField',
-                        'disabledCallback',
-                        'multiple',
-                        'selectionMode',
-                    ], outputs: ['onOpened', 'onClosed', 'onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                    ], outputs: [
+                        'valueChange',
+                        'stateChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        'readonlyChange',
+                        'disabledChange',
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: AXComponent, useExisting: AXSelectBoxComponent },
+                        { provide: AXFocusableComponent, useExisting: AXSelectBoxComponent },
+                        { provide: AXValuableComponent, useExisting: AXSelectBoxComponent },
+                        { provide: AXClearableComponent, useExisting: AXSelectBoxComponent },
                         { 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 }\">\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-gray-200));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{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"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.AXPlatform }]; }, propDecorators: { popover: [{
-                type: ViewChild,
-                args: [AXPopoverComponent, { static: true }]
-            }], _searchBox: [{
-                type: ContentChild,
-                args: [AXSearchBoxComponent, { static: true }]
-            }], clearButton: [{
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXSelectBoxComponent),
+                            multi: true,
+                        },
+                    ], template: "<ax-dropdown-box\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent()\"\n  (onClosed)=\"_handleOnClosedEvent()\"\n  [look]=\"look\"\n  [class.ax-auto-height]=\"autoHeight\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div\n      class=\"ax-select-box-selection\"\n      [class.ax-multiple]=\"multiple\"\n      [tabindex]=\"tabIndex\"\n      (focus)=\"emitOnFocusEvent($event)\"\n      (blur)=\"emitOnBlurEvent($event)\"\n      (click)=\"toggle()\"\n    >\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-selected-token\">\n          {{ getDisplayText(item) }}\n          <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\" *ngIf=\"multiple\">\n          </span>\n        </div>\n      </ng-container>\n    </div>\n    <ng-content select=\" ax-clear-button\"></ng-content>\n    <button\n      type=\"button\"\n      [disabled]=\"disabled\"\n      [tabIndex]=\"-1\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"toggle()\"\n    >\n      <ng-container *ngIf=\"isLoading && !isOpen; else iconTemplate\">\n        <ax-loading type=\"spinner\"></ax-loading>\n      </ng-container>\n      <ng-template #iconTemplate>\n        <span\n          class=\"ax-icon ax-icon-chevron-left ax-arrow-button\"\n          [ngClass]=\"{\n            '-rotation-90': !isOpen,\n            'rotation-90': isOpen\n          }\"\n        ></span>\n      </ng-template>\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div class=\"ax-select-box-panel\">\n      <ax-header class=\"ax-solid\" *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'\"\n        ></ax-close-button>\n      </ax-header>\n      <div class=\"ax-search-container\" *ngIf=\"searchBox\">\n        <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n      </div>\n      <ax-list\n        *ngIf=\"renderList\"\n        [dataSource]=\"_listDataSource\"\n        [multiple]=\"multiple\"\n        [style.width]=\"dropdownSizes.width\"\n        [style.height]=\"dropdownSizes.height\"\n        [valueField]=\"valueField\"\n        [textField]=\"textField\"\n        [emptyTemplate]=\"emptyTemplate ?? empty\"\n        [itemTemplate]=\"itemTemplate\"\n        [loadingTemplate]=\"loadingTemplate\"\n        [ngModel]=\"value\"\n        (onValueChanged)=\"_handleValueChanged($event)\"\n        (onDataLoad)=\"_handleOnDataLoad($event)\"\n        [selectionMode]=\"'item'\"\n      >\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>\n", styles: ["ax-select-box ax-dropdown-box.ax-auto-height{height:auto!important}ax-select-box .ax-editor-container.ax-look-fill .ax-selected-token{background-color:rgba(var(--ax-color-surface))!important}ax-select-box .ax-selected-token{display:flex;align-items:center;padding:.25rem .5rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default)}ax-select-box .ax-selected-token .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;cursor:pointer;justify-content:flex-start;flex:1;flex-wrap:wrap;gap:.25rem;padding:.25rem}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-selection.ax-multiple .ax-selected-token{background-color:rgba(var(--ax-color-on-surface))}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)}.ax-select-box-panel>ax-header.ax-solid{border-bottom:1px solid;border-color:rgba(var(--ax-color-border-default))}.ax-select-box-panel .ax-search-container{padding:.5rem}\n"] }]
+        }], propDecorators: { dataSource: [{
+                type: Input
+            }], placeholder: [{
                 type: Input
-            }], checkbox: [{
+            }], itemTemplate: [{
                 type: Input
-            }], listContainer: [{
+            }], emptyTemplate: [{
+                type: Input
+            }], loadingTemplate: [{
+                type: Input
+            }], list: [{
                 type: ViewChild,
-                args: ['listContainer', { static: true }]
-            }], _contentEmptyTemplate: [{
+                args: [AXListComponent]
+            }], searchBox: [{
                 type: ContentChild,
-                args: ['emptyTemplate']
+                args: [AXSearchBoxComponent, { static: true }]
+            }], dropdown: [{
+                type: ViewChild,
+                args: [AXDropdownBoxComponent, { static: true }]
             }], _handleKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
-            }], __hostClass: [{
-                type: HostBinding,
-                args: ['class']
             }] } });
 
 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, AXSelectBox2Component], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.9", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule,
             AXCommonModule,
             FormsModule,
             AXCheckBoxModule,
@@ -483,7 +253,7 @@ class AXSelectBoxModule {
             A11yModule,
             AXTextBoxModule,
             AXDropdownModule,
-            AXListModule], exports: [AXSelectBoxComponent, AXSelectBox2Component] }); }
+            AXListModule], exports: [AXSelectBoxComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXSelectBoxModule, imports: [CommonModule,
             AXCommonModule,
             FormsModule,
@@ -514,10 +284,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                         A11yModule,
                         AXTextBoxModule,
                         AXDropdownModule,
-                        AXListModule
+                        AXListModule,
                     ],
-                    exports: [AXSelectBoxComponent, AXSelectBox2Component],
-                    declarations: [AXSelectBoxComponent, AXSelectBox2Component],
+                    exports: [AXSelectBoxComponent],
+                    declarations: [AXSelectBoxComponent],
                     providers: [],
                 }]
         }] });
@@ -526,5 +296,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXSelectBox2Component, AXSelectBoxComponent, AXSelectBoxModule };
+export { AXSelectBoxComponent, AXSelectBoxModule };
 //# sourceMappingURL=acorex-components-select-box.mjs.map