@angular/aria 21.0.0-next.9 → 21.0.0-rc.1

package/fesm2022/listbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"listbox.mjs","sources":["../../../../../darwin_arm64-fastbuild-ST-199a4f3c4e20/bin/src/aria/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  afterRenderEffect,\n  booleanAttribute,\n  computed,\n  contentChildren,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  model,\n  signal,\n  untracked,\n} from '@angular/core';\nimport {ComboboxListboxPattern, ListboxPattern, OptionPattern} from '@angular/aria/ui-patterns';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {toSignal} from '@angular/core/rxjs-interop';\nimport {_IdGenerator} from '@angular/cdk/a11y';\nimport {ComboboxPopup} from '../combobox';\n\n/**\n * A listbox container.\n *\n * Listboxes are used to display a list of items for a user to select from. The Listbox is meant\n * to be used in conjunction with Option as follows:\n *\n * ```html\n * <ul ngListbox>\n *   <li [value]=\"1\" ngOption>Item 1</li>\n *   <li [value]=\"2\" ngOption>Item 2</li>\n *   <li [value]=\"3\" ngOption>Item 3</li>\n * </ul>\n * ```\n */\n@Directive({\n  selector: '[ngListbox]',\n  exportAs: 'ngListbox',\n  host: {\n    'role': 'listbox',\n    'class': 'ng-listbox',\n    '[attr.id]': 'id()',\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  hostDirectives: [{directive: ComboboxPopup}],\n})\nexport class Listbox<V> {\n  /** A unique identifier for the listbox. */\n  private readonly _generatedId = inject(_IdGenerator).getId('ng-listbox-');\n\n  // TODO(wagnermaciel): https://github.com/angular/components/pull/30495#discussion_r1972601144.\n  /** A unique identifier for the listbox. */\n  protected id = computed(() => this._generatedId);\n\n  /** A reference to the parent combobox popup, if one exists. */\n  private readonly _popup = inject<ComboboxPopup<V>>(ComboboxPopup, {\n    optional: true,\n  });\n\n  /** A reference to the listbox element. */\n  private readonly _elementRef = inject(ElementRef);\n\n  /** The directionality (LTR / RTL) context for the application (or a subtree of it). */\n  private readonly _directionality = inject(Directionality);\n\n  /** The Options nested inside of the Listbox. */\n  private readonly _options = contentChildren(Option, {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 Options. */\n  protected items = computed(() => this._options().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 Listbox UIPattern. */\n  pattern: ListboxPattern<V>;\n\n  /** Whether the listbox has received focus yet. */\n  private _hasFocused = signal(false);\n\n  constructor() {\n    const inputs = {\n      ...this,\n      id: this.id,\n      items: this.items,\n      activeItem: signal(undefined),\n      textDirection: this.textDirection,\n      element: () => this._elementRef.nativeElement,\n      combobox: () => this._popup?.combobox?.pattern,\n    };\n\n    this.pattern = this._popup?.combobox\n      ? new ComboboxListboxPattern<V>(inputs)\n      : new ListboxPattern<V>(inputs);\n\n    if (this._popup) {\n      this._popup.controls.set(this.pattern as ComboboxListboxPattern<V>);\n    }\n\n    afterRenderEffect(() => {\n      if (typeof ngDevMode === 'undefined' || ngDevMode) {\n        const violations = this.pattern.validate();\n        for (const violation of violations) {\n          console.error(violation);\n        }\n      }\n    });\n\n    afterRenderEffect(() => {\n      if (!this._hasFocused()) {\n        this.pattern.setDefaultState();\n      }\n    });\n\n    // Ensure that if the active item is removed from\n    // the list, the listbox updates it's focus state.\n    afterRenderEffect(() => {\n      const items = inputs.items();\n      const activeItem = untracked(() => inputs.activeItem());\n\n      if (!items.some(i => i === activeItem) && activeItem) {\n        this.pattern.listBehavior.unfocus();\n      }\n    });\n\n    // Ensure that the value is always in sync with the available options.\n    afterRenderEffect(() => {\n      const items = inputs.items();\n      const value = untracked(() => this.value());\n\n      if (items && value.some(v => !items.some(i => i.value() === v))) {\n        this.value.set(value.filter(v => items.some(i => i.value() === v)));\n      }\n    });\n  }\n\n  onFocus() {\n    this._hasFocused.set(true);\n  }\n}\n\n/** A selectable option in a Listbox. */\n@Directive({\n  selector: '[ngOption]',\n  exportAs: 'ngOption',\n  host: {\n    'role': 'option',\n    'class': 'ng-option',\n    '[attr.data-active]': 'pattern.active()',\n    '[attr.id]': 'pattern.id()',\n    '[attr.tabindex]': 'pattern.tabindex()',\n    '[attr.aria-selected]': 'pattern.selected()',\n    '[attr.aria-disabled]': 'pattern.disabled()',\n  },\n})\nexport class Option<V> {\n  /** A reference to the option element. */\n  private readonly _elementRef = inject(ElementRef);\n\n  /** The parent Listbox. */\n  private readonly _listbox = inject(Listbox);\n\n  /** A unique identifier for the option. */\n  private readonly _generatedId = inject(_IdGenerator).getId('ng-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._listbox.pattern);\n\n  /** A reference to the option element to be focused on navigation. */\n  protected element = computed(() => this._elementRef.nativeElement);\n\n  /** The value of the option. */\n  value = input.required<V>();\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":["i1.ComboboxPopup"],"mappings":"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"}
+{"version":3,"file":"listbox.mjs","sources":["../../../../../k8-fastbuild-ST-199a4f3c4e20/bin/src/aria/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  afterRenderEffect,\n  booleanAttribute,\n  computed,\n  contentChildren,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  model,\n  signal,\n  untracked,\n} from '@angular/core';\nimport {ComboboxListboxPattern, ListboxPattern, OptionPattern} from '@angular/aria/private';\nimport {Directionality} from '@angular/cdk/bidi';\nimport {toSignal} from '@angular/core/rxjs-interop';\nimport {_IdGenerator} from '@angular/cdk/a11y';\nimport {ComboboxPopup} from '../combobox';\n\n/**\n * A listbox container.\n *\n * Listboxes are used to display a list of items for a user to select from. The Listbox is meant\n * to be used in conjunction with Option as follows:\n *\n * ```html\n * <ul ngListbox>\n *   <li [value]=\"1\" ngOption>Item 1</li>\n *   <li [value]=\"2\" ngOption>Item 2</li>\n *   <li [value]=\"3\" ngOption>Item 3</li>\n * </ul>\n * ```\n */\n@Directive({\n  selector: '[ngListbox]',\n  exportAs: 'ngListbox',\n  host: {\n    'role': 'listbox',\n    'class': 'ng-listbox',\n    '[attr.id]': 'id()',\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  hostDirectives: [{directive: ComboboxPopup}],\n})\nexport class Listbox<V> {\n  /** A unique identifier for the listbox. */\n  private readonly _generatedId = inject(_IdGenerator).getId('ng-listbox-', true);\n\n  // TODO(wagnermaciel): https://github.com/angular/components/pull/30495#discussion_r1972601144.\n  /** A unique identifier for the listbox. */\n  protected id = computed(() => this._generatedId);\n\n  /** A reference to the parent combobox popup, if one exists. */\n  private readonly _popup = inject<ComboboxPopup<V>>(ComboboxPopup, {\n    optional: true,\n  });\n\n  /** A reference to the listbox element. */\n  private readonly _elementRef = inject(ElementRef);\n\n  /** The directionality (LTR / RTL) context for the application (or a subtree of it). */\n  private readonly _directionality = inject(Directionality);\n\n  /** The Options nested inside of the Listbox. */\n  private readonly _options = contentChildren(Option, {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 Options. */\n  protected items = computed(() => this._options().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 to allow disabled items in the list to receive focus. */\n  softDisabled = 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 Listbox UIPattern. */\n  readonly _pattern: ListboxPattern<V>;\n\n  /** Whether the listbox has received focus yet. */\n  private _hasFocused = signal(false);\n\n  constructor() {\n    const inputs = {\n      ...this,\n      id: this.id,\n      items: this.items,\n      activeItem: signal(undefined),\n      textDirection: this.textDirection,\n      element: () => this._elementRef.nativeElement,\n      combobox: () => this._popup?.combobox?._pattern,\n    };\n\n    this._pattern = this._popup?.combobox\n      ? new ComboboxListboxPattern<V>(inputs)\n      : new ListboxPattern<V>(inputs);\n\n    if (this._popup) {\n      this._popup.controls.set(this._pattern as ComboboxListboxPattern<V>);\n    }\n\n    afterRenderEffect(() => {\n      if (typeof ngDevMode === 'undefined' || ngDevMode) {\n        const violations = this._pattern.validate();\n        for (const violation of violations) {\n          console.error(violation);\n        }\n      }\n    });\n\n    afterRenderEffect(() => {\n      if (!this._hasFocused()) {\n        this._pattern.setDefaultState();\n      }\n    });\n\n    // Ensure that if the active item is removed from\n    // the list, the listbox updates it's focus state.\n    afterRenderEffect(() => {\n      const items = inputs.items();\n      const activeItem = untracked(() => inputs.activeItem());\n\n      if (!items.some(i => i === activeItem) && activeItem) {\n        this._pattern.listBehavior.unfocus();\n      }\n    });\n\n    // Ensure that the value is always in sync with the available options.\n    afterRenderEffect(() => {\n      const items = inputs.items();\n      const value = untracked(() => this.value());\n\n      if (items && value.some(v => !items.some(i => i.value() === v))) {\n        this.value.set(value.filter(v => items.some(i => i.value() === v)));\n      }\n    });\n  }\n\n  onFocus() {\n    this._hasFocused.set(true);\n  }\n\n  scrollActiveItemIntoView(options: ScrollIntoViewOptions = {block: 'nearest'}) {\n    this._pattern.inputs.activeItem()?.element()?.scrollIntoView(options);\n  }\n}\n\n/** A selectable option in a Listbox. */\n@Directive({\n  selector: '[ngOption]',\n  exportAs: 'ngOption',\n  host: {\n    'role': 'option',\n    'class': 'ng-option',\n    '[attr.data-active]': '_pattern.active()',\n    '[attr.id]': '_pattern.id()',\n    '[attr.tabindex]': '_pattern.tabIndex()',\n    '[attr.aria-selected]': '_pattern.selected()',\n    '[attr.aria-disabled]': '_pattern.disabled()',\n  },\n})\nexport class Option<V> {\n  /** A reference to the option element. */\n  private readonly _elementRef = inject(ElementRef);\n\n  /** The parent Listbox. */\n  private readonly _listbox = inject(Listbox);\n\n  /** A unique identifier for the option. */\n  private readonly _generatedId = inject(_IdGenerator).getId('ng-option-', true);\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._listbox._pattern);\n\n  /** A reference to the option element to be focused on navigation. */\n  protected element = computed(() => this._elementRef.nativeElement);\n\n  /** The value of the option. */\n  value = input.required<V>();\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  /** Whether the option is selected. */\n  readonly selected = computed(() => this._pattern.selected());\n\n  /** The Option UIPattern. */\n  readonly _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":["Listbox","_generatedId","inject","_IdGenerator","getId","id","computed","ngDevMode","debugName","_popup","ComboboxPopup","optional","_elementRef","ElementRef","_directionality","Directionality","_options","contentChildren","Option","descendants","textDirection","toSignal","change","initialValue","value","items","map","option","_pattern","orientation","input","multi","transform","booleanAttribute","wrap","softDisabled","focusMode","selectionMode","typeaheadDelay","disabled","readonly","model","_hasFocused","signal","constructor","inputs","activeItem","undefined","element","nativeElement","combobox","ComboboxListboxPattern","ListboxPattern","controls","set","afterRenderEffect","violations","validate","violation","console","error","setDefaultState","untracked","some","i","listBehavior","unfocus","v","filter","onFocus","scrollActiveItemIntoView","options","block","scrollIntoView","deps","target","i0","ɵɵFactoryTarget","Directive","ɵdir","ɵɵngDeclareDirective","minVersion","version","type","isSignal","exportAs","hostDirectives","directive","i1","ngImport","decorators","args","selector","host","_listbox","searchTerm","label","textContent","listbox","required","selected","OptionPattern","isStandalone","classPropertyName","publicName","isRequired","transformFunction","attributes","properties","classAttribute"],"mappings":"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"}

package/fesm2022/menu.mjs

@@ -0,0 +1,591 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, signal, computed, effect, Directive, contentChildren, output, afterRenderEffect, untracked, model } from '@angular/core';
+import * as i1 from '@angular/aria/private';
+import { MenuTriggerPattern, DeferredContentAware, MenuPattern, MenuBarPattern, MenuItemPattern, DeferredContent } from '@angular/aria/private';
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+
+class MenuTrigger {
+  _elementRef = inject(ElementRef);
+  textDirection = inject(Directionality).valueSignal;
+  element = this._elementRef.nativeElement;
+  menu = input(undefined, ...(ngDevMode ? [{
+    debugName: "menu"
+  }] : []));
+  hasBeenFocused = signal(false, ...(ngDevMode ? [{
+    debugName: "hasBeenFocused"
+  }] : []));
+  _pattern = new MenuTriggerPattern({
+    textDirection: this.textDirection,
+    element: computed(() => this._elementRef.nativeElement),
+    menu: computed(() => this.menu()?._pattern)
+  });
+  constructor() {
+    effect(() => this.menu()?.parent.set(this));
+  }
+  onFocusIn() {
+    this.hasBeenFocused.set(true);
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: MenuTrigger,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "17.1.0",
+    version: "20.2.0-next.2",
+    type: MenuTrigger,
+    isStandalone: true,
+    selector: "button[ngMenuTrigger]",
+    inputs: {
+      menu: {
+        classPropertyName: "menu",
+        publicName: "menu",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      }
+    },
+    host: {
+      listeners: {
+        "click": "_pattern.onClick()",
+        "keydown": "_pattern.onKeydown($event)",
+        "focusout": "_pattern.onFocusOut($event)",
+        "focusin": "onFocusIn()"
+      },
+      properties: {
+        "attr.tabindex": "_pattern.tabIndex()",
+        "attr.aria-haspopup": "_pattern.hasPopup()",
+        "attr.aria-expanded": "_pattern.expanded()",
+        "attr.aria-controls": "_pattern.menu()?.id()"
+      },
+      classAttribute: "ng-menu-trigger"
+    },
+    exportAs: ["ngMenuTrigger"],
+    ngImport: i0
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  ngImport: i0,
+  type: MenuTrigger,
+  decorators: [{
+    type: Directive,
+    args: [{
+      selector: 'button[ngMenuTrigger]',
+      exportAs: 'ngMenuTrigger',
+      host: {
+        'class': 'ng-menu-trigger',
+        '[attr.tabindex]': '_pattern.tabIndex()',
+        '[attr.aria-haspopup]': '_pattern.hasPopup()',
+        '[attr.aria-expanded]': '_pattern.expanded()',
+        '[attr.aria-controls]': '_pattern.menu()?.id()',
+        '(click)': '_pattern.onClick()',
+        '(keydown)': '_pattern.onKeydown($event)',
+        '(focusout)': '_pattern.onFocusOut($event)',
+        '(focusin)': 'onFocusIn()'
+      }
+    }]
+  }],
+  ctorParameters: () => []
+});
+class Menu {
+  _deferredContentAware = inject(DeferredContentAware, {
+    optional: true
+  });
+  _allItems = contentChildren(MenuItem, ...(ngDevMode ? [{
+    debugName: "_allItems",
+    descendants: true
+  }] : [{
+    descendants: true
+  }]));
+  _items = computed(() => this._allItems().filter(i => i.parent === this), ...(ngDevMode ? [{
+    debugName: "_items"
+  }] : []));
+  _elementRef = inject(ElementRef);
+  element = this._elementRef.nativeElement;
+  textDirection = inject(Directionality).valueSignal;
+  id = input(inject(_IdGenerator).getId('ng-menu-', true), ...(ngDevMode ? [{
+    debugName: "id"
+  }] : []));
+  wrap = input(true, ...(ngDevMode ? [{
+    debugName: "wrap"
+  }] : []));
+  typeaheadDelay = input(0.5, ...(ngDevMode ? [{
+    debugName: "typeaheadDelay"
+  }] : []));
+  parent = signal(undefined, ...(ngDevMode ? [{
+    debugName: "parent"
+  }] : []));
+  _pattern;
+  items = () => this._items().map(i => i._pattern);
+  isVisible = computed(() => this._pattern.isVisible(), ...(ngDevMode ? [{
+    debugName: "isVisible"
+  }] : []));
+  onSelect = output();
+  constructor() {
+    this._pattern = new MenuPattern({
+      ...this,
+      parent: computed(() => this.parent()?._pattern),
+      multi: () => false,
+      softDisabled: () => true,
+      focusMode: () => 'roving',
+      orientation: () => 'vertical',
+      selectionMode: () => 'explicit',
+      activeItem: signal(undefined),
+      element: computed(() => this._elementRef.nativeElement),
+      onSelect: value => this.onSelect.emit(value)
+    });
+    afterRenderEffect(() => {
+      const parent = this.parent();
+      if (parent instanceof MenuItem && parent.parent instanceof MenuBar) {
+        this._deferredContentAware?.contentVisible.set(true);
+      } else {
+        this._deferredContentAware?.contentVisible.set(this._pattern.isVisible() || !!this.parent()?.hasBeenFocused());
+      }
+    });
+    afterRenderEffect(() => {
+      if (this._pattern.isVisible()) {
+        const activeItem = untracked(() => this._pattern.inputs.activeItem());
+        this._pattern.listBehavior.goto(activeItem);
+      }
+    });
+    afterRenderEffect(() => {
+      if (!this._pattern.hasBeenFocused()) {
+        this._pattern.setDefaultState();
+      }
+    });
+  }
+  close(opts) {
+    this._pattern.inputs.parent()?.close(opts);
+  }
+  closeAll(opts) {
+    const root = this._pattern.root();
+    if (root instanceof MenuTriggerPattern) {
+      root.close(opts);
+    }
+    if (root instanceof MenuPattern || root instanceof MenuBarPattern) {
+      root.inputs.activeItem()?.close(opts);
+    }
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: Menu,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "17.2.0",
+    version: "20.2.0-next.2",
+    type: Menu,
+    isStandalone: true,
+    selector: "[ngMenu]",
+    inputs: {
+      id: {
+        classPropertyName: "id",
+        publicName: "id",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      wrap: {
+        classPropertyName: "wrap",
+        publicName: "wrap",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      typeaheadDelay: {
+        classPropertyName: "typeaheadDelay",
+        publicName: "typeaheadDelay",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      }
+    },
+    outputs: {
+      onSelect: "onSelect"
+    },
+    host: {
+      attributes: {
+        "role": "menu"
+      },
+      listeners: {
+        "keydown": "_pattern.onKeydown($event)",
+        "mouseover": "_pattern.onMouseOver($event)",
+        "mouseout": "_pattern.onMouseOut($event)",
+        "focusout": "_pattern.onFocusOut($event)",
+        "focusin": "_pattern.onFocusIn()",
+        "click": "_pattern.onClick($event)"
+      },
+      properties: {
+        "attr.id": "_pattern.id()",
+        "attr.data-visible": "_pattern.isVisible()"
+      },
+      classAttribute: "ng-menu"
+    },
+    queries: [{
+      propertyName: "_allItems",
+      predicate: MenuItem,
+      descendants: true,
+      isSignal: true
+    }],
+    exportAs: ["ngMenu"],
+    hostDirectives: [{
+      directive: i1.DeferredContentAware,
+      inputs: ["preserveContent", "preserveContent"]
+    }],
+    ngImport: i0
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  ngImport: i0,
+  type: Menu,
+  decorators: [{
+    type: Directive,
+    args: [{
+      selector: '[ngMenu]',
+      exportAs: 'ngMenu',
+      host: {
+        'role': 'menu',
+        'class': 'ng-menu',
+        '[attr.id]': '_pattern.id()',
+        '[attr.data-visible]': '_pattern.isVisible()',
+        '(keydown)': '_pattern.onKeydown($event)',
+        '(mouseover)': '_pattern.onMouseOver($event)',
+        '(mouseout)': '_pattern.onMouseOut($event)',
+        '(focusout)': '_pattern.onFocusOut($event)',
+        '(focusin)': '_pattern.onFocusIn()',
+        '(click)': '_pattern.onClick($event)'
+      },
+      hostDirectives: [{
+        directive: DeferredContentAware,
+        inputs: ['preserveContent']
+      }]
+    }]
+  }],
+  ctorParameters: () => []
+});
+class MenuBar {
+  _allItems = contentChildren(MenuItem, ...(ngDevMode ? [{
+    debugName: "_allItems",
+    descendants: true
+  }] : [{
+    descendants: true
+  }]));
+  _items = () => this._allItems().filter(i => i.parent === this);
+  _elementRef = inject(ElementRef);
+  element = this._elementRef.nativeElement;
+  textDirection = inject(Directionality).valueSignal;
+  value = model([], ...(ngDevMode ? [{
+    debugName: "value"
+  }] : []));
+  wrap = input(true, ...(ngDevMode ? [{
+    debugName: "wrap"
+  }] : []));
+  typeaheadDelay = input(0.5, ...(ngDevMode ? [{
+    debugName: "typeaheadDelay"
+  }] : []));
+  _pattern;
+  items = signal([], ...(ngDevMode ? [{
+    debugName: "items"
+  }] : []));
+  onSelect = output();
+  constructor() {
+    this._pattern = new MenuBarPattern({
+      ...this,
+      multi: () => false,
+      softDisabled: () => true,
+      focusMode: () => 'roving',
+      orientation: () => 'horizontal',
+      selectionMode: () => 'explicit',
+      onSelect: value => this.onSelect.emit(value),
+      activeItem: signal(undefined),
+      element: computed(() => this._elementRef.nativeElement)
+    });
+    afterRenderEffect(() => {
+      this.items.set(this._items().map(i => i._pattern));
+    });
+    afterRenderEffect(() => {
+      if (!this._pattern.hasBeenFocused()) {
+        this._pattern.setDefaultState();
+      }
+    });
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: MenuBar,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "17.2.0",
+    version: "20.2.0-next.2",
+    type: MenuBar,
+    isStandalone: true,
+    selector: "[ngMenuBar]",
+    inputs: {
+      value: {
+        classPropertyName: "value",
+        publicName: "value",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      wrap: {
+        classPropertyName: "wrap",
+        publicName: "wrap",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      typeaheadDelay: {
+        classPropertyName: "typeaheadDelay",
+        publicName: "typeaheadDelay",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      }
+    },
+    outputs: {
+      value: "valueChange",
+      onSelect: "onSelect"
+    },
+    host: {
+      attributes: {
+        "role": "menubar"
+      },
+      listeners: {
+        "keydown": "_pattern.onKeydown($event)",
+        "mouseover": "_pattern.onMouseOver($event)",
+        "click": "_pattern.onClick($event)",
+        "focusin": "_pattern.onFocusIn()",
+        "focusout": "_pattern.onFocusOut($event)"
+      },
+      classAttribute: "ng-menu-bar"
+    },
+    queries: [{
+      propertyName: "_allItems",
+      predicate: MenuItem,
+      descendants: true,
+      isSignal: true
+    }],
+    exportAs: ["ngMenuBar"],
+    ngImport: i0
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  ngImport: i0,
+  type: MenuBar,
+  decorators: [{
+    type: Directive,
+    args: [{
+      selector: '[ngMenuBar]',
+      exportAs: 'ngMenuBar',
+      host: {
+        'role': 'menubar',
+        'class': 'ng-menu-bar',
+        '(keydown)': '_pattern.onKeydown($event)',
+        '(mouseover)': '_pattern.onMouseOver($event)',
+        '(click)': '_pattern.onClick($event)',
+        '(focusin)': '_pattern.onFocusIn()',
+        '(focusout)': '_pattern.onFocusOut($event)'
+      }
+    }]
+  }],
+  ctorParameters: () => []
+});
+class MenuItem {
+  _elementRef = inject(ElementRef);
+  element = this._elementRef.nativeElement;
+  id = input(inject(_IdGenerator).getId('ng-menu-item-', true), ...(ngDevMode ? [{
+    debugName: "id"
+  }] : []));
+  value = input.required(...(ngDevMode ? [{
+    debugName: "value"
+  }] : []));
+  disabled = input(false, ...(ngDevMode ? [{
+    debugName: "disabled"
+  }] : []));
+  searchTerm = model('', ...(ngDevMode ? [{
+    debugName: "searchTerm"
+  }] : []));
+  _menu = inject(Menu, {
+    optional: true
+  });
+  _menuBar = inject(MenuBar, {
+    optional: true
+  });
+  parent = this._menu ?? this._menuBar;
+  submenu = input(undefined, ...(ngDevMode ? [{
+    debugName: "submenu"
+  }] : []));
+  hasBeenFocused = signal(false, ...(ngDevMode ? [{
+    debugName: "hasBeenFocused"
+  }] : []));
+  _pattern = new MenuItemPattern({
+    id: this.id,
+    value: this.value,
+    element: computed(() => this._elementRef.nativeElement),
+    disabled: this.disabled,
+    searchTerm: this.searchTerm,
+    parent: computed(() => this.parent?._pattern),
+    submenu: computed(() => this.submenu()?._pattern)
+  });
+  constructor() {
+    effect(() => this.submenu()?.parent.set(this));
+  }
+  onFocusIn() {
+    this.hasBeenFocused.set(true);
+  }
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: MenuItem,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "17.1.0",
+    version: "20.2.0-next.2",
+    type: MenuItem,
+    isStandalone: true,
+    selector: "[ngMenuItem]",
+    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
+      },
+      searchTerm: {
+        classPropertyName: "searchTerm",
+        publicName: "searchTerm",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      submenu: {
+        classPropertyName: "submenu",
+        publicName: "submenu",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      }
+    },
+    outputs: {
+      searchTerm: "searchTermChange"
+    },
+    host: {
+      attributes: {
+        "role": "menuitem"
+      },
+      listeners: {
+        "focusin": "onFocusIn()"
+      },
+      properties: {
+        "attr.tabindex": "_pattern.tabIndex()",
+        "attr.data-active": "_pattern.isActive()",
+        "attr.aria-haspopup": "_pattern.hasPopup()",
+        "attr.aria-expanded": "_pattern.expanded()",
+        "attr.aria-disabled": "_pattern.disabled()",
+        "attr.aria-controls": "_pattern.submenu()?.id()"
+      },
+      classAttribute: "ng-menu-item"
+    },
+    exportAs: ["ngMenuItem"],
+    ngImport: i0
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  ngImport: i0,
+  type: MenuItem,
+  decorators: [{
+    type: Directive,
+    args: [{
+      selector: '[ngMenuItem]',
+      exportAs: 'ngMenuItem',
+      host: {
+        'role': 'menuitem',
+        'class': 'ng-menu-item',
+        '(focusin)': 'onFocusIn()',
+        '[attr.tabindex]': '_pattern.tabIndex()',
+        '[attr.data-active]': '_pattern.isActive()',
+        '[attr.aria-haspopup]': '_pattern.hasPopup()',
+        '[attr.aria-expanded]': '_pattern.expanded()',
+        '[attr.aria-disabled]': '_pattern.disabled()',
+        '[attr.aria-controls]': '_pattern.submenu()?.id()'
+      }
+    }]
+  }],
+  ctorParameters: () => []
+});
+class MenuContent {
+  static ɵfac = i0.ɵɵngDeclareFactory({
+    minVersion: "12.0.0",
+    version: "20.2.0-next.2",
+    ngImport: i0,
+    type: MenuContent,
+    deps: [],
+    target: i0.ɵɵFactoryTarget.Directive
+  });
+  static ɵdir = i0.ɵɵngDeclareDirective({
+    minVersion: "14.0.0",
+    version: "20.2.0-next.2",
+    type: MenuContent,
+    isStandalone: true,
+    selector: "ng-template[ngMenuContent]",
+    exportAs: ["ngMenuContent"],
+    hostDirectives: [{
+      directive: i1.DeferredContent
+    }],
+    ngImport: i0
+  });
+}
+i0.ɵɵngDeclareClassMetadata({
+  minVersion: "12.0.0",
+  version: "20.2.0-next.2",
+  ngImport: i0,
+  type: MenuContent,
+  decorators: [{
+    type: Directive,
+    args: [{
+      selector: 'ng-template[ngMenuContent]',
+      exportAs: 'ngMenuContent',
+      hostDirectives: [DeferredContent]
+    }]
+  }]
+});
+
+export { Menu, MenuBar, MenuContent, MenuItem, MenuTrigger };
+//# sourceMappingURL=menu.mjs.map