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

package/types/acorex-components-select-box.d.ts

@@ -1,11 +1,14 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy, TemplateRef } from '@angular/core';
+import { OnDestroy, TemplateRef, ElementRef } from '@angular/core';
 import * as polytype from 'polytype';
 import * as i2 from '@acorex/cdk/common';
-import { MXSelectionValueComponent, MXLookComponent, MXSelectionBridgeService, AXEvent, AXValueChangedEvent } from '@acorex/cdk/common';
+import { MXSelectionValueComponent, MXLookComponent, AXDataSource, MXSelectionBridgeService, AXEvent, AXValueChangedEvent, AXItemClickEvent, AXItemSelectedEvent } from '@acorex/cdk/common';
 import * as i12 from '@acorex/components/dropdown';
 import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
+import * as i13 from '@acorex/components/list';
+import { AXListComponent } from '@acorex/components/list';
 import { AXSearchBoxComponent } from '@acorex/components/search-box';
+import { Observable } from 'rxjs';
 import * as i1 from '@angular/common';
 import * as i3 from '@angular/forms';
 import * as i4 from '@acorex/components/check-box';
@@ -16,26 +19,35 @@ import * as i8 from '@acorex/components/popover';
 import * as i9 from '@acorex/components/loading';
 import * as i10 from '@angular/cdk/a11y';
 import * as i11 from '@acorex/components/text-box';
-import * as i13 from '@acorex/components/selection-list';
 
 declare const AXSelectBoxComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXDropdownBoxBaseComponent, typeof MXSelectionValueComponent, typeof MXLookComponent]>;
 /**
- * Simple dropdown select for a static items array.
- * For AXDataSource / lazy-load support, use ComboBox.
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ * @category
  */
 declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements OnDestroy {
     #private;
-    /** Static items shown in the dropdown. */
-    readonly items: _angular_core.InputSignal<any[]>;
-    readonly placeholder: _angular_core.InputSignal<string>;
-    readonly minRecordsForSearch: _angular_core.InputSignal<number>;
-    readonly caption: _angular_core.InputSignal<string>;
-    readonly itemTemplate: _angular_core.InputSignal<TemplateRef<any>>;
-    readonly selectedTemplate: _angular_core.InputSignal<TemplateRef<any>>;
-    readonly emptyTemplate: _angular_core.InputSignal<TemplateRef<any>>;
-    readonly maxVisibleItems: _angular_core.InputSignal<number>;
-    readonly dropdownWidth: _angular_core.InputSignal<string>;
-    readonly searchBoxAutoFocus: _angular_core.InputSignal<boolean>;
+    /**
+     * Determines if an item is truncated.
+     *
+     * @defaultValue true
+     */
+    readonly isItemTruncated: _angular_core.InputSignal<boolean>;
+    /**
+     * Determines if a tooltip is shown for an item.
+     *
+     * @defaultValue false
+     */
+    readonly showItemTooltip: _angular_core.InputSignal<boolean>;
+    private host;
+    /** 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>;
+    /** @ignore */
+    private hotKeyService;
+    /** @ignore */
+    protected isLoading: _angular_core.WritableSignal<boolean>;
     /** @ignore */
     protected searchValue: _angular_core.WritableSignal<string>;
     /** @ignore */
@@ -45,42 +57,141 @@ declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements
     /** @ignore */
     protected _dropdownHeight: _angular_core.WritableSignal<string>;
     /** @ignore */
-    protected visibleItems: _angular_core.WritableSignal<any[]>;
-    private hotKeyService;
-    private _unsubscriber;
+    protected _listDataSource: AXDataSource<any>;
+    /** @ignore */
+    private _originalDataSource;
+    /** @ignore */
+    private onChangedSubscription;
+    /** @ignore */
+    private onLoadingChangedSubscription;
+    /**
+     * 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 an `AXDataSource` or an array.
+     * @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 minRecordsForSearch defines the minimum number of records required to display the search box.
+     * @param {number} minRecordsForSearch
+     */
+    minRecordsForSearch: number;
+    /**
+     * 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 null
+     */
+    dropdownWidth: _angular_core.InputSignal<string>;
+    /** @ignore */
+    panel: ElementRef<HTMLDivElement>;
+    /** @ignore */
+    list: AXListComponent;
+    /** @ignore */
+    searchBox: AXSearchBoxComponent;
+    searchBoxAutoFocus: _angular_core.InputSignal<boolean>;
+    /** @ignore */
+    protected dropdown: AXDropdownBoxComponent;
+    /**
+     * Service for managing selection data, injected via `AX_SELECTION_DATA_TOKEN`.
+     */
     selectionService: MXSelectionBridgeService;
-    private readonly panel;
-    private readonly selectionList;
-    protected readonly searchBox: _angular_core.Signal<AXSearchBoxComponent>;
-    private readonly dropdownRef;
-    /** Required by MXDropdownBoxBaseComponent. */
-    protected get dropdown(): AXDropdownBoxComponent;
+    searchEvent: Observable<any>;
+    /** @ignore */
+    private _unsubscriber;
+    /** @ignore */
     protected ngOnInit(): void;
+    /**
+     * 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.
+     */
+    private fetchItemDataIfNeeded;
+    /** @ignore */
     ngOnDestroy(): void;
-    /** Finds an item by value key in the full items array. */
-    getItemByKey(key: any): any;
-    /** Filters visible items by textField contains. */
-    search(term: string): void;
-    /** Resets selection and closes the dropdown. */
-    refresh(): void;
-    internalValueChanged(value: any): 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 _handleBadgeRemove(e: MouseEvent, item: unknown): void;
+    protected _handleFocus(): void;
+    /** @ignore */
+    protected _handleBadgeRemove(e: MouseEvent, item: any): void;
     /** @ignore */
     protected _handleValueChanged(e: AXValueChangedEvent): void;
     /** @ignore */
-    protected _handleKeydown(e: KeyboardEvent): void;
+    protected _handleItemClick(e: AXItemClickEvent): void;
+    /** @ignore */
+    protected _handleItemSelected(e: AXItemSelectedEvent): void;
+    private resetSearchAfterSelection;
+    /** @ignore */
+    private setDropdownSize;
+    /**
+     * 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
+     */
+    private _fitListHeightToAvailableSpace;
+    private updateDropdownPosition;
+    private updateDropdownSize;
+    private _fitDropdownToContent;
+    internalValueChanged(value: any): void;
+    /** @ignore */
+    _handleKeydown(e: KeyboardEvent): void;
+    /** @ignore */
+    private selectItemByNav;
+    /**
+     * 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;
+    hostClickListener(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSelectBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXSelectBoxComponent, "ax-select-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "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; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minRecordsForSearch": { "alias": "minRecordsForSearch"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; "isSignal": true; }; "searchBoxAutoFocus": { "alias": "searchBoxAutoFocus"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onOpened": "onOpened"; "onClosed": "onClosed"; "onItemSelected": "onItemSelected"; "onItemClick": "onItemClick"; }, ["searchBox"], ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-search-box", "ax-footer", "ax-validation-rule"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXSelectBoxComponent, "ax-select-box", 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; }; "isItemTruncated": { "alias": "isItemTruncated"; "required": false; "isSignal": true; }; "showItemTooltip": { "alias": "showItemTooltip"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "minRecordsForSearch": { "alias": "minRecordsForSearch"; "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; "isSignal": true; }; "searchBoxAutoFocus": { "alias": "searchBoxAutoFocus"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onOpened": "onOpened"; "onClosed": "onClosed"; "onItemSelected": "onItemSelected"; "onItemClick": "onItemClick"; }, ["searchBox"], ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-search-box", "ax-footer", "ax-validation-rule"], true, never>;
 }
 
 declare class AXSelectBoxModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSelectBoxModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXSelectBoxModule, never, [typeof i1.CommonModule, typeof i2.AXCommonModule, typeof i3.FormsModule, typeof i4.AXCheckBoxModule, typeof i5.AXBadgeModule, typeof i6.AXDecoratorModule, typeof i7.AXTranslationModule, typeof i8.AXPopoverModule, typeof i9.AXLoadingModule, typeof i10.A11yModule, typeof i11.AXTextBoxModule, typeof i12.AXDropdownModule, typeof i13.AXSelectionListModule, typeof AXSelectBoxComponent], [typeof AXSelectBoxComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXSelectBoxModule, never, [typeof i1.CommonModule, typeof i2.AXCommonModule, typeof i3.FormsModule, typeof i4.AXCheckBoxModule, typeof i5.AXBadgeModule, typeof i6.AXDecoratorModule, typeof i7.AXTranslationModule, typeof i8.AXPopoverModule, typeof i9.AXLoadingModule, typeof i10.A11yModule, typeof i11.AXTextBoxModule, typeof i12.AXDropdownModule, typeof i13.AXListModule, typeof AXSelectBoxComponent], [typeof AXSelectBoxComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXSelectBoxModule>;
 }
 

package/types/acorex-components-selection-list.d.ts

@@ -6,6 +6,7 @@ import * as i2 from '@angular/forms';
 import * as i3 from '@acorex/components/check-box';
 import * as i4 from '@acorex/components/radio';
 import * as i5 from '@acorex/components/label';
+import * as i6 from '@acorex/components/form';
 
 type AXSelectionListLook = 'solid' | 'divided' | 'card';
 /**
@@ -84,7 +85,7 @@ declare class AXSelectionListComponent extends MXSelectionValueComponent {
 
 declare class AXSelectionListModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXSelectionListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXSelectionListModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.AXCheckBoxModule, typeof i4.AXRadioModule, typeof i5.AXLabelModule, typeof AXSelectionListComponent], [typeof AXSelectionListComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXSelectionListModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.AXCheckBoxModule, typeof i4.AXRadioModule, typeof i5.AXLabelModule, typeof i6.AXFormModule, typeof AXSelectionListComponent], [typeof AXSelectionListComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXSelectionListModule>;
 }
 

package/combo-box/README.md

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