@acorex/components 22.0.0-next.24 → 22.0.0-next.27

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

@@ -1,202 +1,114 @@
 import * as _angular_core 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, 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';
-import * as i5 from '@acorex/components/badge';
-import * as i6 from '@acorex/components/decorators';
-import * as i7 from '@acorex/core/translation';
-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 { NXComponent, AXStyleLookType, AXValueChangedEvent, AXEvent } from '@acorex/cdk/common';
+import { AXPopoverComponent } from '@acorex/components/popover';
+import { Combobox } from '@angular/aria/combobox';
+import { Listbox } from '@angular/aria/listbox';
 
-declare const AXComboBoxComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXDropdownBoxBaseComponent, typeof MXSelectionValueComponent, typeof MXLookComponent]>;
 /**
- * The ComboBox is a component which supports static arrays and advanced AXDataSource with lazy loading.
- * @category
+ * An item in the combo box list.
+ *
+ * - `id` — unique key used for filtering/search and list identity
+ * - `text` — label shown in the list and in the trigger/input
+ * - `value` — value written to the component model when the item is selected
  */
-declare class AXComboBoxComponent extends AXComboBoxComponent_base implements OnDestroy {
+interface AXComboBoxItem {
+    id: string;
+    text: string;
+    value: string | number;
+}
+
+/**
+ * A minimal combo box for selecting a single value from a list of items.
+ *
+ * Built on top of the `@angular/aria/combobox` directives, it supports two behaviors:
+ * - `editable="true"` (default): an editable input with typeahead filtering (matches `id`).
+ * - `editable="false"`: a non-editable, select-like trigger (same input, read-only).
+ *
+ * Items use `text` for display, `id` for search/identity, and `value` as the submitted model value.
+ *
+ * @category Components
+ */
+declare class AXComboBoxComponent extends NXComponent {
     #private;
     /**
-     * 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>;
-    /** 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 */
-    protected renderList: _angular_core.WritableSignal<boolean>;
-    /** @ignore */
-    protected _dropdownWidth: _angular_core.WritableSignal<string>;
-    /** @ignore */
-    protected _dropdownHeight: _angular_core.WritableSignal<string>;
-    /** @ignore */
-    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
+     * The list of items the user can select from.
+     * Each item has `id` (search/identity), `text` (display), and `value` (submitted).
      */
-    caption: string;
+    items: _angular_core.InputSignal<AXComboBoxItem[]>;
     /**
-     * The template used to customize the rendering of items.
-     * @param {TemplateRef<any>} itemTemplate
+     * Whether the combo box renders an editable input with typeahead filtering (`true`)
+     * or a non-editable, select-like trigger (`false`).
      */
-    itemTemplate: TemplateRef<any>;
+    editable: _angular_core.InputSignal<boolean>;
     /**
-     * The template used to customize the rendering of selected items.
-     * @param {TemplateRef<any>} selectedTemplate
+     * The placeholder text shown when no value is selected.
      */
-    selectedTemplate: TemplateRef<any>;
+    placeholder: _angular_core.InputSignal<string>;
     /**
-     * The template used to display when there are no items.
-     * @param {TemplateRef<any>} emptyTemplate
+     * Whether the combo box is disabled.
      */
-    emptyTemplate: TemplateRef<any>;
+    disabled: _angular_core.ModelSignal<boolean>;
     /**
-     * The template used to display while loading.
-     * @param {TemplateRef<any>} loadingTemplate
+     * Whether the combo box is readonly.
      */
-    loadingTemplate: TemplateRef<any>;
+    readonly: _angular_core.ModelSignal<boolean>;
     /**
-     * The width of the dropdown in pixels.
-     * @defaultValue null
+     * Predefined look scheme of the editor container. Same looks as other editor components like ax-text-box.
      */
-    dropdownWidth: _angular_core.InputSignal<string>;
-    /** @ignore */
-    panel: ElementRef<HTMLDivElement>;
-    /** @ignore */
-    list: AXListComponent;
-    /** @ignore */
-    searchBox: AXSearchBoxComponent;
-    searchBoxAutoFocus: _angular_core.InputSignal<boolean>;
-    /** @ignore */
-    protected dropdown: AXDropdownBoxComponent;
+    look: _angular_core.ModelSignal<AXStyleLookType>;
     /**
-     * Service for managing selection data, injected via `AX_SELECTION_DATA_TOKEN`.
+     * The selected item's `value`. Supports two-way binding.
      */
-    selectionService: MXSelectionBridgeService;
-    searchEvent: Observable<any>;
-    /** @ignore */
-    private _unsubscriber;
-    /** @ignore */
-    protected ngOnInit(): void;
+    value: _angular_core.ModelSignal<string | number>;
     /**
-     * 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.
+     * Emitted when the selected value changes.
      */
-    private fetchItemDataIfNeeded;
-    /** @ignore */
-    ngOnDestroy(): void;
+    onValueChanged: _angular_core.OutputEmitterRef<AXValueChangedEvent<string | number>>;
     /**
-     * Retrieves an item by its key.
-     * @param {any} key
+     * Emitted when the popup list opens.
      */
-    getItemByKey(key: any): Promise<any> | any;
-    /** @ignore */
-    protected _handleOnOpenedEvent(e: AXEvent): void;
-    /** @ignore */
-    protected _handleOnClosedEvent(e: AXEvent): void;
-    /** @ignore */
-    protected _handleFocus(): void;
+    onOpened: _angular_core.OutputEmitterRef<AXEvent>;
     /**
-     * Scroll (and focus when there is no search autofocus) to the selected item once the list is ready.
-     * @ignore
+     * Emitted when the popup list closes.
      */
-    private scheduleRevealSelected;
-    /** @ignore */
-    protected _handleBadgeRemove(e: MouseEvent, item: any): void;
-    /** @ignore */
-    protected _handleValueChanged(e: AXValueChangedEvent): void;
-    /** @ignore */
-    protected _handleItemClick(e: AXItemClickEvent): void;
-    /** @ignore */
-    protected _handleItemSelected(e: AXItemSelectedEvent): void;
-    private resetSearchAfterSelection;
-    /** @ignore */
-    private setDropdownSize;
+    onClosed: _angular_core.OutputEmitterRef<AXEvent>;
+    /** Whether the popup is expanded. */
+    protected expanded: _angular_core.WritableSignal<boolean>;
+    /** The item whose `value` matches the current model value. */
+    protected selectedItem: _angular_core.Signal<AXComboBoxItem>;
+    /** Display text shown in the trigger / used as the editable input baseline. */
+    protected displayText: _angular_core.Signal<string>;
+    /** The text typed in the editable input. Resets to the selected item's text. */
+    protected searchText: _angular_core.WritableSignal<string>;
+    /** The listbox selection (item ids), kept in sync with the selected value. */
+    protected selection: _angular_core.WritableSignal<string[]>;
+    /** Items filtered by typed query against `id` when the combo box is editable. */
+    protected filteredItems: _angular_core.Signal<AXComboBoxItem[]>;
+    protected comboboxRef: _angular_core.Signal<Combobox>;
+    protected listboxRef: _angular_core.Signal<Listbox<any>>;
+    protected popoverRef: _angular_core.Signal<AXPopoverComponent>;
+    constructor();
     /**
-     * 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
+     * Opens (editable) or toggles (non-editable) the popup on trigger click.
      */
-    private _fitListHeightToAvailableSpace;
-    private updateDropdownPosition;
-    private updateDropdownSize;
-    private _fitDropdownToContent;
-    internalValueChanged(value: any): void;
-    /** @ignore */
-    _handleKeydown(e: KeyboardEvent): void;
-    /** @ignore */
-    private selectItemByNav;
+    protected onTriggerClick(): void;
     /**
-     * Filters the data source based on the provided search term.
-     * @param {string} term
+     * Keeps the combobox expanded state in sync when the popover closes (e.g. click outside).
      */
-    search(term: string): void;
+    protected onPopoverClosed(): void;
     /**
-     * Refreshes the component by resetting state, clearing selection cache, refreshing the list, and closing the component.
+     * Commits the current listbox selection as the component value and closes the popup.
      */
-    refresh(): void;
-    hostClickListener(): void;
+    protected commit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXComboBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXComboBoxComponent, "ax-combo-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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXComboBoxComponent, "ax-combo-box", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "readonly": "readonlyChange"; "look": "lookChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-suffix"], true, never>;
 }
 
 declare class AXComboBoxModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXComboBoxModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXComboBoxModule, 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 AXComboBoxComponent], [typeof AXComboBoxComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXComboBoxModule, never, [typeof AXComboBoxComponent], [typeof AXComboBoxComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXComboBoxModule>;
 }
 
 export { AXComboBoxComponent, AXComboBoxModule };
+export type { AXComboBoxItem };