@alaarab/ogrid-angular 2.6.0 → 2.6.1

package/dist/esm/components/formula-bar.component.js

@@ -0,0 +1,99 @@
+/**
+ * FormulaBarComponent -- Standalone Angular formula bar component.
+ *
+ * Layout: [Name Box] [fx] [Formula Input]
+ *
+ * Uses --ogrid-* CSS variables for theming.
+ * Port of React's FormulaBar component.
+ */
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, output, viewChild, effect, } from '@angular/core';
+import { handleFormulaBarKeyDown } from '@alaarab/ogrid-core/formula';
+import * as i0 from "@angular/core";
+const _c0 = ["formulaInput"];
+export class FormulaBarComponent {
+    constructor() {
+        /** Active cell reference (e.g. "A1"). */
+        this.cellRef = input(null, ...(ngDevMode ? [{ debugName: "cellRef" }] : []));
+        /** Text displayed/edited in the formula input. */
+        this.formulaText = input('', ...(ngDevMode ? [{ debugName: "formulaText" }] : []));
+        /** Whether the input is in editing mode. */
+        this.isEditing = input(false, ...(ngDevMode ? [{ debugName: "isEditing" }] : []));
+        /** Called when the user changes the input text. */
+        this.inputChange = output();
+        /** Commit the formula bar value. */
+        this.commit = output();
+        /** Cancel editing. */
+        this.cancel = output();
+        /** Start editing the formula bar. */
+        this.startEditing = output();
+        this.inputEl = viewChild('formulaInput', ...(ngDevMode ? [{ debugName: "inputEl" }] : []));
+        // Focus input when entering edit mode
+        effect(() => {
+            if (this.isEditing()) {
+                const el = this.inputEl()?.nativeElement;
+                if (el)
+                    el.focus();
+            }
+        });
+    }
+    onInput(event) {
+        this.inputChange.emit(event.target.value);
+    }
+    onKeyDown(event) {
+        handleFormulaBarKeyDown(event.key, () => event.preventDefault(), () => this.commit.emit(), () => this.cancel.emit());
+    }
+    onClick() {
+        if (!this.isEditing()) {
+            this.startEditing.emit();
+        }
+    }
+    static { this.ɵfac = function FormulaBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FormulaBarComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormulaBarComponent, selectors: [["ogrid-formula-bar"]], viewQuery: function FormulaBarComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.inputEl, _c0, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, inputs: { cellRef: [1, "cellRef"], formulaText: [1, "formulaText"], isEditing: [1, "isEditing"] }, outputs: { inputChange: "inputChange", commit: "commit", cancel: "cancel", startEditing: "startEditing" }, decls: 7, vars: 4, consts: [["formulaInput", ""], ["role", "toolbar", "aria-label", "Formula bar", 1, "ogrid-formula-bar"], ["aria-label", "Active cell reference", 1, "ogrid-formula-bar__name-box"], ["aria-hidden", "true", 1, "ogrid-formula-bar__fx"], ["type", "text", "aria-label", "Formula input", "autocomplete", "off", 1, "ogrid-formula-bar__input", 3, "input", "keydown", "click", "dblclick", "value", "readOnly"]], template: function FormulaBarComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵdomElementStart(0, "div", 1)(1, "div", 2);
+            i0.ɵɵtext(2);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(3, "div", 3);
+            i0.ɵɵtext(4, "fx");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(5, "input", 4, 0);
+            i0.ɵɵdomListener("input", function FormulaBarComponent_Template_input_input_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInput($event)); })("keydown", function FormulaBarComponent_Template_input_keydown_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); })("click", function FormulaBarComponent_Template_input_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onClick()); })("dblclick", function FormulaBarComponent_Template_input_dblclick_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onClick()); });
+            i0.ɵɵdomElementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.cellRef() ?? "\u2014", " ");
+            i0.ɵɵadvance(3);
+            i0.ɵɵdomProperty("value", ctx.formulaText())("readOnly", !ctx.isEditing());
+            i0.ɵɵattribute("spellcheck", false);
+        } }, styles: ["\n    .ogrid-formula-bar {\n      display: flex;\n      align-items: center;\n      border-bottom: 1px solid var(--ogrid-border, #e0e0e0);\n      background: var(--ogrid-bg, #fff);\n      min-height: 28px;\n      font-size: 13px;\n    }\n    .ogrid-formula-bar__name-box {\n      font-family: monospace;\n      font-size: 12px;\n      font-weight: 500;\n      padding: 2px 8px;\n      border-right: 1px solid var(--ogrid-border, #e0e0e0);\n      background: var(--ogrid-bg, #fff);\n      color: var(--ogrid-fg, #242424);\n      min-width: 52px;\n      text-align: center;\n      line-height: 24px;\n      user-select: none;\n      white-space: nowrap;\n    }\n    .ogrid-formula-bar__fx {\n      padding: 2px 8px;\n      font-style: italic;\n      font-weight: 600;\n      color: var(--ogrid-muted-fg, #888);\n      user-select: none;\n      border-right: 1px solid var(--ogrid-border, #e0e0e0);\n      line-height: 24px;\n      font-size: 12px;\n    }\n    .ogrid-formula-bar__input {\n      flex: 1;\n      border: none;\n      outline: none;\n      padding: 2px 8px;\n      font-family: monospace;\n      font-size: 12px;\n      line-height: 24px;\n      background: transparent;\n      color: var(--ogrid-fg, #242424);\n      min-width: 0;\n    }\n  "], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormulaBarComponent, [{
+        type: Component,
+        args: [{ selector: 'ogrid-formula-bar', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ogrid-formula-bar" role="toolbar" aria-label="Formula bar">
+      <div class="ogrid-formula-bar__name-box" aria-label="Active cell reference">
+        {{ cellRef() ?? '\u2014' }}
+      </div>
+      <div class="ogrid-formula-bar__fx" aria-hidden="true">fx</div>
+      <input
+        #formulaInput
+        type="text"
+        class="ogrid-formula-bar__input"
+        [value]="formulaText()"
+        [readOnly]="!isEditing()"
+        (input)="onInput($event)"
+        (keydown)="onKeyDown($event)"
+        (click)="onClick()"
+        (dblclick)="onClick()"
+        aria-label="Formula input"
+        [attr.spellcheck]="false"
+        autocomplete="off"
+      />
+    </div>
+  `, styles: ["\n    .ogrid-formula-bar {\n      display: flex;\n      align-items: center;\n      border-bottom: 1px solid var(--ogrid-border, #e0e0e0);\n      background: var(--ogrid-bg, #fff);\n      min-height: 28px;\n      font-size: 13px;\n    }\n    .ogrid-formula-bar__name-box {\n      font-family: monospace;\n      font-size: 12px;\n      font-weight: 500;\n      padding: 2px 8px;\n      border-right: 1px solid var(--ogrid-border, #e0e0e0);\n      background: var(--ogrid-bg, #fff);\n      color: var(--ogrid-fg, #242424);\n      min-width: 52px;\n      text-align: center;\n      line-height: 24px;\n      user-select: none;\n      white-space: nowrap;\n    }\n    .ogrid-formula-bar__fx {\n      padding: 2px 8px;\n      font-style: italic;\n      font-weight: 600;\n      color: var(--ogrid-muted-fg, #888);\n      user-select: none;\n      border-right: 1px solid var(--ogrid-border, #e0e0e0);\n      line-height: 24px;\n      font-size: 12px;\n    }\n    .ogrid-formula-bar__input {\n      flex: 1;\n      border: none;\n      outline: none;\n      padding: 2px 8px;\n      font-family: monospace;\n      font-size: 12px;\n      line-height: 24px;\n      background: transparent;\n      color: var(--ogrid-fg, #242424);\n      min-width: 0;\n    }\n  "] }]
+    }], () => [], { cellRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellRef", required: false }] }], formulaText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formulaText", required: false }] }], isEditing: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditing", required: false }] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], commit: [{ type: i0.Output, args: ["commit"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], startEditing: [{ type: i0.Output, args: ["startEditing"] }], inputEl: [{ type: i0.ViewChild, args: ['formulaInput', { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormulaBarComponent, { className: "FormulaBarComponent", filePath: "components/formula-bar.component.ts", lineNumber: 96 }); })();

package/dist/esm/components/formula-ref-overlay.component.js

@@ -0,0 +1,115 @@
+/**
+ * FormulaRefOverlayComponent -- Renders colored border overlays on cells
+ * referenced by the active formula, like Excel's reference highlighting.
+ *
+ * Port of React's FormulaRefOverlay component.
+ */
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, signal, effect, } from '@angular/core';
+import { FORMULA_REF_COLORS } from '@alaarab/ogrid-core/formula';
+import * as i0 from "@angular/core";
+function FormulaRefOverlayComponent_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElementStart(0, "svg", 1);
+    i0.ɵɵdomElement(1, "rect", 2);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const r_r1 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("position", "absolute")("top", r_r1.top, "px")("left", r_r1.left, "px")("width", r_r1.width, "px")("height", r_r1.height, "px")("pointer-events", "none")("z-index", 3)("overflow", "visible");
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("width", ctx_r1.max0(r_r1.width - 2))("height", ctx_r1.max0(r_r1.height - 2))("stroke", r_r1.color);
+} }
+function measureRef(container, ref, colOffset) {
+    const startCol = ref.col + colOffset;
+    const endCol = (ref.endCol ?? ref.col) + colOffset;
+    const endRow = ref.endRow ?? ref.row;
+    const tl = container.querySelector(`[data-row-index="${ref.row}"][data-col-index="${startCol}"]`);
+    const br = container.querySelector(`[data-row-index="${endRow}"][data-col-index="${endCol}"]`);
+    if (!tl || !br)
+        return null;
+    const cRect = container.getBoundingClientRect();
+    const tlRect = tl.getBoundingClientRect();
+    const brRect = br.getBoundingClientRect();
+    return {
+        top: Math.round(tlRect.top - cRect.top),
+        left: Math.round(tlRect.left - cRect.left),
+        width: Math.round(brRect.right - tlRect.left),
+        height: Math.round(brRect.bottom - tlRect.top),
+        color: FORMULA_REF_COLORS[ref.colorIndex % FORMULA_REF_COLORS.length],
+    };
+}
+export class FormulaRefOverlayComponent {
+    constructor() {
+        /** The positioned container that wraps the table. */
+        this.containerEl = input(null, ...(ngDevMode ? [{ debugName: "containerEl" }] : []));
+        /** References to highlight. */
+        this.references = input([], ...(ngDevMode ? [{ debugName: "references" }] : []));
+        /** Column offset (1 when checkbox/row-number columns are present). */
+        this.colOffset = input(0, ...(ngDevMode ? [{ debugName: "colOffset" }] : []));
+        this.rects = signal([], ...(ngDevMode ? [{ debugName: "rects" }] : []));
+        this.rafId = 0;
+        effect(() => {
+            const refs = this.references();
+            const container = this.containerEl();
+            const colOff = this.colOffset();
+            cancelAnimationFrame(this.rafId);
+            if (!container || refs.length === 0) {
+                this.rects.set([]);
+                return;
+            }
+            this.rafId = requestAnimationFrame(() => {
+                const measured = [];
+                for (const ref of refs) {
+                    const r = measureRef(container, ref, colOff);
+                    if (r)
+                        measured.push(r);
+                }
+                this.rects.set(measured);
+            });
+        });
+    }
+    max0(v) {
+        return Math.max(0, v);
+    }
+    static { this.ɵfac = function FormulaRefOverlayComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FormulaRefOverlayComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormulaRefOverlayComponent, selectors: [["ogrid-formula-ref-overlay"]], inputs: { containerEl: [1, "containerEl"], references: [1, "references"], colOffset: [1, "colOffset"] }, decls: 2, vars: 0, consts: [["aria-hidden", "true", 3, "position", "top", "left", "width", "height", "pointerEvents", "zIndex", "overflow"], ["aria-hidden", "true"], ["x", "1", "y", "1", "fill", "none", "stroke-width", "2", 2, "shape-rendering", "crispEdges"]], template: function FormulaRefOverlayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵrepeaterCreate(0, FormulaRefOverlayComponent_For_1_Template, 2, 19, ":svg:svg", 0, i0.ɵɵrepeaterTrackByIndex);
+        } if (rf & 2) {
+            i0.ɵɵrepeater(ctx.rects());
+        } }, encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormulaRefOverlayComponent, [{
+        type: Component,
+        args: [{
+                selector: 'ogrid-formula-ref-overlay',
+                standalone: true,
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    @for (r of rects(); track $index) {
+      <svg
+        [style.position]="'absolute'"
+        [style.top.px]="r.top"
+        [style.left.px]="r.left"
+        [style.width.px]="r.width"
+        [style.height.px]="r.height"
+        [style.pointerEvents]="'none'"
+        [style.zIndex]="3"
+        [style.overflow]="'visible'"
+        aria-hidden="true"
+      >
+        <rect
+          x="1" y="1"
+          [attr.width]="max0(r.width - 2)"
+          [attr.height]="max0(r.height - 2)"
+          fill="none"
+          [attr.stroke]="r.color"
+          stroke-width="2"
+          style="shape-rendering: crispEdges"
+        />
+      </svg>
+    }
+  `,
+            }]
+    }], () => [], { containerEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerEl", required: false }] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: false }] }], colOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "colOffset", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormulaRefOverlayComponent, { className: "FormulaRefOverlayComponent", filePath: "components/formula-ref-overlay.component.ts", lineNumber: 88 }); })();

package/dist/esm/components/grid-context-menu.component.js

@@ -0,0 +1,197 @@
+import { Component, Input, Output, EventEmitter, ViewChild, DestroyRef, inject, ChangeDetectionStrategy } from '@angular/core';
+import { GRID_CONTEXT_MENU_ITEMS, formatShortcut } from '@alaarab/ogrid-core';
+import * as i0 from "@angular/core";
+const _c0 = ["menuRef"];
+const _forTrack0 = ($index, $item) => $item.id;
+function GridContextMenuComponent_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "div");
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap((ctx_r1.classNames == null ? null : ctx_r1.classNames.contextMenuDivider) ?? "");
+} }
+function GridContextMenuComponent_For_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const item_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap((ctx_r1.classNames == null ? null : ctx_r1.classNames.contextMenuItemShortcut) ?? "");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatShortcutFn(item_r3.shortcut), " ");
+} }
+function GridContextMenuComponent_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, GridContextMenuComponent_For_3_Conditional_0_Template, 1, 2, "div", 2);
+    i0.ɵɵdomElementStart(1, "button", 3);
+    i0.ɵɵdomListener("click", function GridContextMenuComponent_For_3_Template_button_click_1_listener() { const item_r3 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onItemClick(item_r3.id)); });
+    i0.ɵɵdomElementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(4, GridContextMenuComponent_For_3_Conditional_4_Template, 2, 3, "span", 2);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const item_r3 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(item_r3.dividerBefore ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap((ctx_r1.classNames == null ? null : ctx_r1.classNames.contextMenuItem) ?? "");
+    i0.ɵɵdomProperty("disabled", ctx_r1.isDisabled(item_r3));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap((ctx_r1.classNames == null ? null : ctx_r1.classNames.contextMenuItemLabel) ?? "");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r3.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r3.shortcut ? 4 : -1);
+} }
+export class GridContextMenuComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.hasSelection = false;
+        this.canUndoProp = false;
+        this.canRedoProp = false;
+        this.classNames = undefined;
+        this.copyAction = new EventEmitter();
+        this.cutAction = new EventEmitter();
+        this.pasteAction = new EventEmitter();
+        this.selectAllAction = new EventEmitter();
+        this.undoAction = new EventEmitter();
+        this.redoAction = new EventEmitter();
+        this.closeAction = new EventEmitter();
+        this.menuItems = GRID_CONTEXT_MENU_ITEMS;
+        this.formatShortcutFn = formatShortcut;
+        this.clickOutsideHandler = (e) => {
+            const el = this.menuRef?.nativeElement;
+            if (el && !el.contains(e.target))
+                this.closeAction.emit();
+        };
+        this.keyDownHandler = (e) => {
+            if (e.key === 'Escape')
+                this.closeAction.emit();
+        };
+        // Register listeners once on init (no signal dependencies needed)
+        document.addEventListener('mousedown', this.clickOutsideHandler, true);
+        document.addEventListener('keydown', this.keyDownHandler, true);
+        this.destroyRef.onDestroy(() => {
+            document.removeEventListener('mousedown', this.clickOutsideHandler, true);
+            document.removeEventListener('keydown', this.keyDownHandler, true);
+        });
+    }
+    isDisabled(item) {
+        if (item.disabledWhenNoSelection && !this.hasSelection)
+            return true;
+        if (item.id === 'undo' && !this.canUndoProp)
+            return true;
+        if (item.id === 'redo' && !this.canRedoProp)
+            return true;
+        return false;
+    }
+    onItemClick(id) {
+        switch (id) {
+            case 'copy':
+                this.copyAction.emit();
+                break;
+            case 'cut':
+                this.cutAction.emit();
+                break;
+            case 'paste':
+                this.pasteAction.emit();
+                break;
+            case 'selectAll':
+                this.selectAllAction.emit();
+                break;
+            case 'undo':
+                this.undoAction.emit();
+                break;
+            case 'redo':
+                this.redoAction.emit();
+                break;
+        }
+        this.closeAction.emit();
+    }
+    static { this.ɵfac = function GridContextMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GridContextMenuComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GridContextMenuComponent, selectors: [["ogrid-context-menu"]], viewQuery: function GridContextMenuComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuRef = _t.first);
+        } }, inputs: { x: "x", y: "y", hasSelection: "hasSelection", canUndoProp: "canUndoProp", canRedoProp: "canRedoProp", classNames: "classNames" }, outputs: { copyAction: "copyAction", cutAction: "cutAction", pasteAction: "pasteAction", selectAllAction: "selectAllAction", undoAction: "undoAction", redoAction: "redoAction", closeAction: "closeAction" }, decls: 4, vars: 6, consts: [["menuRef", ""], ["role", "menu", "aria-label", "Grid context menu"], [3, "class"], ["type", "button", 3, "click", "disabled"]], template: function GridContextMenuComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 1, 0);
+            i0.ɵɵrepeaterCreate(2, GridContextMenuComponent_For_3_Template, 5, 8, null, null, _forTrack0);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassMap((ctx.classNames == null ? null : ctx.classNames.contextMenu) ?? "");
+            i0.ɵɵstyleProp("left", ctx.x, "px")("top", ctx.y, "px");
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.menuItems);
+        } }, encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GridContextMenuComponent, [{
+        type: Component,
+        args: [{
+                selector: 'ogrid-context-menu',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <div
+      #menuRef
+      [class]="classNames?.contextMenu ?? ''"
+      role="menu"
+      [style.left.px]="x"
+      [style.top.px]="y"
+      aria-label="Grid context menu"
+    >
+      @for (item of menuItems; track item.id) {
+        @if (item.dividerBefore) {
+          <div [class]="classNames?.contextMenuDivider ?? ''"></div>
+        }
+        <button
+          type="button"
+          [class]="classNames?.contextMenuItem ?? ''"
+          (click)="onItemClick(item.id)"
+          [disabled]="isDisabled(item)"
+        >
+          <span [class]="classNames?.contextMenuItemLabel ?? ''">{{ item.label }}</span>
+          @if (item.shortcut) {
+            <span [class]="classNames?.contextMenuItemShortcut ?? ''">
+              {{ formatShortcutFn(item.shortcut) }}
+            </span>
+          }
+        </button>
+      }
+    </div>
+  `,
+            }]
+    }], () => [], { x: [{
+            type: Input,
+            args: [{ required: true }]
+        }], y: [{
+            type: Input,
+            args: [{ required: true }]
+        }], hasSelection: [{
+            type: Input
+        }], canUndoProp: [{
+            type: Input
+        }], canRedoProp: [{
+            type: Input
+        }], classNames: [{
+            type: Input
+        }], copyAction: [{
+            type: Output
+        }], cutAction: [{
+            type: Output
+        }], pasteAction: [{
+            type: Output
+        }], selectAllAction: [{
+            type: Output
+        }], undoAction: [{
+            type: Output
+        }], redoAction: [{
+            type: Output
+        }], closeAction: [{
+            type: Output
+        }], menuRef: [{
+            type: ViewChild,
+            args: ['menuRef']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GridContextMenuComponent, { className: "GridContextMenuComponent", filePath: "components/grid-context-menu.component.ts", lineNumber: 38 }); })();

package/dist/esm/components/inline-cell-editor-template.js

@@ -0,0 +1,134 @@
+/**
+ * Shared inline cell editor template used by all Angular UI packages.
+ * The template is identical across Material, PrimeNG, and Radix implementations.
+ */
+export const INLINE_CELL_EDITOR_TEMPLATE = `
+    @switch (editorType) {
+      @case ('text') {
+        <input
+          #inputEl
+          type="text"
+          [value]="localValue()"
+          (input)="localValue.set($any($event.target).value)"
+          (keydown)="onTextKeyDown($event)"
+          (blur)="onTextBlur()"
+          [style]="getInputStyle()"
+        />
+      }
+      @case ('richSelect') {
+        <div #richSelectWrapper
+             style="width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;overflow:hidden;min-width:0;position:relative">
+          <div style="display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0;cursor:pointer;font-size:var(--ogrid-cell-font-size, 13px);color:inherit">
+            <span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ getDisplayText(value) }}</span>
+            <span style="margin-left:4px;font-size:10px;opacity:0.5">&#9662;</span>
+          </div>
+          <div #richSelectDropdown role="listbox"
+               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2);text-align:left;font-size:var(--ogrid-cell-font-size, 13px);font-family:inherit">
+            <input
+              #richSelectInput
+              type="text"
+              [value]="searchText()"
+              (input)="onRichSelectSearch($any($event.target).value)"
+              (keydown)="onRichSelectKeyDown($event)"
+              placeholder="Search..."
+              style="width:100%;padding:6px 8px;border:none;border-bottom:1px solid var(--ogrid-border, rgba(0,0,0,0.12));background:var(--ogrid-bg, #fff);color:inherit;font:inherit;font-size:var(--ogrid-cell-font-size, 13px);outline:none;box-sizing:border-box;position:sticky;top:0;z-index:1"
+            />
+            <div #richSelectOptions>
+              @for (opt of filteredOptions(); track opt; let i = $index) {
+                <div role="option"
+                     [attr.aria-selected]="i === highlightedIndex()"
+                     (click)="commitValue(opt)"
+                     [style]="i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);font-size:var(--ogrid-cell-font-size, 13px);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);font-size:var(--ogrid-cell-font-size, 13px)'">
+                  {{ getDisplayText(opt) }}
+                </div>
+              }
+              @if (filteredOptions().length === 0) {
+                <div style="padding:6px 8px;color:var(--ogrid-muted, #999);font-size:var(--ogrid-cell-font-size, 13px)">No matches</div>
+              }
+            </div>
+          </div>
+        </div>
+      }
+      @case ('select') {
+        <div #selectWrapper tabindex="0"
+             style="width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;overflow:hidden;min-width:0;position:relative"
+             (keydown)="onCustomSelectKeyDown($event)">
+          <div style="display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0;cursor:pointer;font-size:var(--ogrid-cell-font-size, 13px);color:inherit">
+            <span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ getDisplayText(value) }}</span>
+            <span style="margin-left:4px;font-size:10px;opacity:0.5">&#9662;</span>
+          </div>
+          <div #selectDropdown role="listbox"
+               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2);text-align:left;font-size:var(--ogrid-cell-font-size, 13px);font-family:inherit">
+            @for (opt of selectOptions(); track opt; let i = $index) {
+              <div role="option"
+                   [attr.aria-selected]="i === highlightedIndex()"
+                   (click)="commitValue(opt)"
+                   [style]="i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);font-size:var(--ogrid-cell-font-size, 13px);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);font-size:var(--ogrid-cell-font-size, 13px)'">
+                {{ getDisplayText(opt) }}
+              </div>
+            }
+          </div>
+        </div>
+      }
+      @case ('checkbox') {
+        <div style="display:flex;align-items:center;justify-content:center;width:100%;height:100%">
+          <input
+            type="checkbox"
+            [checked]="!!localValue()"
+            (change)="commitValue($any($event.target).checked)"
+            (keydown)="onCheckboxKeyDown($event)"
+          />
+        </div>
+      }
+      @case ('date') {
+        @if (getCellEditorType() === 'native') {
+          <input
+            #inputEl
+            type="date"
+            [value]="localValue()"
+            (input)="localValue.set($any($event.target).value)"
+            (keydown)="onTextKeyDown($event)"
+            (blur)="onTextBlur()"
+            [style]="getInputStyle()"
+          />
+        } @else {
+          <input
+            #inputEl
+            type="text"
+            [placeholder]="getDatePlaceholder()"
+            [value]="localValue()"
+            (input)="localValue.set($any($event.target).value)"
+            (keydown)="onTextKeyDown($event)"
+            (blur)="onTextBlur()"
+            [style]="getInputStyle()"
+          />
+        }
+      }
+      @default {
+        <input
+          #inputEl
+          type="text"
+          [value]="localValue()"
+          (input)="localValue.set($any($event.target).value)"
+          (keydown)="onTextKeyDown($event)"
+          (blur)="onTextBlur()"
+          [style]="getInputStyle()"
+        />
+      }
+    }
+`;
+export const INLINE_CELL_EDITOR_STYLES = `
+    :host {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      min-width: 0;
+      padding-top: var(--ogrid-cell-padding-vertical, 6px);
+      padding-bottom: var(--ogrid-cell-padding-vertical, 6px);
+      padding-left: var(--ogrid-cell-padding-horizontal, 10px);
+      padding-right: var(--ogrid-cell-padding-horizontal, 10px);
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+`;