@acorex/components 22.0.0-next.8 → 22.1.0-next.0

package/lookup/README.md

@@ -0,0 +1,47 @@
+# @acorex/components/lookup
+
+An advanced drop-down (lookup) component with five modes, `AXDataSource` support, and virtual scrolling.
+
+## Modes
+
+| Mode                | Description                                                         |
+| ------------------- | ------------------------------------------------------------------- |
+| `drop-down-list`    | A predefined list of options for picking single values.             |
+| `multi-select`      | A predefined list of options for multiple item selection.           |
+| `drop-down-tree`    | A tree-like structure for single item selection.                    |
+| `multi-select-tree` | A tree-like structure for multiple item selection.                  |
+| `multi-column`      | A table-structured list for picking single values.                  |
+
+## Usage
+
+```ts
+import { AXLookupComponent } from '@acorex/components/lookup';
+import { AXDataSource } from '@acorex/cdk/common';
+```
+
+```html
+<!-- DropDownList -->
+<ax-lookup mode="drop-down-list" [dataSource]="items" [(value)]="selected" placeholder="Select..."></ax-lookup>
+
+<!-- MultiSelect -->
+<ax-lookup mode="multi-select" [dataSource]="items" [(value)]="selectedValues"></ax-lookup>
+
+<!-- DropDownTree / MultiSelectTree -->
+<ax-lookup mode="drop-down-tree" [treeDataSource]="nodes" textField="title" [(value)]="selectedNode"></ax-lookup>
+<ax-lookup mode="multi-select-tree" [treeDataSource]="nodes" textField="title" [(value)]="selectedNodes"></ax-lookup>
+
+<!-- MultiColumnComboBox -->
+<ax-lookup mode="multi-column" [dataSource]="items" [columns]="columns" [(value)]="selected"></ax-lookup>
+```
+
+- `dataSource`: `AXDataSource` or a plain array (list and multi-column modes). Supports remote paging, `byKey` value resolution, and server-side filtering.
+- `treeDataSource`: node array or lazy children callback (tree modes).
+- `valueField` / `textField` / `disabledField`: field mappings. For tree modes these map to the tree `idField` / `titleField`.
+- `columns`: column definitions (`{ field, title, width? }`) for `multi-column` mode.
+- `searchable`: when `true` (default), the trigger accepts typing and filters the list (`drop-down-list`, `multi-select`, `multi-column`). When `false`, the trigger is select-only. Tree modes have no search UI.
+- `searchPlaceholder`: placeholder for the multi-select trigger search input when chips are already selected.
+- `itemHeight` / `maxVisibleItems`: virtual scroll sizing.
+- `look`: the same editor-container look schemes as other editors like `ax-text-box`.
+- `ax-prefix` / `ax-suffix`: project decorators into the editor container.
+
+Each mode is rendered by its own internal mini component (`ax-lookup-drop-down-list`, `ax-lookup-multi-select`, `ax-lookup-drop-down-tree`, `ax-lookup-multi-select-tree`, `ax-lookup-multi-column`), all exported for direct use.

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@acorex/components",
-  "version": "22.0.0-next.8",
+  "version": "22.1.0-next.0",
   "peerDependencies": {
-    "@acorex/core": "22.0.0-next.8",
-    "@acorex/cdk": "22.0.0-next.8",
+    "@acorex/core": "22.1.0-next.0",
+    "@acorex/cdk": "22.1.0-next.0",
     "polytype": ">=0.17.0",
     "angular-imask": ">=7.6.1",
     "imask": ">=7.6.1",
@@ -134,6 +134,10 @@
       "types": "./types/acorex-components-color-palette.d.ts",
       "default": "./fesm2022/acorex-components-color-palette.mjs"
     },
+    "./combo-box": {
+      "types": "./types/acorex-components-combo-box.d.ts",
+      "default": "./fesm2022/acorex-components-combo-box.mjs"
+    },
     "./command": {
       "types": "./types/acorex-components-command.d.ts",
       "default": "./fesm2022/acorex-components-command.mjs"
@@ -254,6 +258,10 @@
       "types": "./types/acorex-components-loading-dialog.d.ts",
       "default": "./fesm2022/acorex-components-loading-dialog.mjs"
     },
+    "./lookup": {
+      "types": "./types/acorex-components-lookup.d.ts",
+      "default": "./fesm2022/acorex-components-lookup.mjs"
+    },
     "./map": {
       "types": "./types/acorex-components-map.d.ts",
       "default": "./fesm2022/acorex-components-map.mjs"

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

@@ -0,0 +1,114 @@
+import * as _angular_core from '@angular/core';
+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';
+
+/**
+ * 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
+ */
+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:
+ * - `searchable="true"` (default): an input with typeahead filtering (matches `id`).
+ * - `searchable="false"`: a 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;
+    /**
+     * The list of items the user can select from.
+     * Each item has `id` (search/identity), `text` (display), and `value` (submitted).
+     */
+    items: _angular_core.InputSignal<AXComboBoxItem[]>;
+    /**
+     * Whether the combo box accepts typing and filters the list (`true`),
+     * or is a select-like, read-only trigger (`false`).
+     */
+    searchable: _angular_core.InputSignal<boolean>;
+    /**
+     * The placeholder text shown when no value is selected.
+     */
+    placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Whether the combo box is disabled.
+     */
+    disabled: _angular_core.ModelSignal<boolean>;
+    /**
+     * Whether the combo box is readonly.
+     */
+    readonly: _angular_core.ModelSignal<boolean>;
+    /**
+     * Predefined look scheme of the editor container. Same looks as other editor components like ax-text-box.
+     */
+    look: _angular_core.ModelSignal<AXStyleLookType>;
+    /**
+     * The selected item's `value`. Supports two-way binding.
+     */
+    value: _angular_core.ModelSignal<string | number>;
+    /**
+     * Emitted when the selected value changes.
+     */
+    onValueChanged: _angular_core.OutputEmitterRef<AXValueChangedEvent<string | number>>;
+    /**
+     * Emitted when the popup list opens.
+     */
+    onOpened: _angular_core.OutputEmitterRef<AXEvent>;
+    /**
+     * Emitted when the popup list closes.
+     */
+    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 searchable input baseline. */
+    protected displayText: _angular_core.Signal<string>;
+    /** The text typed in the searchable 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 searchable. */
+    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();
+    /**
+     * Opens (searchable) or toggles (non-searchable) the popup on trigger click.
+     */
+    protected onTriggerClick(): void;
+    /**
+     * Keeps the combobox expanded state in sync when the popover closes (e.g. click outside).
+     */
+    protected onPopoverClosed(): void;
+    /**
+     * Commits the current listbox selection as the component value and closes the popup.
+     */
+    protected commit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXComboBoxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXComboBoxComponent, "ax-combo-box", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "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 AXComboBoxComponent], [typeof AXComboBoxComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXComboBoxModule>;
+}
+
+export { AXComboBoxComponent, AXComboBoxModule };
+export type { AXComboBoxItem };