@mk-kit/ui 0.34.0

package/fesm2022/mk-kit-ui-context-menu.mjs

@@ -0,0 +1,144 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, Directive } from '@angular/core';
+
+/** Hold time before a touch press opens the context menu. */
+const LONG_PRESS_MS = 500;
+/** Movement allowed before a touch press is treated as a scroll/drag instead. */
+const LONG_PRESS_SLOP_PX = 10;
+/**
+ * Turns its host element into a right-click trigger for an `<mk-menu>`, reusing
+ * the same {@link MkMenu} instance as `mkMenuTriggerFor`. On `contextmenu` it
+ * prevents the native menu and opens the menu at the pointer coordinates via
+ * {@link MkMenu.openAt}, restoring focus to the host on close.
+ *
+ * On touch devices a long-press (~500ms hold with a touch pointer) opens the
+ * menu at the touch point — iOS Safari never fires `contextmenu`, so this is
+ * the only way to reach a context menu on iPhones. Moving the finger beyond a
+ * small slop, or lifting it early, cancels the press. On platforms that do
+ * synthesize a `contextmenu` after a long-press (Android), that follow-up
+ * event is suppressed so the menu doesn't open twice. While the directive is
+ * attached it disables the iOS press callout and text selection on the host
+ * (inline host styles — the directive has no stylesheet).
+ *
+ * For keyboard users (WCAG) the dedicated <kbd>ContextMenu</kbd> key and
+ * <kbd>Shift</kbd>+<kbd>F10</kbd> open the menu anchored to the host element;
+ * <kbd>Escape</kbd> closes it. The host advertises `aria-haspopup="menu"`.
+ * The menu closes on selection, Escape or an outside click (handled by
+ * {@link MkMenu}).
+ *
+ * ```html
+ * <tr [mkContextMenuTriggerFor]="rowMenu" tabindex="0">…</tr>
+ * <mk-menu #rowMenu>
+ *   <mk-menu-item (action)="edit()">Edit</mk-menu-item>
+ *   <mk-menu-item danger (action)="del()">Delete</mk-menu-item>
+ * </mk-menu>
+ * ```
+ */
+class MkContextMenuTrigger {
+    host = inject(ElementRef);
+    /** The menu instance to open on right-click / context-menu key. */
+    menu = input.required({ ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'mkContextMenuTriggerFor' });
+    longPressTimer;
+    pressX = 0;
+    pressY = 0;
+    /**
+     * Set when a long-press just opened the menu; consumed by the `contextmenu`
+     * handler so the synthetic event Android fires after a long-press doesn't
+     * open the menu a second time.
+     */
+    longPressFired = false;
+    onContextMenu(event) {
+        const e = event;
+        e.preventDefault();
+        if (this.longPressFired) {
+            // The long-press already opened the menu at these coordinates.
+            this.longPressFired = false;
+            return;
+        }
+        this.menu().openAt(e.clientX, e.clientY, this.host.nativeElement);
+    }
+    onPointerDown(event) {
+        const e = event;
+        // Any new press invalidates a stale long-press flag (e.g. an iOS
+        // long-press that never produced a contextmenu event).
+        this.longPressFired = false;
+        this.cancelLongPress();
+        if (e.pointerType !== 'touch')
+            return;
+        this.pressX = e.clientX;
+        this.pressY = e.clientY;
+        this.longPressTimer = setTimeout(() => {
+            this.longPressTimer = undefined;
+            this.longPressFired = true;
+            this.menu().openAt(this.pressX, this.pressY, this.host.nativeElement);
+        }, LONG_PRESS_MS);
+    }
+    onPointerMove(event) {
+        if (this.longPressTimer === undefined)
+            return;
+        const e = event;
+        const dx = e.clientX - this.pressX;
+        const dy = e.clientY - this.pressY;
+        // Moved too far — this is a scroll or drag, not a press.
+        if (Math.hypot(dx, dy) > LONG_PRESS_SLOP_PX)
+            this.cancelLongPress();
+    }
+    cancelLongPress() {
+        if (this.longPressTimer !== undefined) {
+            clearTimeout(this.longPressTimer);
+            this.longPressTimer = undefined;
+        }
+    }
+    onKeydown(event) {
+        const e = event;
+        // ContextMenu key or Shift+F10 — open anchored to the host element.
+        if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) {
+            e.preventDefault();
+            this.menu().open(this.host.nativeElement, true);
+        }
+        else if (e.key === 'Escape' && this.menu().opened()) {
+            e.preventDefault();
+            this.menu().close(true);
+        }
+    }
+    ngOnDestroy() {
+        this.cancelLongPress();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkContextMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkContextMenuTrigger, isStandalone: true, selector: "[mkContextMenuTriggerFor]", inputs: { menu: { classPropertyName: "menu", publicName: "mkContextMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "contextmenu": "onContextMenu($event)", "keydown": "onKeydown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "cancelLongPress()", "pointercancel": "cancelLongPress()" }, properties: { "attr.aria-expanded": "menu().opened()", "attr.aria-controls": "menu().panelId", "style.-webkit-touch-callout": "'none'", "style.-webkit-user-select": "'none'", "style.user-select": "'none'" } }, exportAs: ["mkContextMenuTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkContextMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkContextMenuTriggerFor]',
+                    exportAs: 'mkContextMenuTrigger',
+                    host: {
+                        'aria-haspopup': 'menu',
+                        '[attr.aria-expanded]': 'menu().opened()',
+                        '[attr.aria-controls]': 'menu().panelId',
+                        // Long-press affordance: keep iOS's press callout and text selection from
+                        // hijacking the hold. Inline styles because a directive has no stylesheet.
+                        '[style.-webkit-touch-callout]': "'none'",
+                        '[style.-webkit-user-select]': "'none'",
+                        '[style.user-select]': "'none'",
+                        '(contextmenu)': 'onContextMenu($event)',
+                        '(keydown)': 'onKeydown($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'cancelLongPress()',
+                        '(pointercancel)': 'cancelLongPress()',
+                    },
+                }]
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkContextMenuTriggerFor", required: true }] }] } });
+
+/**
+ * Context Menu group barrel for @mk-kit/ui.
+ * Re-exports the right-click trigger directive that reuses {@link MkMenu}.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkContextMenuTrigger };
+//# sourceMappingURL=mk-kit-ui-context-menu.mjs.map

package/fesm2022/mk-kit-ui-context-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mk-kit-ui-context-menu.mjs","sources":["../../../projects/mk-kit/context-menu/context-menu-trigger.ts","../../../projects/mk-kit/context-menu/index.ts","../../../projects/mk-kit/context-menu/mk-kit-ui-context-menu.ts"],"sourcesContent":["import { Directive, ElementRef, OnDestroy, inject, input } from '@angular/core';\nimport { MkMenu } from '@mk-kit/ui/navigation';\n\n/** Hold time before a touch press opens the context menu. */\nconst LONG_PRESS_MS = 500;\n/** Movement allowed before a touch press is treated as a scroll/drag instead. */\nconst LONG_PRESS_SLOP_PX = 10;\n\n/**\n * Turns its host element into a right-click trigger for an `<mk-menu>`, reusing\n * the same {@link MkMenu} instance as `mkMenuTriggerFor`. On `contextmenu` it\n * prevents the native menu and opens the menu at the pointer coordinates via\n * {@link MkMenu.openAt}, restoring focus to the host on close.\n *\n * On touch devices a long-press (~500ms hold with a touch pointer) opens the\n * menu at the touch point — iOS Safari never fires `contextmenu`, so this is\n * the only way to reach a context menu on iPhones. Moving the finger beyond a\n * small slop, or lifting it early, cancels the press. On platforms that do\n * synthesize a `contextmenu` after a long-press (Android), that follow-up\n * event is suppressed so the menu doesn't open twice. While the directive is\n * attached it disables the iOS press callout and text selection on the host\n * (inline host styles — the directive has no stylesheet).\n *\n * For keyboard users (WCAG) the dedicated <kbd>ContextMenu</kbd> key and\n * <kbd>Shift</kbd>+<kbd>F10</kbd> open the menu anchored to the host element;\n * <kbd>Escape</kbd> closes it. The host advertises `aria-haspopup=\"menu\"`.\n * The menu closes on selection, Escape or an outside click (handled by\n * {@link MkMenu}).\n *\n * ```html\n * <tr [mkContextMenuTriggerFor]=\"rowMenu\" tabindex=\"0\">…</tr>\n * <mk-menu #rowMenu>\n *   <mk-menu-item (action)=\"edit()\">Edit</mk-menu-item>\n *   <mk-menu-item danger (action)=\"del()\">Delete</mk-menu-item>\n * </mk-menu>\n * ```\n */\n@Directive({\n  selector: '[mkContextMenuTriggerFor]',\n  exportAs: 'mkContextMenuTrigger',\n  host: {\n    'aria-haspopup': 'menu',\n    '[attr.aria-expanded]': 'menu().opened()',\n    '[attr.aria-controls]': 'menu().panelId',\n    // Long-press affordance: keep iOS's press callout and text selection from\n    // hijacking the hold. Inline styles because a directive has no stylesheet.\n    '[style.-webkit-touch-callout]': \"'none'\",\n    '[style.-webkit-user-select]': \"'none'\",\n    '[style.user-select]': \"'none'\",\n    '(contextmenu)': 'onContextMenu($event)',\n    '(keydown)': 'onKeydown($event)',\n    '(pointerdown)': 'onPointerDown($event)',\n    '(pointermove)': 'onPointerMove($event)',\n    '(pointerup)': 'cancelLongPress()',\n    '(pointercancel)': 'cancelLongPress()',\n  },\n})\nexport class MkContextMenuTrigger implements OnDestroy {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /** The menu instance to open on right-click / context-menu key. */\n  readonly menu = input.required<MkMenu>({ alias: 'mkContextMenuTriggerFor' });\n\n  private longPressTimer?: ReturnType<typeof setTimeout>;\n  private pressX = 0;\n  private pressY = 0;\n  /**\n   * Set when a long-press just opened the menu; consumed by the `contextmenu`\n   * handler so the synthetic event Android fires after a long-press doesn't\n   * open the menu a second time.\n   */\n  private longPressFired = false;\n\n  protected onContextMenu(event: Event): void {\n    const e = event as MouseEvent;\n    e.preventDefault();\n    if (this.longPressFired) {\n      // The long-press already opened the menu at these coordinates.\n      this.longPressFired = false;\n      return;\n    }\n    this.menu().openAt(e.clientX, e.clientY, this.host.nativeElement);\n  }\n\n  protected onPointerDown(event: Event): void {\n    const e = event as PointerEvent;\n    // Any new press invalidates a stale long-press flag (e.g. an iOS\n    // long-press that never produced a contextmenu event).\n    this.longPressFired = false;\n    this.cancelLongPress();\n    if (e.pointerType !== 'touch') return;\n    this.pressX = e.clientX;\n    this.pressY = e.clientY;\n    this.longPressTimer = setTimeout(() => {\n      this.longPressTimer = undefined;\n      this.longPressFired = true;\n      this.menu().openAt(this.pressX, this.pressY, this.host.nativeElement);\n    }, LONG_PRESS_MS);\n  }\n\n  protected onPointerMove(event: Event): void {\n    if (this.longPressTimer === undefined) return;\n    const e = event as PointerEvent;\n    const dx = e.clientX - this.pressX;\n    const dy = e.clientY - this.pressY;\n    // Moved too far — this is a scroll or drag, not a press.\n    if (Math.hypot(dx, dy) > LONG_PRESS_SLOP_PX) this.cancelLongPress();\n  }\n\n  protected cancelLongPress(): void {\n    if (this.longPressTimer !== undefined) {\n      clearTimeout(this.longPressTimer);\n      this.longPressTimer = undefined;\n    }\n  }\n\n  protected onKeydown(event: Event): void {\n    const e = event as KeyboardEvent;\n    // ContextMenu key or Shift+F10 — open anchored to the host element.\n    if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) {\n      e.preventDefault();\n      this.menu().open(this.host.nativeElement, true);\n    } else if (e.key === 'Escape' && this.menu().opened()) {\n      e.preventDefault();\n      this.menu().close(true);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.cancelLongPress();\n  }\n}\n","/**\n * Context Menu group barrel for @mk-kit/ui.\n * Re-exports the right-click trigger directive that reuses {@link MkMenu}.\n */\nexport * from './context-menu-trigger';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}