mirror of
https://github.com/bitwarden/browser
synced 2026-01-31 00:33:33 +00:00
77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import { FocusableOption } from "@angular/cdk/a11y";
|
|
import { coerceBooleanProperty } from "@angular/cdk/coercion";
|
|
import { NgClass } from "@angular/common";
|
|
import { Component, ElementRef, HostBinding, inject, Input, input } from "@angular/core";
|
|
|
|
import { MenuTriggerForDirective } from "./menu-trigger-for.directive";
|
|
|
|
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
|
|
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
|
|
@Component({
|
|
selector: "[bitMenuItem]",
|
|
templateUrl: "menu-item.component.html",
|
|
imports: [NgClass],
|
|
host: {
|
|
"(click)": "onClick($event)",
|
|
},
|
|
})
|
|
export class MenuItemComponent implements FocusableOption {
|
|
private bitMenuTriggerFor = inject(MenuTriggerForDirective, { optional: true });
|
|
|
|
@HostBinding("class") classList = [
|
|
"tw-block",
|
|
"tw-w-full",
|
|
"tw-py-1.5",
|
|
"tw-px-3",
|
|
"!tw-text-main",
|
|
"!tw-no-underline",
|
|
"tw-cursor-pointer",
|
|
"tw-border-none",
|
|
"tw-bg-background",
|
|
"tw-text-left",
|
|
"hover:tw-bg-hover-default",
|
|
"focus-visible:tw-z-50",
|
|
"focus-visible:tw-outline-none",
|
|
"focus-visible:tw-ring-2",
|
|
"focus-visible:tw-rounded-lg",
|
|
"focus-visible:tw-ring-inset",
|
|
"focus-visible:tw-ring-primary-600",
|
|
"active:!tw-ring-0",
|
|
"active:!tw-ring-offset-0",
|
|
"disabled:!tw-text-muted",
|
|
"disabled:hover:tw-bg-background",
|
|
"disabled:tw-cursor-not-allowed",
|
|
];
|
|
@HostBinding("attr.role") role = "menuitem";
|
|
@HostBinding("tabIndex") tabIndex = "-1";
|
|
@HostBinding("attr.disabled") get disabledAttr() {
|
|
return this.disabled || null; // native disabled attr must be null when false
|
|
}
|
|
|
|
// TODO: Skipped for signal migration because:
|
|
// This input overrides a field from a superclass, while the superclass field
|
|
// is not migrated.
|
|
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
|
|
// eslint-disable-next-line @angular-eslint/prefer-signals
|
|
@Input({ transform: coerceBooleanProperty }) disabled?: boolean = false;
|
|
|
|
/**
|
|
* When true, clicking this menu item will not close the parent menu.
|
|
* Useful for items that open submenus or perform actions that should keep the menu open.
|
|
*/
|
|
readonly disableClose = input<boolean>(false);
|
|
|
|
constructor(public elementRef: ElementRef<HTMLButtonElement>) {}
|
|
|
|
onClick(event: MouseEvent) {
|
|
if (this.disableClose() || this.bitMenuTriggerFor) {
|
|
// Stop propagation to prevent the menu from closing
|
|
event.stopPropagation();
|
|
}
|
|
}
|
|
|
|
focus() {
|
|
this.elementRef.nativeElement.focus();
|
|
}
|
|
}
|