@angular/aria 22.0.0-next.6 → 22.0.0-next.8

package/fesm2022/listbox.mjs

@@ -1,195 +1,26 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, computed, input, booleanAttribute, Directive, contentChildren, model, signal, afterRenderEffect, untracked } from '@angular/core';
+import { InjectionToken, input, inject, ElementRef, booleanAttribute, model, computed, signal, afterNextRender, afterRenderEffect, untracked, Directive } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
 import { _IdGenerator } from '@angular/cdk/a11y';
-import { OptionPattern, ComboboxListboxPattern, ListboxPattern } from './_combobox-listbox-chunk.mjs';
-import { ComboboxPopup } from './combobox.mjs';
-export { Combobox as ɵɵCombobox, ComboboxDialog as ɵɵComboboxDialog, ComboboxInput as ɵɵComboboxInput, ComboboxPopupContainer as ɵɵComboboxPopupContainer } from './combobox.mjs';
-import './_signal-like-chunk.mjs';
-import '@angular/core/primitives/signals';
+import { ListboxPattern, OptionPattern } from './_option-chunk.mjs';
+import { SortedCollection } from './_collection-chunk.mjs';
+import { tabIndexTransform } from './_transforms-chunk.mjs';
 import './_list-chunk.mjs';
 import './_list-navigation-chunk.mjs';
 import './_list-typeahead-chunk.mjs';
 import './_click-event-manager-chunk.mjs';
-import './_deferred-content-chunk.mjs';
-import './_combobox-chunk.mjs';
-import './_pointer-event-manager-chunk.mjs';
+import '@angular/core/primitives/signals';
 
 const LISTBOX = new InjectionToken('LISTBOX');
 
-class Option {
-  element = inject(ElementRef).nativeElement;
-  active = computed(() => this._pattern.active(), ...(ngDevMode ? [{
-    debugName: "active"
-  }] : []));
-  _listbox = inject(LISTBOX);
-  id = input(inject(_IdGenerator).getId('ng-option-', true), ...(ngDevMode ? [{
-    debugName: "id"
-  }] : []));
-  searchTerm = computed(() => this.label() ?? this.element.textContent, ...(ngDevMode ? [{
-    debugName: "searchTerm"
-  }] : []));
-  _listboxPattern = computed(() => this._listbox._pattern, ...(ngDevMode ? [{
-    debugName: "_listboxPattern"
-  }] : []));
-  value = input.required(...(ngDevMode ? [{
-    debugName: "value"
-  }] : []));
-  disabled = input(false, {
-    ...(ngDevMode ? {
-      debugName: "disabled"
-    } : {}),
-    transform: booleanAttribute
-  });
-  label = input(...(ngDevMode ? [undefined, {
-    debugName: "label"
-  }] : []));
-  selected = computed(() => this._pattern.selected(), ...(ngDevMode ? [{
-    debugName: "selected"
-  }] : []));
-  _pattern = new OptionPattern({
-    ...this,
-    id: this.id,
-    value: this.value,
-    listbox: this._listboxPattern,
-    element: () => this.element,
-    searchTerm: () => this.searchTerm() ?? ''
-  });
-  static ɵfac = i0.ɵɵngDeclareFactory({
-    minVersion: "12.0.0",
-    version: "22.0.0-next.6",
-    ngImport: i0,
-    type: Option,
-    deps: [],
-    target: i0.ɵɵFactoryTarget.Directive
-  });
-  static ɵdir = i0.ɵɵngDeclareDirective({
-    minVersion: "17.1.0",
-    version: "22.0.0-next.6",
-    type: Option,
-    isStandalone: true,
-    selector: "[ngOption]",
-    inputs: {
-      id: {
-        classPropertyName: "id",
-        publicName: "id",
-        isSignal: true,
-        isRequired: false,
-        transformFunction: null
-      },
-      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: {
-        "attr.data-active": "active()",
-        "attr.id": "_pattern.id()",
-        "attr.tabindex": "_pattern.tabIndex()",
-        "attr.aria-selected": "_pattern.selected()",
-        "attr.aria-disabled": "_pattern.disabled()"
-      }
-    },
-    exportAs: ["ngOption"],
-    ngImport: i0
-  });
-}
-i0.ɵɵngDeclareClassMetadata({
-  minVersion: "12.0.0",
-  version: "22.0.0-next.6",
-  ngImport: i0,
-  type: Option,
-  decorators: [{
-    type: Directive,
-    args: [{
-      selector: '[ngOption]',
-      exportAs: 'ngOption',
-      host: {
-        'role': 'option',
-        '[attr.data-active]': 'active()',
-        '[attr.id]': '_pattern.id()',
-        '[attr.tabindex]': '_pattern.tabIndex()',
-        '[attr.aria-selected]': '_pattern.selected()',
-        '[attr.aria-disabled]': '_pattern.disabled()'
-      }
-    }]
-  }],
-  propDecorators: {
-    id: [{
-      type: i0.Input,
-      args: [{
-        isSignal: true,
-        alias: "id",
-        required: false
-      }]
-    }],
-    value: [{
-      type: i0.Input,
-      args: [{
-        isSignal: true,
-        alias: "value",
-        required: true
-      }]
-    }],
-    disabled: [{
-      type: i0.Input,
-      args: [{
-        isSignal: true,
-        alias: "disabled",
-        required: false
-      }]
-    }],
-    label: [{
-      type: i0.Input,
-      args: [{
-        isSignal: true,
-        alias: "label",
-        required: false
-      }]
-    }]
-  }
-});
-
 class Listbox {
   id = input(inject(_IdGenerator).getId('ng-listbox-', true), ...(ngDevMode ? [{
     debugName: "id"
   }] : []));
-  _popup = inject(ComboboxPopup, {
-    optional: true
-  });
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  _options = contentChildren(Option, {
-    ...(ngDevMode ? {
-      debugName: "_options"
-    } : {}),
-    descendants: true
-  });
+  _collection = new SortedCollection();
   textDirection = inject(Directionality).valueSignal.asReadonly();
-  items = computed(() => this._options().map(option => option._pattern), ...(ngDevMode ? [{
-    debugName: "items"
-  }] : []));
   orientation = input('vertical', ...(ngDevMode ? [{
     debugName: "orientation"
   }] : []));
@@ -232,50 +63,72 @@ class Listbox {
     } : {}),
     transform: booleanAttribute
   });
+  tabIndex = input(undefined, {
+    ...(ngDevMode ? {
+      debugName: "tabIndex"
+    } : {}),
+    alias: 'tabindex',
+    transform: tabIndexTransform
+  });
   value = model([], ...(ngDevMode ? [{
     debugName: "value"
   }] : []));
   _pattern;
+  activeDescendant;
   constructor() {
+    const orderedItemPatterns = computed(() => this._collection.orderedItems().map(option => option._pattern), ...(ngDevMode ? [{
+      debugName: "orderedItemPatterns"
+    }] : []));
     const inputs = {
       ...this,
       id: this.id,
-      items: this.items,
+      items: orderedItemPatterns,
       activeItem: signal(undefined),
       textDirection: this.textDirection,
-      element: () => this._elementRef.nativeElement,
-      combobox: () => this._popup?.combobox?._pattern
+      element: () => this._elementRef.nativeElement
     };
-    this._pattern = this._popup?.combobox ? new ComboboxListboxPattern(inputs) : new ListboxPattern(inputs);
-    if (this._popup) {
-      this._popup._controls.set(this._pattern);
-    }
-    afterRenderEffect(() => {
-      if (typeof ngDevMode === 'undefined' || ngDevMode) {
-        const violations = this._pattern.validate();
-        for (const violation of violations) {
-          console.error(violation);
+    this._pattern = new ListboxPattern(inputs);
+    this.activeDescendant = computed(() => this._pattern.activeDescendant(), ...(ngDevMode ? [{
+      debugName: "activeDescendant"
+    }] : []));
+    afterNextRender(() => {
+      this._collection.startObserving(this.element);
+    });
+    afterRenderEffect({
+      read: () => {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+          const violations = this._pattern.validate();
+          for (const violation of violations) {
+            console.error(violation);
+          }
         }
       }
     });
-    afterRenderEffect(() => {
-      this._pattern.setDefaultStateEffect();
+    afterRenderEffect({
+      write: () => this._pattern.setDefaultStateEffect()
     });
-    afterRenderEffect(() => {
-      const items = inputs.items();
-      const activeItem = untracked(() => inputs.activeItem());
-      if (!items.some(i => i === activeItem) && activeItem) {
-        this._pattern.listBehavior.unfocus();
+    afterRenderEffect({
+      write: () => {
+        const items = inputs.items();
+        const activeItem = untracked(() => inputs.activeItem());
+        if (!items.some(i => i === activeItem) && activeItem) {
+          this._pattern.listBehavior.unfocus();
+        }
       }
     });
-    afterRenderEffect(() => {
-      const items = inputs.items();
-      const value = untracked(() => this.value());
-      if (items && value.some(v => !items.some(i => i.value() === v))) {
-        this.value.set(value.filter(v => items.some(i => i.value() === v)));
+    afterRenderEffect({
+      write: () => {
+        const items = inputs.items();
+        const value = untracked(() => this.value());
+        if (items && value.some(v => !items.some(i => i.value() === v))) {
+          this.value.set(value.filter(v => items.some(i => i.value() === v)));
+        }
       }
     });
   }
+  ngOnDestroy() {
+    this._collection.stopObserving();
+  }
   scrollActiveItemIntoView(options = {
     block: 'nearest'
   }) {
@@ -286,15 +139,15 @@ class Listbox {
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
-    version: "22.0.0-next.6",
+    version: "22.0.0-next.10",
     ngImport: i0,
     type: Listbox,
     deps: [],
     target: i0.ɵɵFactoryTarget.Directive
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
-    minVersion: "17.2.0",
-    version: "22.0.0-next.6",
+    minVersion: "17.1.0",
+    version: "22.0.0-next.10",
     type: Listbox,
     isStandalone: true,
     selector: "[ngListbox]",
@@ -369,6 +222,13 @@ class Listbox {
         isRequired: false,
         transformFunction: null
       },
+      tabIndex: {
+        classPropertyName: "tabIndex",
+        publicName: "tabindex",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
       value: {
         classPropertyName: "value",
         publicName: "value",
@@ -391,7 +251,7 @@ class Listbox {
       },
       properties: {
         "attr.id": "id()",
-        "attr.tabindex": "_pattern.tabIndex()",
+        "attr.tabindex": "tabIndex() !== undefined ? tabIndex() : _pattern.tabIndex()",
         "attr.aria-readonly": "_pattern.readonly()",
         "attr.aria-disabled": "_pattern.disabled()",
         "attr.aria-orientation": "_pattern.orientation()",
@@ -403,22 +263,13 @@ class Listbox {
       provide: LISTBOX,
       useExisting: Listbox
     }],
-    queries: [{
-      propertyName: "_options",
-      predicate: Option,
-      descendants: true,
-      isSignal: true
-    }],
     exportAs: ["ngListbox"],
-    hostDirectives: [{
-      directive: ComboboxPopup
-    }],
     ngImport: i0
   });
 }
 i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
-  version: "22.0.0-next.6",
+  version: "22.0.0-next.10",
   ngImport: i0,
   type: Listbox,
   decorators: [{
@@ -429,7 +280,7 @@ i0.ɵɵngDeclareClassMetadata({
       host: {
         'role': 'listbox',
         '[attr.id]': 'id()',
-        '[attr.tabindex]': '_pattern.tabIndex()',
+        '[attr.tabindex]': 'tabIndex() !== undefined ? tabIndex() : _pattern.tabIndex()',
         '[attr.aria-readonly]': '_pattern.readonly()',
         '[attr.aria-disabled]': '_pattern.disabled()',
         '[attr.aria-orientation]': '_pattern.orientation()',
@@ -439,7 +290,6 @@ i0.ɵɵngDeclareClassMetadata({
         '(click)': '_pattern.onClick($event)',
         '(focusin)': '_pattern.onFocusIn()'
       },
-      hostDirectives: [ComboboxPopup],
       providers: [{
         provide: LISTBOX,
         useExisting: Listbox
@@ -456,15 +306,6 @@ i0.ɵɵngDeclareClassMetadata({
         required: false
       }]
     }],
-    _options: [{
-      type: i0.ContentChildren,
-      args: [i0.forwardRef(() => Option), {
-        ...{
-          descendants: true
-        },
-        isSignal: true
-      }]
-    }],
     orientation: [{
       type: i0.Input,
       args: [{
@@ -537,6 +378,14 @@ i0.ɵɵngDeclareClassMetadata({
         required: false
       }]
     }],
+    tabIndex: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "tabindex",
+        required: false
+      }]
+    }],
     value: [{
       type: i0.Input,
       args: [{
@@ -551,5 +400,162 @@ i0.ɵɵngDeclareClassMetadata({
   }
 });
 
-export { Listbox, Option, ComboboxPopup as ɵɵComboboxPopup };
+class Option {
+  element = inject(ElementRef).nativeElement;
+  active = computed(() => this._pattern.active(), ...(ngDevMode ? [{
+    debugName: "active"
+  }] : []));
+  _listbox = inject(LISTBOX);
+  id = input(inject(_IdGenerator).getId('ng-option-', true), ...(ngDevMode ? [{
+    debugName: "id"
+  }] : []));
+  _listboxPattern = computed(() => this._listbox._pattern, ...(ngDevMode ? [{
+    debugName: "_listboxPattern"
+  }] : []));
+  value = input.required(...(ngDevMode ? [{
+    debugName: "value"
+  }] : []));
+  disabled = input(false, {
+    ...(ngDevMode ? {
+      debugName: "disabled"
+    } : {}),
+    transform: booleanAttribute
+  });
+  label = input(...(ngDevMode ? [undefined, {
+    debugName: "label"
+  }] : []));
+  selected = computed(() => this._pattern.selected(), ...(ngDevMode ? [{
+    debugName: "selected"
+  }] : []));
+  _pattern = new OptionPattern({
+    ...this,
+    id: this.id,
+    value: this.value,
+    listbox: this._listboxPattern,
+    element: () => this.element,
+    searchTerm: () => this.label() ?? ''
+  });
+  ngOnInit() {
+    this._listbox._collection.register(this);
+  }
+  ngOnDestroy() {
+    this._listbox._collection.unregister(this);
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "22.0.0-next.10",
+    ngImport: i0,
+    type: Option,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "17.1.0",
+    version: "22.0.0-next.10",
+    type: Option,
+    isStandalone: true,
+    selector: "[ngOption]",
+    inputs: {
+      id: {
+        classPropertyName: "id",
+        publicName: "id",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      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: {
+        "attr.data-active": "active()",
+        "attr.id": "_pattern.id()",
+        "attr.tabindex": "_pattern.tabIndex()",
+        "attr.aria-selected": "_pattern.selected()",
+        "attr.aria-disabled": "_pattern.disabled()"
+      }
+    },
+    exportAs: ["ngOption"],
+    ngImport: i0
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "22.0.0-next.10",
+  ngImport: i0,
+  type: Option,
+  decorators: [{
+    type: Directive,
+    args: [{
+      selector: '[ngOption]',
+      exportAs: 'ngOption',
+      host: {
+        'role': 'option',
+        '[attr.data-active]': 'active()',
+        '[attr.id]': '_pattern.id()',
+        '[attr.tabindex]': '_pattern.tabIndex()',
+        '[attr.aria-selected]': '_pattern.selected()',
+        '[attr.aria-disabled]': '_pattern.disabled()'
+      }
+    }]
+  }],
+  propDecorators: {
+    id: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "id",
+        required: false
+      }]
+    }],
+    value: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "value",
+        required: true
+      }]
+    }],
+    disabled: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "disabled",
+        required: false
+      }]
+    }],
+    label: [{
+      type: i0.Input,
+      args: [{
+        isSignal: true,
+        alias: "label",
+        required: false
+      }]
+    }]
+  }
+});
+
+export { Listbox, Option };
 //# sourceMappingURL=listbox.mjs.map