@alaarab/ogrid-angular 2.0.9 → 2.0.12

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

@@ -4,30 +4,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, output, viewChild, DestroyRef, inject } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild, DestroyRef, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { GRID_CONTEXT_MENU_ITEMS, formatShortcut } from '@alaarab/ogrid-core';
 let GridContextMenuComponent = class GridContextMenuComponent {
     constructor() {
         this.destroyRef = inject(DestroyRef);
-        this.x = input.required();
-        this.y = input.required();
-        this.hasSelection = input(false);
-        this.canUndoProp = input(false);
-        this.canRedoProp = input(false);
-        this.classNames = input(undefined);
-        this.copy = output();
-        this.cut = output();
-        this.paste = output();
-        this.selectAll = output();
-        this.undoAction = output();
-        this.redoAction = output();
-        this.close = output();
-        this.menuRef = viewChild('menuRef');
+        this.hasSelection = false;
+        this.canUndoProp = false;
+        this.canRedoProp = false;
+        this.classNames = undefined;
+        this.copy = new EventEmitter();
+        this.cut = new EventEmitter();
+        this.paste = new EventEmitter();
+        this.selectAll = new EventEmitter();
+        this.undoAction = new EventEmitter();
+        this.redoAction = new EventEmitter();
+        this.close = new EventEmitter();
         this.menuItems = GRID_CONTEXT_MENU_ITEMS;
         this.formatShortcutFn = formatShortcut;
         this.clickOutsideHandler = (e) => {
-            const el = this.menuRef()?.nativeElement;
+            const el = this.menuRef?.nativeElement;
             if (el && !el.contains(e.target))
                 this.close.emit();
         };
@@ -44,11 +41,11 @@ let GridContextMenuComponent = class GridContextMenuComponent {
         });
     }
     isDisabled(item) {
-        if (item.disabledWhenNoSelection && !this.hasSelection())
+        if (item.disabledWhenNoSelection && !this.hasSelection)
             return true;
-        if (item.id === 'undo' && !this.canUndoProp())
+        if (item.id === 'undo' && !this.canUndoProp)
             return true;
-        if (item.id === 'redo' && !this.canRedoProp())
+        if (item.id === 'redo' && !this.canRedoProp)
             return true;
         return false;
     }
@@ -76,6 +73,48 @@ let GridContextMenuComponent = class GridContextMenuComponent {
         this.close.emit();
     }
 };
+__decorate([
+    Input({ required: true })
+], GridContextMenuComponent.prototype, "x", void 0);
+__decorate([
+    Input({ required: true })
+], GridContextMenuComponent.prototype, "y", void 0);
+__decorate([
+    Input()
+], GridContextMenuComponent.prototype, "hasSelection", void 0);
+__decorate([
+    Input()
+], GridContextMenuComponent.prototype, "canUndoProp", void 0);
+__decorate([
+    Input()
+], GridContextMenuComponent.prototype, "canRedoProp", void 0);
+__decorate([
+    Input()
+], GridContextMenuComponent.prototype, "classNames", void 0);
+__decorate([
+    Output()
+], GridContextMenuComponent.prototype, "copy", void 0);
+__decorate([
+    Output()
+], GridContextMenuComponent.prototype, "cut", void 0);
+__decorate([
+    Output()
+], GridContextMenuComponent.prototype, "paste", void 0);
+__decorate([
+    Output()
+], GridContextMenuComponent.prototype, "selectAll", void 0);
+__decorate([
+    Output()
+], GridContextMenuComponent.prototype, "undoAction", void 0);
+__decorate([
+    Output()
+], GridContextMenuComponent.prototype, "redoAction", void 0);
+__decorate([
+    Output()
+], GridContextMenuComponent.prototype, "close", void 0);
+__decorate([
+    ViewChild('menuRef')
+], GridContextMenuComponent.prototype, "menuRef", void 0);
 GridContextMenuComponent = __decorate([
     Component({
         selector: 'ogrid-context-menu',
@@ -84,25 +123,25 @@ GridContextMenuComponent = __decorate([
         template: `
     <div
       #menuRef
-      [class]="classNames()?.contextMenu ?? ''"
+      [class]="classNames?.contextMenu ?? ''"
       role="menu"
-      [style.left.px]="x()"
-      [style.top.px]="y()"
+      [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>
+          <div [class]="classNames?.contextMenuDivider ?? ''"></div>
         }
         <button
           type="button"
-          [class]="classNames()?.contextMenuItem ?? ''"
+          [class]="classNames?.contextMenuItem ?? ''"
           (click)="onItemClick(item.id)"
           [disabled]="isDisabled(item)"
         >
-          <span [class]="classNames()?.contextMenuItemLabel ?? ''">{{ item.label }}</span>
+          <span [class]="classNames?.contextMenuItemLabel ?? ''">{{ item.label }}</span>
           @if (item.shortcut) {
-            <span [class]="classNames()?.contextMenuItemShortcut ?? ''">
+            <span [class]="classNames?.contextMenuItemShortcut ?? ''">
               {{ formatShortcutFn(item.shortcut) }}
             </span>
           }

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

@@ -4,81 +4,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, effect, signal, DestroyRef, inject } from '@angular/core';
+import { Component, Input, signal, DestroyRef, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-function measureRange(container, range, colOffset) {
-    const startGlobalCol = range.startCol + colOffset;
-    const endGlobalCol = range.endCol + colOffset;
-    const topLeft = container.querySelector(`[data-row-index="${range.startRow}"][data-col-index="${startGlobalCol}"]`);
-    const bottomRight = container.querySelector(`[data-row-index="${range.endRow}"][data-col-index="${endGlobalCol}"]`);
-    if (!topLeft || !bottomRight)
-        return null;
-    const cRect = container.getBoundingClientRect();
-    const tlRect = topLeft.getBoundingClientRect();
-    const brRect = bottomRight.getBoundingClientRect();
-    return {
-        top: tlRect.top - cRect.top,
-        left: tlRect.left - cRect.left,
-        width: brRect.right - tlRect.left,
-        height: brRect.bottom - tlRect.top,
-    };
-}
-function ensureKeyframes() {
-    if (typeof document === 'undefined')
-        return;
-    if (document.getElementById('ogrid-marching-ants-keyframes'))
-        return;
-    const style = document.createElement('style');
-    style.id = 'ogrid-marching-ants-keyframes';
-    style.textContent = '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}';
-    document.head.appendChild(style);
-}
+import { measureRange, injectGlobalStyles } from '@alaarab/ogrid-core';
 let MarchingAntsOverlayComponent = class MarchingAntsOverlayComponent {
     constructor() {
         this.destroyRef = inject(DestroyRef);
-        this.containerEl = input.required();
-        this.selectionRange = input(null);
-        this.copyRange = input(null);
-        this.cutRange = input(null);
-        this.colOffset = input(0);
-        this.columnSizingVersion = input(0);
+        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);
         this.clipRect = signal(null);
         this.rafId = 0;
         this.resizeObserver = null;
-        ensureKeyframes();
-        effect(() => {
-            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
-            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);
-            }
-        });
+        injectGlobalStyles('ogrid-marching-ants-keyframes', '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}');
         this.destroyRef.onDestroy(() => {
             if (this.rafId)
                 cancelAnimationFrame(this.rafId);
@@ -86,9 +30,47 @@ let MarchingAntsOverlayComponent = class MarchingAntsOverlayComponent {
                 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);
+        }
+    }
     clipRangeMatchesSel() {
-        const selRange = this.selectionRange();
-        const clipRange = this.copyRange() ?? this.cutRange();
+        const selRange = this.selectionRange;
+        const clipRange = this.copyRange ?? this.cutRange;
         return selRange != null && clipRange != null &&
             selRange.startRow === clipRange.startRow &&
             selRange.startCol === clipRange.startCol &&
@@ -99,6 +81,33 @@ let MarchingAntsOverlayComponent = class MarchingAntsOverlayComponent {
         return Math.max(0, n);
     }
 };
+__decorate([
+    Input({ required: true })
+], MarchingAntsOverlayComponent.prototype, "containerEl", void 0);
+__decorate([
+    Input()
+], MarchingAntsOverlayComponent.prototype, "selectionRange", void 0);
+__decorate([
+    Input()
+], MarchingAntsOverlayComponent.prototype, "copyRange", void 0);
+__decorate([
+    Input()
+], MarchingAntsOverlayComponent.prototype, "cutRange", void 0);
+__decorate([
+    Input()
+], MarchingAntsOverlayComponent.prototype, "colOffset", void 0);
+__decorate([
+    Input()
+], MarchingAntsOverlayComponent.prototype, "columnSizingVersion", void 0);
+__decorate([
+    Input()
+], MarchingAntsOverlayComponent.prototype, "items", void 0);
+__decorate([
+    Input()
+], MarchingAntsOverlayComponent.prototype, "visibleColumns", void 0);
+__decorate([
+    Input()
+], MarchingAntsOverlayComponent.prototype, "columnOrder", void 0);
 MarchingAntsOverlayComponent = __decorate([
     Component({
         selector: 'ogrid-marching-ants-overlay',

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

@@ -4,61 +4,126 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input } from '@angular/core';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SideBarComponent } from './sidebar.component';
 import { GRID_BORDER_RADIUS } from '@alaarab/ogrid-core';
 let OGridLayoutComponent = class OGridLayoutComponent {
     constructor() {
-        this.className = input(undefined);
-        this.hasToolbar = input(false);
-        this.hasToolbarBelow = input(false);
-        this.hasPagination = input(false);
-        this.sideBar = input(null);
+        this.hasToolbar = false;
+        this.hasToolbarBelow = false;
+        this.hasPagination = false;
+        this.sideBar = null;
         this.borderRadius = GRID_BORDER_RADIUS;
     }
 };
+__decorate([
+    Input()
+], OGridLayoutComponent.prototype, "className", void 0);
+__decorate([
+    Input()
+], OGridLayoutComponent.prototype, "hasToolbar", void 0);
+__decorate([
+    Input()
+], OGridLayoutComponent.prototype, "hasToolbarBelow", void 0);
+__decorate([
+    Input()
+], OGridLayoutComponent.prototype, "hasPagination", void 0);
+__decorate([
+    Input()
+], OGridLayoutComponent.prototype, "sideBar", void 0);
 OGridLayoutComponent = __decorate([
     Component({
         selector: 'ogrid-layout',
         standalone: true,
+        encapsulation: ViewEncapsulation.None,
         imports: [CommonModule, SideBarComponent],
         styles: [`
+    /* ─── OGrid Theme Variables ─── */
+    :root {
+      --ogrid-bg: #ffffff;
+      --ogrid-fg: rgba(0, 0, 0, 0.87);
+      --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
+      --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
+      --ogrid-border: rgba(0, 0, 0, 0.12);
+      --ogrid-header-bg: rgba(0, 0, 0, 0.04);
+      --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
+      --ogrid-selected-row-bg: #e6f0fb;
+      --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+      --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+      --ogrid-accent: #0078d4;
+      --ogrid-selection-color: #217346;
+      --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+    }
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme="light"]) {
+        --ogrid-bg: #1e1e1e;
+        --ogrid-fg: rgba(255, 255, 255, 0.87);
+        --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+        --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+        --ogrid-border: rgba(255, 255, 255, 0.12);
+        --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+        --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+        --ogrid-selected-row-bg: #1a3a5c;
+        --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+        --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+        --ogrid-accent: #4da6ff;
+        --ogrid-selection-color: #2ea043;
+        --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+      }
+    }
+    [data-theme="dark"] {
+      --ogrid-bg: #1e1e1e;
+      --ogrid-fg: rgba(255, 255, 255, 0.87);
+      --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+      --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+      --ogrid-border: rgba(255, 255, 255, 0.12);
+      --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+      --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+      --ogrid-selected-row-bg: #1a3a5c;
+      --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+      --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+      --ogrid-accent: #4da6ff;
+      --ogrid-selection-color: #2ea043;
+      --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+    }
+    :host { display: block; height: 100%; }
     .ogrid-layout-root { display: flex; flex-direction: column; height: 100%; }
     .ogrid-layout-container {
-      border: 1px solid var(--ogrid-border, #e0e0e0);
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
       overflow: hidden; display: flex; flex-direction: column;
-      flex: 1; min-height: 0; background: var(--ogrid-bg, #fff);
+      flex: 1; min-height: 0; background: var(--ogrid-bg, #ffffff);
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-layout-toolbar {
       display: flex; justify-content: space-between; align-items: center;
-      padding: 6px 12px; background: var(--ogrid-header-bg, #f5f5f5);
+      padding: 6px 12px; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
       gap: 8px; flex-wrap: wrap; min-height: 0;
     }
     .ogrid-layout-toolbar--has-below { border-bottom: none; }
-    .ogrid-layout-toolbar--no-below { border-bottom: 1px solid var(--ogrid-border, #e0e0e0); }
+    .ogrid-layout-toolbar--no-below { border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
     .ogrid-layout-toolbar-left { display: flex; align-items: center; gap: 8px; }
     .ogrid-layout-toolbar-right { display: flex; align-items: center; gap: 8px; }
     .ogrid-layout-toolbar-below {
-      border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
-      padding: 6px 12px; background: var(--ogrid-header-bg, #f5f5f5);
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      padding: 6px 12px; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
     }
     .ogrid-layout-grid-area { width: 100%; min-width: 0; min-height: 0; flex: 1; display: flex; }
     .ogrid-layout-grid-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
     .ogrid-layout-footer {
-      border-top: 1px solid var(--ogrid-border, #e0e0e0);
-      background: var(--ogrid-header-bg, #f5f5f5); padding: 6px 12px;
+      border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); padding: 6px 12px;
     }
   `],
         template: `
-    <div [class]="(className() ?? '') + ' ogrid-layout-root'">
+    <div [class]="(className ?? '') + ' ogrid-layout-root'">
       <div class="ogrid-layout-container" [style.border-radius.px]="borderRadius">
         <!-- Toolbar strip -->
-        @if (hasToolbar()) {
+        @if (hasToolbar) {
           <div
             class="ogrid-layout-toolbar"
-            [class.ogrid-layout-toolbar--has-below]="hasToolbarBelow()"
-            [class.ogrid-layout-toolbar--no-below]="!hasToolbarBelow()"
+            [class.ogrid-layout-toolbar--has-below]="hasToolbarBelow"
+            [class.ogrid-layout-toolbar--no-below]="!hasToolbarBelow"
           >
             <div class="ogrid-layout-toolbar-left">
               <ng-content select="[toolbar]"></ng-content>
@@ -70,33 +135,27 @@ OGridLayoutComponent = __decorate([
         }
 
         <!-- Secondary toolbar row -->
-        @if (hasToolbarBelow()) {
+        @if (hasToolbarBelow) {
           <div class="ogrid-layout-toolbar-below">
             <ng-content select="[toolbarBelow]"></ng-content>
           </div>
         }
 
-        <!-- Grid area -->
-        @if (sideBar()) {
-          <div class="ogrid-layout-grid-area">
-            @if (sideBar()?.position === 'left') {
-              <ogrid-sidebar [sideBarProps]="sideBar()"></ogrid-sidebar>
-            }
-            <div class="ogrid-layout-grid-content">
-              <ng-content></ng-content>
-            </div>
-            @if (sideBar()?.position !== 'left') {
-              <ogrid-sidebar [sideBarProps]="sideBar()"></ogrid-sidebar>
-            }
-          </div>
-        } @else {
+        <!-- Grid area (single ng-content to avoid Angular content projection issues) -->
+        <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>
 
         <!-- Footer strip (pagination) -->
-        @if (hasPagination()) {
+        @if (hasPagination) {
           <div class="ogrid-layout-footer">
             <ng-content select="[pagination]"></ng-content>
           </div>