@acorex/components 7.0.40 → 7.1.0

package/fesm2015/acorex-components-search-box.mjs

@@ -1,84 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Inject, ViewChild, Input, NgModule } from '@angular/core';
-import * as i5 from '@acorex/components/common';
-import { AXSearchableComponent } from '@acorex/components/common';
-import * as i3 from '@acorex/components/textbox';
-import { AXTextBoxComponent, AXTextBoxModule } from '@acorex/components/textbox';
-import { AXBaseComponentMixin } from '@acorex/components/mixin';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@acorex/components/decorators';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i4 from '@acorex/core/translation';
-import { AXTranslationModule } from '@acorex/core/translation';
-import { AXButtonModule } from '@acorex/components/button';
-
-class AXSearchBoxComponent extends AXBaseComponentMixin {
-    constructor(_elementRef, _cdr, _parent) {
-        super(_elementRef, _cdr);
-        this._parent = _parent;
-        this.placeholder = 'common.search';
-        this.debounceTime = 500;
-        this.searchExp = '';
-    }
-    _onSearchExprChanged(e) {
-        //TODO: debounceTime
-        if (this._parent && this._parent.search) {
-            this._parent.search(e.value);
-        }
-    }
-    focus() {
-        var _a;
-        (_a = this._textbox) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    clear() {
-        this._textbox.value = '';
-    }
-}
-AXSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXSearchBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: AXSearchableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AXSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: { placeholder: "placeholder", debounceTime: "debounceTime", searchExp: "searchExp" }, viewQueries: [{ propertyName: "_textbox", first: true, predicate: AXTextBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-text-box placeholder=\"{{ placeholder | trans }}\" [(value)]=\"searchExp\"\r\n    (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <span class=\"ax-icon ax-icon-search ax-editor-control\"></span>\r\n    </ax-prefix>\r\n    <ax-suffix>\r\n        <button *ngIf=\"searchExp\" class=\"ax-general-button ax-button-icon\" (click)=\"clear()\">\r\n            <span class=\"ax-icon ax-icon-close\"></span>\r\n        </button>\r\n    </ax-suffix>\r\n</ax-text-box>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.AXDecoratorPrefixComponent, selector: "ax-prefix" }, { kind: "component", type: i2.AXDecoratorSuffixComponent, selector: "ax-suffix" }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "mask-options"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged"] }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXSearchBoxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-search-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-text-box placeholder=\"{{ placeholder | trans }}\" [(value)]=\"searchExp\"\r\n    (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <span class=\"ax-icon ax-icon-search ax-editor-control\"></span>\r\n    </ax-prefix>\r\n    <ax-suffix>\r\n        <button *ngIf=\"searchExp\" class=\"ax-general-button ax-button-icon\" (click)=\"clear()\">\r\n            <span class=\"ax-icon ax-icon-close\"></span>\r\n        </button>\r\n    </ax-suffix>\r\n</ax-text-box>" }]
-        }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i5.AXSearchableComponent, decorators: [{
-                        type: Optional
-                    }, {
-                        type: Inject,
-                        args: [AXSearchableComponent]
-                    }] }];
-    }, propDecorators: { _textbox: [{
-                type: ViewChild,
-                args: [AXTextBoxComponent]
-            }], placeholder: [{
-                type: Input
-            }], debounceTime: [{
-                type: Input
-            }], searchExp: [{
-                type: Input
-            }] } });
-
-const COMPONENT = [AXSearchBoxComponent];
-const MODULES = [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule, AXButtonModule];
-class AXSearchBoxModule {
-}
-AXSearchBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSearchBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule, AXButtonModule], exports: [AXSearchBoxComponent] });
-AXSearchBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXSearchBoxModule, imports: [MODULES] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXSearchBoxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENT],
-                    imports: [...MODULES],
-                    exports: [...COMPONENT],
-                    providers: [],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AXSearchBoxComponent, AXSearchBoxModule };
-//# sourceMappingURL=acorex-components-search-box.mjs.map
-//# sourceMappingURL=acorex-components-search-box.mjs.map

package/fesm2015/acorex-components-search-box.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"acorex-components-search-box.mjs","sources":["../../../../projects/acorex/components/search-box/src/search-box.component.ts","../../../../projects/acorex/components/search-box/src/search-box.component.html","../../../../projects/acorex/components/search-box/src/search-box.module.ts","../../../../projects/acorex/components/search-box/acorex-components-search-box.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ViewEncapsulation,\r\n  ChangeDetectionStrategy,\r\n  ElementRef,\r\n  ChangeDetectorRef,\r\n  Optional,\r\n  Inject,\r\n  Input,\r\n  ViewChild,\r\n} from '@angular/core';\r\nimport {\r\n  AXSearchableComponent,\r\n  AXValueChangedEvent,\r\n} from '@acorex/components/common';\r\nimport { AXTextBoxComponent } from '@acorex/components/textbox';\r\nimport { AXBaseComponentMixin } from '@acorex/components/mixin';\r\n\r\n@Component({\r\n  selector: 'ax-search-box',\r\n  templateUrl: './search-box.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class AXSearchBoxComponent extends AXBaseComponentMixin {\r\n  @ViewChild(AXTextBoxComponent)\r\n  _textbox: AXTextBoxComponent;\r\n\r\n  constructor(\r\n    _elementRef: ElementRef,\r\n    _cdr: ChangeDetectorRef,\r\n    @Optional()\r\n    @Inject(AXSearchableComponent)\r\n    private _parent: AXSearchableComponent\r\n  ) {\r\n    super(_elementRef, _cdr);\r\n  }\r\n\r\n  @Input()\r\n  placeholder: string = 'common.search';\r\n\r\n  @Input()\r\n  debounceTime: number = 500;\r\n\r\n  @Input()\r\n  searchExp: string = '';\r\n\r\n  _onSearchExprChanged(e: AXValueChangedEvent<string>) {\r\n    //TODO: debounceTime\r\n    if (this._parent && this._parent.search) {\r\n      this._parent.search(e.value as any);\r\n    }\r\n  }\r\n\r\n  focus() {\r\n    this._textbox?.focus();\r\n  }\r\n\r\n  clear() {\r\n    this._textbox.value = '';\r\n  }\r\n}\r\n","<ax-text-box placeholder=\"{{ placeholder | trans }}\" [(value)]=\"searchExp\"\r\n    (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <span class=\"ax-icon ax-icon-search ax-editor-control\"></span>\r\n    </ax-prefix>\r\n    <ax-suffix>\r\n        <button *ngIf=\"searchExp\" class=\"ax-general-button ax-button-icon\" (click)=\"clear()\">\r\n            <span class=\"ax-icon ax-icon-close\"></span>\r\n        </button>\r\n    </ax-suffix>\r\n</ax-text-box>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { AXTranslationModule } from '@acorex/core/translation';\r\nimport { AXSearchBoxComponent } from './search-box.component';\r\nimport { AXTextBoxModule } from '@acorex/components/textbox';\r\nimport { AXDecoratorModule } from '@acorex/components/decorators';\r\nimport { AXButtonModule } from '@acorex/components/button';\r\n\r\nconst COMPONENT = [AXSearchBoxComponent];\r\nconst MODULES = [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule, AXButtonModule];\r\n\r\n@NgModule({\r\n    declarations: [...COMPONENT],\r\n    imports: [...MODULES],\r\n    exports: [...COMPONENT],\r\n    providers: [],\r\n})\r\nexport class AXSearchBoxModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,453 +0,0 @@
-import { __awaiter } from 'tslib';
-import * as i8 from '@acorex/core/translation';
-import { AXTranslator, AXTranslationModule } from '@acorex/core/translation';
-import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ContentChild, Input, HostListener, NgModule } from '@angular/core';
-import { findLast, first, last, findLastIndex, nth } from 'lodash-es';
-import { AXClosbaleComponent, AXSearchableComponent, AXCommonModule } from '@acorex/components/common';
-import * as i4 from '@acorex/components/popover';
-import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
-import { AXSearchBoxComponent } from '@acorex/components/search-box';
-import { AXBaseSelectionDropdownMixin } from '@acorex/components/mixin';
-import * as i1 from '@acorex/core/platform';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3 from '@acorex/components/decorators';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i5 from '@acorex/components/button';
-import { AXButtonModule } from '@acorex/components/button';
-import * as i6 from '@acorex/components/loading';
-import { AXLoadingModule } from '@acorex/components/loading';
-import * as i7 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
-import { FormsModule } from '@angular/forms';
-import { AXBadgeModule } from '@acorex/components/badge';
-import { AXCheckBoxModule } from '@acorex/components/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 {
-    /**
-     *  @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._isActionSheet = this._platform.is('SM');
-        this._platform.resize.subscribe(() => {
-            this._isActionSheet = this._platform.is('SM');
-            this.popover.dispose();
-            this._detectPopupSize();
-        });
-    }
-    get emptyTemplate() {
-        return this._contentEmptyTemplate;
-    }
-    _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() {
-        var _a;
-        const count = ((_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.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) {
-        var _a, _b;
-        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 = (_b = (_a = this.listContainer.nativeElement.querySelector('.ax-state-focus')) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.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();
-        }
-    }
-    _handlePopupOnOpened(e) {
-        return __awaiter(this, void 0, void 0, function* () {
-            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) {
-        var _a;
-        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 = (_a = (sign == 1 ? parent.nextElementSibling : parent.previousElementSibling)) === null || _a === void 0 ? void 0 : _a.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 === null || next === void 0 ? void 0 : next.children) && (next === null || next === void 0 ? void 0 : 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() {
-        var _a;
-        super._fetchData({ searchQuery: (_a = this._searchBox) === null || _a === void 0 ? void 0 : _a.searchExp });
-    }
-}
-AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
-AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", 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: "15.1.4", 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 {
-}
-AXSelectBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule,
-        AXCommonModule,
-        FormsModule,
-        AXCheckBoxModule,
-        AXBadgeModule,
-        AXDecoratorModule,
-        AXTranslationModule,
-        AXPopoverModule,
-        AXButtonModule,
-        AXLoadingModule,
-        A11yModule,
-        AXTextBoxModule], exports: [AXSelectBoxComponent] });
-AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXSelectBoxModule, imports: [CommonModule,
-        AXCommonModule,
-        FormsModule,
-        AXCheckBoxModule,
-        AXBadgeModule,
-        AXDecoratorModule,
-        AXTranslationModule,
-        AXPopoverModule,
-        AXButtonModule,
-        AXLoadingModule,
-        A11yModule,
-        AXTextBoxModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", 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.
- */
-
-export { AXSelectBoxComponent, AXSelectBoxModule };
-//# sourceMappingURL=acorex-components-select-box.mjs.map
-//# sourceMappingURL=acorex-components-select-box.mjs.map