@angular/cdk-experimental 20.0.0-next.0 → 20.0.0-next.10

package/fesm2022/listbox.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, contentChildren, computed, input, booleanAttribute, model, Directive, ElementRef } from '@angular/core';
-import { ListboxPattern, OptionPattern } from '@angular/cdk-experimental/ui-patterns';
+import { inject, contentChildren, computed, input, booleanAttribute, model, signal, effect, Directive, ElementRef } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { _IdGenerator } from '@angular/cdk/a11y';
+import { L as ListboxPattern, O as OptionPattern } from './option-f_gNslw8.mjs';
+import './list-focus-Di7m_z_6.mjs';
 
 /**
  * A listbox container.
@@ -13,9 +14,9 @@ import { _IdGenerator } from '@angular/cdk/a11y';
  *
  * ```html
  * <ul cdkListbox>
- *   <li cdkOption>Item 1</li>
- *   <li cdkOption>Item 2</li>
- *   <li cdkOption>Item 3</li>
+ *   <li [value]="1" cdkOption>Item 1</li>
+ *   <li [value]="2" cdkOption>Item 2</li>
+ *   <li [value]="3" cdkOption>Item 3</li>
  * </ul>
  * ```
  */
@@ -33,7 +34,7 @@ class CdkListbox {
     /** Whether the list is vertically or horizontally oriented. */
     orientation = input('vertical');
     /** Whether multiple items in the list can be selected at once. */
-    multiselectable = input(false, { transform: booleanAttribute });
+    multi = input(false, { transform: booleanAttribute });
     /** Whether focus should wrap when navigating. */
     wrap = input(true, { transform: booleanAttribute });
     /** Whether disabled items in the list should be skipped when navigating. */
@@ -46,9 +47,10 @@ class CdkListbox {
     typeaheadDelay = input(0.5); // Picked arbitrarily.
     /** Whether the listbox is disabled. */
     disabled = input(false, { transform: booleanAttribute });
-    // TODO(wagnermaciel): Figure out how we want to expose control over the current listbox value.
-    /** The ids of the current selected items. */
-    selectedIds = model([]);
+    /** Whether the listbox is readonly. */
+    readonly = input(false, { transform: booleanAttribute });
+    /** The values of the current selected items. */
+    value = model([]);
     /** The current index that has been navigated to. */
     activeIndex = model(0);
     /** The Listbox UIPattern. */
@@ -57,10 +59,27 @@ class CdkListbox {
         items: this.items,
         textDirection: this.textDirection,
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkListbox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.0", type: CdkListbox, isStandalone: true, selector: "[cdkListbox]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, multiselectable: { classPropertyName: "multiselectable", publicName: "multiselectable", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, skipDisabled: { classPropertyName: "skipDisabled", publicName: "skipDisabled", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDelay: { classPropertyName: "typeaheadDelay", publicName: "typeaheadDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange", activeIndex: "activeIndexChange" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "pattern.onKeydown($event)", "pointerdown": "pattern.onPointerdown($event)" }, properties: { "attr.tabindex": "pattern.tabindex()", "attr.aria-disabled": "pattern.disabled()", "attr.aria-orientation": "pattern.orientation()", "attr.aria-multiselectable": "pattern.multiselectable()", "attr.aria-activedescendant": "pattern.activedescendant()" }, classAttribute: "cdk-listbox" }, queries: [{ propertyName: "_cdkOptions", predicate: CdkOption, descendants: true, isSignal: true }], exportAs: ["cdkListbox"], ngImport: i0 });
+    /** Whether the listbox has received focus yet. */
+    _hasFocused = signal(false);
+    /** Whether the options in the listbox have been initialized. */
+    _isViewInitialized = signal(false);
+    constructor() {
+        effect(() => {
+            if (this._isViewInitialized() && !this._hasFocused()) {
+                this.pattern.setDefaultState();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this._isViewInitialized.set(true);
+    }
+    onFocus() {
+        this._hasFocused.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.5", ngImport: i0, type: CdkListbox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.0-next.5", type: CdkListbox, isStandalone: true, selector: "[cdkListbox]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, skipDisabled: { classPropertyName: "skipDisabled", publicName: "skipDisabled", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDelay: { classPropertyName: "typeaheadDelay", publicName: "typeaheadDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", activeIndex: "activeIndexChange" }, host: { attributes: { "role": "listbox" }, listeners: { "keydown": "pattern.onKeydown($event)", "pointerdown": "pattern.onPointerdown($event)", "focusin": "onFocus()" }, properties: { "attr.tabindex": "pattern.tabindex()", "attr.aria-readonly": "pattern.readonly()", "attr.aria-disabled": "pattern.disabled()", "attr.aria-orientation": "pattern.orientation()", "attr.aria-multiselectable": "pattern.multi()", "attr.aria-activedescendant": "pattern.activedescendant()" }, classAttribute: "cdk-listbox" }, queries: [{ propertyName: "_cdkOptions", predicate: CdkOption, descendants: true, isSignal: true }], exportAs: ["cdkListbox"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkListbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.5", ngImport: i0, type: CdkListbox, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkListbox]',
@@ -69,15 +88,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
                         'role': 'listbox',
                         'class': 'cdk-listbox',
                         '[attr.tabindex]': 'pattern.tabindex()',
+                        '[attr.aria-readonly]': 'pattern.readonly()',
                         '[attr.aria-disabled]': 'pattern.disabled()',
                         '[attr.aria-orientation]': 'pattern.orientation()',
-                        '[attr.aria-multiselectable]': 'pattern.multiselectable()',
+                        '[attr.aria-multiselectable]': 'pattern.multi()',
                         '[attr.aria-activedescendant]': 'pattern.activedescendant()',
                         '(keydown)': 'pattern.onKeydown($event)',
                         '(pointerdown)': 'pattern.onPointerdown($event)',
+                        '(focusin)': 'onFocus()',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /** A selectable option in a CdkListbox. */
 class CdkOption {
     /** A reference to the option element. */
@@ -89,6 +110,8 @@ class CdkOption {
     // TODO(wagnermaciel): https://github.com/angular/components/pull/30495#discussion_r1972601144.
     /** A unique identifier for the option. */
     id = computed(() => this._generatedId);
+    /** The value of the option. */
+    value = input.required();
     // TODO(wagnermaciel): See if we want to change how we handle this since textContent is not
     // reactive. See https://github.com/angular/components/pull/30495#discussion_r1961260216.
     /** The text used by the typeahead search. */
@@ -105,14 +128,15 @@ class CdkOption {
     pattern = new OptionPattern({
         ...this,
         id: this.id,
+        value: this.value,
         listbox: this.listbox,
         element: this.element,
         searchTerm: this.searchTerm,
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.0", type: CdkOption, isStandalone: true, selector: "[cdkOption]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, properties: { "attr.tabindex": "pattern.tabindex()", "attr.aria-selected": "pattern.selected()", "attr.aria-disabled": "pattern.disabled()" }, classAttribute: "cdk-option" }, exportAs: ["cdkOption"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.5", ngImport: i0, type: CdkOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0-next.5", type: CdkOption, isStandalone: true, selector: "[cdkOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, properties: { "class.cdk-active": "pattern.active()", "attr.tabindex": "pattern.tabindex()", "attr.aria-selected": "pattern.selected()", "attr.aria-disabled": "pattern.disabled()" }, classAttribute: "cdk-option" }, exportAs: ["cdkOption"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CdkOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.5", ngImport: i0, type: CdkOption, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkOption]',
@@ -120,6 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
                     host: {
                         'role': 'option',
                         'class': 'cdk-option',
+                        '[class.cdk-active]': 'pattern.active()',
                         '[attr.tabindex]': 'pattern.tabindex()',
                         '[attr.aria-selected]': 'pattern.selected()',
                         '[attr.aria-disabled]': 'pattern.disabled()',
@@ -127,9 +152,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
                 }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
- */
-
 export { CdkListbox, CdkOption };
 //# sourceMappingURL=listbox.mjs.map

package/fesm2022/listbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"listbox.mjs","sources":["../../../../../../src/cdk-experimental/listbox/listbox.ts","../../../../../../src/cdk-experimental/listbox/listbox_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {\n  booleanAttribute,\n  computed,\n  contentChildren,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  model,\n} from '@angular/core';\nimport {ListboxPattern, OptionPattern} from '@angular/cdk-experimental/ui-patterns';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {toSignal} from '@angular/core/rxjs-interop';\nimport {_IdGenerator} from '@angular/cdk/a11y';\n\n/**\n * A listbox container.\n *\n * Listboxes are used to display a list of items for a user to select from. The CdkListbox is meant\n * to be used in conjunction with CdkOption as follows:\n *\n * ```html\n * <ul cdkListbox>\n *   <li cdkOption>Item 1</li>\n *   <li cdkOption>Item 2</li>\n *   <li cdkOption>Item 3</li>\n * </ul>\n * ```\n */\n@Directive({\n  selector: '[cdkListbox]',\n  exportAs: 'cdkListbox',\n  host: {\n    'role': 'listbox',\n    'class': 'cdk-listbox',\n    '[attr.tabindex]': 'pattern.tabindex()',\n    '[attr.aria-disabled]': 'pattern.disabled()',\n    '[attr.aria-orientation]': 'pattern.orientation()',\n    '[attr.aria-multiselectable]': 'pattern.multiselectable()',\n    '[attr.aria-activedescendant]': 'pattern.activedescendant()',\n    '(keydown)': 'pattern.onKeydown($event)',\n    '(pointerdown)': 'pattern.onPointerdown($event)',\n  },\n})\nexport class CdkListbox {\n  /** The directionality (LTR / RTL) context for the application (or a subtree of it). */\n  private readonly _directionality = inject(Directionality);\n\n  /** The CdkOptions nested inside of the CdkListbox. */\n  private readonly _cdkOptions = contentChildren(CdkOption, {descendants: true});\n\n  /** A signal wrapper for directionality. */\n  protected textDirection = toSignal(this._directionality.change, {\n    initialValue: this._directionality.value,\n  });\n\n  /** The Option UIPatterns of the child CdkOptions. */\n  protected items = computed(() => this._cdkOptions().map(option => option.pattern));\n\n  /** Whether the list is vertically or horizontally oriented. */\n  orientation = input<'vertical' | 'horizontal'>('vertical');\n\n  /** Whether multiple items in the list can be selected at once. */\n  multiselectable = input(false, {transform: booleanAttribute});\n\n  /** Whether focus should wrap when navigating. */\n  wrap = input(true, {transform: booleanAttribute});\n\n  /** Whether disabled items in the list should be skipped when navigating. */\n  skipDisabled = input(true, {transform: booleanAttribute});\n\n  /** The focus strategy used by the list. */\n  focusMode = input<'roving' | 'activedescendant'>('roving');\n\n  /** The selection strategy used by the list. */\n  selectionMode = input<'follow' | 'explicit'>('follow');\n\n  /** The amount of time before the typeahead search is reset. */\n  typeaheadDelay = input<number>(0.5); // Picked arbitrarily.\n\n  /** Whether the listbox is disabled. */\n  disabled = input(false, {transform: booleanAttribute});\n\n  // TODO(wagnermaciel): Figure out how we want to expose control over the current listbox value.\n  /** The ids of the current selected items. */\n  selectedIds = model<string[]>([]);\n\n  /** The current index that has been navigated to. */\n  activeIndex = model<number>(0);\n\n  /** The Listbox UIPattern. */\n  pattern: ListboxPattern = new ListboxPattern({\n    ...this,\n    items: this.items,\n    textDirection: this.textDirection,\n  });\n}\n\n/** A selectable option in a CdkListbox. */\n@Directive({\n  selector: '[cdkOption]',\n  exportAs: 'cdkOption',\n  host: {\n    'role': 'option',\n    'class': 'cdk-option',\n    '[attr.tabindex]': 'pattern.tabindex()',\n    '[attr.aria-selected]': 'pattern.selected()',\n    '[attr.aria-disabled]': 'pattern.disabled()',\n  },\n})\nexport class CdkOption {\n  /** A reference to the option element. */\n  private readonly _elementRef = inject(ElementRef);\n\n  /** The parent CdkListbox. */\n  private readonly _cdkListbox = inject(CdkListbox);\n\n  /** A unique identifier for the option. */\n  private readonly _generatedId = inject(_IdGenerator).getId('cdk-option-');\n\n  // TODO(wagnermaciel): https://github.com/angular/components/pull/30495#discussion_r1972601144.\n  /** A unique identifier for the option. */\n  protected id = computed(() => this._generatedId);\n\n  // TODO(wagnermaciel): See if we want to change how we handle this since textContent is not\n  // reactive. See https://github.com/angular/components/pull/30495#discussion_r1961260216.\n  /** The text used by the typeahead search. */\n  protected searchTerm = computed(() => this.label() ?? this.element().textContent);\n\n  /** The parent Listbox UIPattern. */\n  protected listbox = computed(() => this._cdkListbox.pattern);\n\n  /** A reference to the option element to be focused on navigation. */\n  protected element = computed(() => this._elementRef.nativeElement);\n\n  /** Whether an item is disabled. */\n  disabled = input(false, {transform: booleanAttribute});\n\n  /** The text used by the typeahead search. */\n  label = input<string>();\n\n  /** The Option UIPattern. */\n  pattern = new OptionPattern({\n    ...this,\n    id: this.id,\n    listbox: this.listbox,\n    element: this.element,\n    searchTerm: this.searchTerm,\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAuBA;;;;;;;;;;;;;AAaG;MAgBU,UAAU,CAAA;;AAEJ,IAAA,eAAe,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;;IAGzC,WAAW,GAAG,eAAe,CAAC,SAAS,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,CAAC,CAAC;;IAGrE,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;AAC9D,QAAA,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK;AACzC,KAAA,CAAC,CAAC;;IAGO,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;;AAGnF,IAAA,WAAW,GAAG,KAAK,CAA4B,UAAU,CAAC,CAAC;;IAG3D,eAAe,GAAG,KAAK,CAAC,KAAK,EAAE,EAAC,SAAS,EAAE,gBAAgB,EAAC,CAAC,CAAC;;IAG9D,IAAI,GAAG,KAAK,CAAC,IAAI,EAAE,EAAC,SAAS,EAAE,gBAAgB,EAAC,CAAC,CAAC;;IAGlD,YAAY,GAAG,KAAK,CAAC,IAAI,EAAE,EAAC,SAAS,EAAE,gBAAgB,EAAC,CAAC,CAAC;;AAG1D,IAAA,SAAS,GAAG,KAAK,CAAgC,QAAQ,CAAC,CAAC;;AAG3D,IAAA,aAAa,GAAG,KAAK,CAAwB,QAAQ,CAAC,CAAC;;AAGvD,IAAA,cAAc,GAAG,KAAK,CAAS,GAAG,CAAC,CAAC;;IAGpC,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAC,SAAS,EAAE,gBAAgB,EAAC,CAAC,CAAC;;;AAIvD,IAAA,WAAW,GAAG,KAAK,CAAW,EAAE,CAAC,CAAC;;AAGlC,IAAA,WAAW,GAAG,KAAK,CAAS,CAAC,CAAC,CAAC;;IAG/B,OAAO,GAAmB,IAAI,cAAc,CAAC;AAC3C,QAAA,GAAG,IAAI;QACP,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,aAAa,EAAE,IAAI,CAAC,aAAa;AAClC,KAAA,CAAC,CAAC;uGAnDQ,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,69DAK0B,SAAS,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAL7C,UAAU,EAAA,UAAA,EAAA,CAAA;kBAftB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,IAAI,EAAE;AACJ,wBAAA,MAAM,EAAE,SAAS;AACjB,wBAAA,OAAO,EAAE,aAAa;AACtB,wBAAA,iBAAiB,EAAE,oBAAoB;AACvC,wBAAA,sBAAsB,EAAE,oBAAoB;AAC5C,wBAAA,yBAAyB,EAAE,uBAAuB;AAClD,wBAAA,6BAA6B,EAAE,2BAA2B;AAC1D,wBAAA,8BAA8B,EAAE,4BAA4B;AAC5D,wBAAA,WAAW,EAAE,2BAA2B;AACxC,wBAAA,eAAe,EAAE,+BAA+B;AACjD,qBAAA;AACF,iBAAA,CAAA;;AAuDD;MAYa,SAAS,CAAA;;AAEH,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;;AAGjC,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;;IAGjC,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;;;IAIhE,EAAE,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,CAAC;;;;AAKvC,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,WAAW,CAAC,CAAC;;AAGxE,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;;AAGnD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;;IAGnE,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAC,SAAS,EAAE,gBAAgB,EAAC,CAAC,CAAC;;IAGvD,KAAK,GAAG,KAAK,EAAU,CAAC;;IAGxB,OAAO,GAAG,IAAI,aAAa,CAAC;AAC1B,QAAA,GAAG,IAAI;QACP,EAAE,EAAE,IAAI,CAAC,EAAE;QACX,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,UAAU,EAAE,IAAI,CAAC,UAAU;AAC5B,KAAA,CAAC,CAAC;uGAtCQ,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;2FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,EAAA,cAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAT,SAAS,EAAA,UAAA,EAAA,CAAA;kBAXrB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,IAAI,EAAE;AACJ,wBAAA,MAAM,EAAE,QAAQ;AAChB,wBAAA,OAAO,EAAE,YAAY;AACrB,wBAAA,iBAAiB,EAAE,oBAAoB;AACvC,wBAAA,sBAAsB,EAAE,oBAAoB;AAC5C,wBAAA,sBAAsB,EAAE,oBAAoB;AAC7C,qBAAA;AACF,iBAAA,CAAA;;;ACrHD;;AAEG;;;;"}
+{"version":3,"file":"listbox.mjs","sources":["../../../../../darwin_arm64-fastbuild-ST-46c76129e412/bin/src/cdk-experimental/listbox/listbox.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {\n  AfterViewInit,\n  booleanAttribute,\n  computed,\n  contentChildren,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  model,\n  signal,\n} from '@angular/core';\nimport {ListboxPattern, OptionPattern} from '../ui-patterns';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {toSignal} from '@angular/core/rxjs-interop';\nimport {_IdGenerator} from '@angular/cdk/a11y';\n\n/**\n * A listbox container.\n *\n * Listboxes are used to display a list of items for a user to select from. The CdkListbox is meant\n * to be used in conjunction with CdkOption as follows:\n *\n * ```html\n * <ul cdkListbox>\n *   <li [value]=\"1\" cdkOption>Item 1</li>\n *   <li [value]=\"2\" cdkOption>Item 2</li>\n *   <li [value]=\"3\" cdkOption>Item 3</li>\n * </ul>\n * ```\n */\n@Directive({\n  selector: '[cdkListbox]',\n  exportAs: 'cdkListbox',\n  host: {\n    'role': 'listbox',\n    'class': 'cdk-listbox',\n    '[attr.tabindex]': 'pattern.tabindex()',\n    '[attr.aria-readonly]': 'pattern.readonly()',\n    '[attr.aria-disabled]': 'pattern.disabled()',\n    '[attr.aria-orientation]': 'pattern.orientation()',\n    '[attr.aria-multiselectable]': 'pattern.multi()',\n    '[attr.aria-activedescendant]': 'pattern.activedescendant()',\n    '(keydown)': 'pattern.onKeydown($event)',\n    '(pointerdown)': 'pattern.onPointerdown($event)',\n    '(focusin)': 'onFocus()',\n  },\n})\nexport class CdkListbox<V> implements AfterViewInit {\n  /** The directionality (LTR / RTL) context for the application (or a subtree of it). */\n  private readonly _directionality = inject(Directionality);\n\n  /** The CdkOptions nested inside of the CdkListbox. */\n  private readonly _cdkOptions = contentChildren(CdkOption, {descendants: true});\n\n  /** A signal wrapper for directionality. */\n  protected textDirection = toSignal(this._directionality.change, {\n    initialValue: this._directionality.value,\n  });\n\n  /** The Option UIPatterns of the child CdkOptions. */\n  protected items = computed(() => this._cdkOptions().map(option => option.pattern));\n\n  /** Whether the list is vertically or horizontally oriented. */\n  orientation = input<'vertical' | 'horizontal'>('vertical');\n\n  /** Whether multiple items in the list can be selected at once. */\n  multi = input(false, {transform: booleanAttribute});\n\n  /** Whether focus should wrap when navigating. */\n  wrap = input(true, {transform: booleanAttribute});\n\n  /** Whether disabled items in the list should be skipped when navigating. */\n  skipDisabled = input(true, {transform: booleanAttribute});\n\n  /** The focus strategy used by the list. */\n  focusMode = input<'roving' | 'activedescendant'>('roving');\n\n  /** The selection strategy used by the list. */\n  selectionMode = input<'follow' | 'explicit'>('follow');\n\n  /** The amount of time before the typeahead search is reset. */\n  typeaheadDelay = input<number>(0.5); // Picked arbitrarily.\n\n  /** Whether the listbox is disabled. */\n  disabled = input(false, {transform: booleanAttribute});\n\n  /** Whether the listbox is readonly. */\n  readonly = input(false, {transform: booleanAttribute});\n\n  /** The values of the current selected items. */\n  value = model<V[]>([]);\n\n  /** The current index that has been navigated to. */\n  activeIndex = model<number>(0);\n\n  /** The Listbox UIPattern. */\n  pattern: ListboxPattern<V> = new ListboxPattern<V>({\n    ...this,\n    items: this.items,\n    textDirection: this.textDirection,\n  });\n\n  /** Whether the listbox has received focus yet. */\n  private _hasFocused = signal(false);\n\n  /** Whether the options in the listbox have been initialized. */\n  private _isViewInitialized = signal(false);\n\n  constructor() {\n    effect(() => {\n      if (this._isViewInitialized() && !this._hasFocused()) {\n        this.pattern.setDefaultState();\n      }\n    });\n  }\n\n  ngAfterViewInit() {\n    this._isViewInitialized.set(true);\n  }\n\n  onFocus() {\n    this._hasFocused.set(true);\n  }\n}\n\n/** A selectable option in a CdkListbox. */\n@Directive({\n  selector: '[cdkOption]',\n  exportAs: 'cdkOption',\n  host: {\n    'role': 'option',\n    'class': 'cdk-option',\n    '[class.cdk-active]': 'pattern.active()',\n    '[attr.tabindex]': 'pattern.tabindex()',\n    '[attr.aria-selected]': 'pattern.selected()',\n    '[attr.aria-disabled]': 'pattern.disabled()',\n  },\n})\nexport class CdkOption<V> {\n  /** A reference to the option element. */\n  private readonly _elementRef = inject(ElementRef);\n\n  /** The parent CdkListbox. */\n  private readonly _cdkListbox = inject(CdkListbox);\n\n  /** A unique identifier for the option. */\n  private readonly _generatedId = inject(_IdGenerator).getId('cdk-option-');\n\n  // TODO(wagnermaciel): https://github.com/angular/components/pull/30495#discussion_r1972601144.\n  /** A unique identifier for the option. */\n  protected id = computed(() => this._generatedId);\n\n  /** The value of the option. */\n  protected value = input.required<V>();\n\n  // TODO(wagnermaciel): See if we want to change how we handle this since textContent is not\n  // reactive. See https://github.com/angular/components/pull/30495#discussion_r1961260216.\n  /** The text used by the typeahead search. */\n  protected searchTerm = computed(() => this.label() ?? this.element().textContent);\n\n  /** The parent Listbox UIPattern. */\n  protected listbox = computed(() => this._cdkListbox.pattern);\n\n  /** A reference to the option element to be focused on navigation. */\n  protected element = computed(() => this._elementRef.nativeElement);\n\n  /** Whether an item is disabled. */\n  disabled = input(false, {transform: booleanAttribute});\n\n  /** The text used by the typeahead search. */\n  label = input<string>();\n\n  /** The Option UIPattern. */\n  pattern = new OptionPattern<V>({\n    ...this,\n    id: this.id,\n    value: this.value,\n    listbox: this.listbox,\n    element: this.element,\n    searchTerm: this.searchTerm,\n  });\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/option-f_gNslw8.mjs

@@ -0,0 +1,367 @@
+import { M as ModifierKey, L as ListFocus, a as ListSelection, b as ListNavigation, K as KeyboardEventManager, P as PointerEventManager } from './list-focus-Di7m_z_6.mjs';
+import { computed, signal } from '@angular/core';
+
+/** Controls typeahead for a list of items. */
+class ListTypeahead {
+    inputs;
+    /** A reference to the timeout for resetting the typeahead search. */
+    timeout;
+    /** The focus controller of the parent list. */
+    focusManager;
+    /** Whether the user is actively typing a typeahead search query. */
+    isTyping = computed(() => this._query().length > 0);
+    /** Keeps track of the characters that typeahead search is being called with. */
+    _query = signal('');
+    /** The index where that the typeahead search was initiated from. */
+    _startIndex = signal(undefined);
+    constructor(inputs) {
+        this.inputs = inputs;
+        this.focusManager = inputs.focusManager;
+    }
+    /** Performs a typeahead search, appending the given character to the search string. */
+    search(char) {
+        if (char.length !== 1) {
+            return false;
+        }
+        if (!this.isTyping() && char === ' ') {
+            return false;
+        }
+        if (this._startIndex() === undefined) {
+            this._startIndex.set(this.focusManager.inputs.activeIndex());
+        }
+        clearTimeout(this.timeout);
+        this._query.update(q => q + char.toLowerCase());
+        const item = this._getItem();
+        if (item) {
+            this.focusManager.focus(item);
+        }
+        this.timeout = setTimeout(() => {
+            this._query.set('');
+            this._startIndex.set(undefined);
+        }, this.inputs.typeaheadDelay() * 1000);
+        return true;
+    }
+    /**
+     * Returns the first item whose search term matches the
+     * current query starting from the the current anchor index.
+     */
+    _getItem() {
+        let items = this.focusManager.inputs.items();
+        const after = items.slice(this._startIndex() + 1);
+        const before = items.slice(0, this._startIndex());
+        items = after.concat(before);
+        items.push(this.inputs.items()[this._startIndex()]);
+        const focusableItems = [];
+        for (const item of items) {
+            if (this.focusManager.isFocusable(item)) {
+                focusableItems.push(item);
+            }
+        }
+        return focusableItems.find(i => i.searchTerm().toLowerCase().startsWith(this._query()));
+    }
+}
+
+/** Controls the state of a listbox. */
+class ListboxPattern {
+    inputs;
+    /** Controls navigation for the listbox. */
+    navigation;
+    /** Controls selection for the listbox. */
+    selection;
+    /** Controls typeahead for the listbox. */
+    typeahead;
+    /** Controls focus for the listbox. */
+    focusManager;
+    /** Whether the list is vertically or horizontally oriented. */
+    orientation;
+    /** Whether the listbox is disabled. */
+    disabled = computed(() => this.focusManager.isListDisabled());
+    /** Whether the listbox is readonly. */
+    readonly;
+    /** The tabindex of the listbox. */
+    tabindex = computed(() => this.focusManager.getListTabindex());
+    /** The id of the current active item. */
+    activedescendant = computed(() => this.focusManager.getActiveDescendant());
+    /** Whether multiple items in the list can be selected at once. */
+    multi;
+    /** The number of items in the listbox. */
+    setsize = computed(() => this.navigation.inputs.items().length);
+    /** Whether the listbox selection follows focus. */
+    followFocus = computed(() => this.inputs.selectionMode() === 'follow');
+    /** Whether the listbox should wrap. Used to disable wrapping while range selecting. */
+    wrap = signal(true);
+    /** The key used to navigate to the previous item in the list. */
+    prevKey = computed(() => {
+        if (this.inputs.orientation() === 'vertical') {
+            return 'ArrowUp';
+        }
+        return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+    });
+    /** The key used to navigate to the next item in the list. */
+    nextKey = computed(() => {
+        if (this.inputs.orientation() === 'vertical') {
+            return 'ArrowDown';
+        }
+        return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+    });
+    /** Represents the space key. Does nothing when the user is actively using typeahead. */
+    dynamicSpaceKey = computed(() => (this.typeahead.isTyping() ? '' : ' '));
+    /** The regexp used to decide if a key should trigger typeahead. */
+    typeaheadRegexp = /^.$/; // TODO: Ignore spaces?
+    /**
+     * The uncommitted index for selecting a range of options.
+     *
+     * NOTE: This is subtly distinct from the "rangeStartIndex" in the ListSelection behavior.
+     * The anchorIndex does not necessarily represent the start of a range, but represents the most
+     * recent index where the user showed intent to begin a range selection. Usually, this is wherever
+     * the user most recently pressed the "Shift" key, but if the user presses shift + space to select
+     * from the anchor, the user is not intending to start a new range from this index.
+     *
+     * In other words, "rangeStartIndex" is only set when a user commits to starting a range selection
+     * while "anchorIndex" is set whenever a user indicates they may be starting a range selection.
+     */
+    anchorIndex = signal(0);
+    /** The keydown event manager for the listbox. */
+    keydown = computed(() => {
+        const manager = new KeyboardEventManager();
+        if (this.readonly()) {
+            return manager
+                .on(this.prevKey, () => this.prev())
+                .on(this.nextKey, () => this.next())
+                .on('Home', () => this.first())
+                .on('End', () => this.last())
+                .on(this.typeaheadRegexp, e => this.search(e.key));
+        }
+        if (!this.followFocus()) {
+            manager
+                .on(this.prevKey, () => this.prev())
+                .on(this.nextKey, () => this.next())
+                .on('Home', () => this.first())
+                .on('End', () => this.last())
+                .on(this.typeaheadRegexp, e => this.search(e.key));
+        }
+        if (this.followFocus()) {
+            manager
+                .on(this.prevKey, () => this.prev({ selectOne: true }))
+                .on(this.nextKey, () => this.next({ selectOne: true }))
+                .on('Home', () => this.first({ selectOne: true }))
+                .on('End', () => this.last({ selectOne: true }))
+                .on(this.typeaheadRegexp, e => this.search(e.key, { selectOne: true }));
+        }
+        if (this.inputs.multi()) {
+            manager
+                .on(ModifierKey.Any, 'Shift', () => this.anchorIndex.set(this.inputs.activeIndex()))
+                .on(ModifierKey.Shift, this.prevKey, () => this.prev({ selectRange: true }))
+                .on(ModifierKey.Shift, this.nextKey, () => this.next({ selectRange: true }))
+                .on([ModifierKey.Ctrl | ModifierKey.Shift, ModifierKey.Meta | ModifierKey.Shift], 'Home', () => this.first({ selectRange: true, anchor: false }))
+                .on([ModifierKey.Ctrl | ModifierKey.Shift, ModifierKey.Meta | ModifierKey.Shift], 'End', () => this.last({ selectRange: true, anchor: false }))
+                .on(ModifierKey.Shift, 'Enter', () => this._updateSelection({ selectRange: true, anchor: false }))
+                .on(ModifierKey.Shift, this.dynamicSpaceKey, () => this._updateSelection({ selectRange: true, anchor: false }));
+        }
+        if (!this.followFocus() && this.inputs.multi()) {
+            manager
+                .on(this.dynamicSpaceKey, () => this.selection.toggle())
+                .on('Enter', () => this.selection.toggle())
+                .on([ModifierKey.Ctrl, ModifierKey.Meta], 'A', () => this.selection.toggleAll());
+        }
+        if (!this.followFocus() && !this.inputs.multi()) {
+            manager.on(this.dynamicSpaceKey, () => this.selection.toggleOne());
+            manager.on('Enter', () => this.selection.toggleOne());
+        }
+        if (this.inputs.multi() && this.followFocus()) {
+            manager
+                .on([ModifierKey.Ctrl, ModifierKey.Meta], this.prevKey, () => this.prev())
+                .on([ModifierKey.Ctrl, ModifierKey.Meta], this.nextKey, () => this.next())
+                .on([ModifierKey.Ctrl, ModifierKey.Meta], ' ', () => this.selection.toggle())
+                .on([ModifierKey.Ctrl, ModifierKey.Meta], 'Enter', () => this.selection.toggle())
+                .on([ModifierKey.Ctrl, ModifierKey.Meta], 'Home', () => this.first())
+                .on([ModifierKey.Ctrl, ModifierKey.Meta], 'End', () => this.last())
+                .on([ModifierKey.Ctrl, ModifierKey.Meta], 'A', () => {
+                this.selection.toggleAll();
+                this.selection.select(); // Ensure the currect option remains selected.
+            });
+        }
+        return manager;
+    });
+    /** The pointerdown event manager for the listbox. */
+    pointerdown = computed(() => {
+        const manager = new PointerEventManager();
+        if (this.readonly()) {
+            return manager.on(e => this.goto(e));
+        }
+        if (this.multi()) {
+            manager.on(ModifierKey.Shift, e => this.goto(e, { selectRange: true }));
+        }
+        if (!this.multi() && this.followFocus()) {
+            return manager.on(e => this.goto(e, { selectOne: true }));
+        }
+        if (!this.multi() && !this.followFocus()) {
+            return manager.on(e => this.goto(e, { toggle: true }));
+        }
+        if (this.multi() && this.followFocus()) {
+            return manager
+                .on(e => this.goto(e, { selectOne: true }))
+                .on(ModifierKey.Ctrl, e => this.goto(e, { toggle: true }));
+        }
+        if (this.multi() && !this.followFocus()) {
+            return manager.on(e => this.goto(e, { toggle: true }));
+        }
+        return manager;
+    });
+    constructor(inputs) {
+        this.inputs = inputs;
+        this.readonly = inputs.readonly;
+        this.orientation = inputs.orientation;
+        this.multi = inputs.multi;
+        this.focusManager = new ListFocus(inputs);
+        this.selection = new ListSelection({ ...inputs, focusManager: this.focusManager });
+        this.typeahead = new ListTypeahead({ ...inputs, focusManager: this.focusManager });
+        this.navigation = new ListNavigation({
+            ...inputs,
+            focusManager: this.focusManager,
+            wrap: computed(() => this.wrap() && this.inputs.wrap()),
+        });
+    }
+    /** Handles keydown events for the listbox. */
+    onKeydown(event) {
+        if (!this.disabled()) {
+            this.keydown().handle(event);
+        }
+    }
+    onPointerdown(event) {
+        if (!this.disabled()) {
+            this.pointerdown().handle(event);
+        }
+    }
+    /** Navigates to the first option in the listbox. */
+    first(opts) {
+        this._navigate(opts, () => this.navigation.first());
+    }
+    /** Navigates to the last option in the listbox. */
+    last(opts) {
+        this._navigate(opts, () => this.navigation.last());
+    }
+    /** Navigates to the next option in the listbox. */
+    next(opts) {
+        this._navigate(opts, () => this.navigation.next());
+    }
+    /** Navigates to the previous option in the listbox. */
+    prev(opts) {
+        this._navigate(opts, () => this.navigation.prev());
+    }
+    /** Navigates to the given item in the listbox. */
+    goto(event, opts) {
+        const item = this._getItem(event);
+        this._navigate(opts, () => this.navigation.goto(item));
+    }
+    /** Handles typeahead search navigation for the listbox. */
+    search(char, opts) {
+        this._navigate(opts, () => this.typeahead.search(char));
+    }
+    /**
+     * Sets the listbox to it's default initial state.
+     *
+     * Sets the active index of the listbox to the first focusable selected
+     * item if one exists. Otherwise, sets focus to the first focusable item.
+     *
+     * This method should be called once the listbox and it's options are properly initialized,
+     * meaning the ListboxPattern and OptionPatterns should have references to each other before this
+     * is called.
+     */
+    setDefaultState() {
+        let firstItem = null;
+        for (const item of this.inputs.items()) {
+            if (this.focusManager.isFocusable(item)) {
+                if (!firstItem) {
+                    firstItem = item;
+                }
+                if (item.selected()) {
+                    this.inputs.activeIndex.set(item.index());
+                    return;
+                }
+            }
+        }
+        if (firstItem) {
+            this.inputs.activeIndex.set(firstItem.index());
+        }
+    }
+    /**
+     * Safely performs a navigation operation.
+     *
+     * Handles conditionally disabling wrapping for when a navigation
+     * operation is occurring while the user is selecting a range of options.
+     *
+     * Handles boilerplate calling of focus & selection operations. Also ensures these
+     * additional operations are only called if the navigation operation moved focus to a new option.
+     */
+    _navigate(opts = {}, operation) {
+        if (opts?.selectRange) {
+            this.wrap.set(false);
+            this.selection.rangeStartIndex.set(this.anchorIndex());
+        }
+        const moved = operation();
+        if (moved) {
+            this._updateSelection(opts);
+        }
+        this.wrap.set(true);
+    }
+    /** Handles updating selection for the listbox. */
+    _updateSelection(opts = { anchor: true }) {
+        if (opts.toggle) {
+            this.selection.toggle();
+        }
+        if (opts.selectOne) {
+            this.selection.selectOne();
+        }
+        if (opts.selectRange) {
+            this.selection.selectRange();
+        }
+        if (!opts.anchor) {
+            this.anchorIndex.set(this.selection.rangeStartIndex());
+        }
+    }
+    _getItem(e) {
+        if (!(e.target instanceof HTMLElement)) {
+            return;
+        }
+        const element = e.target.closest('[role="option"]');
+        return this.inputs.items().find(i => i.element() === element);
+    }
+}
+
+/** Represents an option in a listbox. */
+class OptionPattern {
+    /** A unique identifier for the option. */
+    id;
+    /** The value of the option. */
+    value;
+    /** The position of the option in the list. */
+    index = computed(() => this.listbox()
+        ?.navigation.inputs.items()
+        .findIndex(i => i.id() === this.id()) ?? -1);
+    /** Whether the option is active. */
+    active = computed(() => this.listbox()?.focusManager.activeItem() === this);
+    /** Whether the option is selected. */
+    selected = computed(() => this.listbox()?.selection.inputs.value().includes(this.value()));
+    /** Whether the option is disabled. */
+    disabled;
+    /** The text used by the typeahead search. */
+    searchTerm;
+    /** A reference to the parent listbox. */
+    listbox;
+    /** The tabindex of the option. */
+    tabindex = computed(() => this.listbox()?.focusManager.getItemTabindex(this));
+    /** The html element that should receive focus. */
+    element;
+    constructor(args) {
+        this.id = args.id;
+        this.value = args.value;
+        this.listbox = args.listbox;
+        this.element = args.element;
+        this.disabled = args.disabled;
+        this.searchTerm = args.searchTerm;
+    }
+}
+
+export { ListboxPattern as L, OptionPattern as O };
+//# sourceMappingURL=option-f_gNslw8.mjs.map