@alaarab/ogrid-angular 2.1.3 → 2.1.4

package/dist/esm/services/virtual-scroll.service.js

@@ -1,91 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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 { Injectable, signal, computed, DestroyRef, inject } from '@angular/core';
-import { computeVisibleRange, computeTotalHeight, getScrollTopForRow, } from '@alaarab/ogrid-core';
-/** Threshold below which virtual scrolling is a no-op (all rows rendered). */
-const PASSTHROUGH_THRESHOLD = 100;
-/**
- * Manages virtual scrolling state using Angular signals.
- * Port of React's useVirtualScroll hook.
- *
- * Uses core's pure-TS `computeVisibleRange` and `getScrollTopForRow` utilities.
- * The UI layer (Angular Material / PrimeNG) provides the scrollable container
- * and calls `onScroll()` / sets `containerHeight`.
- */
-let VirtualScrollService = class VirtualScrollService {
-    constructor() {
-        this.destroyRef = inject(DestroyRef);
-        // --- Input signals (set by consuming component) ---
-        this.totalRows = signal(0);
-        this.config = signal({ rowHeight: 36 });
-        this.containerHeight = signal(0);
-        // --- Internal state ---
-        this.scrollTop = signal(0);
-        // Scrollable container reference for programmatic scrolling
-        this.containerEl = null;
-        // --- Derived computed signals ---
-        this.rowHeight = computed(() => this.config().rowHeight ?? 36);
-        this.overscan = computed(() => this.config().overscan ?? 5);
-        this.enabled = computed(() => this.config().enabled !== false);
-        /** Whether virtual scrolling is actually active (enabled + enough rows). */
-        this.isActive = computed(() => this.enabled() && this.totalRows() >= PASSTHROUGH_THRESHOLD);
-        /** The visible range of rows with spacer offsets. */
-        this.visibleRange = computed(() => {
-            if (!this.isActive()) {
-                // Passthrough: render all rows
-                return {
-                    startIndex: 0,
-                    endIndex: Math.max(0, this.totalRows() - 1),
-                    offsetTop: 0,
-                    offsetBottom: 0,
-                };
-            }
-            return computeVisibleRange(this.scrollTop(), this.rowHeight(), this.containerHeight(), this.totalRows(), this.overscan());
-        });
-        /** Total scrollable height in pixels. */
-        this.totalHeight = computed(() => computeTotalHeight(this.totalRows(), this.rowHeight()));
-        this.destroyRef.onDestroy(() => {
-            this.containerEl = null;
-        });
-    }
-    /**
-     * Set the scrollable container element.
-     * Used for programmatic scrolling (scrollToRow).
-     */
-    setContainer(el) {
-        this.containerEl = el;
-    }
-    /**
-     * Call this from the container's scroll event handler.
-     */
-    onScroll(event) {
-        const target = event.target;
-        this.scrollTop.set(target.scrollTop);
-    }
-    /**
-     * Scroll to a specific row index.
-     * @param index - The row index to scroll to.
-     * @param align - Where to position the row: 'start' (top), 'center', or 'end' (bottom). Default: 'start'.
-     */
-    scrollToRow(index, align = 'start') {
-        const container = this.containerEl;
-        if (!container)
-            return;
-        const targetScrollTop = getScrollTopForRow(index, this.rowHeight(), this.containerHeight(), align);
-        container.scrollTo({ top: targetScrollTop, behavior: 'auto' });
-    }
-    /**
-     * Update the virtual scroll configuration.
-     */
-    updateConfig(updates) {
-        this.config.update((prev) => ({ ...prev, ...updates }));
-    }
-};
-VirtualScrollService = __decorate([
-    Injectable()
-], VirtualScrollService);
-export { VirtualScrollService };

package/dist/esm/styles/ogrid-theme-vars.js

@@ -1,53 +0,0 @@
-/**
- * Shared OGrid CSS theme variables (light + dark mode).
- * Used by all Angular UI packages (Material, PrimeNG, Radix) to avoid duplication.
- */
-export const OGRID_THEME_VARS_CSS = `
-/* ─── 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);
-}`;

package/dist/esm/types/columnTypes.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/types/dataGridTypes.js

@@ -1 +0,0 @@
-export { toUserLike, isInSelectionRange, normalizeSelectionRange } from '@alaarab/ogrid-core';

package/dist/esm/types/index.js

@@ -1 +0,0 @@
-export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';

package/dist/esm/utils/dataGridViewModel.js

@@ -1,6 +0,0 @@
-/**
- * View model helpers for Angular DataGridTable.
- * Pure functions live in @alaarab/ogrid-core. This file re-exports them.
- */
-// Re-export everything from core's dataGridViewModel
-export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, } from '@alaarab/ogrid-core';

package/dist/esm/utils/debounce.js

@@ -1,68 +0,0 @@
-/**
- * Debounce utilities for Angular using signals.
- * Provides functional parity with React's useDebounce and useDebouncedCallback.
- */
-import { signal, effect } from '@angular/core';
-/**
- * Creates a debounced signal that updates after the specified delay when the source value changes.
- *
- * @param source - The signal to debounce
- * @param delayMs - Delay in milliseconds
- * @returns A signal containing the debounced value
- *
- * @example
- * ```typescript
- * const searchQuery = signal('');
- * const debouncedQuery = createDebouncedSignal(searchQuery, 300);
- *
- * effect(() => {
- *   console.log('Debounced search:', debouncedQuery());
- * });
- * ```
- */
-export function createDebouncedSignal(source, delayMs) {
-    const debouncedValue = signal(source());
-    effect((onCleanup) => {
-        const currentValue = source();
-        const timeoutId = setTimeout(() => {
-            debouncedValue.set(currentValue);
-        }, delayMs);
-        onCleanup(() => clearTimeout(timeoutId));
-    });
-    return debouncedValue;
-}
-/**
- * Creates a debounced function that delays invoking the provided function
- * until after `delayMs` milliseconds have elapsed since the last time it was invoked.
- *
- * @param fn - The function to debounce
- * @param delayMs - Delay in milliseconds
- * @returns A debounced version of the function
- *
- * @example
- * ```typescript
- * const saveData = (value: string) => {
- *   console.log('Saving:', value);
- * };
- *
- * const debouncedSave = createDebouncedCallback(saveData, 500);
- *
- * // Multiple rapid calls will only trigger once after 500ms
- * debouncedSave('hello');
- * debouncedSave('world');  // Only this will execute after 500ms
- * ```
- */
-export function createDebouncedCallback(fn, delayMs) {
-    let timeoutId = null;
-    return ((...args) => {
-        if (timeoutId !== null) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-            fn(...args);
-            timeoutId = null;
-        }, delayMs);
-    });
-}
-// Re-export simple debounce from core
-export { debounce } from '@alaarab/ogrid-core';

package/dist/esm/utils/index.js

@@ -1,8 +0,0 @@
-/**
- * Shared utilities for Angular DataGridTable view layer.
- */
-export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, } from './dataGridViewModel';
-// Debounce utilities
-export { createDebouncedSignal, createDebouncedCallback, debounce, } from './debounce';
-// Latest ref utilities
-export { createLatestCallback, } from './latestRef';

package/dist/esm/utils/latestRef.js

@@ -1,41 +0,0 @@
-/**
- * Latest ref utility for Angular using signals.
- * Provides functional parity with React's useLatestRef.
- */
-/**
- * Creates a stable wrapper function that always calls the latest version of the provided function.
- * Useful for event handlers and callbacks where you want a stable reference but need to call
- * the latest implementation.
- *
- * @param fn - Signal containing the function to wrap
- * @returns A stable function that always invokes the latest version
- *
- * @example
- * ```typescript
- * class MyService {
- *   readonly onSave = signal<(value: string) => void>((val) => console.log('Default:', val));
- *   readonly stableOnSave = createLatestCallback(this.onSave);
- *
- *   constructor() {
- *     // Setup event listener with stable reference
- *     effect((onCleanup) => {
- *       // stableOnSave never changes, so this effect only runs once
- *       const callback = () => this.stableOnSave('data');
- *       window.addEventListener('click', callback);
- *       onCleanup(() => window.removeEventListener('click', callback));
- *     });
- *   }
- *
- *   updateHandler(newFn: (value: string) => void) {
- *     // Even though we change the function, the callback reference stays stable
- *     this.onSave.set(newFn);
- *   }
- * }
- * ```
- */
-export function createLatestCallback(fn) {
-    // Return a stable function that always calls the current value of the signal
-    return ((...args) => {
-        return fn()(...args);
-    });
-}