@alaarab/ogrid-angular 2.5.9 → 2.6.1

package/dist/esm/components/marching-ants-overlay.component.js

@@ -0,0 +1,177 @@
+import { Component, Input, signal, DestroyRef, inject, ChangeDetectionStrategy } from '@angular/core';
+import { measureRange, injectGlobalStyles } from '@alaarab/ogrid-core';
+import * as i0 from "@angular/core";
+function MarchingAntsOverlayComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElementStart(0, "svg", 2);
+    i0.ɵɵdomElement(1, "rect", 3);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("top", ctx_r0.selRect().top, "px")("left", ctx_r0.selRect().left, "px")("width", ctx_r0.selRect().width, "px")("height", ctx_r0.selRect().height, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("width", ctx_r0.max0(ctx_r0.selRect().width - 2))("height", ctx_r0.max0(ctx_r0.selRect().height - 2));
+} }
+function MarchingAntsOverlayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵdomElementStart(0, "svg", 4);
+    i0.ɵɵdomElement(1, "rect", 5);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("top", ctx_r0.clipRect().top, "px")("left", ctx_r0.clipRect().left, "px")("width", ctx_r0.clipRect().width, "px")("height", ctx_r0.clipRect().height, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("width", ctx_r0.max0(ctx_r0.clipRect().width - 2))("height", ctx_r0.max0(ctx_r0.clipRect().height - 2));
+} }
+export class MarchingAntsOverlayComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.selectionRange = null;
+        this.copyRange = null;
+        this.cutRange = null;
+        this.colOffset = 0;
+        this.columnSizingVersion = 0;
+        this.items = [];
+        this.visibleColumns = undefined;
+        this.columnOrder = undefined;
+        this.selRect = signal(null, ...(ngDevMode ? [{ debugName: "selRect" }] : []));
+        this.clipRect = signal(null, ...(ngDevMode ? [{ debugName: "clipRect" }] : []));
+        this.rafId = 0;
+        this.resizeObserver = null;
+        injectGlobalStyles('ogrid-marching-ants-keyframes', '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}');
+        this.destroyRef.onDestroy(() => {
+            if (this.rafId)
+                cancelAnimationFrame(this.rafId);
+            if (this.resizeObserver)
+                this.resizeObserver.disconnect();
+        });
+    }
+    ngOnChanges(_changes) {
+        this.recalculate();
+    }
+    recalculate() {
+        const container = this.containerEl;
+        const selRange = this.selectionRange;
+        const clipRange = this.copyRange ?? this.cutRange;
+        const colOff = this.colOffset;
+        void this.columnSizingVersion; // Track column resize changes
+        void this.items; // Track data changes (sorting)
+        void this.visibleColumns; // Track column visibility changes
+        void this.columnOrder; // Track column reordering
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        if (!selRange && !clipRange) {
+            this.selRect.set(null);
+            this.clipRect.set(null);
+            return;
+        }
+        const measureAll = () => {
+            if (!container) {
+                this.selRect.set(null);
+                this.clipRect.set(null);
+                return;
+            }
+            this.selRect.set(selRange ? measureRange(container, selRange, colOff) : null);
+            this.clipRect.set(clipRange ? measureRange(container, clipRange, colOff) : null);
+        };
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.rafId = requestAnimationFrame(measureAll);
+        if (container) {
+            this.resizeObserver = new ResizeObserver(measureAll);
+            this.resizeObserver.observe(container);
+        }
+    }
+    isSingleCellSelection() {
+        const r = this.selectionRange;
+        return r != null && r.startRow === r.endRow && r.startCol === r.endCol;
+    }
+    clipRangeMatchesSel() {
+        const selRange = this.selectionRange;
+        const clipRange = this.copyRange ?? this.cutRange;
+        return selRange != null && clipRange != null &&
+            selRange.startRow === clipRange.startRow &&
+            selRange.startCol === clipRange.startCol &&
+            selRange.endRow === clipRange.endRow &&
+            selRange.endCol === clipRange.endCol;
+    }
+    max0(n) {
+        return Math.max(0, n);
+    }
+    static { this.ɵfac = function MarchingAntsOverlayComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MarchingAntsOverlayComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MarchingAntsOverlayComponent, selectors: [["ogrid-marching-ants-overlay"]], inputs: { containerEl: "containerEl", selectionRange: "selectionRange", copyRange: "copyRange", cutRange: "cutRange", colOffset: "colOffset", columnSizingVersion: "columnSizingVersion", items: "items", visibleColumns: "visibleColumns", columnOrder: "columnOrder" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["aria-hidden", "true", 1, "ogrid-marching-ants-svg", "ogrid-marching-ants-svg--selection", 3, "top", "left", "width", "height"], ["aria-hidden", "true", 1, "ogrid-marching-ants-svg", "ogrid-marching-ants-svg--clip", 3, "top", "left", "width", "height"], ["aria-hidden", "true", 1, "ogrid-marching-ants-svg", "ogrid-marching-ants-svg--selection"], ["x", "1", "y", "1", "fill", "none", "stroke", "var(--ogrid-selection, #217346)", "stroke-width", "2"], ["aria-hidden", "true", 1, "ogrid-marching-ants-svg", "ogrid-marching-ants-svg--clip"], ["x", "1", "y", "1", "fill", "none", "stroke", "var(--ogrid-selection, #217346)", "stroke-width", "2", "stroke-dasharray", "4 4", 2, "animation", "ogrid-marching-ants 0.5s linear infinite"]], template: function MarchingAntsOverlayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MarchingAntsOverlayComponent_Conditional_0_Template, 2, 10, ":svg:svg", 0);
+            i0.ɵɵconditionalCreate(1, MarchingAntsOverlayComponent_Conditional_1_Template, 2, 10, ":svg:svg", 1);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.selRect() && !ctx.clipRangeMatchesSel() && !ctx.isSingleCellSelection() ? 0 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.clipRect() ? 1 : -1);
+        } }, styles: [".ogrid-marching-ants-svg[_ngcontent-%COMP%] { position: absolute; pointer-events: none; overflow: visible; }\n    .ogrid-marching-ants-svg--selection[_ngcontent-%COMP%] { z-index: 4; }\n    .ogrid-marching-ants-svg--clip[_ngcontent-%COMP%] { z-index: 5; }"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MarchingAntsOverlayComponent, [{
+        type: Component,
+        args: [{ selector: 'ogrid-marching-ants-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (selRect() && !clipRangeMatchesSel() && !isSingleCellSelection()) {
+      <svg
+        class="ogrid-marching-ants-svg ogrid-marching-ants-svg--selection"
+        [style.top.px]="selRect()!.top"
+        [style.left.px]="selRect()!.left"
+        [style.width.px]="selRect()!.width"
+        [style.height.px]="selRect()!.height"
+        aria-hidden="true"
+      >
+        <rect
+          x="1" y="1"
+          [attr.width]="max0(selRect()!.width - 2)"
+          [attr.height]="max0(selRect()!.height - 2)"
+          fill="none"
+          stroke="var(--ogrid-selection, #217346)"
+          stroke-width="2"
+        />
+      </svg>
+    }
+    @if (clipRect()) {
+      <svg
+        class="ogrid-marching-ants-svg ogrid-marching-ants-svg--clip"
+        [style.top.px]="clipRect()!.top"
+        [style.left.px]="clipRect()!.left"
+        [style.width.px]="clipRect()!.width"
+        [style.height.px]="clipRect()!.height"
+        aria-hidden="true"
+      >
+        <rect
+          x="1" y="1"
+          [attr.width]="max0(clipRect()!.width - 2)"
+          [attr.height]="max0(clipRect()!.height - 2)"
+          fill="none"
+          stroke="var(--ogrid-selection, #217346)"
+          stroke-width="2"
+          stroke-dasharray="4 4"
+          style="animation: ogrid-marching-ants 0.5s linear infinite"
+        />
+      </svg>
+    }
+  `, styles: ["\n    .ogrid-marching-ants-svg { position: absolute; pointer-events: none; overflow: visible; }\n    .ogrid-marching-ants-svg--selection { z-index: 4; }\n    .ogrid-marching-ants-svg--clip { z-index: 5; }\n  "] }]
+    }], () => [], { containerEl: [{
+            type: Input,
+            args: [{ required: true }]
+        }], selectionRange: [{
+            type: Input
+        }], copyRange: [{
+            type: Input
+        }], cutRange: [{
+            type: Input
+        }], colOffset: [{
+            type: Input
+        }], columnSizingVersion: [{
+            type: Input
+        }], items: [{
+            type: Input
+        }], visibleColumns: [{
+            type: Input
+        }], columnOrder: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MarchingAntsOverlayComponent, { className: "MarchingAntsOverlayComponent", filePath: "components/marching-ants-overlay.component.ts", lineNumber: 57 }); })();

package/dist/esm/components/ogrid-layout.component.js

@@ -0,0 +1,302 @@
+import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { SideBarComponent } from './sidebar.component';
+import { FormulaBarComponent } from './formula-bar.component';
+import { SheetTabsComponent } from './sheet-tabs.component';
+import { GRID_BORDER_RADIUS } from '@alaarab/ogrid-core';
+import { OGRID_THEME_VARS_CSS } from '../styles/ogrid-theme-vars';
+import * as i0 from "@angular/core";
+const _c0 = ["*", [["", "toolbar", ""]], [["", "toolbarEnd", ""]], [["", "toolbarBelow", ""]], [["", "pagination", ""]]];
+const _c1 = ["*", "[toolbar]", "[toolbarEnd]", "[toolbarBelow]", "[pagination]"];
+function OGridLayoutComponent_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.activeCellRef ?? "\u2014");
+} }
+function OGridLayoutComponent_Conditional_2_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "svg", 15);
+    i0.ɵɵelement(1, "polyline", 16)(2, "polyline", 17)(3, "line", 18)(4, "line", 19);
+    i0.ɵɵelementEnd();
+} }
+function OGridLayoutComponent_Conditional_2_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "svg", 15);
+    i0.ɵɵelement(1, "polyline", 20)(2, "polyline", 21)(3, "line", 22)(4, "line", 23);
+    i0.ɵɵelementEnd();
+} }
+function OGridLayoutComponent_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵlistener("click", function OGridLayoutComponent_Conditional_2_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleFullScreen()); });
+    i0.ɵɵconditionalCreate(1, OGridLayoutComponent_Conditional_2_Conditional_6_Conditional_1_Template, 5, 0, ":svg:svg", 15)(2, OGridLayoutComponent_Conditional_2_Conditional_6_Conditional_2_Template, 5, 0, ":svg:svg", 15);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵattribute("title", ctx_r0.isFullScreen ? "Exit fullscreen" : "Fullscreen")("aria-label", ctx_r0.isFullScreen ? "Exit fullscreen" : "Fullscreen");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isFullScreen ? 1 : 2);
+} }
+function OGridLayoutComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9)(1, "div", 10);
+    i0.ɵɵconditionalCreate(2, OGridLayoutComponent_Conditional_2_Conditional_2_Template, 2, 1, "div", 11);
+    i0.ɵɵprojection(3, 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 12);
+    i0.ɵɵprojection(5, 2);
+    i0.ɵɵconditionalCreate(6, OGridLayoutComponent_Conditional_2_Conditional_6_Template, 3, 3, "button", 13);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("ogrid-layout-toolbar--has-below", ctx_r0.hasToolbarBelow)("ogrid-layout-toolbar--no-below", !ctx_r0.hasToolbarBelow);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.showNameBox ? 2 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r0.fullScreen ? 6 : -1);
+} }
+function OGridLayoutComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵprojection(1, 3);
+    i0.ɵɵelementEnd();
+} }
+function OGridLayoutComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ogrid-formula-bar", 24);
+    i0.ɵɵlistener("inputChange", function OGridLayoutComponent_Conditional_4_Template_ogrid_formula_bar_inputChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.formulaBar.onInputChange($event)); })("commit", function OGridLayoutComponent_Conditional_4_Template_ogrid_formula_bar_commit_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.formulaBar.onCommit()); })("cancel", function OGridLayoutComponent_Conditional_4_Template_ogrid_formula_bar_cancel_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.formulaBar.onCancel()); })("startEditing", function OGridLayoutComponent_Conditional_4_Template_ogrid_formula_bar_startEditing_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.formulaBar.startEditing()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("cellRef", ctx_r0.formulaBar.cellRef)("formulaText", ctx_r0.formulaBar.formulaText)("isEditing", ctx_r0.formulaBar.isEditing);
+} }
+function OGridLayoutComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ogrid-sidebar", 5);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("sideBarProps", ctx_r0.sideBar);
+} }
+function OGridLayoutComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ogrid-sidebar", 5);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("sideBarProps", ctx_r0.sideBar);
+} }
+function OGridLayoutComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ogrid-sheet-tabs", 25);
+    i0.ɵɵlistener("sheetChange", function OGridLayoutComponent_Conditional_10_Template_ogrid_sheet_tabs_sheetChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSheetChange == null ? null : ctx_r0.onSheetChange($event)); })("sheetAdd", function OGridLayoutComponent_Conditional_10_Template_ogrid_sheet_tabs_sheetAdd_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSheetAdd == null ? null : ctx_r0.onSheetAdd()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("sheets", ctx_r0.sheetDefs)("activeSheet", ctx_r0.activeSheet)("showAddButton", !!ctx_r0.onSheetAdd);
+} }
+function OGridLayoutComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵprojection(1, 4);
+    i0.ɵɵelementEnd();
+} }
+export class OGridLayoutComponent {
+    constructor() {
+        this.hasToolbar = false;
+        this.hasToolbarBelow = false;
+        this.hasPagination = false;
+        this.sideBar = null;
+        this.fullScreen = false;
+        this.showNameBox = false;
+        this.activeCellRef = null;
+        this.formulaBar = null;
+        this.isFullScreen = false;
+        this.borderRadius = GRID_BORDER_RADIUS;
+        this.escListener = null;
+    }
+    get rootClass() {
+        const base = (this.className ?? '') + ' ogrid-layout-root';
+        return this.isFullScreen ? base + ' ogrid-layout-root--fullscreen' : base;
+    }
+    toggleFullScreen() {
+        this.isFullScreen = !this.isFullScreen;
+        if (this.isFullScreen) {
+            this.escListener = (e) => {
+                if (e.key === 'Escape') {
+                    this.isFullScreen = false;
+                    this.removeEscListener();
+                }
+            };
+            document.addEventListener('keydown', this.escListener);
+        }
+        else {
+            this.removeEscListener();
+        }
+    }
+    removeEscListener() {
+        if (this.escListener) {
+            document.removeEventListener('keydown', this.escListener);
+            this.escListener = null;
+        }
+    }
+    static { this.ɵfac = function OGridLayoutComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || OGridLayoutComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OGridLayoutComponent, selectors: [["ogrid-layout"]], inputs: { className: "className", hasToolbar: "hasToolbar", hasToolbarBelow: "hasToolbarBelow", hasPagination: "hasPagination", sideBar: "sideBar", fullScreen: "fullScreen", showNameBox: "showNameBox", activeCellRef: "activeCellRef", formulaBar: "formulaBar", sheetDefs: "sheetDefs", activeSheet: "activeSheet", onSheetChange: "onSheetChange", onSheetAdd: "onSheetAdd" }, ngContentSelectors: _c1, decls: 12, vars: 11, consts: [[1, "ogrid-layout-container"], [1, "ogrid-layout-toolbar", 3, "ogrid-layout-toolbar--has-below", "ogrid-layout-toolbar--no-below"], [1, "ogrid-layout-toolbar-below"], [3, "cellRef", "formulaText", "isEditing"], [1, "ogrid-layout-grid-area"], [3, "sideBarProps"], [1, "ogrid-layout-grid-content"], [3, "sheets", "activeSheet", "showAddButton"], [1, "ogrid-layout-footer"], [1, "ogrid-layout-toolbar"], [1, "ogrid-layout-toolbar-left"], [1, "ogrid-name-box"], [1, "ogrid-layout-toolbar-right"], ["type", "button", 1, "ogrid-fullscreen-btn"], ["type", "button", 1, "ogrid-fullscreen-btn", 3, "click"], ["width", "16", "height", "16", "viewBox", "0 0 16 16", "fill", "none", "stroke", "currentColor", "stroke-width", "1.5", "stroke-linecap", "round", "stroke-linejoin", "round"], ["points", "4 10 0 10 0 14"], ["points", "12 6 16 6 16 2"], ["x1", "0", "y1", "10", "x2", "4", "y2", "6"], ["x1", "16", "y1", "6", "x2", "12", "y2", "10"], ["points", "10 2 14 2 14 6"], ["points", "6 14 2 14 2 10"], ["x1", "14", "y1", "2", "x2", "10", "y2", "6"], ["x1", "2", "y1", "14", "x2", "6", "y2", "10"], [3, "inputChange", "commit", "cancel", "startEditing", "cellRef", "formulaText", "isEditing"], [3, "sheetChange", "sheetAdd", "sheets", "activeSheet", "showAddButton"]], template: function OGridLayoutComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0);
+            i0.ɵɵelementStart(0, "div")(1, "div", 0);
+            i0.ɵɵconditionalCreate(2, OGridLayoutComponent_Conditional_2_Template, 7, 6, "div", 1);
+            i0.ɵɵconditionalCreate(3, OGridLayoutComponent_Conditional_3_Template, 2, 0, "div", 2);
+            i0.ɵɵconditionalCreate(4, OGridLayoutComponent_Conditional_4_Template, 1, 3, "ogrid-formula-bar", 3);
+            i0.ɵɵelementStart(5, "div", 4);
+            i0.ɵɵconditionalCreate(6, OGridLayoutComponent_Conditional_6_Template, 1, 1, "ogrid-sidebar", 5);
+            i0.ɵɵelementStart(7, "div", 6);
+            i0.ɵɵprojection(8);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(9, OGridLayoutComponent_Conditional_9_Template, 1, 1, "ogrid-sidebar", 5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(10, OGridLayoutComponent_Conditional_10_Template, 1, 3, "ogrid-sheet-tabs", 7);
+            i0.ɵɵconditionalCreate(11, OGridLayoutComponent_Conditional_11_Template, 2, 0, "div", 8);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵclassMap(ctx.rootClass);
+            i0.ɵɵadvance();
+            i0.ɵɵstyleProp("border-radius", ctx.isFullScreen ? 0 : ctx.borderRadius, "px");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.hasToolbar || ctx.fullScreen || ctx.showNameBox ? 2 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.hasToolbarBelow ? 3 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.formulaBar ? 4 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.sideBar && ctx.sideBar.position === "left" ? 6 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.sideBar && ctx.sideBar.position !== "left" ? 9 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.sheetDefs && ctx.sheetDefs.length > 0 && ctx.activeSheet ? 10 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.hasPagination ? 11 : -1);
+        } }, dependencies: [SideBarComponent, FormulaBarComponent, SheetTabsComponent], styles: ["\n/* \u2500\u2500\u2500 OGrid Light Theme (default) \u2500\u2500\u2500 */\n:where(:root) {\n  --ogrid-bg: #ffffff;\n  --ogrid-fg: rgba(0, 0, 0, 0.87);\n  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);\n  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);\n  --ogrid-border: rgba(0, 0, 0, 0.12);\n  --ogrid-border-strong: rgba(0, 0, 0, 0.5);\n  --ogrid-border-hover: rgba(0, 0, 0, 0.3);\n  --ogrid-header-bg: #f5f5f5;\n  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);\n  --ogrid-selected-row-bg: #e6f0fb;\n  --ogrid-bg-selected-hover: #dae8f8;\n  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);\n  --ogrid-range-bg: rgba(33, 115, 70, 0.12);\n  --ogrid-accent: #0078d4;\n  --ogrid-accent-dark: #005a9e;\n  --ogrid-selection-color: #217346;\n  --ogrid-primary: #0078d4;\n  --ogrid-primary-fg: #fff;\n  --ogrid-primary-hover: #106ebe;\n  --ogrid-bg-subtle: #f5f5f5;\n  --ogrid-bg-hover: rgba(0, 0, 0, 0.04);\n  --ogrid-active-bg: rgba(0, 0, 0, 0.06);\n  --ogrid-muted: rgba(0, 0, 0, 0.5);\n  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);\n  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);\n  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);\n  --ogrid-selection: #217346;\n  --ogrid-bg-range: rgba(33, 115, 70, 0.12);\n  --ogrid-bg-selected: #e6f0fb;\n  --ogrid-loading-bg: rgba(255, 255, 255, 0.7);\n}\n/* \u2500\u2500\u2500 Auto Dark (system preference) \u2500\u2500\u2500 */\n@media (prefers-color-scheme: dark) {\n  :where(:root:not([data-theme=\"light\"])) {\n    --ogrid-bg: #1e1e1e;\n    --ogrid-fg: rgba(255, 255, 255, 0.87);\n    --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);\n    --ogrid-fg-muted: rgba(255, 255, 255, 0.5);\n    --ogrid-border: rgba(255, 255, 255, 0.12);\n    --ogrid-border-strong: rgba(255, 255, 255, 0.5);\n    --ogrid-border-hover: rgba(255, 255, 255, 0.3);\n    --ogrid-header-bg: #2c2c2c;\n    --ogrid-hover-bg: rgba(255, 255, 255, 0.08);\n    --ogrid-selected-row-bg: #1a3a5c;\n    --ogrid-bg-selected-hover: #1f3650;\n    --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);\n    --ogrid-range-bg: rgba(46, 160, 67, 0.15);\n    --ogrid-accent: #4da6ff;\n    --ogrid-accent-dark: #3390e0;\n    --ogrid-selection-color: #2ea043;\n    --ogrid-primary: #4da6ff;\n    --ogrid-primary-fg: #fff;\n    --ogrid-primary-hover: #66b3ff;\n    --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);\n    --ogrid-bg-hover: rgba(255, 255, 255, 0.08);\n    --ogrid-active-bg: rgba(255, 255, 255, 0.08);\n    --ogrid-muted: rgba(255, 255, 255, 0.5);\n    --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n    --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);\n    --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);\n    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);\n    --ogrid-selection: #2ea043;\n    --ogrid-bg-range: rgba(46, 160, 67, 0.15);\n    --ogrid-bg-selected: #1a3a5c;\n    --ogrid-loading-bg: rgba(0, 0, 0, 0.7);\n  }\n}\n/* \u2500\u2500\u2500 Explicit Dark \u2500\u2500\u2500 */\n:where([data-theme=\"dark\"]) {\n  --ogrid-bg: #1e1e1e;\n  --ogrid-fg: rgba(255, 255, 255, 0.87);\n  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);\n  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);\n  --ogrid-border: rgba(255, 255, 255, 0.12);\n  --ogrid-border-strong: rgba(255, 255, 255, 0.5);\n  --ogrid-border-hover: rgba(255, 255, 255, 0.3);\n  --ogrid-header-bg: #2c2c2c;\n  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);\n  --ogrid-selected-row-bg: #1a3a5c;\n  --ogrid-bg-selected-hover: #1f3650;\n  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);\n  --ogrid-range-bg: rgba(46, 160, 67, 0.15);\n  --ogrid-accent: #4da6ff;\n  --ogrid-accent-dark: #3390e0;\n  --ogrid-selection-color: #2ea043;\n  --ogrid-primary: #4da6ff;\n  --ogrid-primary-fg: #fff;\n  --ogrid-primary-hover: #66b3ff;\n  --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);\n  --ogrid-bg-hover: rgba(255, 255, 255, 0.08);\n  --ogrid-active-bg: rgba(255, 255, 255, 0.08);\n  --ogrid-muted: rgba(255, 255, 255, 0.5);\n  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);\n  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);\n  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);\n  --ogrid-selection: #2ea043;\n  --ogrid-bg-range: rgba(46, 160, 67, 0.15);\n  --ogrid-bg-selected: #1a3a5c;\n  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);\n}", "\n    :host { display: block; height: 100%; }\n    .ogrid-layout-root { display: flex; flex-direction: column; height: 100%; }\n    .ogrid-layout-root--fullscreen {\n      position: fixed; inset: 0; z-index: 9999;\n      background: var(--ogrid-bg, #ffffff);\n    }\n    .ogrid-layout-container {\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      overflow: hidden; display: flex; flex-direction: column;\n      flex: 1; min-height: 0; background: var(--ogrid-bg, #ffffff);\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-layout-root--fullscreen .ogrid-layout-container {\n      border: none;\n    }\n    .ogrid-layout-toolbar {\n      display: flex; justify-content: space-between; align-items: center;\n      padding: 6px 12px; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n      gap: 8px; flex-wrap: wrap; min-height: 0;\n    }\n    .ogrid-layout-toolbar--has-below { border-bottom: none; }\n    .ogrid-layout-toolbar--no-below { border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }\n    .ogrid-layout-toolbar-left { display: flex; align-items: center; gap: 8px; }\n    .ogrid-layout-toolbar-right { display: flex; align-items: center; gap: 8px; }\n    .ogrid-layout-toolbar-below {\n      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      padding: 6px 12px; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-layout-grid-area { width: 100%; min-width: 0; min-height: 0; flex: 1; display: flex; }\n    .ogrid-layout-grid-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }\n    .ogrid-layout-footer {\n      border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); padding: 6px 12px;\n    }\n    .ogrid-fullscreen-btn {\n      background: none; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      border-radius: 4px; padding: 4px 6px; cursor: pointer;\n      display: flex; align-items: center; justify-content: center;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-fullscreen-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-name-box {\n      display: inline-flex; align-items: center; padding: 0 8px;\n      font-family: 'Consolas', 'Courier New', monospace; font-size: 12px;\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 3px;\n      height: 24px; margin-right: 8px; background: var(--ogrid-bg, #fff);\n      min-width: 40px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n    }\n  "], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OGridLayoutComponent, [{
+        type: Component,
+        args: [{ selector: 'ogrid-layout', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SideBarComponent, FormulaBarComponent, SheetTabsComponent], template: `
+    <div [class]="rootClass">
+      <div class="ogrid-layout-container" [style.border-radius.px]="isFullScreen ? 0 : borderRadius">
+        <!-- Toolbar strip -->
+        @if (hasToolbar || fullScreen || showNameBox) {
+          <div
+            class="ogrid-layout-toolbar"
+            [class.ogrid-layout-toolbar--has-below]="hasToolbarBelow"
+            [class.ogrid-layout-toolbar--no-below]="!hasToolbarBelow"
+          >
+            <div class="ogrid-layout-toolbar-left">
+              @if (showNameBox) {
+                <div class="ogrid-name-box">{{ activeCellRef ?? '\u2014' }}</div>
+              }
+              <ng-content select="[toolbar]"></ng-content>
+            </div>
+            <div class="ogrid-layout-toolbar-right">
+              <ng-content select="[toolbarEnd]"></ng-content>
+              @if (fullScreen) {
+                <button type="button" class="ogrid-fullscreen-btn"
+                  [attr.title]="isFullScreen ? 'Exit fullscreen' : 'Fullscreen'"
+                  [attr.aria-label]="isFullScreen ? 'Exit fullscreen' : 'Fullscreen'"
+                  (click)="toggleFullScreen()">
+                  @if (isFullScreen) {
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                      <polyline points="4 10 0 10 0 14"></polyline>
+                      <polyline points="12 6 16 6 16 2"></polyline>
+                      <line x1="0" y1="10" x2="4" y2="6"></line>
+                      <line x1="16" y1="6" x2="12" y2="10"></line>
+                    </svg>
+                  } @else {
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                      <polyline points="10 2 14 2 14 6"></polyline>
+                      <polyline points="6 14 2 14 2 10"></polyline>
+                      <line x1="14" y1="2" x2="10" y2="6"></line>
+                      <line x1="2" y1="14" x2="6" y2="10"></line>
+                    </svg>
+                  }
+                </button>
+              }
+            </div>
+          </div>
+        }
+
+        <!-- Secondary toolbar row -->
+        @if (hasToolbarBelow) {
+          <div class="ogrid-layout-toolbar-below">
+            <ng-content select="[toolbarBelow]"></ng-content>
+          </div>
+        }
+
+        <!-- Formula bar (between toolbar and grid) -->
+        @if (formulaBar) {
+          <ogrid-formula-bar
+            [cellRef]="formulaBar.cellRef"
+            [formulaText]="formulaBar.formulaText"
+            [isEditing]="formulaBar.isEditing"
+            (inputChange)="formulaBar.onInputChange($event)"
+            (commit)="formulaBar.onCommit()"
+            (cancel)="formulaBar.onCancel()"
+            (startEditing)="formulaBar.startEditing()"
+          />
+        }
+
+        <!-- Grid area -->
+        <div class="ogrid-layout-grid-area">
+          @if (sideBar && sideBar.position === 'left') {
+            <ogrid-sidebar [sideBarProps]="sideBar"></ogrid-sidebar>
+          }
+          <div class="ogrid-layout-grid-content">
+            <ng-content></ng-content>
+          </div>
+          @if (sideBar && sideBar.position !== 'left') {
+            <ogrid-sidebar [sideBarProps]="sideBar"></ogrid-sidebar>
+          }
+        </div>
+
+        <!-- Sheet tabs (between grid and footer) -->
+        @if (sheetDefs && sheetDefs.length > 0 && activeSheet) {
+          <ogrid-sheet-tabs
+            [sheets]="sheetDefs"
+            [activeSheet]="activeSheet"
+            [showAddButton]="!!onSheetAdd"
+            (sheetChange)="onSheetChange?.($event)"
+            (sheetAdd)="onSheetAdd?.()"
+          />
+        }
+
+        <!-- Footer strip (pagination) -->
+        @if (hasPagination) {
+          <div class="ogrid-layout-footer">
+            <ng-content select="[pagination]"></ng-content>
+          </div>
+        }
+      </div>
+    </div>
+  `, styles: ["\n/* \u2500\u2500\u2500 OGrid Light Theme (default) \u2500\u2500\u2500 */\n:where(:root) {\n  --ogrid-bg: #ffffff;\n  --ogrid-fg: rgba(0, 0, 0, 0.87);\n  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);\n  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);\n  --ogrid-border: rgba(0, 0, 0, 0.12);\n  --ogrid-border-strong: rgba(0, 0, 0, 0.5);\n  --ogrid-border-hover: rgba(0, 0, 0, 0.3);\n  --ogrid-header-bg: #f5f5f5;\n  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);\n  --ogrid-selected-row-bg: #e6f0fb;\n  --ogrid-bg-selected-hover: #dae8f8;\n  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);\n  --ogrid-range-bg: rgba(33, 115, 70, 0.12);\n  --ogrid-accent: #0078d4;\n  --ogrid-accent-dark: #005a9e;\n  --ogrid-selection-color: #217346;\n  --ogrid-primary: #0078d4;\n  --ogrid-primary-fg: #fff;\n  --ogrid-primary-hover: #106ebe;\n  --ogrid-bg-subtle: #f5f5f5;\n  --ogrid-bg-hover: rgba(0, 0, 0, 0.04);\n  --ogrid-active-bg: rgba(0, 0, 0, 0.06);\n  --ogrid-muted: rgba(0, 0, 0, 0.5);\n  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);\n  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);\n  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);\n  --ogrid-selection: #217346;\n  --ogrid-bg-range: rgba(33, 115, 70, 0.12);\n  --ogrid-bg-selected: #e6f0fb;\n  --ogrid-loading-bg: rgba(255, 255, 255, 0.7);\n}\n/* \u2500\u2500\u2500 Auto Dark (system preference) \u2500\u2500\u2500 */\n@media (prefers-color-scheme: dark) {\n  :where(:root:not([data-theme=\"light\"])) {\n    --ogrid-bg: #1e1e1e;\n    --ogrid-fg: rgba(255, 255, 255, 0.87);\n    --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);\n    --ogrid-fg-muted: rgba(255, 255, 255, 0.5);\n    --ogrid-border: rgba(255, 255, 255, 0.12);\n    --ogrid-border-strong: rgba(255, 255, 255, 0.5);\n    --ogrid-border-hover: rgba(255, 255, 255, 0.3);\n    --ogrid-header-bg: #2c2c2c;\n    --ogrid-hover-bg: rgba(255, 255, 255, 0.08);\n    --ogrid-selected-row-bg: #1a3a5c;\n    --ogrid-bg-selected-hover: #1f3650;\n    --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);\n    --ogrid-range-bg: rgba(46, 160, 67, 0.15);\n    --ogrid-accent: #4da6ff;\n    --ogrid-accent-dark: #3390e0;\n    --ogrid-selection-color: #2ea043;\n    --ogrid-primary: #4da6ff;\n    --ogrid-primary-fg: #fff;\n    --ogrid-primary-hover: #66b3ff;\n    --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);\n    --ogrid-bg-hover: rgba(255, 255, 255, 0.08);\n    --ogrid-active-bg: rgba(255, 255, 255, 0.08);\n    --ogrid-muted: rgba(255, 255, 255, 0.5);\n    --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n    --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);\n    --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);\n    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);\n    --ogrid-selection: #2ea043;\n    --ogrid-bg-range: rgba(46, 160, 67, 0.15);\n    --ogrid-bg-selected: #1a3a5c;\n    --ogrid-loading-bg: rgba(0, 0, 0, 0.7);\n  }\n}\n/* \u2500\u2500\u2500 Explicit Dark \u2500\u2500\u2500 */\n:where([data-theme=\"dark\"]) {\n  --ogrid-bg: #1e1e1e;\n  --ogrid-fg: rgba(255, 255, 255, 0.87);\n  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);\n  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);\n  --ogrid-border: rgba(255, 255, 255, 0.12);\n  --ogrid-border-strong: rgba(255, 255, 255, 0.5);\n  --ogrid-border-hover: rgba(255, 255, 255, 0.3);\n  --ogrid-header-bg: #2c2c2c;\n  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);\n  --ogrid-selected-row-bg: #1a3a5c;\n  --ogrid-bg-selected-hover: #1f3650;\n  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);\n  --ogrid-range-bg: rgba(46, 160, 67, 0.15);\n  --ogrid-accent: #4da6ff;\n  --ogrid-accent-dark: #3390e0;\n  --ogrid-selection-color: #2ea043;\n  --ogrid-primary: #4da6ff;\n  --ogrid-primary-fg: #fff;\n  --ogrid-primary-hover: #66b3ff;\n  --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);\n  --ogrid-bg-hover: rgba(255, 255, 255, 0.08);\n  --ogrid-active-bg: rgba(255, 255, 255, 0.08);\n  --ogrid-muted: rgba(255, 255, 255, 0.5);\n  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);\n  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);\n  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);\n  --ogrid-selection: #2ea043;\n  --ogrid-bg-range: rgba(46, 160, 67, 0.15);\n  --ogrid-bg-selected: #1a3a5c;\n  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);\n}", "\n    :host { display: block; height: 100%; }\n    .ogrid-layout-root { display: flex; flex-direction: column; height: 100%; }\n    .ogrid-layout-root--fullscreen {\n      position: fixed; inset: 0; z-index: 9999;\n      background: var(--ogrid-bg, #ffffff);\n    }\n    .ogrid-layout-container {\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      overflow: hidden; display: flex; flex-direction: column;\n      flex: 1; min-height: 0; background: var(--ogrid-bg, #ffffff);\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-layout-root--fullscreen .ogrid-layout-container {\n      border: none;\n    }\n    .ogrid-layout-toolbar {\n      display: flex; justify-content: space-between; align-items: center;\n      padding: 6px 12px; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n      gap: 8px; flex-wrap: wrap; min-height: 0;\n    }\n    .ogrid-layout-toolbar--has-below { border-bottom: none; }\n    .ogrid-layout-toolbar--no-below { border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }\n    .ogrid-layout-toolbar-left { display: flex; align-items: center; gap: 8px; }\n    .ogrid-layout-toolbar-right { display: flex; align-items: center; gap: 8px; }\n    .ogrid-layout-toolbar-below {\n      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      padding: 6px 12px; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-layout-grid-area { width: 100%; min-width: 0; min-height: 0; flex: 1; display: flex; }\n    .ogrid-layout-grid-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }\n    .ogrid-layout-footer {\n      border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); padding: 6px 12px;\n    }\n    .ogrid-fullscreen-btn {\n      background: none; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      border-radius: 4px; padding: 4px 6px; cursor: pointer;\n      display: flex; align-items: center; justify-content: center;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-fullscreen-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-name-box {\n      display: inline-flex; align-items: center; padding: 0 8px;\n      font-family: 'Consolas', 'Courier New', monospace; font-size: 12px;\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 3px;\n      height: 24px; margin-right: 8px; background: var(--ogrid-bg, #fff);\n      min-width: 40px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n    }\n  "] }]
+    }], null, { className: [{
+            type: Input
+        }], hasToolbar: [{
+            type: Input
+        }], hasToolbarBelow: [{
+            type: Input
+        }], hasPagination: [{
+            type: Input
+        }], sideBar: [{
+            type: Input
+        }], fullScreen: [{
+            type: Input
+        }], showNameBox: [{
+            type: Input
+        }], activeCellRef: [{
+            type: Input
+        }], formulaBar: [{
+            type: Input
+        }], sheetDefs: [{
+            type: Input
+        }], activeSheet: [{
+            type: Input
+        }], onSheetChange: [{
+            type: Input
+        }], onSheetAdd: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OGridLayoutComponent, { className: "OGridLayoutComponent", filePath: "components/ogrid-layout.component.ts", lineNumber: 165 }); })();

package/dist/esm/components/sheet-tabs.component.js

@@ -0,0 +1,83 @@
+/**
+ * SheetTabsComponent -- Excel-style sheet tab bar at the bottom of the grid.
+ *
+ * Layout: [+] [Sheet1] [Sheet2] [Sheet3]
+ *
+ * Uses --ogrid-* CSS variables for theming.
+ * Port of React's SheetTabs component.
+ */
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, output, } from '@angular/core';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.id;
+function SheetTabsComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 3);
+    i0.ɵɵdomListener("click", function SheetTabsComponent_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.sheetAdd.emit()); });
+    i0.ɵɵtext(1, "+");
+    i0.ɵɵdomElementEnd();
+} }
+function SheetTabsComponent_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 4);
+    i0.ɵɵdomListener("click", function SheetTabsComponent_For_3_Template_button_click_0_listener() { const sheet_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.sheetChange.emit(sheet_r4.id)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const sheet_r4 = ctx.$implicit;
+    const isActive_r5 = sheet_r4.id === i0.ɵɵnextContext().activeSheet();
+    i0.ɵɵstyleProp("border-bottom-color", isActive_r5 && sheet_r4.color ? sheet_r4.color : null);
+    i0.ɵɵclassProp("ogrid-sheet-tabs__tab--active", isActive_r5);
+    i0.ɵɵattribute("aria-selected", isActive_r5);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(sheet_r4.name);
+} }
+export class SheetTabsComponent {
+    constructor() {
+        this.sheets = input.required(...(ngDevMode ? [{ debugName: "sheets" }] : []));
+        this.activeSheet = input.required(...(ngDevMode ? [{ debugName: "activeSheet" }] : []));
+        this.showAddButton = input(false, ...(ngDevMode ? [{ debugName: "showAddButton" }] : []));
+        this.sheetChange = output();
+        this.sheetAdd = output();
+    }
+    static { this.ɵfac = function SheetTabsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SheetTabsComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SheetTabsComponent, selectors: [["ogrid-sheet-tabs"]], inputs: { sheets: [1, "sheets"], activeSheet: [1, "activeSheet"], showAddButton: [1, "showAddButton"] }, outputs: { sheetChange: "sheetChange", sheetAdd: "sheetAdd" }, decls: 4, vars: 1, consts: [["role", "tablist", "aria-label", "Sheet tabs", 1, "ogrid-sheet-tabs"], ["type", "button", "title", "Add sheet", "aria-label", "Add sheet", 1, "ogrid-sheet-tabs__add-btn"], ["type", "button", "role", "tab", 1, "ogrid-sheet-tabs__tab", 3, "ogrid-sheet-tabs__tab--active", "border-bottom-color"], ["type", "button", "title", "Add sheet", "aria-label", "Add sheet", 1, "ogrid-sheet-tabs__add-btn", 3, "click"], ["type", "button", "role", "tab", 1, "ogrid-sheet-tabs__tab", 3, "click"]], template: function SheetTabsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, SheetTabsComponent_Conditional_1_Template, 2, 0, "button", 1);
+            i0.ɵɵrepeaterCreate(2, SheetTabsComponent_For_3_Template, 2, 6, "button", 2, _forTrack0);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showAddButton() ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.sheets());
+        } }, styles: ["\n    .ogrid-sheet-tabs {\n      display: flex;\n      align-items: center;\n      border-top: 1px solid var(--ogrid-border, #e0e0e0);\n      background: var(--ogrid-header-bg, #f5f5f5);\n      min-height: 30px;\n      overflow-x: auto;\n      overflow-y: hidden;\n      gap: 0;\n      font-size: 12px;\n    }\n    .ogrid-sheet-tabs__add-btn {\n      background: none;\n      border: none;\n      cursor: pointer;\n      padding: 4px 10px;\n      font-size: 16px;\n      line-height: 22px;\n      color: var(--ogrid-fg-secondary, #666);\n      flex-shrink: 0;\n    }\n    .ogrid-sheet-tabs__tab {\n      background: none;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      padding: 4px 16px;\n      font-size: 12px;\n      line-height: 22px;\n      color: var(--ogrid-fg, #242424);\n      white-space: nowrap;\n      position: relative;\n    }\n    .ogrid-sheet-tabs__tab--active {\n      font-weight: 600;\n      border-bottom-color: var(--ogrid-primary, #217346);\n      background: var(--ogrid-bg, #fff);\n    }\n  "], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SheetTabsComponent, [{
+        type: Component,
+        args: [{ selector: 'ogrid-sheet-tabs', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ogrid-sheet-tabs" role="tablist" aria-label="Sheet tabs">
+      @if (showAddButton()) {
+        <button
+          type="button"
+          class="ogrid-sheet-tabs__add-btn"
+          (click)="sheetAdd.emit()"
+          title="Add sheet"
+          aria-label="Add sheet"
+        >+</button>
+      }
+      @for (sheet of sheets(); track sheet.id) {
+        @let isActive = sheet.id === activeSheet();
+        <button
+          type="button"
+          role="tab"
+          class="ogrid-sheet-tabs__tab"
+          [class.ogrid-sheet-tabs__tab--active]="isActive"
+          [attr.aria-selected]="isActive"
+          [style.border-bottom-color]="isActive && sheet.color ? sheet.color : null"
+          (click)="sheetChange.emit(sheet.id)"
+        >{{ sheet.name }}</button>
+      }
+    </div>
+  `, styles: ["\n    .ogrid-sheet-tabs {\n      display: flex;\n      align-items: center;\n      border-top: 1px solid var(--ogrid-border, #e0e0e0);\n      background: var(--ogrid-header-bg, #f5f5f5);\n      min-height: 30px;\n      overflow-x: auto;\n      overflow-y: hidden;\n      gap: 0;\n      font-size: 12px;\n    }\n    .ogrid-sheet-tabs__add-btn {\n      background: none;\n      border: none;\n      cursor: pointer;\n      padding: 4px 10px;\n      font-size: 16px;\n      line-height: 22px;\n      color: var(--ogrid-fg-secondary, #666);\n      flex-shrink: 0;\n    }\n    .ogrid-sheet-tabs__tab {\n      background: none;\n      border: none;\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n      padding: 4px 16px;\n      font-size: 12px;\n      line-height: 22px;\n      color: var(--ogrid-fg, #242424);\n      white-space: nowrap;\n      position: relative;\n    }\n    .ogrid-sheet-tabs__tab--active {\n      font-weight: 600;\n      border-bottom-color: var(--ogrid-primary, #217346);\n      background: var(--ogrid-bg, #fff);\n    }\n  "] }]
+    }], null, { sheets: [{ type: i0.Input, args: [{ isSignal: true, alias: "sheets", required: true }] }], activeSheet: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSheet", required: true }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], sheetChange: [{ type: i0.Output, args: ["sheetChange"] }], sheetAdd: [{ type: i0.Output, args: ["sheetAdd"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SheetTabsComponent, { className: "SheetTabsComponent", filePath: "components/sheet-tabs.component.ts", lineNumber: 90 }); })();