@acorex/components 22.1.0-next.1 → 22.1.0-next.2

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

@@ -18,15 +18,23 @@ interface AXComboBoxItem {
     text: string;
     value: string | number;
 }
+/**
+ * The combo box model value: a scalar (or `null`) in single-select mode,
+ * or an array of scalars in multi-select mode.
+ */
+type AXComboBoxValue = string | number | (string | number)[] | null;
 
 /**
- * A minimal combo box for selecting a single value from a list of items.
+ * A minimal combo box for selecting one or more values 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, non-editable trigger (same input; typing blocked without
  *   Combobox `readonly`, so Tab focus and keyboard open/select keep working).
  *
+ * With `multiple="true"`, selected values are shown as chips in the trigger and the popup stays
+ * open while toggling items (same interaction model as `ax-lookup` multi-select).
+ *
  * With `adaptivityEnabled` (default `true`), the list opens as a bottom actionsheet on small
  * screens instead of an anchored dropdown — the same alternate presentation as `ax-select-box`.
  *
@@ -36,7 +44,7 @@ interface AXComboBoxItem {
  *
  * @category Components
  */
-declare class AXComboBoxComponent extends NXComponent implements FormValueControl<string | number | null> {
+declare class AXComboBoxComponent extends NXComponent implements FormValueControl<AXComboBoxValue> {
     #private;
     /**
      * The list of items the user can select from.
@@ -48,6 +56,11 @@ declare class AXComboBoxComponent extends NXComponent implements FormValueContro
      * or is a select-like, non-editable trigger (`false`).
      */
     searchable: _angular_core.InputSignal<boolean>;
+    /**
+     * When `true`, multiple items can be selected. Selected values are shown as chips and the
+     * popup stays open while toggling. The model value is an array (`[]` when empty).
+     */
+    multiple: _angular_core.InputSignal<boolean>;
     /**
      * When `true` (default), the popup list uses the alternate actionsheet presentation on small
      * screens (`SM`). When `false`, the list always opens as an anchored dropdown.
@@ -65,6 +78,11 @@ declare class AXComboBoxComponent extends NXComponent implements FormValueContro
      * The placeholder text shown when no value is selected.
      */
     placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Placeholder for the trigger search input when items are already selected (multi-select).
+     * Falls back to `placeholder` when the selection is empty.
+     */
+    searchPlaceholder: _angular_core.InputSignal<string>;
     /**
      * Custom template rendered when the filtered list has no items.
      * When omitted, a default "no result found" message is shown.
@@ -80,6 +98,7 @@ declare class AXComboBoxComponent extends NXComponent implements FormValueContro
      * Context: `{ $implicit: AXComboBoxItem }`.
      * When `searchable` is true, the template is shown while the popup is closed and the input
      * still reflects the selected text; typing/opening falls back to the plain input.
+     * In multi-select mode, the template replaces the chip text for each selected item.
      */
     selectedTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
     /**
@@ -95,14 +114,14 @@ declare class AXComboBoxComponent extends NXComponent implements FormValueContro
      */
     look: _angular_core.ModelSignal<AXStyleLookType>;
     /**
-     * The selected item's `value`. Supports `[(value)]`, `[(ngModel)]`, and signal forms
-     * via {@link FormValueControl}.
+     * The selected item `value`(s). Scalar (or `null`) in single mode; an array in multi mode.
+     * Supports `[(value)]`, `[(ngModel)]`, and signal forms via {@link FormValueControl}.
      */
-    readonly value: _angular_core.ModelSignal<string | number>;
+    readonly value: _angular_core.ModelSignal<AXComboBoxValue>;
     /**
      * Emitted when the selected value changes.
      */
-    onValueChanged: _angular_core.OutputEmitterRef<AXValueChangedEvent<string | number>>;
+    onValueChanged: _angular_core.OutputEmitterRef<AXValueChangedEvent<AXComboBoxValue>>;
     /**
      * Emitted when the trigger receives focus.
      */
@@ -131,15 +150,26 @@ declare class AXComboBoxComponent extends NXComponent implements FormValueContro
     protected expanded: _angular_core.WritableSignal<boolean>;
     /** Whether the list is currently shown as a bottom actionsheet (small screens + adaptivity). */
     protected isActionsheetStyle: _angular_core.WritableSignal<boolean>;
-    /** The item whose `value` matches the current model value. */
+    /** The current selection normalized to an array of submitted values. */
+    protected selectedValues: _angular_core.Signal<(string | number)[]>;
+    /** Whether there is at least one selected value. */
+    protected hasSelection: _angular_core.Signal<boolean>;
+    /** Resolved selected items for the current model value(s). */
+    protected selectedItems: _angular_core.Signal<AXComboBoxItem[]>;
+    /** The item whose `value` matches the current model value (single-select). */
     protected selectedItem: _angular_core.Signal<AXComboBoxItem>;
-    /** Display text shown in the trigger / used as the searchable input baseline. */
+    /** Display text shown in the trigger / used as the searchable input baseline (single-select). */
     protected displayText: _angular_core.Signal<string>;
-    /** The text typed in the searchable input. Resets to the selected item's text. */
+    /**
+     * The text typed in the searchable input.
+     * Multi-select starts empty; single mode syncs from the selected display text.
+     */
     protected searchText: _angular_core.WritableSignal<string>;
     /** Whether the trigger should render `selectedTemplate` instead of the plain input text. */
     protected showSelectedTemplate: _angular_core.Signal<boolean>;
-    /** The listbox selection (item ids), kept in sync with the selected value. */
+    /** Placeholder for the editable trigger search input in multi-select. */
+    protected triggerSearchPlaceholder: _angular_core.Signal<string>;
+    /** The listbox selection (item ids), kept in sync with the selected value(s). */
     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[]>;
@@ -149,13 +179,16 @@ declare class AXComboBoxComponent extends NXComponent implements FormValueContro
     constructor();
     /** Stable unique key for `@for` — avoids NG0955 when `id` is missing or duplicated. */
     protected trackItemKey(index: number, item: AXComboBoxItem): string;
+    /** Whether the given item is currently selected. */
+    protected isItemSelected(item: AXComboBoxItem): boolean;
     /**
      * Opens (searchable) or toggles (non-searchable) the popup on trigger click.
      */
     protected onTriggerClick(): void;
     /**
-     * Non-searchable keyboard: open with Enter/Space when collapsed; commit with Space when expanded.
-     * (Aria relays Enter for editable inputs, but not Space.)
+     * Keyboard handling on the trigger:
+     * - Non-searchable: open with Enter/Space when collapsed; commit with Space when expanded.
+     * - Multi-select: Backspace removes the last chip when the search input is empty.
      */
     protected onTriggerKeydown(event: KeyboardEvent): void;
     /** Blocks typing in non-searchable mode without Combobox `readonly` (keeps Tab/keyboard working). */
@@ -165,8 +198,12 @@ declare class AXComboBoxComponent extends NXComponent implements FormValueContro
      */
     protected onPopoverClosed(): void;
     /**
-     * Clears the selected value (sets it to `null`) and closes the popup.
-     * Used by projected `ax-clear-button`.
+     * Removes a single chip from the multi selection.
+     */
+    protected removeChip(event: Event, item: AXComboBoxItem): void;
+    /**
+     * Clears the selected value(s) and closes the popup.
+     * Sets `null` in single mode and `[]` in multi mode. Used by projected `ax-clear-button`.
      *
      * @param isUserInteraction - Whether the clear was triggered by the user.
      */
@@ -180,10 +217,12 @@ declare class AXComboBoxComponent extends NXComponent implements FormValueContro
      */
     closeAll(): void;
     /**
-     * Commits the highlighted (active) or clicked list item as the component value and closes the popup.
+     * Commits the highlighted (active) or clicked list item as the component value.
      *
      * With `selectionMode="explicit"`, arrow keys only move the active item; Enter/Space must resolve
      * that option. Clicks resolve from the event target so we do not depend on listener order vs ngListbox.
+     *
+     * In multi-select mode the item is toggled and the popup stays open.
      */
     protected commit(event?: Event): void;
     /** Forwards native focus from the trigger input. */
@@ -191,7 +230,7 @@ declare class AXComboBoxComponent extends NXComponent implements FormValueContro
     /** Forwards native blur from the trigger input. */
     protected emitOnBlur(e: FocusEvent): 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; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "selectedTemplate": { "alias": "selectedTemplate"; "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; }; }, { "look": "lookChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-header", "ax-footer"], true, 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; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "selectedTemplate": { "alias": "selectedTemplate"; "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; }; }, { "look": "lookChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-header", "ax-footer"], true, never>;
 }
 
 declare class AXComboBoxModule {
@@ -201,4 +240,4 @@ declare class AXComboBoxModule {
 }
 
 export { AXComboBoxComponent, AXComboBoxModule };
-export type { AXComboBoxItem };
+export type { AXComboBoxItem, AXComboBoxValue };

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

@@ -12,7 +12,7 @@ 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 i5 from '@acorex/components/tag';
 import * as i6 from '@acorex/components/decorators';
 import * as i7 from '@acorex/core/translation';
 import * as i8 from '@acorex/components/popover';
@@ -197,7 +197,7 @@ declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements
  */
 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.AXListModule, 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.AXTagModule, 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>;
 }