@angular/aria 21.0.0-rc.0 → 21.0.0-rc.2

package/fesm2022/menu.mjs

@@ -1,21 +1,52 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, output, computed, Directive, contentChildren, signal, afterRenderEffect, untracked, model } from '@angular/core';
-import { MenuTriggerPattern, MenuPattern, MenuBarPattern, MenuItemPattern } from '@angular/aria/private';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { inject, ElementRef, input, computed, booleanAttribute, effect, Directive, contentChildren, signal, 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);
   element = this._elementRef.nativeElement;
-  submenu = input(undefined, ...(ngDevMode ? [{
-    debugName: "submenu"
+  textDirection = inject(Directionality).valueSignal;
+  menu = input(undefined, ...(ngDevMode ? [{
+    debugName: "menu"
+  }] : []));
+  expanded = computed(() => this._pattern.expanded(), ...(ngDevMode ? [{
+    debugName: "expanded"
   }] : []));
-  onSubmit = output();
+  hasPopup = computed(() => this._pattern.hasPopup(), ...(ngDevMode ? [{
+    debugName: "hasPopup"
+  }] : []));
+  disabled = input(false, ...(ngDevMode ? [{
+    debugName: "disabled",
+    transform: booleanAttribute
+  }] : [{
+    transform: booleanAttribute
+  }]));
+  softDisabled = input(true, ...(ngDevMode ? [{
+    debugName: "softDisabled",
+    transform: booleanAttribute
+  }] : [{
+    transform: booleanAttribute
+  }]));
   _pattern = new MenuTriggerPattern({
-    onSubmit: value => this.onSubmit.emit(value),
+    textDirection: this.textDirection,
     element: computed(() => this._elementRef.nativeElement),
-    submenu: computed(() => this.submenu()?._pattern)
+    menu: computed(() => this.menu()?._pattern),
+    disabled: () => this.disabled()
   });
+  constructor() {
+    effect(() => this.menu()?.parent.set(this));
+  }
+  open() {
+    this._pattern.open({
+      first: true
+    });
+  }
+  close() {
+    this._pattern.close();
+  }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
     version: "20.2.0-next.2",
@@ -31,30 +62,43 @@ class MenuTrigger {
     isStandalone: true,
     selector: "button[ngMenuTrigger]",
     inputs: {
-      submenu: {
-        classPropertyName: "submenu",
-        publicName: "submenu",
+      menu: {
+        classPropertyName: "menu",
+        publicName: "menu",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      disabled: {
+        classPropertyName: "disabled",
+        publicName: "disabled",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      softDisabled: {
+        classPropertyName: "softDisabled",
+        publicName: "softDisabled",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       }
     },
-    outputs: {
-      onSubmit: "onSubmit"
-    },
     host: {
       listeners: {
         "click": "_pattern.onClick()",
         "keydown": "_pattern.onKeydown($event)",
-        "focusout": "_pattern.onFocusOut($event)"
+        "focusout": "_pattern.onFocusOut($event)",
+        "focusin": "_pattern.onFocusIn()"
       },
       properties: {
-        "attr.tabindex": "_pattern.tabindex()",
-        "attr.aria-haspopup": "_pattern.hasPopup()",
-        "attr.aria-expanded": "_pattern.expanded()",
-        "attr.aria-controls": "_pattern.submenu()?.id()"
-      },
-      classAttribute: "ng-menu-trigger"
+        "attr.tabindex": "_pattern.tabIndex()",
+        "attr.disabled": "!softDisabled() && _pattern.disabled() ? true : null",
+        "attr.aria-disabled": "_pattern.disabled()",
+        "attr.aria-haspopup": "hasPopup()",
+        "attr.aria-expanded": "expanded()",
+        "attr.aria-controls": "_pattern.menu()?.id()"
+      }
     },
     exportAs: ["ngMenuTrigger"],
     ngImport: i0
@@ -71,19 +115,25 @@ i0.ɵɵngDeclareClassMetadata({
       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.submenu()?.id()',
+        '[attr.tabindex]': '_pattern.tabIndex()',
+        '[attr.disabled]': '!softDisabled() && _pattern.disabled() ? true : null',
+        '[attr.aria-disabled]': '_pattern.disabled()',
+        '[attr.aria-haspopup]': 'hasPopup()',
+        '[attr.aria-expanded]': 'expanded()',
+        '[attr.aria-controls]': '_pattern.menu()?.id()',
         '(click)': '_pattern.onClick()',
         '(keydown)': '_pattern.onKeydown($event)',
-        '(focusout)': '_pattern.onFocusOut($event)'
+        '(focusout)': '_pattern.onFocusOut($event)',
+        '(focusin)': '_pattern.onFocusIn()'
       }
     }]
-  }]
+  }],
+  ctorParameters: () => []
 });
 class Menu {
+  _deferredContentAware = inject(DeferredContentAware, {
+    optional: true
+  });
   _allItems = contentChildren(MenuItem, ...(ngDevMode ? [{
     debugName: "_allItems",
     descendants: true
@@ -95,67 +145,75 @@ class Menu {
   }] : []));
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  _directionality = inject(Directionality);
-  textDirection = toSignal(this._directionality.change, {
-    initialValue: this._directionality.value
-  });
-  submenu = input(undefined, ...(ngDevMode ? [{
-    debugName: "submenu"
-  }] : []));
-  id = input(Math.random().toString(36).substring(2, 10), ...(ngDevMode ? [{
+  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: "wrap",
+    transform: booleanAttribute
+  }] : [{
+    transform: booleanAttribute
+  }]));
+  typeaheadDelay = input(500, ...(ngDevMode ? [{
     debugName: "typeaheadDelay"
   }] : []));
-  parent = input(...(ngDevMode ? [undefined, {
+  disabled = input(false, ...(ngDevMode ? [{
+    debugName: "disabled",
+    transform: booleanAttribute
+  }] : [{
+    transform: booleanAttribute
+  }]));
+  parent = signal(undefined, ...(ngDevMode ? [{
     debugName: "parent"
   }] : []));
   _pattern;
   items = () => this._items().map(i => i._pattern);
-  isVisible = computed(() => this._pattern.isVisible(), ...(ngDevMode ? [{
-    debugName: "isVisible"
+  visible = computed(() => this._pattern.visible(), ...(ngDevMode ? [{
+    debugName: "visible"
+  }] : []));
+  tabIndex = computed(() => this._pattern.tabIndex(), ...(ngDevMode ? [{
+    debugName: "tabIndex"
+  }] : []));
+  onSelect = output();
+  expansionDelay = input(100, ...(ngDevMode ? [{
+    debugName: "expansionDelay"
   }] : []));
-  onSubmit = output();
   constructor() {
     this._pattern = new MenuPattern({
       ...this,
       parent: computed(() => this.parent()?._pattern),
       multi: () => false,
-      skipDisabled: () => false,
+      softDisabled: () => true,
       focusMode: () => 'roving',
       orientation: () => 'vertical',
       selectionMode: () => 'explicit',
       activeItem: signal(undefined),
       element: computed(() => this._elementRef.nativeElement),
-      onSubmit: value => this.onSubmit.emit(value)
+      onSelect: value => this.onSelect.emit(value)
     });
     afterRenderEffect(() => {
-      if (this._pattern.isVisible()) {
+      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.setDefaultState();
+      if (!this._pattern.hasBeenFocused() && this._items().length) {
+        untracked(() => 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);
-    }
+  close() {
+    this._pattern.close();
   }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
@@ -172,13 +230,6 @@ class Menu {
     isStandalone: true,
     selector: "[ngMenu]",
     inputs: {
-      submenu: {
-        classPropertyName: "submenu",
-        publicName: "submenu",
-        isSignal: true,
-        isRequired: false,
-        transformFunction: null
-      },
       id: {
         classPropertyName: "id",
         publicName: "id",
@@ -200,16 +251,23 @@ class Menu {
         isRequired: false,
         transformFunction: null
       },
-      parent: {
-        classPropertyName: "parent",
-        publicName: "parent",
+      disabled: {
+        classPropertyName: "disabled",
+        publicName: "disabled",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      expansionDelay: {
+        classPropertyName: "expansionDelay",
+        publicName: "expansionDelay",
         isSignal: true,
         isRequired: false,
         transformFunction: null
       }
     },
     outputs: {
-      onSubmit: "onSubmit"
+      onSelect: "onSelect"
     },
     host: {
       attributes: {
@@ -225,9 +283,10 @@ class Menu {
       },
       properties: {
         "attr.id": "_pattern.id()",
-        "attr.data-visible": "_pattern.isVisible()"
-      },
-      classAttribute: "ng-menu"
+        "attr.aria-disabled": "_pattern.disabled()",
+        "attr.tabindex": "tabIndex()",
+        "attr.data-visible": "visible()"
+      }
     },
     queries: [{
       propertyName: "_allItems",
@@ -236,6 +295,10 @@ class Menu {
       isSignal: true
     }],
     exportAs: ["ngMenu"],
+    hostDirectives: [{
+      directive: i1.DeferredContentAware,
+      inputs: ["preserveContent", "preserveContent"]
+    }],
     ngImport: i0
   });
 }
@@ -251,16 +314,21 @@ i0.ɵɵngDeclareClassMetadata({
       exportAs: 'ngMenu',
       host: {
         'role': 'menu',
-        'class': 'ng-menu',
         '[attr.id]': '_pattern.id()',
-        '[attr.data-visible]': '_pattern.isVisible()',
+        '[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)',
         '(focusin)': '_pattern.onFocusIn()',
         '(click)': '_pattern.onClick($event)'
-      }
+      },
+      hostDirectives: [{
+        directive: DeferredContentAware,
+        inputs: ['preserveContent']
+      }]
     }]
   }],
   ctorParameters: () => []
@@ -275,33 +343,45 @@ class MenuBar {
   _items = () => this._allItems().filter(i => i.parent === this);
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  _directionality = inject(Directionality);
-  textDirection = toSignal(this._directionality.change, {
-    initialValue: this._directionality.value
-  });
-  value = model([], ...(ngDevMode ? [{
-    debugName: "value"
+  disabled = input(false, ...(ngDevMode ? [{
+    debugName: "disabled",
+    transform: booleanAttribute
+  }] : [{
+    transform: booleanAttribute
+  }]));
+  softDisabled = input(true, ...(ngDevMode ? [{
+    debugName: "softDisabled",
+    transform: booleanAttribute
+  }] : [{
+    transform: booleanAttribute
+  }]));
+  textDirection = inject(Directionality).valueSignal;
+  values = model([], ...(ngDevMode ? [{
+    debugName: "values"
   }] : []));
   wrap = input(true, ...(ngDevMode ? [{
-    debugName: "wrap"
-  }] : []));
-  typeaheadDelay = input(0.5, ...(ngDevMode ? [{
+    debugName: "wrap",
+    transform: booleanAttribute
+  }] : [{
+    transform: booleanAttribute
+  }]));
+  typeaheadDelay = input(500, ...(ngDevMode ? [{
     debugName: "typeaheadDelay"
   }] : []));
   _pattern;
   items = signal([], ...(ngDevMode ? [{
     debugName: "items"
   }] : []));
-  onSubmit = output();
+  onSelect = output();
   constructor() {
     this._pattern = new MenuBarPattern({
       ...this,
       multi: () => false,
-      skipDisabled: () => false,
+      softDisabled: () => true,
       focusMode: () => 'roving',
       orientation: () => 'horizontal',
       selectionMode: () => 'explicit',
-      onSubmit: value => this.onSubmit.emit(value),
+      onSelect: value => this.onSelect.emit(value),
       activeItem: signal(undefined),
       element: computed(() => this._elementRef.nativeElement)
     });
@@ -314,6 +394,9 @@ class MenuBar {
       }
     });
   }
+  close() {
+    this._pattern.close();
+  }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
     version: "20.2.0-next.2",
@@ -329,9 +412,23 @@ class MenuBar {
     isStandalone: true,
     selector: "[ngMenuBar]",
     inputs: {
-      value: {
-        classPropertyName: "value",
-        publicName: "value",
+      disabled: {
+        classPropertyName: "disabled",
+        publicName: "disabled",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      softDisabled: {
+        classPropertyName: "softDisabled",
+        publicName: "softDisabled",
+        isSignal: true,
+        isRequired: false,
+        transformFunction: null
+      },
+      values: {
+        classPropertyName: "values",
+        publicName: "values",
         isSignal: true,
         isRequired: false,
         transformFunction: null
@@ -352,8 +449,8 @@ class MenuBar {
       }
     },
     outputs: {
-      value: "valueChange",
-      onSubmit: "onSubmit"
+      values: "valuesChange",
+      onSelect: "onSelect"
     },
     host: {
       attributes: {
@@ -366,7 +463,11 @@ class MenuBar {
         "focusin": "_pattern.onFocusIn()",
         "focusout": "_pattern.onFocusOut($event)"
       },
-      classAttribute: "ng-menu-bar"
+      properties: {
+        "attr.disabled": "!softDisabled() && _pattern.disabled() ? true : null",
+        "attr.aria-disabled": "_pattern.disabled()",
+        "attr.tabindex": "_pattern.tabIndex()"
+      }
     },
     queries: [{
       propertyName: "_allItems",
@@ -390,7 +491,9 @@ i0.ɵɵngDeclareClassMetadata({
       exportAs: 'ngMenuBar',
       host: {
         'role': 'menubar',
-        'class': 'ng-menu-bar',
+        '[attr.disabled]': '!softDisabled() && _pattern.disabled() ? true : null',
+        '[attr.aria-disabled]': '_pattern.disabled()',
+        '[attr.tabindex]': '_pattern.tabIndex()',
         '(keydown)': '_pattern.onKeydown($event)',
         '(mouseover)': '_pattern.onMouseOver($event)',
         '(click)': '_pattern.onClick($event)',
@@ -404,7 +507,7 @@ i0.ɵɵngDeclareClassMetadata({
 class MenuItem {
   _elementRef = inject(ElementRef);
   element = this._elementRef.nativeElement;
-  id = input(Math.random().toString(36).substring(2, 10), ...(ngDevMode ? [{
+  id = input(inject(_IdGenerator).getId('ng-menu-item-', true), ...(ngDevMode ? [{
     debugName: "id"
   }] : []));
   value = input.required(...(ngDevMode ? [{
@@ -426,6 +529,15 @@ class MenuItem {
   submenu = input(undefined, ...(ngDevMode ? [{
     debugName: "submenu"
   }] : []));
+  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,
@@ -435,6 +547,17 @@ class MenuItem {
     parent: computed(() => this.parent?._pattern),
     submenu: computed(() => this.submenu()?._pattern)
   });
+  constructor() {
+    effect(() => this.submenu()?.parent.set(this));
+  }
+  open() {
+    this._pattern.open({
+      first: true
+    });
+  }
+  close() {
+    this._pattern.close();
+  }
   static ɵfac = i0.ɵɵngDeclareFactory({
     minVersion: "12.0.0",
     version: "20.2.0-next.2",
@@ -493,15 +616,17 @@ class MenuItem {
       attributes: {
         "role": "menuitem"
       },
+      listeners: {
+        "focusin": "_pattern.onFocusIn()"
+      },
       properties: {
-        "attr.tabindex": "_pattern.tabindex()",
-        "attr.data-active": "_pattern.isActive()",
-        "attr.aria-haspopup": "_pattern.hasPopup()",
-        "attr.aria-expanded": "_pattern.expanded()",
+        "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()"
-      },
-      classAttribute: "ng-menu-item"
+      }
     },
     exportAs: ["ngMenuItem"],
     ngImport: i0
@@ -519,17 +644,54 @@ i0.ɵɵngDeclareClassMetadata({
       exportAs: 'ngMenuItem',
       host: {
         'role': 'menuitem',
-        'class': 'ng-menu-item',
-        '[attr.tabindex]': '_pattern.tabindex()',
-        '[attr.data-active]': '_pattern.isActive()',
-        '[attr.aria-haspopup]': '_pattern.hasPopup()',
-        '[attr.aria-expanded]': '_pattern.expanded()',
+        '(focusin)': '_pattern.onFocusIn()',
+        '[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: () => []
+});
+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, MenuItem, MenuTrigger };
+export { Menu, MenuBar, MenuContent, MenuItem, MenuTrigger };
 //# sourceMappingURL=menu.mjs.map