@angular/aria 21.0.1 → 21.0.3

package/fesm2022/menu.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, computed, booleanAttribute, effect, Directive, contentChildren, signal, output, afterRenderEffect, untracked, model } from '@angular/core';
+import { inject, ElementRef, input, computed, booleanAttribute, effect, Directive, InjectionToken, model, contentChildren, signal, output, afterRenderEffect, untracked } 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 { MenuTriggerPattern, MenuItemPattern, MenuBarPattern, DeferredContentAware, MenuPattern, DeferredContent } from '@angular/aria/private';
 import { Directionality } from '@angular/cdk/bidi';
+import { _IdGenerator } from '@angular/cdk/a11y';
 
 class MenuTrigger {
   _elementRef = inject(ElementRef);
@@ -156,87 +156,54 @@ i0.ɵɵngDeclareClassMetadata({
     }]
   }
 });
-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"
-  }] : []));
+
+const MENU_COMPONENT = new InjectionToken('MENU_COMPONENT');
+
+class MenuItem {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  textDirection = inject(Directionality).valueSignal;
-  id = input(inject(_IdGenerator).getId('ng-menu-', true), ...(ngDevMode ? [{
+  id = input(inject(_IdGenerator).getId('ng-menu-item-', true), ...(ngDevMode ? [{
     debugName: "id"
   }] : []));
-  wrap = input(true, ...(ngDevMode ? [{
-    debugName: "wrap",
-    transform: booleanAttribute
-  }] : [{
-    transform: booleanAttribute
-  }]));
-  typeaheadDelay = input(500, ...(ngDevMode ? [{
-    debugName: "typeaheadDelay"
+  value = input.required(...(ngDevMode ? [{
+    debugName: "value"
   }] : []));
   disabled = input(false, ...(ngDevMode ? [{
-    debugName: "disabled",
-    transform: booleanAttribute
-  }] : [{
-    transform: booleanAttribute
-  }]));
-  parent = signal(undefined, ...(ngDevMode ? [{
-    debugName: "parent"
+    debugName: "disabled"
   }] : []));
-  _pattern;
-  _itemPatterns = () => this._items().map(i => i._pattern);
-  visible = computed(() => this._pattern.visible(), ...(ngDevMode ? [{
-    debugName: "visible"
+  searchTerm = model('', ...(ngDevMode ? [{
+    debugName: "searchTerm"
   }] : []));
-  tabIndex = computed(() => this._pattern.tabIndex(), ...(ngDevMode ? [{
-    debugName: "tabIndex"
+  parent = inject(MENU_COMPONENT, {
+    optional: true
+  });
+  submenu = input(undefined, ...(ngDevMode ? [{
+    debugName: "submenu"
   }] : []));
-  onSelect = output();
-  expansionDelay = input(100, ...(ngDevMode ? [{
-    debugName: "expansionDelay"
+  active = computed(() => this._pattern.active(), ...(ngDevMode ? [{
+    debugName: "active"
+  }] : []));
+  expanded = computed(() => this._pattern.expanded(), ...(ngDevMode ? [{
+    debugName: "expanded"
   }] : []));
+  hasPopup = computed(() => this._pattern.hasPopup(), ...(ngDevMode ? [{
+    debugName: "hasPopup"
+  }] : []));
+  _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() {
-    this._pattern = new MenuPattern({
-      ...this,
-      parent: computed(() => this.parent()?._pattern),
-      items: this._itemPatterns,
-      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.visible() || !!this.parent()?._pattern.hasBeenFocused());
-      }
-    });
-    afterRenderEffect(() => {
-      if (this._pattern.visible()) {
-        const activeItem = untracked(() => this._pattern.inputs.activeItem());
-        this._pattern.listBehavior.goto(activeItem);
-      }
-    });
-    afterRenderEffect(() => {
-      if (!this._pattern.hasBeenFocused() && this._items().length) {
-        untracked(() => this._pattern.setDefaultState());
-      }
+    effect(() => this.submenu()?.parent.set(this));
+  }
+  open() {
+    this._pattern.open({
+      first: true
     });
   }
   close() {
@@ -246,16 +213,16 @@ class Menu {
     minVersion: "12.0.0",
     version: "21.0.0",
     ngImport: i0,
-    type: Menu,
+    type: MenuItem,
     deps: [],
     target: i0.ɵɵFactoryTarget.Directive
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
-    minVersion: "17.2.0",
+    minVersion: "17.1.0",
     version: "21.0.0",
-    type: Menu,
+    type: MenuItem,
     isStandalone: true,
-    selector: "[ngMenu]",
+    selector: "[ngMenuItem]",
     inputs: {
       id: {
         classPropertyName: "id",
@@ -264,68 +231,55 @@ class Menu {
         isRequired: false,
         transformFunction: null
       },
-      wrap: {
-        classPropertyName: "wrap",
-        publicName: "wrap",
+      value: {
+        classPropertyName: "value",
+        publicName: "value",
         isSignal: true,
-        isRequired: false,
+        isRequired: true,
         transformFunction: null
       },
-      typeaheadDelay: {
-        classPropertyName: "typeaheadDelay",
-        publicName: "typeaheadDelay",
+      disabled: {
+        classPropertyName: "disabled",
+        publicName: "disabled",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       },
-      disabled: {
-        classPropertyName: "disabled",
-        publicName: "disabled",
+      searchTerm: {
+        classPropertyName: "searchTerm",
+        publicName: "searchTerm",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       },
-      expansionDelay: {
-        classPropertyName: "expansionDelay",
-        publicName: "expansionDelay",
+      submenu: {
+        classPropertyName: "submenu",
+        publicName: "submenu",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       }
     },
     outputs: {
-      onSelect: "onSelect"
+      searchTerm: "searchTermChange"
     },
     host: {
       attributes: {
-        "role": "menu"
+        "role": "menuitem"
       },
       listeners: {
-        "keydown": "_pattern.onKeydown($event)",
-        "mouseover": "_pattern.onMouseOver($event)",
-        "mouseout": "_pattern.onMouseOut($event)",
-        "focusout": "_pattern.onFocusOut($event)",
-        "focusin": "_pattern.onFocusIn()",
-        "click": "_pattern.onClick($event)"
+        "focusin": "_pattern.onFocusIn()"
       },
       properties: {
-        "attr.id": "_pattern.id()",
+        "attr.tabindex": "_pattern.tabIndex()",
+        "attr.data-active": "active()",
+        "attr.aria-haspopup": "hasPopup()",
+        "attr.aria-expanded": "expanded()",
         "attr.aria-disabled": "_pattern.disabled()",
-        "attr.tabindex": "tabIndex()",
-        "attr.data-visible": "visible()"
+        "attr.aria-controls": "_pattern.submenu()?.id()"
       }
     },
-    queries: [{
-      propertyName: "_allItems",
-      predicate: MenuItem,
-      descendants: true,
-      isSignal: true
-    }],
-    exportAs: ["ngMenu"],
-    hostDirectives: [{
-      directive: i1.DeferredContentAware,
-      inputs: ["preserveContent", "preserveContent"]
-    }],
+    exportAs: ["ngMenuItem"],
     ngImport: i0
   });
 }
@@ -333,42 +287,26 @@ i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
   version: "21.0.0",
   ngImport: i0,
-  type: Menu,
+  type: MenuItem,
   decorators: [{
     type: Directive,
     args: [{
-      selector: '[ngMenu]',
-      exportAs: 'ngMenu',
+      selector: '[ngMenuItem]',
+      exportAs: 'ngMenuItem',
       host: {
-        'role': 'menu',
-        '[attr.id]': '_pattern.id()',
-        '[attr.aria-disabled]': '_pattern.disabled()',
-        '[attr.tabindex]': 'tabIndex()',
-        '[attr.data-visible]': 'visible()',
-        '(keydown)': '_pattern.onKeydown($event)',
-        '(mouseover)': '_pattern.onMouseOver($event)',
-        '(mouseout)': '_pattern.onMouseOut($event)',
-        '(focusout)': '_pattern.onFocusOut($event)',
+        'role': 'menuitem',
         '(focusin)': '_pattern.onFocusIn()',
-        '(click)': '_pattern.onClick($event)'
-      },
-      hostDirectives: [{
-        directive: DeferredContentAware,
-        inputs: ['preserveContent']
-      }]
+        '[attr.tabindex]': '_pattern.tabIndex()',
+        '[attr.data-active]': 'active()',
+        '[attr.aria-haspopup]': 'hasPopup()',
+        '[attr.aria-expanded]': 'expanded()',
+        '[attr.aria-disabled]': '_pattern.disabled()',
+        '[attr.aria-controls]': '_pattern.submenu()?.id()'
+      }
     }]
   }],
   ctorParameters: () => [],
   propDecorators: {
-    _allItems: [{
-      type: i0.ContentChildren,
-      args: [i0.forwardRef(() => MenuItem), {
-        ...{
-          descendants: true
-        },
-        isSignal: true
-      }]
-    }],
     id: [{
       type: i0.Input,
       args: [{
@@ -377,44 +315,44 @@ i0.ɵɵngDeclareClassMetadata({
         required: false
       }]
     }],
-    wrap: [{
+    value: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "wrap",
-        required: false
+        alias: "value",
+        required: true
       }]
     }],
-    typeaheadDelay: [{
+    disabled: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "typeaheadDelay",
+        alias: "disabled",
         required: false
       }]
     }],
-    disabled: [{
+    searchTerm: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "disabled",
+        alias: "searchTerm",
         required: false
       }]
-    }],
-    onSelect: [{
+    }, {
       type: i0.Output,
-      args: ["onSelect"]
+      args: ["searchTermChange"]
     }],
-    expansionDelay: [{
+    submenu: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "expansionDelay",
+        alias: "submenu",
         required: false
       }]
     }]
   }
 });
+
 class MenuBar {
   _allItems = contentChildren(MenuItem, ...(ngDevMode ? [{
     debugName: "_allItems",
@@ -552,6 +490,10 @@ class MenuBar {
         "attr.tabindex": "_pattern.tabIndex()"
       }
     },
+    providers: [{
+      provide: MENU_COMPONENT,
+      useExisting: MenuBar
+    }],
     queries: [{
       propertyName: "_allItems",
       predicate: MenuItem,
@@ -582,7 +524,11 @@ i0.ɵɵngDeclareClassMetadata({
         '(click)': '_pattern.onClick($event)',
         '(focusin)': '_pattern.onFocusIn()',
         '(focusout)': '_pattern.onFocusOut($event)'
-      }
+      },
+      providers: [{
+        provide: MENU_COMPONENT,
+        useExisting: MenuBar
+      }]
     }]
   }],
   ctorParameters: () => [],
@@ -645,55 +591,88 @@ i0.ɵɵngDeclareClassMetadata({
     }]
   }
 });
-class MenuItem {
+
+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;
-  id = input(inject(_IdGenerator).getId('ng-menu-item-', true), ...(ngDevMode ? [{
+  textDirection = inject(Directionality).valueSignal;
+  id = input(inject(_IdGenerator).getId('ng-menu-', true), ...(ngDevMode ? [{
     debugName: "id"
   }] : []));
-  value = input.required(...(ngDevMode ? [{
-    debugName: "value"
+  wrap = input(true, ...(ngDevMode ? [{
+    debugName: "wrap",
+    transform: booleanAttribute
+  }] : [{
+    transform: booleanAttribute
+  }]));
+  typeaheadDelay = input(500, ...(ngDevMode ? [{
+    debugName: "typeaheadDelay"
   }] : []));
   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"
+    debugName: "disabled",
+    transform: booleanAttribute
+  }] : [{
+    transform: booleanAttribute
+  }]));
+  parent = signal(undefined, ...(ngDevMode ? [{
+    debugName: "parent"
   }] : []));
-  active = computed(() => this._pattern.active(), ...(ngDevMode ? [{
-    debugName: "active"
+  _pattern;
+  _itemPatterns = () => this._items().map(i => i._pattern);
+  visible = computed(() => this._pattern.visible(), ...(ngDevMode ? [{
+    debugName: "visible"
   }] : []));
-  expanded = computed(() => this._pattern.expanded(), ...(ngDevMode ? [{
-    debugName: "expanded"
+  tabIndex = computed(() => this._pattern.tabIndex(), ...(ngDevMode ? [{
+    debugName: "tabIndex"
   }] : []));
-  hasPopup = computed(() => this._pattern.hasPopup(), ...(ngDevMode ? [{
-    debugName: "hasPopup"
+  onSelect = output();
+  expansionDelay = input(100, ...(ngDevMode ? [{
+    debugName: "expansionDelay"
   }] : []));
-  _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));
-  }
-  open() {
-    this._pattern.open({
-      first: true
+    this._pattern = new MenuPattern({
+      ...this,
+      parent: computed(() => this.parent()?._pattern),
+      items: this._itemPatterns,
+      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.visible() || !!this.parent()?._pattern.hasBeenFocused());
+      }
+    });
+    afterRenderEffect(() => {
+      if (this._pattern.visible()) {
+        const activeItem = untracked(() => this._pattern.inputs.activeItem());
+        this._pattern.listBehavior.goto(activeItem);
+      }
+    });
+    afterRenderEffect(() => {
+      if (!this._pattern.hasBeenFocused() && !this._pattern.hasBeenHovered() && this._items().length) {
+        untracked(() => this._pattern.setDefaultState());
+      }
     });
   }
   close() {
@@ -703,16 +682,16 @@ class MenuItem {
     minVersion: "12.0.0",
     version: "21.0.0",
     ngImport: i0,
-    type: MenuItem,
+    type: Menu,
     deps: [],
     target: i0.ɵɵFactoryTarget.Directive
   });
   static ɵdir = i0.ɵɵngDeclareDirective({
-    minVersion: "17.1.0",
+    minVersion: "17.2.0",
     version: "21.0.0",
-    type: MenuItem,
+    type: Menu,
     isStandalone: true,
-    selector: "[ngMenuItem]",
+    selector: "[ngMenu]",
     inputs: {
       id: {
         classPropertyName: "id",
@@ -721,55 +700,72 @@ class MenuItem {
         isRequired: false,
         transformFunction: null
       },
-      value: {
-        classPropertyName: "value",
-        publicName: "value",
+      wrap: {
+        classPropertyName: "wrap",
+        publicName: "wrap",
         isSignal: true,
-        isRequired: true,
+        isRequired: false,
         transformFunction: null
       },
-      disabled: {
-        classPropertyName: "disabled",
-        publicName: "disabled",
+      typeaheadDelay: {
+        classPropertyName: "typeaheadDelay",
+        publicName: "typeaheadDelay",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       },
-      searchTerm: {
-        classPropertyName: "searchTerm",
-        publicName: "searchTerm",
+      disabled: {
+        classPropertyName: "disabled",
+        publicName: "disabled",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       },
-      submenu: {
-        classPropertyName: "submenu",
-        publicName: "submenu",
+      expansionDelay: {
+        classPropertyName: "expansionDelay",
+        publicName: "expansionDelay",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       }
     },
     outputs: {
-      searchTerm: "searchTermChange"
+      onSelect: "onSelect"
     },
     host: {
       attributes: {
-        "role": "menuitem"
+        "role": "menu"
       },
       listeners: {
-        "focusin": "_pattern.onFocusIn()"
+        "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.tabindex": "_pattern.tabIndex()",
-        "attr.data-active": "active()",
-        "attr.aria-haspopup": "hasPopup()",
-        "attr.aria-expanded": "expanded()",
+        "attr.id": "_pattern.id()",
         "attr.aria-disabled": "_pattern.disabled()",
-        "attr.aria-controls": "_pattern.submenu()?.id()"
+        "attr.tabindex": "tabIndex()",
+        "attr.data-visible": "visible()"
       }
     },
-    exportAs: ["ngMenuItem"],
+    providers: [{
+      provide: MENU_COMPONENT,
+      useExisting: Menu
+    }],
+    queries: [{
+      propertyName: "_allItems",
+      predicate: MenuItem,
+      descendants: true,
+      isSignal: true
+    }],
+    exportAs: ["ngMenu"],
+    hostDirectives: [{
+      directive: i1.DeferredContentAware,
+      inputs: ["preserveContent", "preserveContent"]
+    }],
     ngImport: i0
   });
 }
@@ -777,26 +773,46 @@ i0.ɵɵngDeclareClassMetadata({
   minVersion: "12.0.0",
   version: "21.0.0",
   ngImport: i0,
-  type: MenuItem,
+  type: Menu,
   decorators: [{
     type: Directive,
     args: [{
-      selector: '[ngMenuItem]',
-      exportAs: 'ngMenuItem',
+      selector: '[ngMenu]',
+      exportAs: 'ngMenu',
       host: {
-        'role': 'menuitem',
-        '(focusin)': '_pattern.onFocusIn()',
-        '[attr.tabindex]': '_pattern.tabIndex()',
-        '[attr.data-active]': 'active()',
-        '[attr.aria-haspopup]': 'hasPopup()',
-        '[attr.aria-expanded]': 'expanded()',
+        'role': 'menu',
+        '[attr.id]': '_pattern.id()',
         '[attr.aria-disabled]': '_pattern.disabled()',
-        '[attr.aria-controls]': '_pattern.submenu()?.id()'
-      }
+        '[attr.tabindex]': 'tabIndex()',
+        '[attr.data-visible]': 'visible()',
+        '(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']
+      }],
+      providers: [{
+        provide: MENU_COMPONENT,
+        useExisting: Menu
+      }]
     }]
   }],
   ctorParameters: () => [],
   propDecorators: {
+    _allItems: [{
+      type: i0.ContentChildren,
+      args: [i0.forwardRef(() => MenuItem), {
+        ...{
+          descendants: true
+        },
+        isSignal: true
+      }]
+    }],
     id: [{
       type: i0.Input,
       args: [{
@@ -805,43 +821,45 @@ i0.ɵɵngDeclareClassMetadata({
         required: false
       }]
     }],
-    value: [{
+    wrap: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "value",
-        required: true
+        alias: "wrap",
+        required: false
       }]
     }],
-    disabled: [{
+    typeaheadDelay: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "disabled",
+        alias: "typeaheadDelay",
         required: false
       }]
     }],
-    searchTerm: [{
+    disabled: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "searchTerm",
+        alias: "disabled",
         required: false
       }]
-    }, {
+    }],
+    onSelect: [{
       type: i0.Output,
-      args: ["searchTermChange"]
+      args: ["onSelect"]
     }],
-    submenu: [{
+    expansionDelay: [{
       type: i0.Input,
       args: [{
         isSignal: true,
-        alias: "submenu",
+        alias: "expansionDelay",
         required: false
       }]
     }]
   }
 });
+
 class MenuContent {
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",