| 55 | }, |
| 56 | }) |
| 57 | export class MenuItem<V> implements OnInit, OnDestroy { |
| 58 | /** A reference to the host element. */ |
| 59 | private readonly _elementRef = inject(ElementRef); |
| 60 | |
| 61 | /** A reference to the host element. */ |
| 62 | readonly element = this._elementRef.nativeElement as HTMLElement; |
| 63 | |
| 64 | /** The unique ID of the menu item. */ |
| 65 | readonly id = input(inject(_IdGenerator).getId('ng-menu-item-', true)); |
| 66 | |
| 67 | /** The value of the menu item. */ |
| 68 | readonly value = input.required<V>(); |
| 69 | |
| 70 | /** Whether the menu item is disabled. */ |
| 71 | readonly disabled = input<boolean>(false); |
| 72 | |
| 73 | /** The search term associated with the menu item. */ |
| 74 | readonly searchTerm = model<string>(''); |
| 75 | |
| 76 | /** The role of the menu item. */ |
| 77 | readonly role = input<'menuitem' | 'menuitemradio' | 'menuitemcheckbox'>('menuitem'); |
| 78 | |
| 79 | /** A reference to the parent menu or menubar. */ |
| 80 | readonly parent = inject<Menu<V> | MenuBar<V>>(MENU_COMPONENT, {optional: true}); |
| 81 | |
| 82 | /** The submenu associated with the menu item. */ |
| 83 | readonly submenu = input<Menu<V> | undefined>(undefined); |
| 84 | |
| 85 | /** Whether the menu item is active. */ |
| 86 | readonly active = computed(() => this._pattern.active()); |
| 87 | |
| 88 | /** Whether the menu is expanded. */ |
| 89 | readonly expanded = computed(() => this._pattern.expanded()); |
| 90 | |
| 91 | /** Whether the menu item has a popup. */ |
| 92 | readonly hasPopup = computed(() => this._pattern.hasPopup()); |
| 93 | |
| 94 | /** The menu item ui pattern instance. */ |
| 95 | readonly _pattern: MenuItemPattern<V> = new MenuItemPattern<V>({ |
| 96 | id: this.id, |
| 97 | value: this.value, |
| 98 | element: computed(() => this._elementRef.nativeElement), |
| 99 | disabled: this.disabled, |
| 100 | searchTerm: this.searchTerm, |
| 101 | parent: computed(() => this.parent?._pattern), |
| 102 | submenu: computed(() => this.submenu()?._pattern), |
| 103 | role: this.role, |
| 104 | }); |
| 105 | |
| 106 | constructor() { |
| 107 | effect(() => this.submenu()?.parent.set(this)); |
| 108 | |
| 109 | // Check for any violations after the DOM has been updated. |
| 110 | if (typeof ngDevMode === 'undefined' || ngDevMode) { |
| 111 | afterRenderEffect({ |
| 112 | read: () => { |
| 113 | const violations: string[] = []; |
| 114 | if (!this.parent) { |