@acorex/components 5.6.0 → 5.9.0

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

@@ -0,0 +1,80 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Inject, ViewChild, Input, NgModule } from '@angular/core';
+import * as i6 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/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i5 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+
+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) {
+        if (this._parent && this._parent.search) {
+            this._parent.search(e.value);
+        }
+    }
+    focus() {
+        this._textbox?.focus();
+    }
+    clear() {
+        this._textbox._setValue(null);
+    }
+}
+AXSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.2", 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 }}\" [debounceTime]=\"debounceTime\" \r\n    [(value)]=\"searchExp\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <ax-icon class=\"ax-ic ax-ic-magnify\" >\r\n        </ax-icon>\r\n    </ax-prefix>\r\n    <ax-suffix>\r\n        <ax-button look=\"blank\" color=\"danger\" *ngIf=\"searchExp\" (onClick)=\"clear()\">\r\n            <ax-icon class=\"ax-ic ax-ic-close\">\r\n            </ax-icon>\r\n        </ax-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: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "name", "checked", "placeholder", "maxLength", "debounceTime", "type", "autoComplete"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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 }}\" [debounceTime]=\"debounceTime\" \r\n    [(value)]=\"searchExp\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <ax-icon class=\"ax-ic ax-ic-magnify\" >\r\n        </ax-icon>\r\n    </ax-prefix>\r\n    <ax-suffix>\r\n        <ax-button look=\"blank\" color=\"danger\" *ngIf=\"searchExp\" (onClick)=\"clear()\">\r\n            <ax-icon class=\"ax-ic ax-ic-close\">\r\n            </ax-icon>\r\n        </ax-button>\r\n    </ax-suffix>\r\n</ax-text-box>" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i6.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: "14.0.2", ngImport: i0, type: AXSearchBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSearchBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: AXSearchBoxModule, declarations: [AXSearchBoxComponent], imports: [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule, AXButtonModule], exports: [AXSearchBoxComponent] });
+AXSearchBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXSearchBoxModule, imports: [MODULES] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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

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

@@ -0,0 +1 @@
+{"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 { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, Optional, Inject, Input, ViewChild } from '@angular/core';\r\nimport {AXSearchableComponent, AXValueChangedEvent } 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\r\n\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\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\r\n    _onSearchExprChanged(e: AXValueChangedEvent<string>) {\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\r\n    focus() {\r\n        this._textbox?.focus();\r\n    }\r\n\r\n\r\n    clear()\r\n    {\r\n        this._textbox._setValue(null);\r\n    }\r\n}\r\n","<ax-text-box  placeholder=\"{{ placeholder | trans }}\" [debounceTime]=\"debounceTime\" \r\n    [(value)]=\"searchExp\" (onValueChanged)=\"_onSearchExprChanged($event)\">\r\n    <ax-prefix>\r\n        <ax-icon class=\"ax-ic ax-ic-magnify\" >\r\n        </ax-icon>\r\n    </ax-prefix>\r\n    <ax-suffix>\r\n        <ax-button look=\"blank\" color=\"danger\" *ngIf=\"searchExp\" (onClick)=\"clear()\">\r\n            <ax-icon class=\"ax-ic ax-ic-close\">\r\n            </ax-icon>\r\n        </ax-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/fesm2020/acorex-components-select-box.mjs

@@ -0,0 +1,427 @@
+import * as i9 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 i5 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/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i4 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i6 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i7 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
+import * as i8 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { FormsModule } from '@angular/forms';
+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._isMobile = false;
+        this._forceFocus = false;
+        this._isMobile = this._platform.is('Mobile');
+        this._platform.resize.subscribe(() => {
+            this._isMobile = this._platform.is('Mobile');
+            this.popover.dispose();
+            this._popoverWidth = this._isMobile ? 0 : this._target.offsetWidth;
+        });
+    }
+    get emptyTemplate() {
+        return this._contentEmptyTemplate;
+    }
+    _handleArrowClickEvent(e) {
+        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._popoverWidth = this._isMobile ? 0 : this._target.offsetWidth;
+    }
+    refresh() {
+        this.value = null;
+        super.refresh();
+    }
+    _updatePopupTitle() {
+        // const count =this.selectedItems?.length;
+        // this._popoverTitle =  count > 1 ?  `(${count}) items selected`:  this.placeholder || AXTranslator.get('selectbox.popover.title')
+        this._popoverTitle =
+            this.placeholder || AXTranslator.get('selectbox.popover.title');
+    }
+    _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.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._isMobile || 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._isMobile && 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 });
+    }
+}
+AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.2", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", debounceTime: "debounceTime", type: "type", autoComplete: "autoComplete", pageSize: "pageSize", valueField: "valueField", textField: "textField", items: "items", 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", valueChanged: "valueChanged" }, 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\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-4\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\">\r\n            <ax-header *ngIf=\"_isMobile\">\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\"></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\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 class=\"ax-list-item-group\" [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=\"tmpTree; context:{ list:  item.children }\">\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 class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [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                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</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\">\r\n                        </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 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\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                                [innerHTML]=\"'common.no-result-for' | trans:{exp:this._searchBox?  this._searchBox.searchExp :''}\">\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\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>", dependencies: [{ 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.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: i4.AXDecoratorPrefixComponent, selector: "ax-prefix" }, { kind: "component", type: i4.AXDecoratorSuffixComponent, selector: "ax-suffix" }, { kind: "component", type: i4.AXDecoratorHeaderComponent, selector: "ax-header" }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorTitleComponent, selector: "ax-title", inputs: ["text"] }, { kind: "component", type: i4.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i5.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i6.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i7.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { kind: "directive", type: i8.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i9.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-select-box', inputs: [
+                        'isOpen', 'fitParent', 'dropdownWidth', 'position',
+                        'disabled', 'tabIndex',
+                        'readonly', 'allowNull', 'value', 'name', 'checked',
+                        'placeholder', 'maxLength', 'allowNull', 'debounceTime', 'type', 'autoComplete', 'readonly', 'allowNull', 'value', 'name', 'checked',
+                        'pageSize', 'valueField', 'textField', 'items',
+                        'valueField',
+                        'textField',
+                        'disabledField',
+                        'disabledCallback',
+                        'multiple',
+                        'selectionMode',
+                    ], outputs: [
+                        'onOpened', 'onClosed',
+                        'onBlur', 'onFocus',
+                        'valueChange', 'onValueChanged',
+                        'valueChange', 'onValueChanged',
+                        'onValueChanged', 'valueChanged',
+                    ], 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\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\r\n    <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n        (blur)=\"_emitOnBlurEvent($event)\">\r\n        <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\r\n            <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n            <ng-template #singleSelectedTemplate>\r\n                <ng-container *ngFor=\"let item of selectedItems\">\r\n                    <span class=\"ax-mx-4\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #multipleSelectedTemplate>\r\n                <div class=\"ax-flex ax-mx-2\">\r\n                    <ng-container *ngFor=\"let item of selectedItems\">\r\n                        <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n                            <ax-suffix>\r\n                                <ax-icon icon=\"ax-ic ax-ic-close ax-cursor-pointer\"\r\n                                    (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n                            </ax-suffix>\r\n                        </ax-badge>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template #showPlaceholder>\r\n            <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\"> {{placeholder}}</div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\"\r\n    *ngIf=\"value && clearButton &&  !(disabled || readonly)\">\r\n    <ax-icon icon=\"ax-ic ax-ic-close\"></ax-icon>\r\n</ax-button>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n    <ax-prefix *ngIf=\"(isLoading && !this.popover.isOpen);else icon\">\r\n        <ax-loading type=\"spinner\"></ax-loading>\r\n    </ax-prefix>\r\n    <ng-template #icon>\r\n        <ax-icon #icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n    </ng-template>\r\n</ax-button>\r\n<ng-content select=\"ax-validation-rule\">\r\n</ng-content>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\"\r\n    [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\r\n    <div class=\"ax-overlay-pane \" (keydown)=\"_handlePopoverKeydown($event)\" tabindex=\"0\" aria-modal=\"true\" cdkTrapFocus\r\n        [class.ax-overlay-actionsheet]=\"_isMobile\" [class.ax-full]=\"_searchBox ||  isLazy\"\r\n        [style.min-width.px]=\"_popoverWidth\">\r\n        <div class=\"ax-list\">\r\n            <ax-header *ngIf=\"_isMobile\">\r\n                <ax-title [text]=\"_popoverTitle\"></ax-title>\r\n                <ax-close-button [icon]=\"multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'\"></ax-close-button>\r\n            </ax-header>\r\n            <div class=\"ax-p-2\" [class.ax-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox!=null\">\r\n                <ng-content select=\"ax-search-box\"></ng-content>\r\n            </div>\r\n            <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\"\r\n                #listContainer>\r\n                <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\r\n                    <ul>\r\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context:{ list: displayItems }\">\r\n                        </ng-container>\r\n                        <ng-template #tmpTree let-list=\"list\">\r\n                            <ng-container *ngFor=\"let item of list;let i = index;trackBy : _trackByFunction\">\r\n                                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n                                    <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\"\r\n                                        [attr.data-id]=\"item[this.valueField]\">\r\n                                        <ng-container\r\n                                            *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\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 class=\"ax-list-item-group\" [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=\"tmpTree; context:{ list:  item.children }\">\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 class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\" [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                                            </li>\r\n                                        </ng-container>\r\n                                        <ng-template #multipleTemplate>\r\n                                            <li class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n                                                [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                [class.ax-check-box]=\"checkbox\" [attr.tabindex]=\"i\"\r\n                                                (click)=\"_handleOnItemClick($event,item)\"\r\n                                                [attr.data-id]=\"item[this.valueField]\">\r\n                                                <input type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\"\r\n                                                    *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\"\r\n                                                    [disabled]=\"isItemDisabled(item)\">\r\n                                                <span class=\"ax-ms-2\"> {{ _getItemDisplayTextTemplte(item) }}</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\">\r\n                        </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 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\">\r\n                            </ng-container>\r\n                        </ng-container>\r\n                        <ng-template #elseEmptyTemplate>\r\n                            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\r\n                                [innerHTML]=\"'common.no-result-for' | trans:{exp:this._searchBox?  this._searchBox.searchExp :''}\">\r\n                            </div>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </ng-template>\r\n\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>" }]
+        }], 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: "14.0.2", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", 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: "14.0.2", ngImport: i0, type: AXSelectBoxModule, imports: [CommonModule,
+        AXCommonModule,
+        FormsModule,
+        AXCheckBoxModule,
+        AXBadgeModule,
+        AXDecoratorModule,
+        AXTranslationModule,
+        AXPopoverModule,
+        AXButtonModule,
+        AXLoadingModule,
+        A11yModule,
+        AXTextBoxModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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