@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-menu.mjs

@@ -0,0 +1,461 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injector, afterNextRender, booleanAttribute, contentChild, inject, input, output, signal, viewChild } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+var MenuItem = class MenuItem {
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		if (host.tagName === "BUTTON" && !host.hasAttribute("type")) host.setAttribute("type", "button");
+		const swallowWhenDisabled = (event) => {
+			if (this.disabled()) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		};
+		host.addEventListener("click", swallowWhenDisabled, true);
+		host.addEventListener("auxclick", swallowWhenDisabled, true);
+		inject(DestroyRef).onDestroy(() => {
+			host.removeEventListener("click", swallowWhenDisabled, true);
+			host.removeEventListener("auxclick", swallowWhenDisabled, true);
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: MenuItem,
+		isStandalone: true,
+		selector: "button[gbtMenuItem], a[gbtMenuItem]",
+		inputs: {
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "menuitem",
+				"tabindex": "-1"
+			},
+			properties: {
+				"attr.data-variant": "variant() === \"danger\" ? \"danger\" : null",
+				"attr.aria-disabled": "disabled() ? \"true\" : null"
+			},
+			classAttribute: "gbt-menu__item"
+		},
+		ngImport: i0,
+		template: "@if (icon(); as name) {\n  <gbt-icon [name]=\"name\" class=\"gbt-menu-item__icon\" aria-hidden=\"true\" />\n}\n<ng-content />\n",
+		styles: [".gbt-menu-item__icon{flex-shrink:0}:host([data-variant=danger]){color:var(--color-error-text)}:host([data-variant=danger]:hover),:host([data-variant=danger]:focus-visible){background:var(--color-error-bg);color:var(--color-error-bg-text)}:host([aria-disabled=true]){opacity:.5;cursor:not-allowed}:host([aria-disabled=true]:hover){background:transparent}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[gbtMenuItem], a[gbtMenuItem]",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "gbt-menu__item",
+				role: "menuitem",
+				tabindex: "-1",
+				"[attr.data-variant]": "variant() === \"danger\" ? \"danger\" : null",
+				"[attr.aria-disabled]": "disabled() ? \"true\" : null"
+			},
+			template: "@if (icon(); as name) {\n  <gbt-icon [name]=\"name\" class=\"gbt-menu-item__icon\" aria-hidden=\"true\" />\n}\n<ng-content />\n",
+			styles: [".gbt-menu-item__icon{flex-shrink:0}:host([data-variant=danger]){color:var(--color-error-text)}:host([data-variant=danger]:hover),:host([data-variant=danger]:focus-visible){background:var(--color-error-bg);color:var(--color-error-bg-text)}:host([aria-disabled=true]){opacity:.5;cursor:not-allowed}:host([aria-disabled=true]:hover){background:transparent}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+var MenuTrigger = class MenuTrigger {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MenuTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: MenuTrigger,
+		isStandalone: true,
+		selector: "[gbtMenuTrigger]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MenuTrigger,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[gbtMenuTrigger]",
+			standalone: true
+		}]
+	}]
+});
+var Menu = class Menu {
+	elementRef = inject(ElementRef);
+	injector = inject(Injector);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	align = input("start", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	triggerIcon = input(null, ...ngDevMode ? [{ debugName: "triggerIcon" }] : /* istanbul ignore next */ []);
+	triggerAriaLabel = input(null, ...ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []);
+	chevron = input(true, {
+		...ngDevMode ? { debugName: "chevron" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	opened = output();
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	position = signal(null, ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	customTrigger = contentChild(MenuTrigger, ...ngDevMode ? [{ debugName: "customTrigger" }] : /* istanbul ignore next */ []);
+	trigger = viewChild("trigger", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	list = viewChild("list", ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+	toggle() {
+		this.open.update((value) => !value);
+		if (this.open()) {
+			this.updatePosition();
+			this.focusAfterRender("first");
+			this.opened.emit();
+		}
+	}
+	close(returnFocus) {
+		if (!this.open()) return;
+		const active = document.activeElement;
+		const focusIsFree = !active || active === document.body || !!this.list()?.nativeElement.contains(active);
+		this.open.set(false);
+		if (returnFocus && focusIsFree) this.trigger()?.nativeElement.focus();
+	}
+	onTriggerKeydown(event) {
+		if (event.key === "Escape" && this.open()) {
+			event.preventDefault();
+			this.close(true);
+			return;
+		}
+		if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+		event.preventDefault();
+		const target = event.key === "ArrowUp" ? "last" : "first";
+		if (!this.open()) {
+			this.open.set(true);
+			this.updatePosition();
+			this.opened.emit();
+		}
+		this.focusAfterRender(target);
+	}
+	onListKeydown(event) {
+		const items = this.items();
+		if (items.length === 0) return;
+		const index = items.indexOf(document.activeElement);
+		switch (event.key) {
+			case "Escape":
+				event.preventDefault();
+				this.close(true);
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				this.focus((index + 1) % items.length);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				this.focus((index - 1 + items.length) % items.length);
+				break;
+			case "Home":
+				event.preventDefault();
+				this.focus(0);
+				break;
+			case "End":
+				event.preventDefault();
+				this.focus(items.length - 1);
+		}
+	}
+	onListClick(event) {
+		const item = event.target?.closest("[role=\"menuitem\"]") ?? null;
+		if (item?.getAttribute("aria-disabled") === "true") return;
+		this.close(item !== null);
+	}
+	onDocumentClick(event) {
+		if (this.open() && !this.elementRef.nativeElement.contains(event.target)) this.close(false);
+	}
+	onFocusOut(event) {
+		const target = event.relatedTarget;
+		if (this.open() && !this.elementRef.nativeElement.contains(target)) this.open.set(false);
+	}
+	updatePosition() {
+		if (!this.open()) return;
+		const trigger = this.trigger()?.nativeElement;
+		if (!trigger) return;
+		const rect = trigger.getBoundingClientRect();
+		this.position.set(this.align() === "end" ? {
+			top: `${rect.bottom + 6}px`,
+			left: null,
+			right: `${window.innerWidth - rect.right}px`
+		} : {
+			top: `${rect.bottom + 6}px`,
+			left: `${rect.left}px`,
+			right: null
+		});
+	}
+	items() {
+		const list = this.list()?.nativeElement;
+		if (!list) return [];
+		return [...list.querySelectorAll("[role=\"menuitem\"]")];
+	}
+	focus(index) {
+		this.items()[index]?.focus();
+	}
+	focusAfterRender(target) {
+		afterNextRender(() => {
+			const items = this.items();
+			this.focus(target === "last" ? items.length - 1 : 0);
+		}, { injector: this.injector });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Menu,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: Menu,
+		isStandalone: true,
+		selector: "gbt-menu",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			triggerIcon: {
+				classPropertyName: "triggerIcon",
+				publicName: "triggerIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			triggerAriaLabel: {
+				classPropertyName: "triggerAriaLabel",
+				publicName: "triggerAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			chevron: {
+				classPropertyName: "chevron",
+				publicName: "chevron",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { opened: "opened" },
+		host: {
+			listeners: {
+				"document:click": "onDocumentClick($event)",
+				"focusout": "onFocusOut($event)",
+				"window:scroll": "updatePosition()",
+				"window:resize": "updatePosition()"
+			},
+			properties: { "class.gbt-menu-host--custom": "!triggerIcon() && !!customTrigger()" }
+		},
+		queries: [{
+			propertyName: "customTrigger",
+			first: true,
+			predicate: MenuTrigger,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "trigger",
+			first: true,
+			predicate: ["trigger"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "list",
+			first: true,
+			predicate: ["list"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"gbt-menu\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"gbt-menu__trigger\"\n    [class.gbt-menu__trigger--open]=\"open()\"\n    [class.gbt-menu__trigger--icon-only]=\"triggerIcon()\"\n    [class.gbt-menu__trigger--custom]=\"!triggerIcon() && customTrigger()\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-label]=\"triggerIcon() ? label() : triggerAriaLabel()\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" aria-hidden=\"true\" />\n    } @else {\n      <ng-content select=\"[gbtMenuTrigger]\">\n        <span class=\"gbt-menu__label\">{{ label() }}</span>\n      </ng-content>\n      @if (chevron()) {\n        <gbt-icon name=\"chevron-down\" class=\"gbt-menu__chevron\" aria-hidden=\"true\" />\n      }\n    }\n  </button>\n\n  @if (open() && position(); as pos) {\n    <div\n      #list\n      class=\"gbt-menu__list\"\n      role=\"menu\"\n      tabindex=\"-1\"\n      [attr.aria-label]=\"label()\"\n      [style.top]=\"pos.top\"\n      [style.left]=\"pos.left\"\n      [style.right]=\"pos.right\"\n      (keydown)=\"onListKeydown($event)\"\n      (click)=\"onListClick($event)\"\n    >\n      <ng-content />\n    </div>\n  }\n</div>\n",
+		styles: [":host{display:inline-block}.gbt-menu{position:relative;display:inline-block}:host(.gbt-menu-host--custom){max-width:100%}:host(.gbt-menu-host--custom) .gbt-menu{max-width:100%}.gbt-menu__trigger{display:flex;align-items:center;gap:.5rem;min-height:var(--gbt-control-height-md);padding:.5rem .75rem;background:transparent;border:1px solid transparent;border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:.875rem;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-menu__trigger:hover{background:var(--bg-hover)}.gbt-menu__trigger:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-menu__trigger--open{background:var(--bg-hover)}.gbt-menu__trigger--icon-only{padding:.5rem;gap:0}.gbt-menu__trigger--custom{min-width:0;max-width:100%;padding:.25rem .5rem .25rem .25rem}.gbt-menu__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-menu__trigger--open .gbt-menu__chevron{transform:rotate(180deg)}.gbt-menu__list{position:fixed;z-index:1000;display:flex;flex-direction:column;min-width:180px;padding:6px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-menu-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}@keyframes gbt-menu-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.gbt-menu__list{animation:none}.gbt-menu__chevron{transition:none}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Menu,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-menu",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"(document:click)": "onDocumentClick($event)",
+				"(focusout)": "onFocusOut($event)",
+				"(window:scroll)": "updatePosition()",
+				"(window:resize)": "updatePosition()",
+				"[class.gbt-menu-host--custom]": "!triggerIcon() && !!customTrigger()"
+			},
+			template: "<div class=\"gbt-menu\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"gbt-menu__trigger\"\n    [class.gbt-menu__trigger--open]=\"open()\"\n    [class.gbt-menu__trigger--icon-only]=\"triggerIcon()\"\n    [class.gbt-menu__trigger--custom]=\"!triggerIcon() && customTrigger()\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-label]=\"triggerIcon() ? label() : triggerAriaLabel()\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" aria-hidden=\"true\" />\n    } @else {\n      <ng-content select=\"[gbtMenuTrigger]\">\n        <span class=\"gbt-menu__label\">{{ label() }}</span>\n      </ng-content>\n      @if (chevron()) {\n        <gbt-icon name=\"chevron-down\" class=\"gbt-menu__chevron\" aria-hidden=\"true\" />\n      }\n    }\n  </button>\n\n  @if (open() && position(); as pos) {\n    <div\n      #list\n      class=\"gbt-menu__list\"\n      role=\"menu\"\n      tabindex=\"-1\"\n      [attr.aria-label]=\"label()\"\n      [style.top]=\"pos.top\"\n      [style.left]=\"pos.left\"\n      [style.right]=\"pos.right\"\n      (keydown)=\"onListKeydown($event)\"\n      (click)=\"onListClick($event)\"\n    >\n      <ng-content />\n    </div>\n  }\n</div>\n",
+			styles: [":host{display:inline-block}.gbt-menu{position:relative;display:inline-block}:host(.gbt-menu-host--custom){max-width:100%}:host(.gbt-menu-host--custom) .gbt-menu{max-width:100%}.gbt-menu__trigger{display:flex;align-items:center;gap:.5rem;min-height:var(--gbt-control-height-md);padding:.5rem .75rem;background:transparent;border:1px solid transparent;border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:.875rem;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-menu__trigger:hover{background:var(--bg-hover)}.gbt-menu__trigger:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-menu__trigger--open{background:var(--bg-hover)}.gbt-menu__trigger--icon-only{padding:.5rem;gap:0}.gbt-menu__trigger--custom{min-width:0;max-width:100%;padding:.25rem .5rem .25rem .25rem}.gbt-menu__chevron{flex-shrink:0;color:var(--text-secondary);transition:transform .2s cubic-bezier(.4,0,.2,1)}.gbt-menu__trigger--open .gbt-menu__chevron{transform:rotate(180deg)}.gbt-menu__list{position:fixed;z-index:1000;display:flex;flex-direction:column;min-width:180px;padding:6px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-menu-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}@keyframes gbt-menu-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.gbt-menu__list{animation:none}.gbt-menu__chevron{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		triggerIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "triggerIcon",
+				required: false
+			}]
+		}],
+		triggerAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "triggerAriaLabel",
+				required: false
+			}]
+		}],
+		chevron: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "chevron",
+				required: false
+			}]
+		}],
+		opened: [{
+			type: i0.Output,
+			args: ["opened"]
+		}],
+		customTrigger: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => MenuTrigger), { isSignal: true }]
+		}],
+		trigger: [{
+			type: i0.ViewChild,
+			args: ["trigger", { isSignal: true }]
+		}],
+		list: [{
+			type: i0.ViewChild,
+			args: ["list", { isSignal: true }]
+		}]
+	}
+});
+export { Menu, MenuItem, MenuTrigger };
+
+//# sourceMappingURL=masmarino-gabarit-menu.mjs.map

package/fesm2022/masmarino-gabarit-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-menu.mjs","names":[],"sources":["../../../projects/gabarit/menu/menu-item/menu-item.ts","../../../projects/gabarit/menu/menu-item/menu-item.html","../../../projects/gabarit/menu/menu.ts","../../../projects/gabarit/menu/menu.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  booleanAttribute,\n  inject,\n  input,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nexport type MenuItemVariant = 'default' | 'danger'\n\n@Component({\n  selector: 'button[gbtMenuItem], a[gbtMenuItem]',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './menu-item.html',\n  styleUrl: './menu-item.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'gbt-menu__item',\n    role: 'menuitem',\n    tabindex: '-1',\n    '[attr.data-variant]': 'variant() === \"danger\" ? \"danger\" : null',\n    '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n  },\n})\nexport class MenuItem {\n  icon = input<string | null>(null)\n  variant = input<MenuItemVariant>('default')\n  disabled = input(false, { transform: booleanAttribute })\n\n  constructor() {\n    const host: HTMLElement = inject(ElementRef).nativeElement\n    if (host.tagName === 'BUTTON' && !host.hasAttribute('type')) {\n      host.setAttribute('type', 'button')\n    }\n\n    const swallowWhenDisabled = (event: Event): void => {\n      if (this.disabled()) {\n        event.preventDefault()\n        event.stopImmediatePropagation()\n      }\n    }\n    host.addEventListener('click', swallowWhenDisabled, true)\n    host.addEventListener('auxclick', swallowWhenDisabled, true)\n    inject(DestroyRef).onDestroy(() => {\n      host.removeEventListener('click', swallowWhenDisabled, true)\n      host.removeEventListener('auxclick', swallowWhenDisabled, true)\n    })\n  }\n}\n","@if (icon(); as name) {\n  <gbt-icon [name]=\"name\" class=\"gbt-menu-item__icon\" aria-hidden=\"true\" />\n}\n<ng-content />\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  ElementRef,\n  Injector,\n  afterNextRender,\n  booleanAttribute,\n  contentChild,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\n\ninterface PopupPosition {\n  top: string\n  left: string | null\n  right: string | null\n}\n\n@Directive({\n  selector: '[gbtMenuTrigger]',\n  standalone: true,\n})\nexport class MenuTrigger {}\n\n@Component({\n  selector: 'gbt-menu',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './menu.html',\n  styleUrl: './menu.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '(document:click)': 'onDocumentClick($event)',\n    '(focusout)': 'onFocusOut($event)',\n    '(window:scroll)': 'updatePosition()',\n    '(window:resize)': 'updatePosition()',\n    '[class.gbt-menu-host--custom]': '!triggerIcon() && !!customTrigger()',\n  },\n})\nexport class Menu {\n  private readonly elementRef = inject(ElementRef<HTMLElement>)\n  private readonly injector = inject(Injector)\n\n  label = input.required<string>()\n  align = input<'start' | 'end'>('start')\n  triggerIcon = input<string | null>(null)\n  triggerAriaLabel = input<string | null>(null)\n  chevron = input(true, { transform: booleanAttribute })\n  opened = output<void>()\n\n  protected readonly open = signal(false)\n  protected readonly position = signal<PopupPosition | null>(null)\n\n  protected readonly customTrigger = contentChild(MenuTrigger)\n\n  private readonly trigger = viewChild<ElementRef<HTMLButtonElement>>('trigger')\n  private readonly list = viewChild<ElementRef<HTMLElement>>('list')\n\n  protected toggle(): void {\n    this.open.update((value) => !value)\n    if (this.open()) {\n      this.updatePosition()\n      this.focusAfterRender('first')\n      this.opened.emit()\n    }\n  }\n\n  protected close(returnFocus: boolean): void {\n    if (!this.open()) return\n    const active = document.activeElement\n    const focusIsFree =\n      !active || active === document.body || !!this.list()?.nativeElement.contains(active)\n    this.open.set(false)\n    if (returnFocus && focusIsFree) {\n      this.trigger()?.nativeElement.focus()\n    }\n  }\n\n  protected onTriggerKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.open()) {\n      event.preventDefault()\n      this.close(true)\n      return\n    }\n    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return\n    event.preventDefault()\n    const target = event.key === 'ArrowUp' ? 'last' : 'first'\n    if (!this.open()) {\n      this.open.set(true)\n      this.updatePosition()\n      this.opened.emit()\n    }\n    this.focusAfterRender(target)\n  }\n\n  protected onListKeydown(event: KeyboardEvent): void {\n    const items = this.items()\n    if (items.length === 0) return\n    const index = items.indexOf(document.activeElement as HTMLElement)\n    switch (event.key) {\n      case 'Escape':\n        event.preventDefault()\n        this.close(true)\n        break\n      case 'ArrowDown':\n        event.preventDefault()\n        this.focus((index + 1) % items.length)\n        break\n      case 'ArrowUp':\n        event.preventDefault()\n        this.focus((index - 1 + items.length) % items.length)\n        break\n      case 'Home':\n        event.preventDefault()\n        this.focus(0)\n        break\n      case 'End':\n        event.preventDefault()\n        this.focus(items.length - 1)\n        break\n    }\n  }\n\n  protected onListClick(event: MouseEvent): void {\n    const item = (event.target as Element | null)?.closest('[role=\"menuitem\"]') ?? null\n    if (item?.getAttribute('aria-disabled') === 'true') return\n    this.close(item !== null)\n  }\n\n  protected onDocumentClick(event: MouseEvent): void {\n    if (this.open() && !this.elementRef.nativeElement.contains(event.target as Node)) {\n      this.close(false)\n    }\n  }\n\n  protected onFocusOut(event: FocusEvent): void {\n    const target = event.relatedTarget as Node | null\n    if (this.open() && !this.elementRef.nativeElement.contains(target)) {\n      this.open.set(false)\n    }\n  }\n\n  protected updatePosition(): void {\n    if (!this.open()) return\n    const trigger = this.trigger()?.nativeElement\n    if (!trigger) return\n    const rect = trigger.getBoundingClientRect()\n    this.position.set(\n      this.align() === 'end'\n        ? { top: `${rect.bottom + 6}px`, left: null, right: `${window.innerWidth - rect.right}px` }\n        : { top: `${rect.bottom + 6}px`, left: `${rect.left}px`, right: null },\n    )\n  }\n\n  private items(): HTMLElement[] {\n    const list = this.list()?.nativeElement\n    if (!list) return []\n    return [...list.querySelectorAll<HTMLElement>('[role=\"menuitem\"]')]\n  }\n\n  private focus(index: number): void {\n    this.items()[index]?.focus()\n  }\n\n  private focusAfterRender(target: 'first' | 'last'): void {\n    afterNextRender(\n      () => {\n        const items = this.items()\n        this.focus(target === 'last' ? items.length - 1 : 0)\n      },\n      { injector: this.injector },\n    )\n  }\n}\n","<div class=\"gbt-menu\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"gbt-menu__trigger\"\n    [class.gbt-menu__trigger--open]=\"open()\"\n    [class.gbt-menu__trigger--icon-only]=\"triggerIcon()\"\n    [class.gbt-menu__trigger--custom]=\"!triggerIcon() && customTrigger()\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-label]=\"triggerIcon() ? label() : triggerAriaLabel()\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    @if (triggerIcon(); as icon) {\n      <gbt-icon [name]=\"icon\" aria-hidden=\"true\" />\n    } @else {\n      <ng-content select=\"[gbtMenuTrigger]\">\n        <span class=\"gbt-menu__label\">{{ label() }}</span>\n      </ng-content>\n      @if (chevron()) {\n        <gbt-icon name=\"chevron-down\" class=\"gbt-menu__chevron\" aria-hidden=\"true\" />\n      }\n    }\n  </button>\n\n  @if (open() && position(); as pos) {\n    <div\n      #list\n      class=\"gbt-menu__list\"\n      role=\"menu\"\n      tabindex=\"-1\"\n      [attr.aria-label]=\"label()\"\n      [style.top]=\"pos.top\"\n      [style.left]=\"pos.left\"\n      [style.right]=\"pos.right\"\n      (keydown)=\"onListKeydown($event)\"\n      (click)=\"onListClick($event)\"\n    >\n      <ng-content />\n    </div>\n  }\n</div>\n"],"mappings":"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"}