@alaarab/ogrid-angular 2.1.3 → 2.1.4

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

@@ -1,107 +0,0 @@
-/**
- * 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;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative">
-          <input
-            #richSelectInput
-            type="text"
-            [value]="searchText()"
-            (input)="onRichSelectSearch($any($event.target).value)"
-            (keydown)="onRichSelectKeyDown($event)"
-            placeholder="Search..."
-            style="width:100%;padding:0;border:none;background:transparent;color:inherit;font:inherit;font-size:13px;outline:none;min-width:0"
-          />
-          <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)">
-            @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);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424)'">
-                {{ getDisplayText(opt) }}
-              </div>
-            }
-            @if (filteredOptions().length === 0) {
-              <div style="padding:6px 8px;color:var(--ogrid-muted, #999)">No matches</div>
-            }
-          </div>
-        </div>
-      }
-      @case ('select') {
-        <div #selectWrapper tabindex="0"
-             style="width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative"
-             (keydown)="onCustomSelectKeyDown($event)">
-          <div style="display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;font-size:13px;color:inherit">
-            <span>{{ 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)">
-            @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);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424)'">
-                {{ 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') {
-        <input
-          #inputEl
-          type="date"
-          [value]="localValue()"
-          (change)="commitValue($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: block;
-      width: 100%;
-      height: 100%;
-    }
-`;

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

@@ -1,164 +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 { Component, Input, signal, DestroyRef, inject, ChangeDetectionStrategy } from '@angular/core';
-import { measureRange, injectGlobalStyles } from '@alaarab/ogrid-core';
-let MarchingAntsOverlayComponent = 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);
-        this.clipRect = signal(null);
-        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);
-        }
-    }
-    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);
-    }
-};
-__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',
-        standalone: true,
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [`
-    .ogrid-marching-ants-svg { position: absolute; pointer-events: none; overflow: visible; }
-    .ogrid-marching-ants-svg--selection { z-index: 4; }
-    .ogrid-marching-ants-svg--clip { z-index: 5; }
-  `],
-        template: `
-    @if (selRect() && !clipRangeMatchesSel()) {
-      <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>
-    }
-  `,
-    })
-], MarchingAntsOverlayComponent);
-export { MarchingAntsOverlayComponent };

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

@@ -1,188 +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 { Component, Input, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
-import { SideBarComponent } from './sidebar.component';
-import { GRID_BORDER_RADIUS } from '@alaarab/ogrid-core';
-import { OGRID_THEME_VARS_CSS } from '../styles/ogrid-theme-vars';
-let OGridLayoutComponent = class OGridLayoutComponent {
-    constructor() {
-        this.hasToolbar = false;
-        this.hasToolbarBelow = false;
-        this.hasPagination = false;
-        this.sideBar = null;
-        this.fullScreen = false;
-        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;
-        }
-    }
-};
-__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);
-__decorate([
-    Input()
-], OGridLayoutComponent.prototype, "fullScreen", void 0);
-OGridLayoutComponent = __decorate([
-    Component({
-        selector: 'ogrid-layout',
-        standalone: true,
-        encapsulation: ViewEncapsulation.None,
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        imports: [SideBarComponent],
-        styles: [OGRID_THEME_VARS_CSS, `
-    :host { display: block; height: 100%; }
-    .ogrid-layout-root { display: flex; flex-direction: column; height: 100%; }
-    .ogrid-layout-root--fullscreen {
-      position: fixed; inset: 0; z-index: 9999;
-      background: var(--ogrid-bg, #ffffff);
-    }
-    .ogrid-layout-container {
-      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, #ffffff);
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-    .ogrid-layout-root--fullscreen .ogrid-layout-container {
-      border: none; border-radius: 0 !important;
-    }
-    .ogrid-layout-toolbar {
-      display: flex; justify-content: space-between; align-items: center;
-      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, 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, 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; overflow: hidden; }
-    .ogrid-layout-footer {
-      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;
-    }
-    .ogrid-fullscreen-btn {
-      background: none; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-      border-radius: 4px; padding: 4px 6px; cursor: pointer;
-      display: flex; align-items: center; justify-content: center;
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-    .ogrid-fullscreen-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
-  `],
-        template: `
-    <div [class]="rootClass">
-      <div class="ogrid-layout-container" [style.border-radius.px]="borderRadius">
-        <!-- Toolbar strip -->
-        @if (hasToolbar || fullScreen) {
-          <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">
-              <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>
-        }
-
-        <!-- 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>
-
-        <!-- Footer strip (pagination) -->
-        @if (hasPagination) {
-          <div class="ogrid-layout-footer">
-            <ng-content select="[pagination]"></ng-content>
-          </div>
-        }
-      </div>
-    </div>
-  `,
-    })
-], OGridLayoutComponent);
-export { OGridLayoutComponent };