@acorex/components 20.2.21 → 20.2.23

package/autocomplete/index.d.ts

@@ -1,4 +1,4 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
 import * as polytype from 'polytype';
 import { MXSelectionValueComponent, MXLookComponent, AXDataSource, MXSelectionBridgeService, AXAutocompleteParentComponent, MXInputBaseValueComponent, AXEvent, AXValueChangedEvent, AXItemClickEvent, AXItemSelectedEvent } from '@acorex/cdk/common';
@@ -11,9 +11,13 @@ declare const AXAutocompleteComponent_base: polytype.Polytype.ClusteredConstruct
  * @category
  */
 declare class AXAutocompleteComponent extends AXAutocompleteComponent_base implements AfterViewInit, OnDestroy {
-    delayTime: i0.InputSignal<number>;
-    protected inputValue: i0.WritableSignal<string>;
-    protected isLoading: i0.WritableSignal<boolean>;
+    delayTime: _angular_core.InputSignal<number>;
+    /** Height of each list item in pixels, or 'auto' to let list measure. */
+    itemHeight: _angular_core.InputSignal<number | "auto">;
+    /** Maximum number of visible items before scrolling. */
+    maxVisibleItems: _angular_core.InputSignal<number>;
+    protected inputValue: _angular_core.WritableSignal<string>;
+    protected isLoading: _angular_core.WritableSignal<boolean>;
     /** @ignore */
     protected renderList: boolean;
     /** @ignore */
@@ -115,14 +119,14 @@ declare class AXAutocompleteComponent extends AXAutocompleteComponent_base imple
      */
     refresh(): void;
     private get __hostName();
-    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"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; }, never, ["ax-footer"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXAutocompleteComponent, never>;
+    static ɵcmp: _angular_core.ɵɵ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; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "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"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; }, never, ["ax-footer"], true, never>;
 }
 
 declare class AXAutocompleteModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXAutocompleteModule, never, [typeof AXAutocompleteComponent], [typeof AXAutocompleteComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AXAutocompleteModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXAutocompleteModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXAutocompleteModule, never, [typeof AXAutocompleteComponent], [typeof AXAutocompleteComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXAutocompleteModule>;
 }
 
 export { AXAutocompleteComponent, AXAutocompleteModule };

package/drawer/README.md

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

package/drawer/index.d.ts

@@ -1,86 +1,61 @@
-import { MXBaseComponent } from '@acorex/cdk/common';
-import * as i0 from '@angular/core';
-import { AfterContentInit, DoCheck } from '@angular/core';
-import * as i1 from '@angular/common';
+import { MXBaseComponent, AXClickEvent } from '@acorex/cdk/common';
+import * as _angular_core from '@angular/core';
+import * as i1 from '@acorex/cdk/drawer';
+import { AXDrawerLocation, AXDrawerMode } from '@acorex/cdk/drawer';
 
 /**
  * A container component that organizes and positions drawer components.
  * @category component
  */
 declare class AXDrawerContainerComponent extends MXBaseComponent {
-    private service;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXDrawerContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDrawerContainerComponent, "ax-drawer-container", never, {}, {}, never, ["ax-drawer", "ax-content"], true, never>;
+    #private;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDrawerContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDrawerContainerComponent, "ax-drawer-container", never, {}, {}, never, ["ax-drawer", "ax-content"], true, [{ directive: typeof i1.AXDrawerContainerDirective; inputs: {}; outputs: {}; }]>;
 }
 
-type AXDrawerMode = 'push' | 'overlay';
-type AXDrawerLocation = 'start' | 'end';
 /**
  * A component that represents a drawer with header and content sections.
  *
  * @category Components
  */
-declare class AXDrawerComponent extends MXBaseComponent implements AfterContentInit, DoCheck {
+declare class AXDrawerComponent extends MXBaseComponent {
     #private;
-    location: i0.ModelSignal<AXDrawerLocation>;
-    showBackdrop: i0.InputSignal<boolean>;
-    mode: i0.ModelSignal<AXDrawerMode>;
-    closeOthers: i0.InputSignal<boolean>;
-    collapsed: i0.ModelSignal<boolean>;
-    private backdropElement;
-    protected loaded: i0.WritableSignal<boolean>;
-    private service;
-    private _zone;
-    private document;
-    private platformID;
-    /**
+    readonly location: _angular_core.InputSignal<AXDrawerLocation>;
+    readonly showBackdrop: _angular_core.InputSignal<boolean>;
+    readonly mode: _angular_core.InputSignal<AXDrawerMode>;
+    readonly transition: _angular_core.InputSignal<number>;
+    readonly closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    readonly backdropClass: _angular_core.InputSignal<string>;
+    readonly collapsed: _angular_core.InputSignal<boolean>;
+    onBackdropClick: _angular_core.OutputEmitterRef<AXClickEvent>;
+    collapsedStateChanged: _angular_core.OutputEmitterRef<boolean>;
+    private drawerItem;
+    /**
+     * Toggles the drawer state between open and closed.
      *
-     *  @ignore
-     */
-    ngAfterContentInit(): void;
-    /**
-     *  @ignore
-     */
-    ngDoCheck(): void;
-    /**
-     *  @ignore
-     */
-    private _detectBoundingSize;
-    /**
-     * Toggles the collapsed state of the drawer.
+     * @returns void - No return value. The drawer state is toggled.
      */
     toggle(): void;
     /**
-     * Collapses the drawer.
-     * @ignore
+     * Closes the drawer.
+     *
+     * @returns void - No return value. The drawer is collapsed.
      */
     close(): void;
     /**
-     * Expands the drawer.
+     * Opens the drawer.
+     *
+     * @returns void - No return value. The drawer is expanded.
      */
     open(): void;
-    /**
-     *  @ignore
-     */
-    private _addBackdrop;
-    /**
-     *  @ignore
-     */
-    private _removeBackdrop;
-    /**
-     *  @ignore
-     */
-    private get __hostClass();
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXDrawerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDrawerComponent, "ax-drawer", never, { "location": { "alias": "location"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "closeOthers": { "alias": "closeOthers"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "location": "locationChange"; "mode": "modeChange"; "collapsed": "collapsedChange"; }, never, ["ax-header", "ax-content"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDrawerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDrawerComponent, "ax-drawer", never, { "location": { "alias": "location"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "transition": { "alias": "transition"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "onBackdropClick": "onBackdropClick"; "collapsedStateChanged": "collapsedStateChanged"; }, never, ["ax-header", "ax-content"], true, [{ directive: typeof i1.AXDrawerItemDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare class AXDrawerModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXDrawerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDrawerModule, never, [typeof i1.CommonModule, typeof AXDrawerComponent, typeof AXDrawerContainerComponent], [typeof AXDrawerComponent, typeof AXDrawerContainerComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AXDrawerModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDrawerModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXDrawerModule, never, [typeof AXDrawerComponent, typeof AXDrawerContainerComponent], [typeof AXDrawerComponent, typeof AXDrawerContainerComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXDrawerModule>;
 }
 
 export { AXDrawerComponent, AXDrawerContainerComponent, AXDrawerModule };
-export type { AXDrawerLocation, AXDrawerMode };

package/drawer-legacy/README.md

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

package/drawer-legacy/index.d.ts

@@ -0,0 +1,86 @@
+import { MXBaseComponent } from '@acorex/cdk/common';
+import * as i0 from '@angular/core';
+import { AfterContentInit, DoCheck } from '@angular/core';
+import * as i1 from '@angular/common';
+
+/**
+ * A container component that organizes and positions drawer components.
+ * @category component
+ */
+declare class AXDrawerLegacyContainerComponent extends MXBaseComponent {
+    private service;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXDrawerLegacyContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDrawerLegacyContainerComponent, "ax-drawer-legacy-container", never, {}, {}, never, ["ax-drawer", "ax-content"], true, never>;
+}
+
+type AXDrawerMode = 'push' | 'overlay';
+type AXDrawerLocation = 'start' | 'end';
+/**
+ * A component that represents a drawer with header and content sections.
+ *
+ * @category Components
+ */
+declare class AXDrawerLegacyComponent extends MXBaseComponent implements AfterContentInit, DoCheck {
+    #private;
+    location: i0.ModelSignal<AXDrawerLocation>;
+    showBackdrop: i0.InputSignal<boolean>;
+    mode: i0.ModelSignal<AXDrawerMode>;
+    closeOthers: i0.InputSignal<boolean>;
+    collapsed: i0.ModelSignal<boolean>;
+    private backdropElement;
+    protected loaded: i0.WritableSignal<boolean>;
+    private service;
+    private _zone;
+    private document;
+    private platformID;
+    /**
+     *
+     *  @ignore
+     */
+    ngAfterContentInit(): void;
+    /**
+     *  @ignore
+     */
+    ngDoCheck(): void;
+    /**
+     *  @ignore
+     */
+    private _detectBoundingSize;
+    /**
+     * Toggles the collapsed state of the drawer.
+     */
+    toggle(): void;
+    /**
+     * Collapses the drawer.
+     * @ignore
+     */
+    close(): void;
+    /**
+     * Expands the drawer.
+     */
+    open(): void;
+    /**
+     *  @ignore
+     */
+    private _addBackdrop;
+    /**
+     *  @ignore
+     */
+    private _removeBackdrop;
+    /**
+     *  @ignore
+     */
+    private get __hostClass();
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXDrawerLegacyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDrawerLegacyComponent, "ax-drawer-legacy", never, { "location": { "alias": "location"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "closeOthers": { "alias": "closeOthers"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "location": "locationChange"; "mode": "modeChange"; "collapsed": "collapsedChange"; }, never, ["ax-header", "ax-content"], true, never>;
+}
+
+declare class AXDrawerLegacyModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXDrawerLegacyModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXDrawerLegacyModule, never, [typeof i1.CommonModule, typeof AXDrawerLegacyComponent, typeof AXDrawerLegacyContainerComponent], [typeof AXDrawerLegacyComponent, typeof AXDrawerLegacyContainerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXDrawerLegacyModule>;
+}
+
+export { AXDrawerLegacyComponent, AXDrawerLegacyContainerComponent, AXDrawerLegacyModule };
+export type { AXDrawerLocation, AXDrawerMode };

package/fesm2022/acorex-components-autocomplete.mjs

@@ -21,6 +21,10 @@ class AXAutocompleteComponent extends classes(MXDropdownBoxBaseComponent, MXSele
     constructor() {
         super(...arguments);
         this.delayTime = input(300, ...(ngDevMode ? [{ debugName: "delayTime" }] : []));
+        /** Height of each list item in pixels, or 'auto' to let list measure. */
+        this.itemHeight = input(40, ...(ngDevMode ? [{ debugName: "itemHeight" }] : []));
+        /** Maximum number of visible items before scrolling. */
+        this.maxVisibleItems = input(5, ...(ngDevMode ? [{ debugName: "maxVisibleItems" }] : []));
         this.inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
         this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         /** @ignore */
@@ -177,18 +181,21 @@ class AXAutocompleteComponent extends classes(MXDropdownBoxBaseComponent, MXSele
     /** @ignore */
     setDropdownSize(count = 0) {
         if (this.dropdown.isActionsheetStyle) {
+            const itemPx = typeof this.itemHeight() === 'number' ? this.itemHeight() : 40;
             this.dropdownSizes = {
                 width: '100%',
                 height: ['auto', '0px'].includes(this.dropdownSizes.height)
-                    ? `${Math.min(15, count) * 40}px`
+                    ? `${Math.min(15, count) * itemPx}px`
                     : this.dropdownSizes.height,
             };
         }
         else {
             const hostWidth = Math.max(this.parent.getHostElement().offsetWidth, this.dropdownWidth);
+            const itemPx = typeof this.itemHeight() === 'number' ? this.itemHeight() : 40;
+            const maxItems = Number(this.maxVisibleItems());
             this.dropdownSizes = {
                 width: `${hostWidth}px`,
-                height: count == 0 ? 'auto' : `${Math.min(5, count) * 40}px`,
+                height: count == 0 ? 'auto' : `${Math.min(maxItems, count) * itemPx}px`,
             };
         }
         setTimeout(() => {
@@ -225,7 +232,7 @@ class AXAutocompleteComponent extends classes(MXDropdownBoxBaseComponent, MXSele
         return this.name;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", 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", onItemClick: "onItemClick", onItemSelected: "onItemSelected" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "attr.name": "this.__hostName" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", 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 }, 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 }, 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", onItemClick: "onItemClick", onItemSelected: "onItemSelected" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "attr.name": "this.__hostName" } }, providers: [
             { provide: AXComponent, useExisting: AXAutocompleteComponent },
             { provide: AXFocusableComponent, useExisting: AXAutocompleteComponent },
             { provide: AXValuableComponent, useExisting: AXAutocompleteComponent },
@@ -242,7 +249,7 @@ class AXAutocompleteComponent extends classes(MXDropdownBoxBaseComponent, MXSele
                 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 | 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          (onItemClick)=\"_handleItemClick($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n          <ng-template #empty> {{ '@acorex:common.general.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: "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", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "popoverWidth"], 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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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 | 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          [itemHeight]=\"itemHeight()\"\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          (onItemClick)=\"_handleItemClick($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n          <ng-template #empty> {{ '@acorex:common.general.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: "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", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "popoverWidth"], 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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXAutocompleteComponent, decorators: [{
             type: Component,
@@ -304,8 +311,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                         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 | 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          (onItemClick)=\"_handleItemClick($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n          <ng-template #empty> {{ '@acorex:common.general.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: { delayTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "delayTime", required: false }] }], dataSource: [{
+                    ], 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 | 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          [itemHeight]=\"itemHeight()\"\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          (onItemClick)=\"_handleItemClick($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n          <ng-template #empty> {{ '@acorex:common.general.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: { delayTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "delayTime", 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