@acorex/components 19.11.0-next.2 → 19.11.0-next.4

package/autocomplete/README.md

@@ -0,0 +1,3 @@
+# @acorex/components/autocomplete
+
+Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/autocomplete`.

package/autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/autocomplete.component';
+export * from './lib/autocomplete.module';

package/autocomplete/lib/autocomplete.component.d.ts

@@ -0,0 +1,113 @@
+import { AXAutocompleteParentComponent, AXDataSource, AXEvent, AXValueChangedEvent, MXLookComponent, MXSelectionBridgeService, MXSelectionValueComponent } from '@acorex/components/common';
+import { AXDropdownBoxComponent, MXDropdownBoxBaseComponent } from '@acorex/components/dropdown';
+import { AXListComponent } from '@acorex/components/list';
+import { AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+declare const AXAutocompleteComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXDropdownBoxBaseComponent, typeof MXSelectionValueComponent, typeof MXLookComponent]>;
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ * @category
+ */
+export declare class AXAutocompleteComponent extends AXAutocompleteComponent_base implements AfterViewInit, OnDestroy {
+    delayTime: import("@angular/core").InputSignal<number>;
+    protected inputValue: import("@angular/core").WritableSignal<string>;
+    protected isLoading: import("@angular/core").WritableSignal<boolean>;
+    /** @ignore */
+    protected renderList: boolean;
+    /** @ignore */
+    protected dropdownSizes: {
+        width: string;
+        height: string;
+    };
+    /** @ignore */
+    protected _listDataSource: AXDataSource<any>;
+    /** @ignore */
+    private _dataSource;
+    /** @ignore */
+    private onChangedSubscription;
+    /**
+     * Gets the data source for the component, which can be either an `AXDataSource` or an array of items.
+     * @returns {AXDataSource<any> | any[]}
+     */
+    get dataSource(): AXDataSource<any> | any[];
+    /**
+     * Sets the data source, either as `AXDataSource` or an array. Converts arrays to `AXDataSource` and subscribes to data and loading changes.
+     * @param {AXDataSource<any> | any[]} v
+     */
+    set dataSource(v: AXDataSource<any> | any[]);
+    /**
+     * The placeholder text displayed when the component is empty.
+     * @param {string} placeholder
+     */
+    placeholder: string;
+    /**
+     * The caption text to be displayed in the component.
+     * @param {string} caption
+     */
+    caption: string;
+    /**
+     * The template used to customize the rendering of items.
+     * @param {TemplateRef<any>} itemTemplate
+     */
+    itemTemplate: TemplateRef<any>;
+    /**
+     * The template used to customize the rendering of selected items.
+     * @param {TemplateRef<any>} selectedTemplate
+     */
+    selectedTemplate: TemplateRef<any>;
+    /**
+     * The template used to display when there are no items.
+     * @param {TemplateRef<any>} emptyTemplate
+     */
+    emptyTemplate: TemplateRef<any>;
+    /**
+     * The template used to display while loading.
+     * @param {TemplateRef<any>} loadingTemplate
+     */
+    loadingTemplate: TemplateRef<any>;
+    /**
+     * The width of the dropdown in pixels.
+     * @defaultValue 260
+     */
+    dropdownWidth: number;
+    /** @ignore */
+    list: AXListComponent;
+    /** @ignore */
+    protected dropdown: AXDropdownBoxComponent;
+    /**
+     * Service for managing selection data, injected via `AX_SELECTION_DATA_TOKEN`.
+     */
+    selectionService: MXSelectionBridgeService;
+    /** @ignore */
+    private _unsubscriber;
+    parent: AXAutocompleteParentComponent;
+    /** @ignore */
+    ngAfterViewInit(): void;
+    /** @ignore */
+    ngOnDestroy(): void;
+    /**
+     * Retrieves an item by its key.
+     * @param {any} key
+     */
+    getItemByKey(key: any): Promise<any> | any;
+    /** @ignore */
+    protected _handleOnOpenedEvent(e: AXEvent): void;
+    /** @ignore */
+    protected _handleOnClosedEvent(e: AXEvent): void;
+    /** @ignore */
+    protected _handleValueChanged(e: AXValueChangedEvent): void;
+    /** @ignore */
+    private setDropdownSize;
+    /**
+     * Filters the data source based on the provided search term.
+     * @param {string} term
+     */
+    search(term: string): void;
+    /**
+     * Refreshes the component by resetting state, clearing selection cache, refreshing the list, and closing the component.
+     */
+    refresh(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXAutocompleteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXAutocompleteComponent, "ax-autocomplete", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "delayTime": { "alias": "delayTime"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-footer"], true, never>;
+}
+export {};

package/autocomplete/lib/autocomplete.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./autocomplete.component";
+export declare class AXAutocompleteModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXAutocompleteModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXAutocompleteModule, never, [typeof i1.AXAutocompleteComponent], [typeof i1.AXAutocompleteComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXAutocompleteModule>;
+}

package/common/lib/classes/components.class.d.ts

@@ -1,6 +1,8 @@
+import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXValidationRuleOptions, AXValidationSummary } from '@acorex/core/validation';
 import { EventEmitter } from '@angular/core';
-import { AXEvent, AXValueChangedEvent } from './events.class';
+import { MXValueComponent } from '../components/value-component.class';
+import { AXEvent, AXHtmlEvent, AXValueChangedEvent } from './events.class';
 import * as i0 from "@angular/core";
 export declare const TAB_META_KEY = "__meta__";
 export declare class AXComponentCloseEvent extends AXEvent {
@@ -83,3 +85,14 @@ export declare abstract class AXPagedComponent extends AXComponent implements AX
     static ɵfac: i0.ɵɵFactoryDeclaration<AXPagedComponent, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AXPagedComponent>;
 }
+export declare abstract class AXAutocompleteParentComponent extends MXValueComponent {
+    oldInputValue: string;
+    abstract _unsubscriber: AXUnsubscriber;
+    onKeyDown: EventEmitter<AXHtmlEvent<KeyboardEvent>>;
+    onInputValueEmit: EventEmitter<AXValueChangedEvent<string>>;
+    onInputValueChanged: EventEmitter<AXValueChangedEvent<string>>;
+    handleInputValueChanged(value: string, isUserInteraction?: boolean): void;
+    handleInputValueEmit(value: string, isUserInteraction?: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXAutocompleteParentComponent, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AXAutocompleteParentComponent>;
+}

package/data-table/lib/columns/row-select-column.component.d.ts

@@ -1,3 +1,4 @@
+import { AXValueChangedEvent } from '@acorex/components/common';
 import { TemplateRef } from '@angular/core';
 import { AXDataTableColumnComponent } from './data-table-column';
 import * as i0 from "@angular/core";
@@ -47,23 +48,23 @@ export declare class AXRowSelectColumnComponent extends AXDataTableColumnCompone
     /**
      *  @ignore
      */
-    protected checkAllSelected(rows: any): any;
+    protected checkAllSelected(rows: any): boolean;
     /**
      *  @ignore
      */
-    protected checkAnySelected(rows: any): any;
+    protected handleChange(e: AXValueChangedEvent, item: unknown): void;
     /**
      *  @ignore
      */
-    protected handleChange(item: unknown): void;
-    /**
-     *  @ignore
-     */
-    protected handleSelectAll(rows: any): void;
+    protected handleSelectAll(e: AXValueChangedEvent, rows: any): void;
     /**
      * Indicates whether loading is enabled for the column.
      */
     get loadingEnabled(): boolean;
+    /**
+     * Gets the CSS class applied to the component.
+     */
+    get cssClass(): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXRowSelectColumnComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXRowSelectColumnComponent, "ax-select-column", never, { "width": { "alias": "width"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; }, {}, never, never, true, never>;
 }

package/dropdown/lib/dropdown-box.component.d.ts

@@ -4,6 +4,7 @@ import { EventEmitter, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
 declare const AXDropdownBoxComponent_base: import("polytype").Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXLookComponent]>;
 export declare class AXDropdownBoxComponent extends AXDropdownBoxComponent_base implements OnInit {
+    hasInput: import("@angular/core").InputSignal<boolean>;
     private _platform;
     /**
      *  @ignore
@@ -91,6 +92,6 @@ export declare class AXDropdownBoxComponent extends AXDropdownBoxComponent_base
      */
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDropdownBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownBoxComponent, "ax-dropdown-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "disabledChange": "disabledChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["[input]", "[panel]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownBoxComponent, "ax-dropdown-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "look": { "alias": "look"; "required": false; }; "hasInput": { "alias": "hasInput"; "required": false; "isSignal": true; }; }, { "disabledChange": "disabledChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["[input]", "[panel]"], true, never>;
 }
 export {};

package/dropdown/lib/dropdown-panel.component.d.ts

@@ -9,6 +9,7 @@ import * as i0 from "@angular/core";
  * @category Components
  */
 export declare class AXDropdownPanelComponent extends MXInteractiveComponent implements OnDestroy {
+    #private;
     private _platform;
     /**
      *  @ignore
@@ -22,6 +23,7 @@ export declare class AXDropdownPanelComponent extends MXInteractiveComponent imp
      *  @ignore
      */
     protected _placement: import("@acorex/components/common").AXConnectedPosition[];
+    placement: import("@angular/core").InputSignal<"bottom-start" | "bottom-end">;
     /**
      *  @ignore
      */
@@ -114,5 +116,5 @@ export declare class AXDropdownPanelComponent extends MXInteractiveComponent imp
      */
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDropdownPanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownPanelComponent, "ax-dropdown-panel", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "fitParent": { "alias": "fitParent"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; "position": { "alias": "position"; "required": false; }; "_target": { "alias": "_target"; "required": false; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; }; }, { "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownPanelComponent, "ax-dropdown-panel", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "fitParent": { "alias": "fitParent"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; "position": { "alias": "position"; "required": false; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "_target": { "alias": "_target"; "required": false; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; }; }, { "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["*"], true, never>;
 }

package/dropdown-button/lib/dropdown-button.component.d.ts

@@ -63,5 +63,5 @@ export declare class AXDropdownButtonComponent extends MXButtonBaseComponent imp
     close(): void;
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDropdownButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownButtonComponent, "ax-dropdown-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "type": { "alias": "type"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; }, never, ["*", "ax-prefix, ax-loading, ax-loading-spinner"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDropdownButtonComponent, "ax-dropdown-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "type": { "alias": "type"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; }, never, ["ax-button-item-list", "ax-prefix, ax-loading, ax-loading-spinner"], true, never>;
 }

package/fesm2022/acorex-components-autocomplete.mjs

@@ -0,0 +1,317 @@
+import { MXSelectionValueComponent, MXLookComponent, convertArrayToDataSource, AX_SELECTION_DATA_TOKEN, AXAutocompleteParentComponent, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent, AXClosbaleComponent, AXSearchableComponent, MXSelectionBridgeService } from '@acorex/components/common';
+import { AXDecoratorGenericComponent, AXDecoratorCloseButtonComponent } from '@acorex/components/decorators';
+import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
+import { AXListComponent } from '@acorex/components/list';
+import { AXLoadingComponent } from '@acorex/components/loading';
+import { AXTranslatorPipe } from '@acorex/core/translation';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, signal, inject, forwardRef, ViewChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { classes } from 'polytype';
+import { debounceTime } from 'rxjs';
+
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ * @category
+ */
+class AXAutocompleteComponent extends classes(MXDropdownBoxBaseComponent, MXSelectionValueComponent, MXLookComponent) {
+    constructor() {
+        super(...arguments);
+        this.delayTime = input(300);
+        this.inputValue = signal('');
+        this.isLoading = signal(false);
+        /** @ignore */
+        this.renderList = false;
+        /** @ignore */
+        this.dropdownSizes = {
+            width: '100%',
+            height: 'auto',
+        };
+        /** @ignore */
+        this._listDataSource = convertArrayToDataSource([], {
+            key: this.valueField,
+            pageSize: 10,
+        });
+        /**
+         * The width of the dropdown in pixels.
+         * @defaultValue 260
+         */
+        this.dropdownWidth = 260;
+        /**
+         * Service for managing selection data, injected via `AX_SELECTION_DATA_TOKEN`.
+         */
+        this.selectionService = inject(AX_SELECTION_DATA_TOKEN);
+        /** @ignore */
+        this._unsubscriber = inject(AXUnsubscriber);
+        this.parent = inject(AXAutocompleteParentComponent);
+    }
+    /**
+     * 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._dataSource;
+    }
+    /**
+     * Sets the data source, either as `AXDataSource` or an array. Converts arrays to `AXDataSource` and subscribes to data and loading changes.
+     * @param {AXDataSource<any> | any[]} v
+     */
+    set dataSource(v) {
+        this._dataSource = v;
+        if (Array.isArray(v)) {
+            this._listDataSource = convertArrayToDataSource(v, {
+                key: this.valueField,
+                pageSize: 10,
+            });
+        }
+        else {
+            this._listDataSource = this.dataSource;
+        }
+        //
+        this.onChangedSubscription = this._listDataSource.onChanged.subscribe((data) => {
+            this.setDropdownSize(data.totalCount);
+        });
+        this._listDataSource.onLoadingChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe((loading) => {
+            this.isLoading.set(loading);
+        });
+    }
+    /** @ignore */
+    ngAfterViewInit() {
+        this.setDropdownSize();
+        this.registerValidation();
+        this.parent.onInputValueChanged.pipe(debounceTime(this.delayTime()), this.parent._unsubscriber.takeUntilDestroy).subscribe((e) => {
+            if (!e.isUserInteraction)
+                return;
+            this.inputValue.set(e.value);
+            if (!e.value) {
+                this.close();
+                return;
+            }
+            this.search(e.value);
+            this.open();
+        });
+        this.parent.onKeyDown.pipe(this.parent._unsubscriber.takeUntilDestroy).subscribe((e) => {
+            if (e.nativeEvent.key === 'ArrowDown') {
+                this.search(this.inputValue());
+                this.open();
+                this.list.focus();
+            }
+        });
+    }
+    /** @ignore */
+    ngOnDestroy() {
+        this.onChangedSubscription.unsubscribe();
+    }
+    /**
+     * Retrieves an item by its key.
+     * @param {any} key
+     */
+    getItemByKey(key) {
+        const startTime = Date.now();
+        const check = async () => {
+            while (Date.now() - startTime < 2000) {
+                if (typeof this._listDataSource.find === 'function') {
+                    return this._listDataSource.find(key);
+                }
+                else {
+                    await new Promise((resolve) => setTimeout(resolve, 50));
+                }
+            }
+            console.warn('Timeout reached without finding the "getItemByKey" method');
+        };
+        return check();
+    }
+    /** @ignore */
+    _handleOnOpenedEvent(e) {
+        if (!this.renderList) {
+            this.renderList = true;
+            this.list?.render();
+        }
+        else if (!this._listDataSource.totalCount || this._listDataSource.totalCount == 0) {
+            this.list?.refresh(false);
+        }
+        //
+        this.onOpened.emit({
+            component: this,
+            isUserInteraction: e.isUserInteraction,
+        });
+    }
+    /** @ignore */
+    _handleOnClosedEvent(e) {
+        this.parent.focus();
+        this.onClosed.emit({
+            component: this,
+            isUserInteraction: e.isUserInteraction,
+        });
+        this._unsubscriber.unsubscribe();
+    }
+    /** @ignore */
+    _handleValueChanged(e) {
+        if (e.isUserInteraction) {
+            if (!this.multiple) {
+                this.close();
+            }
+            this.parent.handleInputValueEmit(e.value, true);
+        }
+    }
+    /** @ignore */
+    setDropdownSize(count = 0) {
+        if (this.dropdown.isActionsheetStyle) {
+            this.dropdownSizes = {
+                width: '100%',
+                height: ['auto', '0px'].includes(this.dropdownSizes.height) ? `${Math.min(15, count) * 40}px` : this.dropdownSizes.height,
+            };
+        }
+        else {
+            const hostWidth = Math.max(this.parent.getHostElement().offsetWidth, this.dropdownWidth);
+            this.dropdownSizes = {
+                width: `${hostWidth}px`,
+                height: count == 0 ? 'auto' : `${Math.min(5, count) * 40}px`,
+            };
+        }
+        setTimeout(() => {
+            this.dropdown.updatePosition();
+        });
+    }
+    /**
+     * Filters the data source based on the provided search term.
+     * @param {string} term
+     */
+    search(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();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXAutocompleteComponent, isStandalone: true, selector: "ax-autocomplete", 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 }, delayTime: { classPropertyName: "delayTime", publicName: "delayTime", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", 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: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onOpened: "onOpened", onClosed: "onClosed" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
+            { provide: AXComponent, useExisting: AXAutocompleteComponent },
+            { provide: AXFocusableComponent, useExisting: AXAutocompleteComponent },
+            { provide: AXValuableComponent, useExisting: AXAutocompleteComponent },
+            { provide: AXClearableComponent, useExisting: AXAutocompleteComponent },
+            { provide: AXClosbaleComponent, useExisting: AXAutocompleteComponent },
+            { provide: AXSearchableComponent, useExisting: AXAutocompleteComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXAutocompleteComponent),
+                multi: true,
+            },
+            {
+                provide: AX_SELECTION_DATA_TOKEN,
+                useClass: MXSelectionBridgeService,
+            },
+            AXUnsubscriber,
+        ], viewQueries: [{ 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  [look]=\"look\"\n  [hasInput]=\"false\"\n  [disabled]=\"disabled\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container panel>\n    <div #panel class=\"ax-autocomplete-panel\" [style.min-width]=\"dropdownSizes.width\">\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption || placeholder || 'autocomplete.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 (renderList) {\n        <ax-list\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [textTemplate]=\"textTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [style.height]=\"dropdownSizes.height\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n        >\n          <ng-template #empty> {{ 'no-result-found' | translate | async }} </ng-template>\n        </ax-list>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template *ngTemplateOutlet=\"loadingTemplate\"></ng-template>\n        } @else {\n          <div class=\"ax-autocomplete-loading-container\">\n            <ax-loading></ax-loading>\n          </div>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { 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: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readOnlyChange", "onBlur", "onFocus", "onItemClick", "onScrolledIndexChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-autocomplete', 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'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: AXComponent, useExisting: AXAutocompleteComponent },
+                        { provide: AXFocusableComponent, useExisting: AXAutocompleteComponent },
+                        { provide: AXValuableComponent, useExisting: AXAutocompleteComponent },
+                        { provide: AXClearableComponent, useExisting: AXAutocompleteComponent },
+                        { provide: AXClosbaleComponent, useExisting: AXAutocompleteComponent },
+                        { provide: AXSearchableComponent, useExisting: AXAutocompleteComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXAutocompleteComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: AX_SELECTION_DATA_TOKEN,
+                            useClass: MXSelectionBridgeService,
+                        },
+                        AXUnsubscriber,
+                    ], host: { ngSkipHydration: 'true' }, imports: [
+                        AsyncPipe,
+                        FormsModule,
+                        AXListComponent,
+                        NgTemplateOutlet,
+                        AXTranslatorPipe,
+                        AXLoadingComponent,
+                        AXDropdownBoxComponent,
+                        AXDecoratorGenericComponent,
+                        AXDecoratorCloseButtonComponent,
+                    ], template: "<ax-dropdown-box\n  [look]=\"look\"\n  [hasInput]=\"false\"\n  [disabled]=\"disabled\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container panel>\n    <div #panel class=\"ax-autocomplete-panel\" [style.min-width]=\"dropdownSizes.width\">\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption || placeholder || 'autocomplete.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 (renderList) {\n        <ax-list\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [textTemplate]=\"textTemplate\"\n          [itemTemplate]=\"itemTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [style.height]=\"dropdownSizes.height\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n        >\n          <ng-template #empty> {{ 'no-result-found' | translate | async }} </ng-template>\n        </ax-list>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template *ngTemplateOutlet=\"loadingTemplate\"></ng-template>\n        } @else {\n          <div class=\"ax-autocomplete-loading-container\">\n            <ax-loading></ax-loading>\n          </div>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n" }]
+        }], propDecorators: { dataSource: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], caption: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], selectedTemplate: [{
+                type: Input
+            }], emptyTemplate: [{
+                type: Input
+            }], loadingTemplate: [{
+                type: Input
+            }], dropdownWidth: [{
+                type: Input
+            }], list: [{
+                type: ViewChild,
+                args: [AXListComponent]
+            }], dropdown: [{
+                type: ViewChild,
+                args: [AXDropdownBoxComponent, { static: true }]
+            }] } });
+
+class AXAutocompleteModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteModule, imports: [AXAutocompleteComponent], exports: [AXAutocompleteComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteModule, imports: [AXAutocompleteComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AXAutocompleteComponent],
+                    exports: [AXAutocompleteComponent],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXAutocompleteComponent, AXAutocompleteModule };
+//# sourceMappingURL=acorex-components-autocomplete.mjs.map