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

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

@@ -1,669 +0,0 @@
-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