@ojiepermana/angular 22.1.13 → 22.2.0

package/fesm2022/ojiepermana-angular-component-context-menu.mjs

@@ -1,162 +1,197 @@
-import { Overlay } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, ElementRef, DestroyRef, Injector, input, output, signal, Directive } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { filter } from 'rxjs/operators';
-import { injectUniqueId } from '@ojiepermana/angular/component/utils/core';
-import { overlayDismissals } from '@ojiepermana/angular/component/utils/overlay';
-import { MENU_OVERLAY } from '@ojiepermana/angular/component/dropdown-menu';
-
-/** `MouseEvent.button` for the secondary (right) button. */
+import { Overlay } from "@angular/cdk/overlay";
+import { TemplatePortal } from "@angular/cdk/portal";
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, Injector, ViewContainerRef, inject, input, output, signal } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { filter } from "rxjs/operators";
+import { injectUniqueId } from "@ojiepermana/angular/component/utils/core";
+import { overlayDismissals } from "@ojiepermana/angular/component/utils/overlay";
+import { MENU_OVERLAY } from "@ojiepermana/angular/component/dropdown-menu";
 const SECONDARY_BUTTON = 2;
-/**
- * Opens a menu anchored to the cursor when the host fires `contextmenu`.
- * Reuses `<ng-template MenuContent>` from the dropdown-menu entry.
- *
- * @example
- * <div [ContextMenuTrigger]="menu" class="p-12 border">Right-click me</div>
- * <ng-template MenuContent #menu>
- *   <MenuSurface>
- *     <button MenuItem>Copy</button>
- *     <button MenuItem>Paste</button>
- *   </MenuSurface>
- * </ng-template>
- */
-class ContextMenuTriggerDirective {
-    overlay = inject(Overlay);
-    vcr = inject(ViewContainerRef);
-    el = inject(ElementRef);
-    destroyRef = inject(DestroyRef);
-    injector = inject(Injector);
-    ContextMenuTrigger = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ContextMenuTrigger" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    /** Ties `aria-controls` here to `aria-labelledby` on the surface. */
-    triggerId = this.el.nativeElement.id || injectUniqueId('ContextMenuTrigger');
-    surfaceId = injectUniqueId('MenuSurface');
-    openedChange = output();
-    overlayRef = null;
-    /** Set while the right click that opened the menu is still waiting on its `auxclick`. */
-    pendingGestureRelease = false;
-    isOpen = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.destroyRef.onDestroy(() => this.close(false));
-    }
-    onContextMenu(event) {
-        if (this.disabled())
-            return;
-        event.preventDefault();
-        this.close();
-        this.openAt(event.clientX, event.clientY);
-        // `contextmenu` arrives at mouse *down*; this press has an `auxclick` still
-        // to come at mouse *up*. Arm the guard after `openAt`, which disarms it.
-        this.pendingGestureRelease = true;
-    }
-    onKeyDown(event) {
-        const isContextMenuKey = event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10');
-        if (!isContextMenuKey || this.disabled()) {
-            return;
-        }
-        event.preventDefault();
-        const rect = this.el.nativeElement.getBoundingClientRect();
-        this.close();
-        this.openAt(rect.left + rect.width / 2, rect.top + rect.height / 2);
-    }
-    openAt(x, y) {
-        this.pendingGestureRelease = false;
-        this.overlayRef = this.overlay.create({
-            positionStrategy: this.overlay
-                .position()
-                .flexibleConnectedTo({ x, y })
-                .withPositions([
-                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
-                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
-                { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
-                { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
-            ]),
-            scrollStrategy: this.overlay.scrollStrategies.close(),
-            hasBackdrop: false,
-            panelClass: 'menu-panel',
-        });
-        // The surface is rendered from a template declared in the CONSUMER's
-        // component, so its injector chain never reaches this directive. Handing it
-        // a controller is what makes it a real menu rather than a floating panel:
-        // without one it cannot name itself, cannot close after a pick, and -- the
-        // reason the shared conformance suite caught it -- a nested `[MenuTrigger]`
-        // inside it does not know it is a submenu, so ArrowLeft leaves the user
-        // stuck one level in. `MenuTrigger` has always done this; this surface was
-        // simply never wired the same way.
-        const controller = {
-            surfaceId: this.surfaceId,
-            triggerId: this.triggerId,
-            // A context menu is opened by a pointer or a key on its own host, never
-            // from an item of another menu, so it is always a root menu.
-            isSubmenu: false,
-            close: () => this.close(),
-            closeAfterSelect: () => this.close(),
-        };
-        const portal = new TemplatePortal(this.ContextMenuTrigger().template, this.vcr, undefined, Injector.create({
-            parent: this.injector,
-            providers: [{ provide: MENU_OVERLAY, useValue: controller }],
-        }));
-        this.overlayRef.attach(portal);
-        overlayDismissals(this.overlayRef)
-            .pipe(filter((event) => !this.isOpeningGestureRelease(event)), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.close());
-        this.isOpen.set(true);
-        this.openedChange.emit(true);
-    }
-    close(emitOpenedChange = true) {
-        if (!this.overlayRef)
-            return;
-        const overlayRef = this.overlayRef;
-        this.overlayRef = null;
-        this.isOpen.set(false);
-        overlayRef.dispose();
-        if (emitOpenedChange) {
-            this.openedChange.emit(false);
-        }
-    }
-    /**
-     * A right click delivers `contextmenu` at mouse down and a trailing `auxclick`
-     * at mouse up. The overlay is created on the first, so the CDK outside-pointer
-     * dispatcher hands the second to the menu that very press just opened and it
-     * dismisses itself before the user releases the button.
-     *
-     * Swallow that one release, and only that one: the guard is armed by
-     * `onContextMenu` alone (never by the Shift+F10 path) and is spent on the next
-     * dismissal whatever it is, so a left click, a middle click, or a later right
-     * click on the trigger still closes the menu.
-     */
-    isOpeningGestureRelease(event) {
-        if (!this.pendingGestureRelease) {
-            return false;
-        }
-        this.pendingGestureRelease = false;
-        return (event instanceof MouseEvent && event.type === 'auxclick' && event.button === SECONDARY_BUTTON);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ContextMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: ContextMenuTriggerDirective, isStandalone: true, selector: "[ContextMenuTrigger]", inputs: { ContextMenuTrigger: { classPropertyName: "ContextMenuTrigger", publicName: "ContextMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "contextmenu": "onContextMenu($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.id": "triggerId", "attr.aria-controls": "isOpen() ? surfaceId : null" } }, exportAs: ["ContextMenuTrigger"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ContextMenuTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ContextMenuTrigger]',
-                    exportAs: 'ContextMenuTrigger',
-                    host: {
-                        '[attr.id]': 'triggerId',
-                        '[attr.aria-controls]': 'isOpen() ? surfaceId : null',
-                        '(contextmenu)': 'onContextMenu($event)',
-                        '(keydown)': 'onKeyDown($event)',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { ContextMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "ContextMenuTrigger", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ContextMenuTriggerDirective };
+var ContextMenuTriggerDirective = class ContextMenuTriggerDirective {
+	overlay = inject(Overlay);
+	vcr = inject(ViewContainerRef);
+	el = inject(ElementRef);
+	destroyRef = inject(DestroyRef);
+	injector = inject(Injector);
+	ContextMenuTrigger = input.required(...ngDevMode ? [{ debugName: "ContextMenuTrigger" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	triggerId = this.el.nativeElement.id || injectUniqueId("ContextMenuTrigger");
+	surfaceId = injectUniqueId("MenuSurface");
+	openedChange = output();
+	overlayRef = null;
+	pendingGestureRelease = false;
+	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.destroyRef.onDestroy(() => this.close(false));
+	}
+	onContextMenu(event) {
+		if (this.disabled()) return;
+		event.preventDefault();
+		this.close();
+		this.openAt(event.clientX, event.clientY);
+		this.pendingGestureRelease = true;
+	}
+	onKeyDown(event) {
+		if (!(event.key === "ContextMenu" || event.shiftKey && event.key === "F10") || this.disabled()) return;
+		event.preventDefault();
+		const rect = this.el.nativeElement.getBoundingClientRect();
+		this.close();
+		this.openAt(rect.left + rect.width / 2, rect.top + rect.height / 2);
+	}
+	openAt(x, y) {
+		this.pendingGestureRelease = false;
+		this.overlayRef = this.overlay.create({
+			positionStrategy: this.overlay.position().flexibleConnectedTo({
+				x,
+				y
+			}).withPositions([
+				{
+					originX: "start",
+					originY: "bottom",
+					overlayX: "start",
+					overlayY: "top"
+				},
+				{
+					originX: "start",
+					originY: "top",
+					overlayX: "start",
+					overlayY: "bottom"
+				},
+				{
+					originX: "end",
+					originY: "bottom",
+					overlayX: "end",
+					overlayY: "top"
+				},
+				{
+					originX: "end",
+					originY: "top",
+					overlayX: "end",
+					overlayY: "bottom"
+				}
+			]),
+			scrollStrategy: this.overlay.scrollStrategies.close(),
+			hasBackdrop: false,
+			panelClass: "menu-panel"
+		});
+		const controller = {
+			surfaceId: this.surfaceId,
+			triggerId: this.triggerId,
+			isSubmenu: false,
+			close: () => this.close(),
+			closeAfterSelect: () => this.close()
+		};
+		const portal = new TemplatePortal(this.ContextMenuTrigger().template, this.vcr, void 0, Injector.create({
+			parent: this.injector,
+			providers: [{
+				provide: MENU_OVERLAY,
+				useValue: controller
+			}]
+		}));
+		this.overlayRef.attach(portal);
+		overlayDismissals(this.overlayRef).pipe(filter((event) => !this.isOpeningGestureRelease(event)), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.close());
+		this.isOpen.set(true);
+		this.openedChange.emit(true);
+	}
+	close(emitOpenedChange = true) {
+		if (!this.overlayRef) return;
+		const overlayRef = this.overlayRef;
+		this.overlayRef = null;
+		this.isOpen.set(false);
+		overlayRef.dispose();
+		if (emitOpenedChange) this.openedChange.emit(false);
+	}
+	isOpeningGestureRelease(event) {
+		if (!this.pendingGestureRelease) return false;
+		this.pendingGestureRelease = false;
+		return event instanceof MouseEvent && event.type === "auxclick" && event.button === SECONDARY_BUTTON;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ContextMenuTriggerDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: ContextMenuTriggerDirective,
+		isStandalone: true,
+		selector: "[ContextMenuTrigger]",
+		inputs: {
+			ContextMenuTrigger: {
+				classPropertyName: "ContextMenuTrigger",
+				publicName: "ContextMenuTrigger",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { openedChange: "openedChange" },
+		host: {
+			listeners: {
+				"contextmenu": "onContextMenu($event)",
+				"keydown": "onKeyDown($event)"
+			},
+			properties: {
+				"attr.id": "triggerId",
+				"attr.aria-controls": "isOpen() ? surfaceId : null"
+			}
+		},
+		exportAs: ["ContextMenuTrigger"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ContextMenuTriggerDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[ContextMenuTrigger]",
+			exportAs: "ContextMenuTrigger",
+			host: {
+				"[attr.id]": "triggerId",
+				"[attr.aria-controls]": "isOpen() ? surfaceId : null",
+				"(contextmenu)": "onContextMenu($event)",
+				"(keydown)": "onKeyDown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		ContextMenuTrigger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ContextMenuTrigger",
+				required: true
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		openedChange: [{
+			type: i0.Output,
+			args: ["openedChange"]
+		}]
+	}
+});
+export { ContextMenuTriggerDirective };