@acorex/components 22.0.0-next.2 → 22.0.0-next.21

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

@@ -0,0 +1,669 @@
+import { MXSelectionValueComponent, MXLookComponent, AXHotkeysService, convertArrayToDataSource, AX_SELECTION_DATA_TOKEN, AXDataSource, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent, AXClosableComponent, AXSearchableComponent, MXSelectionBridgeService, AXCommonModule } from '@acorex/cdk/common';
+import { AXDecoratorGenericComponent, AXDecoratorCloseButtonComponent, AXDecoratorModule } from '@acorex/components/decorators';
+import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent, AXDropdownModule } from '@acorex/components/dropdown';
+import { AXListComponent, AXListModule } from '@acorex/components/list';
+import { AXLoadingSpinnerComponent, AXLoadingModule } from '@acorex/components/loading';
+import { AXSearchBoxComponent } from '@acorex/components/search-box';
+import { AXTagComponent } from '@acorex/components/tag';
+import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { NgTemplateOutlet, NgClass, AsyncPipe, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, inject, signal, linkedSignal, afterNextRender, forwardRef, HostListener, ViewChild, ContentChild, Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { isEqual, get, last, findLastIndex, nth } from 'lodash-es';
+import { classes } from 'polytype';
+import { AXBadgeModule } from '@acorex/components/badge';
+import { AXCheckBoxModule } from '@acorex/components/check-box';
+import { AXPopoverModule } from '@acorex/components/popover';
+import { A11yModule } from '@angular/cdk/a11y';
+import { AXTextBoxModule } from '@acorex/components/text-box';
+
+/**
+ * The ComboBox is a component which supports static arrays and advanced AXDataSource with lazy loading.
+ * @category
+ */
+class AXComboBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelectionValueComponent, MXLookComponent) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Determines if an item is truncated.
+         *
+         * @defaultValue true
+         */
+        this.isItemTruncated = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isItemTruncated" }] : /* istanbul ignore next */ []));
+        /**
+         * Determines if a tooltip is shown for an item.
+         *
+         * @defaultValue false
+         */
+        this.showItemTooltip = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showItemTooltip" }] : /* istanbul ignore next */ []));
+        /** Height of each list item in pixels, or 'auto' to let list measure. */
+        this.itemHeight = input(40, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemHeight" }] : /* istanbul ignore next */ []));
+        /** Maximum number of visible items before scrolling. */
+        this.maxVisibleItems = input(5, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxVisibleItems" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.hotKeyService = inject(AXHotkeysService);
+        /** @ignore */
+        this.isLoading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.searchValue = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this.renderList = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renderList" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this._dropdownWidth = linkedSignal(() => this.dropdownWidth(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_dropdownWidth" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this._dropdownHeight = signal('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_dropdownHeight" }] : /* istanbul ignore next */ []));
+        /** @ignore */
+        this._listDataSource = convertArrayToDataSource([], {
+            key: this.valueField,
+            pageSize: 10,
+        });
+        this.#init = afterNextRender(() => {
+            const formField = this.getHostElement().closest('ax-form-field');
+            if (formField?.classList.contains('ax-state-floating-label')) {
+                this.getHostElement().classList.add('ax-float-label');
+            }
+        });
+        /**
+         * The width of the dropdown in pixels.
+         * @defaultValue null
+         */
+        this.dropdownWidth = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
+        this.searchBoxAutoFocus = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchBoxAutoFocus" }] : /* istanbul ignore next */ []));
+        /**
+         * Service for managing selection data, injected via `AX_SELECTION_DATA_TOKEN`.
+         */
+        this.selectionService = inject(AX_SELECTION_DATA_TOKEN);
+        /** @ignore */
+        this._unsubscriber = inject(AXUnsubscriber);
+    }
+    #init;
+    /**
+     * Gets the data source for the component, which can be either an `AXDataSource` or an array of items.
+     * @returns {AXDataSource<any> | any[]}
+     */
+    get dataSource() {
+        return this._originalDataSource;
+    }
+    /**
+     * Sets the data source, either as an `AXDataSource` or an array.
+     * @param {AXDataSource<any> | any[]} v
+     */
+    set dataSource(v) {
+        // check if the data source is the same
+        if (Array.isArray(v) && Array.isArray(this._originalDataSource) && isEqual(v, this._originalDataSource)) {
+            return;
+        }
+        if (v instanceof AXDataSource && v == this._originalDataSource) {
+            return;
+        }
+        //
+        this._originalDataSource = v;
+        if (Array.isArray(v)) {
+            this._listDataSource = convertArrayToDataSource(v, {
+                key: this.valueField,
+                pageSize: v.length || 10,
+            });
+        }
+        else {
+            this._listDataSource = this.dataSource;
+        }
+        //
+        this.onChangedSubscription?.unsubscribe();
+        this.onChangedSubscription = this._listDataSource.onChanged
+            .pipe(this._unsubscriber.takeUntilDestroy)
+            .subscribe(() => {
+            this.updateDropdownSize();
+            // Force refresh of selected items when data source changes
+            this.forceRefreshSelectedItems();
+            if (this.isOpen) {
+                this.scheduleRevealSelected();
+            }
+        });
+        //
+        this.onLoadingChangedSubscription?.unsubscribe();
+        this.onLoadingChangedSubscription = this._listDataSource.onLoadingChanged
+            .pipe(this._unsubscriber.takeUntilDestroy)
+            .subscribe((loading) => {
+            this.isLoading.set(loading);
+            // After async load completes while open, scroll/focus the selected item.
+            if (!loading && this.isOpen) {
+                this.scheduleRevealSelected();
+            }
+        });
+        // After setting data source, try to fetch item data if needed
+        setTimeout(() => this.fetchItemDataIfNeeded(), 0);
+    }
+    /** @ignore */
+    ngOnInit() {
+        super.ngOnInit();
+        //
+        this.registerValidation();
+        // Proactively fetch item data if we have a value but no corresponding item
+        this.fetchItemDataIfNeeded();
+    }
+    /**
+     * Proactively fetches item data if the component has a value but no corresponding item data.
+     * This prevents showing "loading..." when the component has a value.
+     */
+    async fetchItemDataIfNeeded() {
+        const isEmptyValue = this.value == null || (Array.isArray(this.value) && this.value.length === 0);
+        if (!isEmptyValue && this._listDataSource && !this.selectedItems?.length) {
+            try {
+                const item = await this.getItemByKey(this.value);
+                if (item) {
+                    // Force refresh to update the display
+                    this.forceRefreshSelectedItems();
+                }
+            }
+            catch (error) {
+                console.warn('Failed to fetch item data:', error);
+            }
+        }
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this.searchBox?.onKeyDown.unsubscribe();
+        this.onChangedSubscription?.unsubscribe();
+        this.onLoadingChangedSubscription?.unsubscribe();
+    }
+    /**
+     * Retrieves an item by its key.
+     * @param {any} key
+     */
+    getItemByKey(key) {
+        // Static array data sources resolve synchronously to avoid a false loading state
+        // for primitive values (e.g. color format "hex" / "rgba").
+        if (Array.isArray(this._originalDataSource)) {
+            for (const candidate of this._originalDataSource) {
+                if (candidate != null && typeof candidate === 'object') {
+                    if (get(candidate, this.valueField) == key || get(candidate, this.textField) == key) {
+                        return candidate;
+                    }
+                }
+                else if (candidate == key) {
+                    return { [this.valueField]: candidate, [this.textField]: String(candidate ?? '') };
+                }
+            }
+            return null;
+        }
+        if (this._listDataSource && typeof this._listDataSource.find === 'function') {
+            return this._listDataSource.find(key);
+        }
+        // If neither method is available, return null
+        console.warn('No find method available on data source');
+        return null;
+    }
+    /** @ignore */
+    _handleOnOpenedEvent(e) {
+        if (!this.renderList()) {
+            this.renderList.set(true);
+        }
+        else if (!this._listDataSource.totalCount || this._listDataSource.totalCount == 0) {
+            this.list?.refresh(false);
+        }
+        this._handleFocus();
+        //
+        this.onOpened.emit({
+            component: this,
+            isUserInteraction: e.isUserInteraction,
+        });
+        this.updateDropdownSize();
+        // Force refresh of selected items when opening to show updated text
+        this.forceRefreshSelectedItems();
+        // Keep retrying until async pages arrive and the viewport has a real size.
+        this.scheduleRevealSelected();
+    }
+    /** @ignore */
+    _handleOnClosedEvent(e) {
+        this.list?.cancelRevealSelected();
+        this.onClosed.emit({
+            component: this,
+            isUserInteraction: e.isUserInteraction,
+        });
+        this._unsubscriber.unsubscribe();
+    }
+    /** @ignore */
+    _handleFocus() {
+        // Wait a tick so the list is created (first open) and dropdown height is applied.
+        setTimeout(() => {
+            if (this.searchBox) {
+                this.searchBox.look = 'flat';
+                if (this.searchBoxAutoFocus()) {
+                    this.searchBox.focus();
+                }
+                //TODO: unsubscribe
+                this.hotKeyService
+                    .addShortcut({ keys: 'Control.f', element: this.panel.nativeElement })
+                    .pipe(this._unsubscriber.takeUntilDestroy)
+                    .subscribe(() => {
+                    this.searchBox.focus();
+                });
+                this.searchBox.onKeyDown.pipe(this._unsubscriber.takeUntilDestroy).subscribe((e) => {
+                    if (e.nativeEvent.code === 'ArrowDown' || e.nativeEvent.key === 'ArrowDown') {
+                        this.list?.focus();
+                        e.nativeEvent.preventDefault();
+                    }
+                });
+            }
+            else {
+                this.list?.focus();
+            }
+        });
+    }
+    /**
+     * Scroll (and focus when there is no search autofocus) to the selected item once the list is ready.
+     * @ignore
+     */
+    scheduleRevealSelected() {
+        const focusList = !this.searchBox || !this.searchBoxAutoFocus();
+        setTimeout(() => {
+            this.list?.revealSelected({ focus: focusList });
+        });
+    }
+    /** @ignore */
+    _handleBadgeRemove(e, item) {
+        this.unselectItems(item);
+        e.stopPropagation();
+    }
+    /** @ignore */
+    _handleValueChanged(e) {
+        if (e.isUserInteraction) {
+            if (!this.multiple) {
+                this.close();
+            }
+            this.commitValue(e.component.selectedItems, true);
+        }
+    }
+    /** @ignore */
+    _handleItemClick(e) {
+        this.onItemClick.emit(e);
+        if (!this.multiple) {
+            this.close();
+        }
+    }
+    /** @ignore */
+    _handleItemSelected(e) {
+        this.onItemSelected.emit(e);
+        this.resetSearchAfterSelection();
+        if (!this.multiple) {
+            this.close();
+        }
+    }
+    resetSearchAfterSelection() {
+        if (!this.searchBox && !this.searchBox?.value)
+            return;
+        if (this.searchBox && this.searchBox?.value)
+            this.searchBox.commitValue('', false);
+    }
+    /** @ignore */
+    setDropdownSize(count = 0) {
+        const itemPx = typeof this.itemHeight() === 'number' ? this.itemHeight() : 40;
+        const isActionsheet = this.dropdown.isActionsheetStyle;
+        if (isActionsheet) {
+            this._dropdownWidth.set('100%');
+            // Prefer maxVisibleItems on actionsheet too; still clamp to the pane afterwards.
+            const maxItems = Math.max(Number(this.maxVisibleItems()) || 5, 1);
+            this._dropdownHeight.set(`${Math.min(maxItems, Math.max(count, 1)) * itemPx}px`);
+        }
+        else {
+            const hostWidth = Math.max(this.getHostElement().offsetWidth, Number(this.dropdownWidth()) || 0);
+            const maxItems = Number(this.maxVisibleItems());
+            this._dropdownWidth.set(`${hostWidth}px`);
+            this._dropdownHeight.set(count == 0 ? 'auto' : `${Math.min(maxItems, count) * itemPx}px`);
+        }
+        setTimeout(() => {
+            this._fitListHeightToAvailableSpace(itemPx);
+            this.dropdown.updatePosition();
+            this.list?.render();
+            // Second pass after the overlay pane applies max-height / overflow constraints.
+            // Height changes invalidate the previous scroll offset — scroll again after fit.
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    this._fitListHeightToAvailableSpace(itemPx);
+                    this.list?.render();
+                    requestAnimationFrame(() => this.scheduleRevealSelected());
+                }, 0);
+            });
+        });
+    }
+    /**
+     * Shrinks list height to the visible overlay area so virtual scroll ends on fully
+     * visible rows instead of inside an overflow:hidden clipped region.
+     * @ignore
+     */
+    _fitListHeightToAvailableSpace(itemPx) {
+        if (itemPx <= 0 || this._dropdownHeight() === 'auto') {
+            return;
+        }
+        const panel = this.panel?.nativeElement;
+        const listEl = this.list?.getHostElement?.();
+        if (!panel || !listEl) {
+            return;
+        }
+        const pane = panel.closest('.ax-overlay-pane');
+        if (!pane) {
+            return;
+        }
+        const listRect = listEl.getBoundingClientRect();
+        const paneRect = pane.getBoundingClientRect();
+        const paneOverflow = listRect.bottom - paneRect.bottom;
+        const viewportOverflow = listRect.bottom - window.innerHeight;
+        const overflow = Math.max(paneOverflow, viewportOverflow);
+        let nextHeight = listEl.clientHeight || parseFloat(this._dropdownHeight());
+        if (!Number.isFinite(nextHeight) || nextHeight <= 0) {
+            return;
+        }
+        // When the list extends past the overlay pane or screen, shrink it to the visible area.
+        if (overflow > 1) {
+            nextHeight = Math.max(itemPx, nextHeight - overflow);
+        }
+        // Keep height as whole rows so the last item is never permanently cropped.
+        nextHeight = Math.max(itemPx, Math.floor(nextHeight / itemPx) * itemPx);
+        const current = parseFloat(this._dropdownHeight());
+        if (!Number.isFinite(current) || nextHeight !== current) {
+            this._dropdownHeight.set(`${nextHeight}px`);
+        }
+    }
+    updateDropdownPosition() {
+        setTimeout(() => {
+            this.dropdown.updatePosition();
+        });
+    }
+    updateDropdownSize() {
+        setTimeout(() => {
+            this.setDropdownSize(this._listDataSource.totalCount);
+            this.updateDropdownPosition();
+            this.list?.render();
+            if (!this.isItemTruncated()) {
+                setTimeout(() => {
+                    this._fitDropdownToContent();
+                    setTimeout(() => this._fitDropdownToContent(), 100);
+                });
+            }
+        });
+    }
+    _fitDropdownToContent() {
+        const panel = this.panel?.nativeElement;
+        if (!panel)
+            return;
+        const hostWidth = Math.max(this.getHostElement().offsetWidth, Number(this.dropdownWidth()) || 0);
+        let contentWidth = hostWidth;
+        panel.querySelectorAll('li.list-item').forEach((item) => {
+            const label = item.querySelector('.ax-label-container span');
+            if (label) {
+                const labelContainer = label.parentElement;
+                const horizontalPadding = labelContainer ? item.offsetWidth - labelContainer.clientWidth : 0;
+                contentWidth = Math.max(contentWidth, label.scrollWidth + horizontalPadding);
+            }
+            else {
+                contentWidth = Math.max(contentWidth, item.scrollWidth);
+            }
+        });
+        const nextWidth = `${Math.max(hostWidth, contentWidth)}px`;
+        if (this._dropdownWidth() !== nextWidth) {
+            this._dropdownWidth.set(nextWidth);
+            this.dropdown.updatePosition();
+        }
+    }
+    internalValueChanged(value) {
+        super.internalValueChanged(value);
+        this.updateDropdownPosition();
+        // Try to fetch item data when value changes
+        setTimeout(() => this.fetchItemDataIfNeeded(), 0);
+    }
+    /** @ignore */
+    _handleKeydown(e) {
+        if (e.code === 'ArrowDown' || e.code === 'ArrowUp') {
+            this.selectItemByNav(e.code === 'ArrowDown' ? 1 : -1);
+            e.preventDefault();
+        }
+        else if (e.code === 'Backspace') {
+            this.unselectItems(this.selectedItems.pop());
+            e.preventDefault();
+        }
+    }
+    /** @ignore */
+    selectItemByNav(sign) {
+        if (Array.isArray(this.dataSource) && !this.multiple) {
+            const items = this.normalizeItemsList(this.dataSource);
+            const _last = last(this.selectedItems);
+            let i = -1;
+            if (_last) {
+                i = findLastIndex(items, [this.valueField, get(_last, this.valueField)]);
+            }
+            i += sign;
+            if (i < 0 || i >= items.length)
+                return;
+            const next = nth(items, i);
+            if (next) {
+                this.selectItems(next);
+            }
+        }
+        else {
+            this.open();
+        }
+    }
+    /**
+     * Filters the data source based on the provided search term.
+     * @param {string} term
+     */
+    search(term) {
+        this.searchValue.set(term);
+        if (term) {
+            this._listDataSource.filter({
+                field: this.textField,
+                value: term,
+                operator: { type: 'contains' },
+            });
+        }
+        else {
+            this._listDataSource.clearFilter();
+        }
+        this._listDataSource.refresh();
+    }
+    /**
+     * Refreshes the component by resetting state, clearing selection cache, refreshing the list, and closing the component.
+     */
+    refresh() {
+        this.reset(false);
+        this.clearSelectionCache();
+        this.list?.refresh();
+        this.close();
+    }
+    hostClickListener() {
+        this.toggle();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXComboBoxComponent, isStandalone: true, selector: "ax-combo-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: false, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: false, isRequired: false, transformFunction: null }, textTemplate: { classPropertyName: "textTemplate", publicName: "textTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: false, isRequired: false, transformFunction: null }, isItemTruncated: { classPropertyName: "isItemTruncated", publicName: "isItemTruncated", isSignal: true, isRequired: false, transformFunction: null }, showItemTooltip: { classPropertyName: "showItemTooltip", publicName: "showItemTooltip", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, minRecordsForSearch: { classPropertyName: "minRecordsForSearch", publicName: "minRecordsForSearch", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectedTemplate: { classPropertyName: "selectedTemplate", publicName: "selectedTemplate", isSignal: false, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: false, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: false, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, searchBoxAutoFocus: { classPropertyName: "searchBoxAutoFocus", publicName: "searchBoxAutoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onOpened: "onOpened", onClosed: "onClosed", onItemSelected: "onItemSelected", onItemClick: "onItemClick" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "keydown": "_handleKeydown($event)", "click": "hostClickListener()" } }, providers: [
+            { provide: AXComponent, useExisting: AXComboBoxComponent },
+            { provide: AXFocusableComponent, useExisting: AXComboBoxComponent },
+            { provide: AXValuableComponent, useExisting: AXComboBoxComponent },
+            { provide: AXClearableComponent, useExisting: AXComboBoxComponent },
+            { provide: AXClosableComponent, useExisting: AXComboBoxComponent },
+            { provide: AXSearchableComponent, useExisting: AXComboBoxComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXComboBoxComponent),
+                multi: true,
+            },
+            {
+                provide: AX_SELECTION_DATA_TOKEN,
+                useClass: MXSelectionBridgeService,
+            },
+            AXUnsubscriber,
+        ], queries: [{ propertyName: "searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  [disabled]=\"disabled\"\n  [look]=\"look\"\n  [popoverWidth]=\"dropdownWidth()\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div\n      class=\"ax-editor ax-chips-container ax-content ax-input\"\n      [class.ax-state-multiple]=\"multiple\"\n      [tabindex]=\"tabIndex\"\n    >\n      @if (selectedItems.length === 0) {\n        <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n          {{ placeholder | translate | async }}\n        </div>\n      }\n      @for (item of selectedItems; track $index) {\n        @if (selectedTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"selectedTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n          ></ng-template>\n        } @else {\n          @if (multiple) {\n            <ax-tag [text]=\"getDisplayText(item) | translate | async\" look=\"twotone\">\n              @if (!disabled && !readonly && multiple) {\n                <ax-suffix>\n                  <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n                </ax-suffix>\n              }\n            </ax-tag>\n          } @else {\n            {{ getDisplayText(item) | translate | async }}\n          }\n        }\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n      <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button-icon\">\n      @if (isLoading()) {\n        <ax-loading-spinner [size]=\"16\" [stroke]=\"1\"></ax-loading-spinner>\n      } @else {\n        <span\n          class=\"ax-icon\"\n          [ngClass]=\"{\n            'ax-icon-chevron-down': !isOpen,\n            'ax-icon-chevron-up': isOpen,\n          }\"\n        ></span>\n      }\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div\n      #panel\n      class=\"ax-combo-box-panel\"\n      [class.ax-no-truncate]=\"!isItemTruncated()\"\n      [style.min-width]=\"_dropdownWidth()\"\n    >\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption || placeholder || '@acorex:selectbox.popover.title' | translate | async }}</ax-title>\n          <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n        </ax-header>\n      }\n      @if (searchBox && (!minRecordsForSearch || _listDataSource.totalCount >= minRecordsForSearch || searchValue())) {\n        <div class=\"ax-search-container\">\n          <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n        </div>\n      }\n      @if (renderList()) {\n        <ax-list\n          [name]=\"name\"\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [itemHeight]=\"itemHeight()\"\n          [itemTemplate]=\"itemTemplate\"\n          [textTemplate]=\"textTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [style.height]=\"_dropdownHeight()\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [isItemTruncated]=\"isItemTruncated()\"\n          [showItemTooltip]=\"showItemTooltip()\"\n          (onItemClick)=\"_handleItemClick($event)\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n        </ax-list>\n        <ng-template #empty>\n          {{ '@acorex:common.general.no-result-found' | translate | async }}\n        </ng-template>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box .ax-editor-container{padding-block:calc(var(--spacing, .25rem) * 0)}ax-combo-box .ax-editor-container.ax-state-multiple{padding-inline:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-combo-box .ax-editor-container .ax-input,ax-combo-box .ax-editor-container .ax-editor{padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box ax-dropdown-box.ax-state-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);--ax-comp-editor-space-start-size: 0}ax-combo-box .ax-chips-container{display:flex;min-height:var(--ax-sys-size-base);min-width:calc(var(--spacing, .25rem) * 0);flex:1;cursor:pointer!important;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--ax-comp-combo-box-chips-gap,.25rem);outline-style:var(--tw-outline-style);outline-width:0px;outline-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-chips-container .ax-selectbox-input{width:calc(var(--spacing, .25rem) * 0);opacity:0%}ax-combo-box .ax-chips-container.ax-state-multiple:has(.ax-chips){padding:var(--ax-comp-combo-box-chips-container-padding, .25rem)}ax-combo-box .ax-chips-container ax-tag ax-prefix,ax-combo-box .ax-chips-container ax-tag ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}.ax-combo-box-panel{display:flex;height:fit-content;max-height:100%;flex-direction:column;overflow:hidden}.ax-combo-box-panel.ax-no-truncate .ax-label-container span:not(.ax-truncated){white-space:nowrap}.ax-combo-box-panel .ax-combo-box-loading-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}.ax-combo-box-panel ax-list{min-height:calc(var(--spacing, .25rem) * 0);flex:1 1 auto}.ax-combo-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-panel>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-panel>ax-header.ax-solid ax-title{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(max-width:40rem){.ax-combo-box-panel .list-item{padding-inline:1rem}}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTagComponent, selector: "ax-tag", inputs: ["color", "look", "text"], outputs: ["onClick", "onDblClick", "onContextMenu"] }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-combo-box', inputs: [
+                        'disabled',
+                        'readonly',
+                        'tabIndex',
+                        'placeholder',
+                        'minValue',
+                        'maxValue',
+                        'value',
+                        'state',
+                        'name',
+                        'id',
+                        'type',
+                        'look',
+                        'multiple',
+                        'valueField',
+                        'textField',
+                        'disabledField',
+                        'textTemplate',
+                        'selectedItems',
+                    ], outputs: [
+                        'valueChange',
+                        'stateChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        'readonlyChange',
+                        'disabledChange',
+                        'onOpened',
+                        'onClosed',
+                        'onItemSelected',
+                        'onItemClick',
+                    ], encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: AXComponent, useExisting: AXComboBoxComponent },
+                        { provide: AXFocusableComponent, useExisting: AXComboBoxComponent },
+                        { provide: AXValuableComponent, useExisting: AXComboBoxComponent },
+                        { provide: AXClearableComponent, useExisting: AXComboBoxComponent },
+                        { provide: AXClosableComponent, useExisting: AXComboBoxComponent },
+                        { provide: AXSearchableComponent, useExisting: AXComboBoxComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXComboBoxComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: AX_SELECTION_DATA_TOKEN,
+                            useClass: MXSelectionBridgeService,
+                        },
+                        AXUnsubscriber,
+                    ], host: { ngSkipHydration: 'true' }, imports: [
+                        AXDropdownBoxComponent,
+                        NgTemplateOutlet,
+                        NgClass,
+                        AXDecoratorGenericComponent,
+                        AXDecoratorCloseButtonComponent,
+                        AXListComponent,
+                        FormsModule,
+                        AsyncPipe,
+                        AXTranslatorPipe,
+                        AXTagComponent,
+                        AXLoadingSpinnerComponent,
+                    ], template: "<ax-dropdown-box\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  [disabled]=\"disabled\"\n  [look]=\"look\"\n  [popoverWidth]=\"dropdownWidth()\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div\n      class=\"ax-editor ax-chips-container ax-content ax-input\"\n      [class.ax-state-multiple]=\"multiple\"\n      [tabindex]=\"tabIndex\"\n    >\n      @if (selectedItems.length === 0) {\n        <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n          {{ placeholder | translate | async }}\n        </div>\n      }\n      @for (item of selectedItems; track $index) {\n        @if (selectedTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"selectedTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n          ></ng-template>\n        } @else {\n          @if (multiple) {\n            <ax-tag [text]=\"getDisplayText(item) | translate | async\" look=\"twotone\">\n              @if (!disabled && !readonly && multiple) {\n                <ax-suffix>\n                  <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n                </ax-suffix>\n              }\n            </ax-tag>\n          } @else {\n            {{ getDisplayText(item) | translate | async }}\n          }\n        }\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n      <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button-icon\">\n      @if (isLoading()) {\n        <ax-loading-spinner [size]=\"16\" [stroke]=\"1\"></ax-loading-spinner>\n      } @else {\n        <span\n          class=\"ax-icon\"\n          [ngClass]=\"{\n            'ax-icon-chevron-down': !isOpen,\n            'ax-icon-chevron-up': isOpen,\n          }\"\n        ></span>\n      }\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div\n      #panel\n      class=\"ax-combo-box-panel\"\n      [class.ax-no-truncate]=\"!isItemTruncated()\"\n      [style.min-width]=\"_dropdownWidth()\"\n    >\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption || placeholder || '@acorex:selectbox.popover.title' | translate | async }}</ax-title>\n          <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n        </ax-header>\n      }\n      @if (searchBox && (!minRecordsForSearch || _listDataSource.totalCount >= minRecordsForSearch || searchValue())) {\n        <div class=\"ax-search-container\">\n          <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n        </div>\n      }\n      @if (renderList()) {\n        <ax-list\n          [name]=\"name\"\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [itemHeight]=\"itemHeight()\"\n          [itemTemplate]=\"itemTemplate\"\n          [textTemplate]=\"textTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [style.height]=\"_dropdownHeight()\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [isItemTruncated]=\"isItemTruncated()\"\n          [showItemTooltip]=\"showItemTooltip()\"\n          (onItemClick)=\"_handleItemClick($event)\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n        </ax-list>\n        <ng-template #empty>\n          {{ '@acorex:common.general.no-result-found' | translate | async }}\n        </ng-template>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box .ax-editor-container{padding-block:calc(var(--spacing, .25rem) * 0)}ax-combo-box .ax-editor-container.ax-state-multiple{padding-inline:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-combo-box .ax-editor-container .ax-input,ax-combo-box .ax-editor-container .ax-editor{padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box ax-dropdown-box.ax-state-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);--ax-comp-editor-space-start-size: 0}ax-combo-box .ax-chips-container{display:flex;min-height:var(--ax-sys-size-base);min-width:calc(var(--spacing, .25rem) * 0);flex:1;cursor:pointer!important;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--ax-comp-combo-box-chips-gap,.25rem);outline-style:var(--tw-outline-style);outline-width:0px;outline-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-chips-container .ax-selectbox-input{width:calc(var(--spacing, .25rem) * 0);opacity:0%}ax-combo-box .ax-chips-container.ax-state-multiple:has(.ax-chips){padding:var(--ax-comp-combo-box-chips-container-padding, .25rem)}ax-combo-box .ax-chips-container ax-tag ax-prefix,ax-combo-box .ax-chips-container ax-tag ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}.ax-combo-box-panel{display:flex;height:fit-content;max-height:100%;flex-direction:column;overflow:hidden}.ax-combo-box-panel.ax-no-truncate .ax-label-container span:not(.ax-truncated){white-space:nowrap}.ax-combo-box-panel .ax-combo-box-loading-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}.ax-combo-box-panel ax-list{min-height:calc(var(--spacing, .25rem) * 0);flex:1 1 auto}.ax-combo-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-panel>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-panel>ax-header.ax-solid ax-title{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(max-width:40rem){.ax-combo-box-panel .list-item{padding-inline:1rem}}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { isItemTruncated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemTruncated", required: false }] }], showItemTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemTooltip", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], dataSource: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], minRecordsForSearch: [{
+                type: Input
+            }], caption: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], selectedTemplate: [{
+                type: Input
+            }], emptyTemplate: [{
+                type: Input
+            }], loadingTemplate: [{
+                type: Input
+            }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], panel: [{
+                type: ViewChild,
+                args: ['panel']
+            }], list: [{
+                type: ViewChild,
+                args: [AXListComponent]
+            }], searchBox: [{
+                type: ContentChild,
+                args: [AXSearchBoxComponent]
+            }], searchBoxAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchBoxAutoFocus", required: false }] }], dropdown: [{
+                type: ViewChild,
+                args: [AXDropdownBoxComponent, { static: true }]
+            }], _handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], hostClickListener: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class AXComboBoxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, imports: [CommonModule,
+            AXCommonModule,
+            FormsModule,
+            AXCheckBoxModule,
+            AXBadgeModule,
+            AXDecoratorModule,
+            AXTranslationModule,
+            AXPopoverModule,
+            AXLoadingModule,
+            A11yModule,
+            AXTextBoxModule,
+            AXDropdownModule,
+            AXListModule,
+            AXComboBoxComponent], exports: [AXComboBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, imports: [CommonModule,
+            AXCommonModule,
+            FormsModule,
+            AXCheckBoxModule,
+            AXBadgeModule,
+            AXDecoratorModule,
+            AXTranslationModule,
+            AXPopoverModule,
+            AXLoadingModule,
+            A11yModule,
+            AXTextBoxModule,
+            AXDropdownModule,
+            AXListModule,
+            AXComboBoxComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        AXCommonModule,
+                        FormsModule,
+                        AXCheckBoxModule,
+                        AXBadgeModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXPopoverModule,
+                        AXLoadingModule,
+                        A11yModule,
+                        AXTextBoxModule,
+                        AXDropdownModule,
+                        AXListModule,
+                        AXComboBoxComponent,
+                    ],
+                    exports: [AXComboBoxComponent],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXComboBoxComponent, AXComboBoxModule };
+//# sourceMappingURL=acorex-components-combo-box.mjs.map