ng-primitives 0.46.0 → 0.48.0

package/a11y/active-descendant/active-descendant.d.ts

@@ -1,4 +1,4 @@
-import { Signal } from '@angular/core';
+import { ElementRef, Signal } from '@angular/core';
 interface ActiveDescendantManagerOptions<T extends NgpActivatable> {
     /**
      * The disabled state of the active descendant group.
@@ -24,6 +24,10 @@ export interface NgpActivatable {
      * Whether the item is disabled.
      */
     disabled?: Signal<boolean>;
+    /**
+     * The element that represents the item.
+     */
+    elementRef: ElementRef<HTMLElement>;
 }
 export declare function activeDescendantManager<T extends NgpActivatable>(options: ActiveDescendantManagerOptions<T>): {
     activeDescendant: Signal<string | undefined>;

package/combobox/combobox/combobox-state.d.ts

@@ -40,7 +40,7 @@ export declare const injectComboboxState: <U = {
     readonly state: import("ng-primitives/state").CreatedState<NgpCombobox>;
     openDropdown: () => Promise<void>;
     closeDropdown: () => void;
-    toggleDropdown: () => void;
+    toggleDropdown: () => Promise<void>;
     selectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
     deselectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
     toggleOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;

package/combobox/combobox/combobox.d.ts

@@ -104,7 +104,7 @@ export declare class NgpCombobox {
      * Toggle the dropdown.
      * @internal
      */
-    toggleDropdown(): void;
+    toggleDropdown(): Promise<void>;
     /**
      * Select an option.
      * @param option The option to select.

package/combobox/combobox-button/combobox-button.d.ts

@@ -31,7 +31,7 @@ export declare class NgpComboboxButton {
         readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/combobox").NgpCombobox>;
         openDropdown: () => Promise<void>;
         closeDropdown: () => void;
-        toggleDropdown: () => void;
+        toggleDropdown: () => Promise<void>;
         selectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
         deselectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
         toggleOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
@@ -55,7 +55,7 @@ export declare class NgpComboboxButton {
     /** The id of the dropdown. */
     readonly dropdownId: import("@angular/core").Signal<string | undefined>;
     constructor();
-    protected toggleDropdown(): void;
+    protected toggleDropdown(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpComboboxButton, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgpComboboxButton, "[ngpComboboxButton]", ["ngpComboboxButton"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/combobox/combobox-dropdown/combobox-dropdown.d.ts

@@ -1,5 +1,4 @@
 import * as i0 from "@angular/core";
-import * as i1 from "ng-primitives/internal";
 export declare class NgpComboboxDropdown {
     /** Access the combobox state. */
     protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<{
@@ -32,7 +31,7 @@ export declare class NgpComboboxDropdown {
         readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/combobox").NgpCombobox>;
         openDropdown: () => Promise<void>;
         closeDropdown: () => void;
-        toggleDropdown: () => void;
+        toggleDropdown: () => Promise<void>;
         selectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
         deselectOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
         toggleOption: (option: import("ng-primitives/combobox").NgpComboboxOption) => void;
@@ -61,5 +60,5 @@ export declare class NgpComboboxDropdown {
     readonly id: import("@angular/core").InputSignal<string>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpComboboxDropdown, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpComboboxDropdown, "[ngpComboboxDropdown]", ["ngpComboboxDropdown"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.NgpExitAnimation; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpComboboxDropdown, "[ngpComboboxDropdown]", ["ngpComboboxDropdown"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/combobox/combobox-input/combobox-input.d.ts

@@ -32,7 +32,7 @@ export declare class NgpComboboxInput {
         readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/combobox").NgpCombobox>;
         openDropdown: () => Promise<void>;
         closeDropdown: () => void;
-        toggleDropdown: () => void;
+        toggleDropdown: () => Promise<void>;
         selectOption: (option: NgpComboboxOption) => void;
         deselectOption: (option: NgpComboboxOption) => void;
         toggleOption: (option: NgpComboboxOption) => void;
@@ -53,10 +53,6 @@ export declare class NgpComboboxInput {
     readonly elementRef: import("@angular/core").ElementRef<HTMLInputElement>;
     /** The id of the input. */
     readonly id: import("@angular/core").InputSignal<string>;
-    /**
-     * Extract the string representation of the value.
-     */
-    readonly displayWith: import("@angular/core").InputSignal<(value: any) => string>;
     /** The id of the dropdown. */
     readonly dropdownId: import("@angular/core").Signal<string | undefined>;
     /** The id of the active descendant. */
@@ -75,5 +71,5 @@ export declare class NgpComboboxInput {
     protected highlightText(): void;
     protected handlePointerDown(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpComboboxInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpComboboxInput, "input[ngpComboboxInput]", ["ngpComboboxInput"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpComboboxInput, "input[ngpComboboxInput]", ["ngpComboboxInput"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/combobox/combobox-option/combobox-option.d.ts

@@ -34,7 +34,7 @@ export declare class NgpComboboxOption implements OnInit, OnDestroy, NgpActivata
         readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/combobox").NgpCombobox>;
         openDropdown: () => Promise<void>;
         closeDropdown: () => void;
-        toggleDropdown: () => void;
+        toggleDropdown: () => Promise<void>;
         selectOption: (option: NgpComboboxOption) => void;
         deselectOption: (option: NgpComboboxOption) => void;
         toggleOption: (option: NgpComboboxOption) => void;

package/example-theme/index.css

@@ -26,7 +26,7 @@
   --ngp-background-blue: #dbeafe;
   --ngp-background-success: oklch(84.1% 0.238 128.85);
 
-  --ngp-border: var(--ngp-gray-200);
+  --ngp-border: rgba(0, 0, 0, 0.1);
   --ngp-border-secondary: var(--ngp-gray-300);
   --ngp-border-blue: #3b82f6;
   --ngp-border-inverse: var(--ngp-black);

package/fesm2022/ng-primitives-a11y.mjs

@@ -1,11 +1,34 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Directive } from '@angular/core';
+import { signal, computed, effect, Directive } from '@angular/core';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 
 function activeDescendantManager(options) {
+    const sortedOptions = () => options
+        .items()
+        .slice()
+        .sort((a, b) => {
+        const aElement = a.elementRef.nativeElement;
+        const bElement = b.elementRef.nativeElement;
+        return aElement.compareDocumentPosition(bElement) & Node.DOCUMENT_POSITION_FOLLOWING
+            ? -1
+            : 1;
+    });
     const activeIndex = signal(0);
-    const activeItem = computed(() => options.items()?.[activeIndex()]);
+    const activeItem = computed(() => sortedOptions()?.[activeIndex()]);
     const disabled = computed(() => options.disabled?.() || options.items().every(item => item.disabled?.()));
+    // any time the item list changes, check if the active index is still valid
+    effect(() => {
+        const items = sortedOptions();
+        if (activeIndex() >= items.length || activeIndex() < 0) {
+            activeIndex.set(items.findIndex(item => !item.disabled?.()));
+        }
+        if (activeIndex() === -1 && items.length > 0) {
+            activeIndex.set(0);
+        }
+        if (disabled() || items.length === 0) {
+            activeIndex.set(-1);
+        }
+    });
     const activeDescendant = computed(() => {
         const item = activeItem();
         if (disabled() || !item) {
@@ -18,20 +41,20 @@ function activeDescendantManager(options) {
      * @param item The item to activate.
      */
     const activate = (item) => {
-        if (!item) {
+        if (item === undefined) {
             activeIndex.set(-1);
             return;
         }
         if (disabled() || item.disabled?.()) {
             return;
         }
-        activeIndex.set(options.items().indexOf(item));
+        activeIndex.set(sortedOptions().indexOf(item));
     };
     /**
      * Activate the first enabled item in the active descendant group.
      */
     const first = () => {
-        const item = options.items().findIndex(item => !item.disabled?.());
+        const item = sortedOptions().findIndex(item => !item.disabled?.());
         if (item) {
             activeIndex.set(item);
         }
@@ -40,12 +63,11 @@ function activeDescendantManager(options) {
      * Activate the last enabled item in the active descendant group.
      */
     const last = () => {
-        const item = options
-            .items()
+        const item = sortedOptions()
             .reverse()
             .findIndex(item => !item.disabled?.());
         if (item !== -1) {
-            activeIndex.set(options.items().length - 1 - item);
+            activeIndex.set(sortedOptions().length - 1 - item);
         }
     };
     const findNextIndex = (items, currentIndex, direction, wrap) => {
@@ -67,7 +89,7 @@ function activeDescendantManager(options) {
      * Activate the next enabled item in the active descendant group.
      */
     const next = () => {
-        const items = options.items();
+        const items = sortedOptions();
         const nextIndex = findNextIndex(items, activeIndex(), 1, options.wrap?.() ?? false);
         if (nextIndex !== undefined) {
             activeIndex.set(nextIndex);
@@ -77,7 +99,7 @@ function activeDescendantManager(options) {
      * Activate the previous enabled item in the active descendant group.
      */
     const previous = () => {
-        const items = options.items();
+        const items = sortedOptions();
         const prevIndex = findNextIndex(items, activeIndex(), -1, options.wrap?.() ?? false);
         if (prevIndex !== undefined) {
             activeIndex.set(prevIndex);

package/fesm2022/ng-primitives-a11y.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-a11y.mjs","sources":["../../../../packages/ng-primitives/a11y/src/active-descendant/active-descendant.ts","../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden-state.ts","../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden.ts","../../../../packages/ng-primitives/a11y/src/ng-primitives-a11y.ts"],"sourcesContent":["import { computed, Signal, signal } from '@angular/core';\n\ninterface ActiveDescendantManagerOptions<T extends NgpActivatable> {\n  /**\n   * The disabled state of the active descendant group.\n   * @default false\n   */\n  disabled?: Signal<boolean>;\n  /**\n   * The items in the active descendant group.\n   */\n  items: Signal<T[]>;\n  /**\n   * Whether active descendant should wrap around.\n   * @default false\n   */\n  wrap?: Signal<boolean>;\n}\n\nexport interface NgpActivatable {\n  /**\n   * The id of the item.\n   */\n  id: Signal<string>;\n  /**\n   * Whether the item is disabled.\n   */\n  disabled?: Signal<boolean>;\n}\n\nexport function activeDescendantManager<T extends NgpActivatable>(\n  options: ActiveDescendantManagerOptions<T>,\n) {\n  const activeIndex = signal<number>(0);\n  const activeItem = computed<T | undefined>(() => options.items()?.[activeIndex()]);\n  const disabled = computed(\n    () => options.disabled?.() || options.items().every(item => item.disabled?.()),\n  );\n\n  const activeDescendant = computed(() => {\n    const item = activeItem();\n\n    if (disabled() || !item) {\n      return undefined;\n    }\n\n    return item.id();\n  });\n\n  /**\n   * Activate an item in the active descendant group.\n   * @param item The item to activate.\n   */\n  const activate = (item: T | undefined) => {\n    if (!item) {\n      activeIndex.set(-1);\n      return;\n    }\n\n    if (disabled() || item.disabled?.()) {\n      return;\n    }\n\n    activeIndex.set(options.items().indexOf(item));\n  };\n\n  /**\n   * Activate the first enabled item in the active descendant group.\n   */\n  const first = () => {\n    const item = options.items().findIndex(item => !item.disabled?.());\n\n    if (item) {\n      activeIndex.set(item);\n    }\n  };\n\n  /**\n   * Activate the last enabled item in the active descendant group.\n   */\n  const last = () => {\n    const item = options\n      .items()\n      .reverse()\n      .findIndex(item => !item.disabled?.());\n\n    if (item !== -1) {\n      activeIndex.set(options.items().length - 1 - item);\n    }\n  };\n\n  const findNextIndex = (\n    items: NgpActivatable[],\n    currentIndex: number,\n    direction: 1 | -1,\n    wrap: boolean,\n  ): number | undefined => {\n    let index = (currentIndex + direction + items.length) % items.length;\n\n    while (index !== currentIndex) {\n      const item = items[index];\n      if (item && !item.disabled?.()) {\n        return index;\n      }\n      index = (index + direction + items.length) % items.length;\n\n      if (\n        !wrap &&\n        ((direction === 1 && index === 0) || (direction === -1 && index === items.length - 1))\n      ) {\n        break;\n      }\n    }\n\n    return undefined;\n  };\n\n  /**\n   * Activate the next enabled item in the active descendant group.\n   */\n  const next = () => {\n    const items = options.items();\n    const nextIndex = findNextIndex(items, activeIndex(), 1, options.wrap?.() ?? false);\n\n    if (nextIndex !== undefined) {\n      activeIndex.set(nextIndex);\n    }\n  };\n\n  /**\n   * Activate the previous enabled item in the active descendant group.\n   */\n  const previous = () => {\n    const items = options.items();\n    const prevIndex = findNextIndex(items, activeIndex(), -1, options.wrap?.() ?? false);\n\n    if (prevIndex !== undefined) {\n      activeIndex.set(prevIndex);\n    }\n  };\n\n  /**\n   * Reset the active descendant group, clearing the active index.\n   */\n  const reset = () => {\n    activeIndex.set(-1);\n  };\n\n  return {\n    activeDescendant,\n    activeItem,\n    activate,\n    first,\n    last,\n    next,\n    previous,\n    reset,\n  };\n}\n","import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpVisuallyHidden } from './visually-hidden';\n\n/**\n * The state token  for the VisuallyHidden primitive.\n */\nexport const NgpVisuallyHiddenStateToken = createStateToken<NgpVisuallyHidden>('VisuallyHidden');\n\n/**\n * Provides the VisuallyHidden state.\n */\nexport const provideVisuallyHiddenState = createStateProvider(NgpVisuallyHiddenStateToken);\n\n/**\n * Injects the VisuallyHidden state.\n */\nexport const injectVisuallyHiddenState = createStateInjector(NgpVisuallyHiddenStateToken);\n\n/**\n * The VisuallyHidden state registration function.\n */\nexport const visuallyHiddenState = createState(NgpVisuallyHiddenStateToken);\n","import { Directive, computed, signal } from '@angular/core';\nimport { provideVisuallyHiddenState, visuallyHiddenState } from './visually-hidden-state';\n\n/**\n * Hide an element visually while keeping it present in the DOM.\n */\n@Directive({\n  selector: '[ngpVisuallyHidden]',\n  exportAs: 'ngpVisuallyHidden',\n  providers: [provideVisuallyHiddenState()],\n  host: {\n    '[style]': 'style()',\n  },\n})\nexport class NgpVisuallyHidden {\n  /**\n   * Whether the element is hidden.\n   */\n  protected readonly hidden = signal<boolean>(true);\n\n  protected readonly style = computed(() => {\n    if (!this.hidden()) {\n      return {};\n    }\n\n    return {\n      position: 'absolute',\n      width: '1px',\n      height: '1px',\n      margin: '-1px',\n      padding: '0',\n      overflow: 'hidden',\n      clip: 'rect(0, 0, 0, 0)',\n      whiteSpace: 'nowrap',\n      border: '0',\n      wordWrap: 'normal',\n      outline: '0',\n      '-webkit-appearance': 'none',\n      '-moz-appearance': 'none',\n      'inset-inline-start': '0',\n    };\n  });\n\n  protected readonly state = visuallyHiddenState<NgpVisuallyHidden>(this);\n\n  /**\n   * Set the element visibility.\n   * @param visible\n   */\n  setVisibility(visible: boolean): void {\n    this.hidden.set(!visible);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-primitives-a11y.mjs","sources":["../../../../packages/ng-primitives/a11y/src/active-descendant/active-descendant.ts","../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden-state.ts","../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden.ts","../../../../packages/ng-primitives/a11y/src/ng-primitives-a11y.ts"],"sourcesContent":["import { computed, effect, ElementRef, Signal, signal } from '@angular/core';\n\ninterface ActiveDescendantManagerOptions<T extends NgpActivatable> {\n  /**\n   * The disabled state of the active descendant group.\n   * @default false\n   */\n  disabled?: Signal<boolean>;\n  /**\n   * The items in the active descendant group.\n   */\n  items: Signal<T[]>;\n  /**\n   * Whether active descendant should wrap around.\n   * @default false\n   */\n  wrap?: Signal<boolean>;\n}\n\nexport interface NgpActivatable {\n  /**\n   * The id of the item.\n   */\n  id: Signal<string>;\n  /**\n   * Whether the item is disabled.\n   */\n  disabled?: Signal<boolean>;\n  /**\n   * The element that represents the item.\n   */\n  elementRef: ElementRef<HTMLElement>;\n}\n\nexport function activeDescendantManager<T extends NgpActivatable>(\n  options: ActiveDescendantManagerOptions<T>,\n) {\n  const sortedOptions = () =>\n    options\n      .items()\n      .slice()\n      .sort((a, b) => {\n        const aElement = a.elementRef.nativeElement;\n        const bElement = b.elementRef.nativeElement;\n        return aElement.compareDocumentPosition(bElement) & Node.DOCUMENT_POSITION_FOLLOWING\n          ? -1\n          : 1;\n      });\n\n  const activeIndex = signal<number>(0);\n  const activeItem = computed<T | undefined>(() => sortedOptions()?.[activeIndex()]);\n  const disabled = computed(\n    () => options.disabled?.() || options.items().every(item => item.disabled?.()),\n  );\n\n  // any time the item list changes, check if the active index is still valid\n  effect(() => {\n    const items = sortedOptions();\n    if (activeIndex() >= items.length || activeIndex() < 0) {\n      activeIndex.set(items.findIndex(item => !item.disabled?.()));\n    }\n    if (activeIndex() === -1 && items.length > 0) {\n      activeIndex.set(0);\n    }\n    if (disabled() || items.length === 0) {\n      activeIndex.set(-1);\n    }\n  });\n\n  const activeDescendant = computed(() => {\n    const item = activeItem();\n\n    if (disabled() || !item) {\n      return undefined;\n    }\n\n    return item.id();\n  });\n\n  /**\n   * Activate an item in the active descendant group.\n   * @param item The item to activate.\n   */\n  const activate = (item: T | undefined) => {\n    if (item === undefined) {\n      activeIndex.set(-1);\n      return;\n    }\n\n    if (disabled() || item.disabled?.()) {\n      return;\n    }\n\n    activeIndex.set(sortedOptions().indexOf(item));\n  };\n\n  /**\n   * Activate the first enabled item in the active descendant group.\n   */\n  const first = () => {\n    const item = sortedOptions().findIndex(item => !item.disabled?.());\n\n    if (item) {\n      activeIndex.set(item);\n    }\n  };\n\n  /**\n   * Activate the last enabled item in the active descendant group.\n   */\n  const last = () => {\n    const item = sortedOptions()\n      .reverse()\n      .findIndex(item => !item.disabled?.());\n\n    if (item !== -1) {\n      activeIndex.set(sortedOptions().length - 1 - item);\n    }\n  };\n\n  const findNextIndex = (\n    items: NgpActivatable[],\n    currentIndex: number,\n    direction: 1 | -1,\n    wrap: boolean,\n  ): number | undefined => {\n    let index = (currentIndex + direction + items.length) % items.length;\n\n    while (index !== currentIndex) {\n      const item = items[index];\n      if (item && !item.disabled?.()) {\n        return index;\n      }\n      index = (index + direction + items.length) % items.length;\n\n      if (\n        !wrap &&\n        ((direction === 1 && index === 0) || (direction === -1 && index === items.length - 1))\n      ) {\n        break;\n      }\n    }\n\n    return undefined;\n  };\n\n  /**\n   * Activate the next enabled item in the active descendant group.\n   */\n  const next = () => {\n    const items = sortedOptions();\n    const nextIndex = findNextIndex(items, activeIndex(), 1, options.wrap?.() ?? false);\n\n    if (nextIndex !== undefined) {\n      activeIndex.set(nextIndex);\n    }\n  };\n\n  /**\n   * Activate the previous enabled item in the active descendant group.\n   */\n  const previous = () => {\n    const items = sortedOptions();\n    const prevIndex = findNextIndex(items, activeIndex(), -1, options.wrap?.() ?? false);\n\n    if (prevIndex !== undefined) {\n      activeIndex.set(prevIndex);\n    }\n  };\n\n  /**\n   * Reset the active descendant group, clearing the active index.\n   */\n  const reset = () => {\n    activeIndex.set(-1);\n  };\n\n  return {\n    activeDescendant,\n    activeItem,\n    activate,\n    first,\n    last,\n    next,\n    previous,\n    reset,\n  };\n}\n","import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpVisuallyHidden } from './visually-hidden';\n\n/**\n * The state token  for the VisuallyHidden primitive.\n */\nexport const NgpVisuallyHiddenStateToken = createStateToken<NgpVisuallyHidden>('VisuallyHidden');\n\n/**\n * Provides the VisuallyHidden state.\n */\nexport const provideVisuallyHiddenState = createStateProvider(NgpVisuallyHiddenStateToken);\n\n/**\n * Injects the VisuallyHidden state.\n */\nexport const injectVisuallyHiddenState = createStateInjector(NgpVisuallyHiddenStateToken);\n\n/**\n * The VisuallyHidden state registration function.\n */\nexport const visuallyHiddenState = createState(NgpVisuallyHiddenStateToken);\n","import { Directive, computed, signal } from '@angular/core';\nimport { provideVisuallyHiddenState, visuallyHiddenState } from './visually-hidden-state';\n\n/**\n * Hide an element visually while keeping it present in the DOM.\n */\n@Directive({\n  selector: '[ngpVisuallyHidden]',\n  exportAs: 'ngpVisuallyHidden',\n  providers: [provideVisuallyHiddenState()],\n  host: {\n    '[style]': 'style()',\n  },\n})\nexport class NgpVisuallyHidden {\n  /**\n   * Whether the element is hidden.\n   */\n  protected readonly hidden = signal<boolean>(true);\n\n  protected readonly style = computed(() => {\n    if (!this.hidden()) {\n      return {};\n    }\n\n    return {\n      position: 'absolute',\n      width: '1px',\n      height: '1px',\n      margin: '-1px',\n      padding: '0',\n      overflow: 'hidden',\n      clip: 'rect(0, 0, 0, 0)',\n      whiteSpace: 'nowrap',\n      border: '0',\n      wordWrap: 'normal',\n      outline: '0',\n      '-webkit-appearance': 'none',\n      '-moz-appearance': 'none',\n      'inset-inline-start': '0',\n    };\n  });\n\n  protected readonly state = visuallyHiddenState<NgpVisuallyHidden>(this);\n\n  /**\n   * Set the element visibility.\n   * @param visible\n   */\n  setVisibility(visible: boolean): void {\n    this.hidden.set(!visible);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-primitives-combobox.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, Directive, computed, HostListener, booleanAttribute, inject, ViewContainerRef, TemplateRef, Injector, signal, output, afterNextRender } from '@angular/core';
-import * as i1 from 'ng-primitives/internal';
-import { injectElementRef, NgpExitAnimation, setupInteractions, explicitEffect, provideExitAnimationManager } from 'ng-primitives/internal';
+import { input, Directive, computed, HostListener, booleanAttribute, inject, ViewContainerRef, TemplateRef, Injector, signal, output, afterRenderEffect } from '@angular/core';
+import { injectElementRef, setupInteractions } from 'ng-primitives/internal';
 import { observeResize } from 'ng-primitives/resize';
 import { uniqueId } from 'ng-primitives/utils';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
@@ -45,14 +44,13 @@ class NgpComboboxDropdown {
         this.state().registerDropdown(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxDropdown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxDropdown, isStandalone: true, selector: "[ngpComboboxDropdown]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "id": "id()", "style.left.px": "state().overlay()?.position()?.x", "style.top.px": "state().overlay()?.position()?.y", "style.--ngp-combobox-transform-origin": "state().overlay()?.transformOrigin()", "style.--ngp-combobox-width.px": "comboboxDimensions().width", "style.--ngp-combobox-input-width.px": "inputDimensions().width", "style.--ngp-combobox-button-width.px": "buttonDimensions().width" } }, exportAs: ["ngpComboboxDropdown"], hostDirectives: [{ directive: i1.NgpExitAnimation }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxDropdown, isStandalone: true, selector: "[ngpComboboxDropdown]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "id": "id()", "style.left.px": "state().overlay()?.position()?.x", "style.top.px": "state().overlay()?.position()?.y", "style.--ngp-combobox-transform-origin": "state().overlay()?.transformOrigin()", "style.--ngp-combobox-width.px": "comboboxDimensions().width", "style.--ngp-combobox-input-width.px": "inputDimensions().width", "style.--ngp-combobox-button-width.px": "buttonDimensions().width" } }, exportAs: ["ngpComboboxDropdown"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxDropdown, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpComboboxDropdown]',
                     exportAs: 'ngpComboboxDropdown',
-                    hostDirectives: [NgpExitAnimation],
                     host: {
                         role: 'listbox',
                         '[id]': 'id()',
@@ -77,15 +75,6 @@ class NgpComboboxInput {
         this.elementRef = injectElementRef();
         /** The id of the input. */
         this.id = input(uniqueId('ngp-combobox-input'));
-        /**
-         * Extract the string representation of the value.
-         */
-        this.displayWith = input((value) => {
-            if (typeof value === 'string') {
-                return value;
-            }
-            throw new Error('You must provide a displayWith function for non-string values');
-        });
         /** The id of the dropdown. */
         this.dropdownId = computed(() => this.state().dropdown()?.id());
         /** The id of the active descendant. */
@@ -144,6 +133,12 @@ class NgpComboboxInput {
                 this.state().closeDropdown();
                 event.preventDefault();
                 break;
+            case 'Backspace':
+                // if the input is not empty then open the dropdown
+                if (this.elementRef.nativeElement.value.length > 0) {
+                    this.state().openDropdown();
+                }
+                break;
             default:
                 // Ignore keys with length > 1 (e.g., 'Shift', 'ArrowLeft', 'Enter', etc.)
                 // Filter out control/meta key combos (e.g., Ctrl+C)
@@ -187,7 +182,7 @@ class NgpComboboxInput {
         this.pointerFocused = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxInput, isStandalone: true, selector: "input[ngpComboboxInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "type": "text", "autocomplete": "off", "autocorrect": "off", "spellcheck": "false", "aria-haspopup": "listbox", "aria-autocomplete": "list" }, listeners: { "keydown": "handleKeydown($event)", "blur": "closeDropdown($event)", "focus": "highlightText($event)", "pointerdown": "handlePointerDown($event)" }, properties: { "id": "id()", "attr.aria-controls": "state().open() ? dropdownId() : undefined", "attr.aria-expanded": "state().open()", "attr.data-open": "state().open() ? \"\" : undefined", "attr.data-disabled": "state().disabled() ? \"\" : undefined", "attr.data-multiple": "state().multiple() ? \"\" : undefined", "attr.aria-activedescendant": "activeDescendant()", "disabled": "state().disabled()" } }, exportAs: ["ngpComboboxInput"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpComboboxInput, isStandalone: true, selector: "input[ngpComboboxInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "type": "text", "autocomplete": "off", "autocorrect": "off", "spellcheck": "false", "aria-haspopup": "listbox", "aria-autocomplete": "list" }, listeners: { "keydown": "handleKeydown($event)", "blur": "closeDropdown($event)", "focus": "highlightText($event)", "pointerdown": "handlePointerDown($event)" }, properties: { "id": "id()", "attr.aria-controls": "state().open() ? dropdownId() : undefined", "attr.aria-expanded": "state().open()", "attr.data-open": "state().open() ? \"\" : undefined", "attr.data-disabled": "state().disabled() ? \"\" : undefined", "attr.data-multiple": "state().multiple() ? \"\" : undefined", "attr.aria-activedescendant": "activeDescendant()", "disabled": "state().disabled()" } }, exportAs: ["ngpComboboxInput"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxInput, decorators: [{
             type: Directive,
@@ -487,10 +482,11 @@ class NgpCombobox {
         /** The state of the combobox. */
         this.state = comboboxState(this);
         // any time the active descendant changes, ensure we scroll it into view
-        explicitEffect([this.activeDescendantManager.activeItem], ([option]) => 
         // perform after next render to ensure the DOM is updated
         // e.g. the dropdown is open before the option is scrolled into view
-        afterNextRender({ write: () => option?.scrollIntoView?.() }, { injector: this.injector }));
+        afterRenderEffect({
+            write: () => this.activeDescendantManager.activeItem()?.scrollIntoView?.(),
+        });
     }
     /**
      * Open the dropdown.
@@ -529,12 +525,12 @@ class NgpCombobox {
      * Toggle the dropdown.
      * @internal
      */
-    toggleDropdown() {
+    async toggleDropdown() {
         if (this.open()) {
             this.closeDropdown();
         }
         else {
-            this.openDropdown();
+            await this.openDropdown();
         }
     }
     /**
@@ -589,6 +585,13 @@ class NgpCombobox {
         if (this.state.disabled()) {
             return;
         }
+        // if the state is single selection, we don't allow toggling
+        if (!this.state.multiple()) {
+            // always select the option in single selection mode even if it is already selected so that we update the input
+            this.selectOption(option);
+            return;
+        }
+        // otherwise toggle the option
         if (this.isOptionSelected(option)) {
             this.deselectOption(option);
         }
@@ -712,14 +715,14 @@ class NgpCombobox {
         this.options.update(options => options.filter(o => o !== option));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpCombobox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpCombobox, isStandalone: true, selector: "[ngpCombobox]", inputs: { value: { classPropertyName: "value", publicName: "ngpComboboxValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "ngpComboboxMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpComboboxDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpComboboxCompareWith", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpComboboxDropdownPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpComboboxValueChange", openChange: "ngpComboboxOpenChange" }, host: { properties: { "attr.data-open": "state.open() ? \"\" : undefined", "attr.data-disabled": "state.disabled() ? \"\" : undefined", "attr.data-multiple": "state.multiple() ? \"\" : undefined" } }, providers: [provideComboboxState(), provideExitAnimationManager()], exportAs: ["ngpCombobox"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpCombobox, isStandalone: true, selector: "[ngpCombobox]", inputs: { value: { classPropertyName: "value", publicName: "ngpComboboxValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "ngpComboboxMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpComboboxDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpComboboxCompareWith", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpComboboxDropdownPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpComboboxValueChange", openChange: "ngpComboboxOpenChange" }, host: { properties: { "attr.data-open": "state.open() ? \"\" : undefined", "attr.data-disabled": "state.disabled() ? \"\" : undefined", "attr.data-multiple": "state.multiple() ? \"\" : undefined" } }, providers: [provideComboboxState()], exportAs: ["ngpCombobox"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpCombobox, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpCombobox]',
                     exportAs: 'ngpCombobox',
-                    providers: [provideComboboxState(), provideExitAnimationManager()],
+                    providers: [provideComboboxState()],
                     host: {
                         '[attr.data-open]': 'state.open() ? "" : undefined',
                         '[attr.data-disabled]': 'state.disabled() ? "" : undefined',
@@ -748,8 +751,8 @@ class NgpComboboxButton {
         });
         this.state().registerButton(this);
     }
-    toggleDropdown() {
-        this.state().toggleDropdown();
+    async toggleDropdown() {
+        await this.state().toggleDropdown();
         this.state().input()?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpComboboxButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }