@acorex/components 7.1.0 → 7.1.1

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

@@ -24,432 +24,432 @@ import { AXBadgeModule } from '@acorex/components/badge';
 import { AXCheckBoxModule } from '@acorex/components/checkbox';
 import { AXTextBoxModule } from '@acorex/components/textbox';
 
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
-    _elementRef;
-    _cdr;
-    _zone;
-    _platform;
-    popover;
-    _searchBox;
-    _target;
-    _popoverTitle;
-    _popoverWidth;
-    /**
-     *  Defines the clearButton.
-     */
-    clearButton = false;
-    /**
-     *  Defines the checkbox.
-     */
-    checkbox = false;
-    listContainer;
-    _contentEmptyTemplate;
-    get emptyTemplate() {
-        return this._contentEmptyTemplate;
-    }
-    _isActionSheet = false;
-    _forceFocus = false;
-    /**
-     *  @ignore
-     */
-    constructor(_elementRef, _cdr, _zone, _platform) {
-        super(_elementRef, _cdr);
-        this._elementRef = _elementRef;
-        this._cdr = _cdr;
-        this._zone = _zone;
-        this._platform = _platform;
-        this._isActionSheet = this._platform.is('SM');
-        this._platform.resize.subscribe(() => {
-            this._isActionSheet = this._platform.is('SM');
-            this.popover.dispose();
-            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');
-    }
-    _detectPopupSize() {
-        this._popoverWidth = this._isActionSheet ? 0 : this._target.offsetWidth;
-    }
-    _handleOnItemClick(e, item) {
-        if (this.isItemDisabled(item)) {
-            return;
-        }
-        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;
-        }
-        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);
-        }
-    }
-    _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());
-            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;
-            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();
-                }
-            }
-        }
-        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.searchExp)) {
-            this._searchBox.focus();
-        }
-    }
-    _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);
-        }
-        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);
-                }
-            }
-        }
-    }
-    _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?.searchExp });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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)" }, classAttribute: "ax-editor-container ax-drop-down" }, providers: [
-            { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
-            { provide: AXSearchableComponent, 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>\r\n<div\r\n  class=\"ax-dropdown-content\"\r\n  [class.ax-state-disabled]=\"disabled\"\r\n  (click)=\"_handleInputClickEvent($event)\">\r\n  <div\r\n    class=\"ax-select-box-selection\"\r\n    [tabindex]=\"tabIndex\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n    <ng-container\r\n      *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n      <ng-container\r\n        *ngIf=\"\r\n          !multiple;\r\n          then singleSelectedTemplate;\r\n          else multipleSelectedTemplate\r\n        \"></ng-container>\r\n      <ng-template #singleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n        </ng-container>\r\n      </ng-template>\r\n      <ng-template #multipleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <div class=\"ax-select-multi-item\">\r\n            {{ _getItemDisplayTextTemplte(item) }}\r\n            <span\r\n              class=\"ax-icon ax-icon-close\"\r\n              (click)=\"_handleBadgeRemove($event, item)\">\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n    <ng-template #showPlaceholder>\r\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\r\n        {{ placeholder }}\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n<ax-button\r\n  color=\"light\"\r\n  look=\"blank\"\r\n  (onClick)=\"clear()\"\r\n  [tabIndex]=\"-1\"\r\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\r\n  <ax-icon icon=\"ax-icon ax-icon-close\"></ax-icon>\r\n</ax-button>\r\n<button\r\n  [disabled]=\"disabled\"\r\n  [tabIndex]=\"-1\"\r\n  class=\"ax-editor-control\"\r\n  (click)=\"_handleArrowClickEvent($event)\">\r\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\r\n    <ax-loading type=\"spinner\"></ax-loading>\r\n  </ng-container>\r\n  <ng-template #iconTemplate>\r\n    <span\r\n      class=\"ax-icon ax-icon-chevron-left ax-transition-all\"\r\n      [ngClass]=\"{\r\n        '-ax-rotation-90': !isOpen,\r\n        'ax-rotation-90': isOpen\r\n      }\"></span>\r\n  </ng-template>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    (keydown)=\"_handlePopoverKeydown($event)\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\"\r\n    [class.ax-full]=\"_searchBox || isLazy\"\r\n    [style.min-width.px]=\"_popoverWidth\">\r\n    <div class=\"ax-list\">\r\n      <ax-header *ngIf=\"_isActionSheet\">\r\n        <ax-title>{{ _popoverTitle }}</ax-title>\r\n        <ax-close-button\r\n          class=\"ax-icon\"\r\n          [icon]=\"\r\n            multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\r\n          \"></ax-close-button>\r\n      </ax-header>\r\n      <div\r\n        class=\"ax-search-box-container\"\r\n        [class.ax-state-hidden]=\"!_searchBox\"\r\n        [cdkTrapFocus]=\"_searchBox != null\">\r\n        <ng-content select=\"ax-search-box\"></ng-content>\r\n      </div>\r\n      <div\r\n        class=\"ax-content ax-list-items-container ax-default\"\r\n        (scroll)=\"_handleListScroll($event)\"\r\n        #listContainer>\r\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n          <ul>\r\n            <ng-container\r\n              *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\">\r\n            </ng-container>\r\n            <ng-template #tmpTree let-list=\"list\">\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let item of list;\r\n                  let i = index;\r\n                  trackBy: _trackByFunction\r\n                \">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                  <li\r\n                    class=\"ax-list-item\"\r\n                    (click)=\"_handleOnItemClick($event, item)\"\r\n                    [attr.data-id]=\"item[this.valueField]\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        itemTemplate;\r\n                        context: { $implicit: item, direction: direction }\r\n                      \">\r\n                    </ng-container>\r\n                  </li>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\r\n                    <li\r\n                      class=\"ax-list-item-group\"\r\n                      [attr.data-id]=\"item[this.valueField]\">\r\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                      <ul *ngIf=\"item.children?.length > 0\">\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            tmpTree;\r\n                            context: { list: item.children }\r\n                          \">\r\n                        </ng-container>\r\n                      </ul>\r\n                    </li>\r\n                  </ng-container>\r\n                  <ng-template #tmpItem>\r\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item)\"></span>\r\n                      </li>\r\n                    </ng-container>\r\n                    <ng-template #multipleTemplate>\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [class.ax-state-checkbox]=\"checkbox\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span>\r\n                          <input\r\n                            class=\"ax-checkbox\"\r\n                            type=\"checkbox\"\r\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                            *ngIf=\"checkbox\"\r\n                            [checked]=\"isItemSelected(item)\"\r\n                            [disabled]=\"isItemDisabled(item)\" />\r\n                          <span class=\"ax-checkbox-label\">{{\r\n                            _getItemDisplayTextTemplte(item)\r\n                          }}</span>\r\n                        </span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\r\n                      </li>\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ul>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isLoading\">\r\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\r\n          </ng-container>\r\n          <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n              <ax-loading\r\n                text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-template #tmpEmpty>\r\n          <ng-container *ngIf=\"!isLoading\">\r\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\r\n            </ng-container>\r\n            <ng-template #elseEmptyTemplate>\r\n              <div\r\n                class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                [innerHTML]=\"\r\n                  'common.no-result-for'\r\n                    | trans\r\n                      : {\r\n                          exp: this._searchBox ? this._searchBox.searchExp : ''\r\n                        }\r\n                \"></div>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-template>\r\n      </div>\r\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n      <!-- <div class=\"ax-footer\">footer</div> -->\r\n    </div>\r\n  </div>\r\n</ax-popover>\r\n", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));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;padding:0 .5rem;outline:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}\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.AXDecoratorHeaderComponent, selector: "ax-header" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorTitleComponent, selector: "ax-title" }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { kind: "directive", type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-select-box', inputs: [
-                        'isOpen',
-                        'fitParent',
-                        'dropdownWidth',
-                        'position',
-                        'disabled',
-                        'tabIndex',
-                        'allowNull',
-                        'value',
-                        'name',
-                        'checked',
-                        'placeholder',
-                        'maxLength',
-                        'type',
-                        'autoComplete',
-                        'readonly',
-                        'pageSize',
-                        'items',
-                        'valueField',
-                        'textField',
-                        'disabledField',
-                        'disabledCallback',
-                        'multiple',
-                        'selectionMode',
-                    ], outputs: [
-                        'onOpened',
-                        'onClosed',
-                        'onBlur',
-                        'onFocus',
-                        'valueChange',
-                        'onValueChanged',
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
-                        { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent },
-                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div\r\n  class=\"ax-dropdown-content\"\r\n  [class.ax-state-disabled]=\"disabled\"\r\n  (click)=\"_handleInputClickEvent($event)\">\r\n  <div\r\n    class=\"ax-select-box-selection\"\r\n    [tabindex]=\"tabIndex\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n    <ng-container\r\n      *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n      <ng-container\r\n        *ngIf=\"\r\n          !multiple;\r\n          then singleSelectedTemplate;\r\n          else multipleSelectedTemplate\r\n        \"></ng-container>\r\n      <ng-template #singleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n        </ng-container>\r\n      </ng-template>\r\n      <ng-template #multipleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <div class=\"ax-select-multi-item\">\r\n            {{ _getItemDisplayTextTemplte(item) }}\r\n            <span\r\n              class=\"ax-icon ax-icon-close\"\r\n              (click)=\"_handleBadgeRemove($event, item)\">\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n    <ng-template #showPlaceholder>\r\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\r\n        {{ placeholder }}\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n<ax-button\r\n  color=\"light\"\r\n  look=\"blank\"\r\n  (onClick)=\"clear()\"\r\n  [tabIndex]=\"-1\"\r\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\r\n  <ax-icon icon=\"ax-icon ax-icon-close\"></ax-icon>\r\n</ax-button>\r\n<button\r\n  [disabled]=\"disabled\"\r\n  [tabIndex]=\"-1\"\r\n  class=\"ax-editor-control\"\r\n  (click)=\"_handleArrowClickEvent($event)\">\r\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\r\n    <ax-loading type=\"spinner\"></ax-loading>\r\n  </ng-container>\r\n  <ng-template #iconTemplate>\r\n    <span\r\n      class=\"ax-icon ax-icon-chevron-left ax-transition-all\"\r\n      [ngClass]=\"{\r\n        '-ax-rotation-90': !isOpen,\r\n        'ax-rotation-90': isOpen\r\n      }\"></span>\r\n  </ng-template>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    (keydown)=\"_handlePopoverKeydown($event)\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\"\r\n    [class.ax-full]=\"_searchBox || isLazy\"\r\n    [style.min-width.px]=\"_popoverWidth\">\r\n    <div class=\"ax-list\">\r\n      <ax-header *ngIf=\"_isActionSheet\">\r\n        <ax-title>{{ _popoverTitle }}</ax-title>\r\n        <ax-close-button\r\n          class=\"ax-icon\"\r\n          [icon]=\"\r\n            multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\r\n          \"></ax-close-button>\r\n      </ax-header>\r\n      <div\r\n        class=\"ax-search-box-container\"\r\n        [class.ax-state-hidden]=\"!_searchBox\"\r\n        [cdkTrapFocus]=\"_searchBox != null\">\r\n        <ng-content select=\"ax-search-box\"></ng-content>\r\n      </div>\r\n      <div\r\n        class=\"ax-content ax-list-items-container ax-default\"\r\n        (scroll)=\"_handleListScroll($event)\"\r\n        #listContainer>\r\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n          <ul>\r\n            <ng-container\r\n              *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\">\r\n            </ng-container>\r\n            <ng-template #tmpTree let-list=\"list\">\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let item of list;\r\n                  let i = index;\r\n                  trackBy: _trackByFunction\r\n                \">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                  <li\r\n                    class=\"ax-list-item\"\r\n                    (click)=\"_handleOnItemClick($event, item)\"\r\n                    [attr.data-id]=\"item[this.valueField]\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        itemTemplate;\r\n                        context: { $implicit: item, direction: direction }\r\n                      \">\r\n                    </ng-container>\r\n                  </li>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\r\n                    <li\r\n                      class=\"ax-list-item-group\"\r\n                      [attr.data-id]=\"item[this.valueField]\">\r\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                      <ul *ngIf=\"item.children?.length > 0\">\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            tmpTree;\r\n                            context: { list: item.children }\r\n                          \">\r\n                        </ng-container>\r\n                      </ul>\r\n                    </li>\r\n                  </ng-container>\r\n                  <ng-template #tmpItem>\r\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item)\"></span>\r\n                      </li>\r\n                    </ng-container>\r\n                    <ng-template #multipleTemplate>\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [class.ax-state-checkbox]=\"checkbox\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span>\r\n                          <input\r\n                            class=\"ax-checkbox\"\r\n                            type=\"checkbox\"\r\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                            *ngIf=\"checkbox\"\r\n                            [checked]=\"isItemSelected(item)\"\r\n                            [disabled]=\"isItemDisabled(item)\" />\r\n                          <span class=\"ax-checkbox-label\">{{\r\n                            _getItemDisplayTextTemplte(item)\r\n                          }}</span>\r\n                        </span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\r\n                      </li>\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ul>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isLoading\">\r\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\r\n          </ng-container>\r\n          <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n              <ax-loading\r\n                text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-template #tmpEmpty>\r\n          <ng-container *ngIf=\"!isLoading\">\r\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\r\n            </ng-container>\r\n            <ng-template #elseEmptyTemplate>\r\n              <div\r\n                class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                [innerHTML]=\"\r\n                  'common.no-result-for'\r\n                    | trans\r\n                      : {\r\n                          exp: this._searchBox ? this._searchBox.searchExp : ''\r\n                        }\r\n                \"></div>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-template>\r\n      </div>\r\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n      <!-- <div class=\"ax-footer\">footer</div> -->\r\n    </div>\r\n  </div>\r\n</ax-popover>\r\n", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));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;padding:0 .5rem;outline:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}\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: [{
-                type: Input
-            }], checkbox: [{
-                type: Input
-            }], listContainer: [{
-                type: ViewChild,
-                args: ['listContainer', { static: true }]
-            }], _contentEmptyTemplate: [{
-                type: ContentChild,
-                args: ['emptyTemplate']
-            }], _handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
+    _elementRef;
+    _cdr;
+    _zone;
+    _platform;
+    popover;
+    _searchBox;
+    _target;
+    _popoverTitle;
+    _popoverWidth;
+    /**
+     *  Defines the clearButton.
+     */
+    clearButton = false;
+    /**
+     *  Defines the checkbox.
+     */
+    checkbox = false;
+    listContainer;
+    _contentEmptyTemplate;
+    get emptyTemplate() {
+        return this._contentEmptyTemplate;
+    }
+    _isActionSheet = false;
+    _forceFocus = false;
+    /**
+     *  @ignore
+     */
+    constructor(_elementRef, _cdr, _zone, _platform) {
+        super(_elementRef, _cdr);
+        this._elementRef = _elementRef;
+        this._cdr = _cdr;
+        this._zone = _zone;
+        this._platform = _platform;
+        this._isActionSheet = this._platform.is('SM');
+        this._platform.resize.subscribe(() => {
+            this._isActionSheet = this._platform.is('SM');
+            this.popover.dispose();
+            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');
+    }
+    _detectPopupSize() {
+        this._popoverWidth = this._isActionSheet ? 0 : this._target.offsetWidth;
+    }
+    _handleOnItemClick(e, item) {
+        if (this.isItemDisabled(item)) {
+            return;
+        }
+        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;
+        }
+        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);
+        }
+    }
+    _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());
+            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;
+            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();
+                }
+            }
+        }
+        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.searchExp)) {
+            this._searchBox.focus();
+        }
+    }
+    _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);
+        }
+        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);
+                }
+            }
+        }
+    }
+    _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?.searchExp });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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)" }, classAttribute: "ax-editor-container ax-drop-down" }, providers: [
+            { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
+            { provide: AXSearchableComponent, 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>\r\n<div\r\n  class=\"ax-dropdown-content\"\r\n  [class.ax-state-disabled]=\"disabled\"\r\n  (click)=\"_handleInputClickEvent($event)\">\r\n  <div\r\n    class=\"ax-select-box-selection\"\r\n    [tabindex]=\"tabIndex\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n    <ng-container\r\n      *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n      <ng-container\r\n        *ngIf=\"\r\n          !multiple;\r\n          then singleSelectedTemplate;\r\n          else multipleSelectedTemplate\r\n        \"></ng-container>\r\n      <ng-template #singleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n        </ng-container>\r\n      </ng-template>\r\n      <ng-template #multipleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <div class=\"ax-select-multi-item\">\r\n            {{ _getItemDisplayTextTemplte(item) }}\r\n            <span\r\n              class=\"ax-icon ax-icon-close\"\r\n              (click)=\"_handleBadgeRemove($event, item)\">\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n    <ng-template #showPlaceholder>\r\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\r\n        {{ placeholder }}\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n<ax-button\r\n  color=\"light\"\r\n  look=\"blank\"\r\n  (onClick)=\"clear()\"\r\n  [tabIndex]=\"-1\"\r\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\r\n  <ax-icon icon=\"ax-icon ax-icon-close\"></ax-icon>\r\n</ax-button>\r\n<button\r\n  [disabled]=\"disabled\"\r\n  [tabIndex]=\"-1\"\r\n  class=\"ax-editor-control\"\r\n  (click)=\"_handleArrowClickEvent($event)\">\r\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\r\n    <ax-loading type=\"spinner\"></ax-loading>\r\n  </ng-container>\r\n  <ng-template #iconTemplate>\r\n    <span\r\n      class=\"ax-icon ax-icon-chevron-left ax-transition-all\"\r\n      [ngClass]=\"{\r\n        '-ax-rotation-90': !isOpen,\r\n        'ax-rotation-90': isOpen\r\n      }\"></span>\r\n  </ng-template>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    (keydown)=\"_handlePopoverKeydown($event)\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\"\r\n    [class.ax-full]=\"_searchBox || isLazy\"\r\n    [style.min-width.px]=\"_popoverWidth\">\r\n    <div class=\"ax-list\">\r\n      <ax-header *ngIf=\"_isActionSheet\">\r\n        <ax-title>{{ _popoverTitle }}</ax-title>\r\n        <ax-close-button\r\n          class=\"ax-icon\"\r\n          [icon]=\"\r\n            multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\r\n          \"></ax-close-button>\r\n      </ax-header>\r\n      <div\r\n        class=\"ax-search-box-container\"\r\n        [class.ax-state-hidden]=\"!_searchBox\"\r\n        [cdkTrapFocus]=\"_searchBox != null\">\r\n        <ng-content select=\"ax-search-box\"></ng-content>\r\n      </div>\r\n      <div\r\n        class=\"ax-content ax-list-items-container ax-default\"\r\n        (scroll)=\"_handleListScroll($event)\"\r\n        #listContainer>\r\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n          <ul>\r\n            <ng-container\r\n              *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\">\r\n            </ng-container>\r\n            <ng-template #tmpTree let-list=\"list\">\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let item of list;\r\n                  let i = index;\r\n                  trackBy: _trackByFunction\r\n                \">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                  <li\r\n                    class=\"ax-list-item\"\r\n                    (click)=\"_handleOnItemClick($event, item)\"\r\n                    [attr.data-id]=\"item[this.valueField]\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        itemTemplate;\r\n                        context: { $implicit: item, direction: direction }\r\n                      \">\r\n                    </ng-container>\r\n                  </li>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\r\n                    <li\r\n                      class=\"ax-list-item-group\"\r\n                      [attr.data-id]=\"item[this.valueField]\">\r\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                      <ul *ngIf=\"item.children?.length > 0\">\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            tmpTree;\r\n                            context: { list: item.children }\r\n                          \">\r\n                        </ng-container>\r\n                      </ul>\r\n                    </li>\r\n                  </ng-container>\r\n                  <ng-template #tmpItem>\r\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item)\"></span>\r\n                      </li>\r\n                    </ng-container>\r\n                    <ng-template #multipleTemplate>\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [class.ax-state-checkbox]=\"checkbox\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span>\r\n                          <input\r\n                            class=\"ax-checkbox\"\r\n                            type=\"checkbox\"\r\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                            *ngIf=\"checkbox\"\r\n                            [checked]=\"isItemSelected(item)\"\r\n                            [disabled]=\"isItemDisabled(item)\" />\r\n                          <span class=\"ax-checkbox-label\">{{\r\n                            _getItemDisplayTextTemplte(item)\r\n                          }}</span>\r\n                        </span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\r\n                      </li>\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ul>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isLoading\">\r\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\r\n          </ng-container>\r\n          <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n              <ax-loading\r\n                text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-template #tmpEmpty>\r\n          <ng-container *ngIf=\"!isLoading\">\r\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\r\n            </ng-container>\r\n            <ng-template #elseEmptyTemplate>\r\n              <div\r\n                class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                [innerHTML]=\"\r\n                  'common.no-result-for'\r\n                    | trans\r\n                      : {\r\n                          exp: this._searchBox ? this._searchBox.searchExp : ''\r\n                        }\r\n                \"></div>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-template>\r\n      </div>\r\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n      <!-- <div class=\"ax-footer\">footer</div> -->\r\n    </div>\r\n  </div>\r\n</ax-popover>\r\n", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));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;padding:0 .5rem;outline:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}\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.AXDecoratorHeaderComponent, selector: "ax-header" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorTitleComponent, selector: "ax-title" }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { kind: "directive", type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-select-box', inputs: [
+                        'isOpen',
+                        'fitParent',
+                        'dropdownWidth',
+                        'position',
+                        'disabled',
+                        'tabIndex',
+                        'allowNull',
+                        'value',
+                        'name',
+                        'checked',
+                        'placeholder',
+                        'maxLength',
+                        'type',
+                        'autoComplete',
+                        'readonly',
+                        'pageSize',
+                        'items',
+                        'valueField',
+                        'textField',
+                        'disabledField',
+                        'disabledCallback',
+                        'multiple',
+                        'selectionMode',
+                    ], outputs: [
+                        'onOpened',
+                        'onClosed',
+                        'onBlur',
+                        'onFocus',
+                        'valueChange',
+                        'onValueChanged',
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
+                        { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent },
+                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\"> </ng-content>\r\n<div\r\n  class=\"ax-dropdown-content\"\r\n  [class.ax-state-disabled]=\"disabled\"\r\n  (click)=\"_handleInputClickEvent($event)\">\r\n  <div\r\n    class=\"ax-select-box-selection\"\r\n    [tabindex]=\"tabIndex\"\r\n    (focus)=\"_emitOnFocusEvent($event)\"\r\n    (blur)=\"_emitOnBlurEvent($event)\">\r\n    <ng-container\r\n      *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n      <ng-container\r\n        *ngIf=\"\r\n          !multiple;\r\n          then singleSelectedTemplate;\r\n          else multipleSelectedTemplate\r\n        \"></ng-container>\r\n      <ng-template #singleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n        </ng-container>\r\n      </ng-template>\r\n      <ng-template #multipleSelectedTemplate>\r\n        <ng-container *ngFor=\"let item of selectedItems\">\r\n          <div class=\"ax-select-multi-item\">\r\n            {{ _getItemDisplayTextTemplte(item) }}\r\n            <span\r\n              class=\"ax-icon ax-icon-close\"\r\n              (click)=\"_handleBadgeRemove($event, item)\">\r\n            </span>\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n    <ng-template #showPlaceholder>\r\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\r\n        {{ placeholder }}\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n<ax-button\r\n  color=\"light\"\r\n  look=\"blank\"\r\n  (onClick)=\"clear()\"\r\n  [tabIndex]=\"-1\"\r\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\r\n  <ax-icon icon=\"ax-icon ax-icon-close\"></ax-icon>\r\n</ax-button>\r\n<button\r\n  [disabled]=\"disabled\"\r\n  [tabIndex]=\"-1\"\r\n  class=\"ax-editor-control\"\r\n  (click)=\"_handleArrowClickEvent($event)\">\r\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\r\n    <ax-loading type=\"spinner\"></ax-loading>\r\n  </ng-container>\r\n  <ng-template #iconTemplate>\r\n    <span\r\n      class=\"ax-icon ax-icon-chevron-left ax-transition-all\"\r\n      [ngClass]=\"{\r\n        '-ax-rotation-90': !isOpen,\r\n        'ax-rotation-90': isOpen\r\n      }\"></span>\r\n  </ng-template>\r\n</button>\r\n<ng-content select=\"ax-validation-rule\"> </ng-content>\r\n<ng-content select=\"ax-suffix\"> </ng-content>\r\n<ax-popover\r\n  [target]=\"_target\"\r\n  [position]=\"position\"\r\n  [openTrigger]=\"'manual'\"\r\n  [closeTrigger]=\"'clickout'\"\r\n  [adaptivityEnabled]=\"true\"\r\n  (onOpened)=\"_handlePopupOnOpened($event)\"\r\n  (onClosed)=\"_handlePopupOnClosed($event)\">\r\n  <div\r\n    class=\"ax-overlay-pane\"\r\n    (keydown)=\"_handlePopoverKeydown($event)\"\r\n    tabindex=\"0\"\r\n    aria-modal=\"true\"\r\n    cdkTrapFocus\r\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\"\r\n    [class.ax-full]=\"_searchBox || isLazy\"\r\n    [style.min-width.px]=\"_popoverWidth\">\r\n    <div class=\"ax-list\">\r\n      <ax-header *ngIf=\"_isActionSheet\">\r\n        <ax-title>{{ _popoverTitle }}</ax-title>\r\n        <ax-close-button\r\n          class=\"ax-icon\"\r\n          [icon]=\"\r\n            multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\r\n          \"></ax-close-button>\r\n      </ax-header>\r\n      <div\r\n        class=\"ax-search-box-container\"\r\n        [class.ax-state-hidden]=\"!_searchBox\"\r\n        [cdkTrapFocus]=\"_searchBox != null\">\r\n        <ng-content select=\"ax-search-box\"></ng-content>\r\n      </div>\r\n      <div\r\n        class=\"ax-content ax-list-items-container ax-default\"\r\n        (scroll)=\"_handleListScroll($event)\"\r\n        #listContainer>\r\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n          <ul>\r\n            <ng-container\r\n              *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\">\r\n            </ng-container>\r\n            <ng-template #tmpTree let-list=\"list\">\r\n              <ng-container\r\n                *ngFor=\"\r\n                  let item of list;\r\n                  let i = index;\r\n                  trackBy: _trackByFunction\r\n                \">\r\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                  <li\r\n                    class=\"ax-list-item\"\r\n                    (click)=\"_handleOnItemClick($event, item)\"\r\n                    [attr.data-id]=\"item[this.valueField]\">\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        itemTemplate;\r\n                        context: { $implicit: item, direction: direction }\r\n                      \">\r\n                    </ng-container>\r\n                  </li>\r\n                </ng-container>\r\n                <ng-template #defualtTemplate>\r\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\r\n                    <li\r\n                      class=\"ax-list-item-group\"\r\n                      [attr.data-id]=\"item[this.valueField]\">\r\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                      <ul *ngIf=\"item.children?.length > 0\">\r\n                        <ng-container\r\n                          *ngTemplateOutlet=\"\r\n                            tmpTree;\r\n                            context: { list: item.children }\r\n                          \">\r\n                        </ng-container>\r\n                      </ul>\r\n                    </li>\r\n                  </ng-container>\r\n                  <ng-template #tmpItem>\r\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item)\"></span>\r\n                      </li>\r\n                    </ng-container>\r\n                    <ng-template #multipleTemplate>\r\n                      <li\r\n                        class=\"ax-list-item\"\r\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                        [class.ax-state-checkbox]=\"checkbox\"\r\n                        [attr.tabindex]=\"i\"\r\n                        (click)=\"_handleOnItemClick($event, item)\"\r\n                        [attr.data-id]=\"item[this.valueField]\">\r\n                        <span>\r\n                          <input\r\n                            class=\"ax-checkbox\"\r\n                            type=\"checkbox\"\r\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                            *ngIf=\"checkbox\"\r\n                            [checked]=\"isItemSelected(item)\"\r\n                            [disabled]=\"isItemDisabled(item)\" />\r\n                          <span class=\"ax-checkbox-label\">{{\r\n                            _getItemDisplayTextTemplte(item)\r\n                          }}</span>\r\n                        </span>\r\n                        <span\r\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\r\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\r\n                      </li>\r\n                    </ng-template>\r\n                  </ng-template>\r\n                </ng-template>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ul>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isLoading\">\r\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\r\n          </ng-container>\r\n          <ng-template #elseLoadingTemplate>\r\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\r\n              <ax-loading\r\n                text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n        <ng-template #tmpEmpty>\r\n          <ng-container *ngIf=\"!isLoading\">\r\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\r\n            </ng-container>\r\n            <ng-template #elseEmptyTemplate>\r\n              <div\r\n                class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                [innerHTML]=\"\r\n                  'common.no-result-for'\r\n                    | trans\r\n                      : {\r\n                          exp: this._searchBox ? this._searchBox.searchExp : ''\r\n                        }\r\n                \"></div>\r\n            </ng-template>\r\n          </ng-container>\r\n        </ng-template>\r\n      </div>\r\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n                >\r\n               \r\n            </div> -->\r\n      <!-- <div class=\"ax-footer\">footer</div> -->\r\n    </div>\r\n  </div>\r\n</ax-popover>\r\n", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));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;padding:0 .5rem;outline:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}\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: [{
+                type: Input
+            }], checkbox: [{
+                type: Input
+            }], listContainer: [{
+                type: ViewChild,
+                args: ['listContainer', { static: true }]
+            }], _contentEmptyTemplate: [{
+                type: ContentChild,
+                args: ['emptyTemplate']
+            }], _handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }] } });
 
-class AXSelectBoxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule,
-            AXCommonModule,
-            FormsModule,
-            AXCheckBoxModule,
-            AXBadgeModule,
-            AXDecoratorModule,
-            AXTranslationModule,
-            AXPopoverModule,
-            AXButtonModule,
-            AXLoadingModule,
-            A11yModule,
-            AXTextBoxModule], exports: [AXSelectBoxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXSelectBoxModule, imports: [CommonModule,
-            AXCommonModule,
-            FormsModule,
-            AXCheckBoxModule,
-            AXBadgeModule,
-            AXDecoratorModule,
-            AXTranslationModule,
-            AXPopoverModule,
-            AXButtonModule,
-            AXLoadingModule,
-            A11yModule,
-            AXTextBoxModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXSelectBoxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule,
-                        AXCommonModule,
-                        FormsModule,
-                        AXCheckBoxModule,
-                        AXBadgeModule,
-                        AXDecoratorModule,
-                        AXTranslationModule,
-                        AXPopoverModule,
-                        AXButtonModule,
-                        AXLoadingModule,
-                        A11yModule,
-                        AXTextBoxModule
-                    ],
-                    exports: [AXSelectBoxComponent],
-                    declarations: [AXSelectBoxComponent],
-                    providers: [],
-                }]
+class AXSelectBoxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule,
+            AXCommonModule,
+            FormsModule,
+            AXCheckBoxModule,
+            AXBadgeModule,
+            AXDecoratorModule,
+            AXTranslationModule,
+            AXPopoverModule,
+            AXButtonModule,
+            AXLoadingModule,
+            A11yModule,
+            AXTextBoxModule], exports: [AXSelectBoxComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXSelectBoxModule, imports: [CommonModule,
+            AXCommonModule,
+            FormsModule,
+            AXCheckBoxModule,
+            AXBadgeModule,
+            AXDecoratorModule,
+            AXTranslationModule,
+            AXPopoverModule,
+            AXButtonModule,
+            AXLoadingModule,
+            A11yModule,
+            AXTextBoxModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXSelectBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule,
+                        AXCommonModule,
+                        FormsModule,
+                        AXCheckBoxModule,
+                        AXBadgeModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXPopoverModule,
+                        AXButtonModule,
+                        AXLoadingModule,
+                        A11yModule,
+                        AXTextBoxModule
+                    ],
+                    exports: [AXSelectBoxComponent],
+                    declarations: [AXSelectBoxComponent],
+                    providers: [],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AXSelectBoxComponent, AXSelectBoxModule };