| 55 | }, |
| 56 | }) |
| 57 | export class MenuTrigger<V> { |
| 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 directionality (LTR / RTL) context for the application (or a subtree of it). */ |
| 65 | readonly textDirection = inject(Directionality).valueSignal; |
| 66 | |
| 67 | /** The menu associated with the trigger. */ |
| 68 | readonly menu = input<Menu<V> | undefined>(undefined); |
| 69 | |
| 70 | /** Whether the menu is expanded. */ |
| 71 | readonly expanded = computed(() => this._pattern.expanded()); |
| 72 | |
| 73 | /** Whether the menu trigger has a popup. */ |
| 74 | readonly hasPopup = computed(() => this._pattern.hasPopup()); |
| 75 | |
| 76 | /** Whether the menu trigger is disabled. */ |
| 77 | readonly disabled = input(false, {transform: booleanAttribute}); |
| 78 | |
| 79 | /** Whether the menu trigger is soft disabled. */ |
| 80 | readonly softDisabled = input(true, {transform: booleanAttribute}); |
| 81 | |
| 82 | /** The menu trigger ui pattern instance. */ |
| 83 | readonly _pattern: MenuTriggerPattern<V> = new MenuTriggerPattern({ |
| 84 | textDirection: this.textDirection, |
| 85 | element: computed(() => this._elementRef.nativeElement), |
| 86 | menu: computed(() => this.menu()?._pattern), |
| 87 | disabled: () => this.disabled(), |
| 88 | }); |
| 89 | |
| 90 | constructor() { |
| 91 | effect(() => this.menu()?.parent.set(this)); |
| 92 | effect(() => this._pattern.pendingFocusEffect()); |
| 93 | |
| 94 | // Automatically prevent form submission. |
| 95 | if (this.element.tagName === 'BUTTON' && !this.element.hasAttribute('type')) { |
| 96 | this.element.setAttribute('type', 'button'); |
| 97 | } |
| 98 | } |
| 99 | |
| 100 | /** Opens the menu focusing on the first menu item. */ |
| 101 | open() { |
| 102 | this._pattern.open({first: true}); |
| 103 | } |
| 104 | |
| 105 | /** Closes the menu. */ |
| 106 | close() { |
| 107 | this._pattern.close(); |
| 108 | } |
| 109 | } |