@alaarab/ogrid-angular 2.0.2

package/dist/esm/components/empty-state.component.js

@@ -0,0 +1,39 @@
+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, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+let EmptyStateComponent = class EmptyStateComponent {
+    constructor() {
+        this.message = input(undefined);
+        this.hasActiveFilters = input(false);
+        this.render = input(undefined);
+        this.clearAll = output();
+    }
+};
+EmptyStateComponent = __decorate([
+    Component({
+        selector: 'ogrid-empty-state',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    @if (render()) {
+      <ng-container [ngTemplateOutlet]="render()!"></ng-container>
+    } @else if (message()) {
+      {{ message() }}
+    } @else if (hasActiveFilters()) {
+      No items match your current filters. Try adjusting your search or
+      <button type="button" (click)="clearAll.emit()" style="background:none;border:none;color:inherit;text-decoration:underline;cursor:pointer;padding:0;font:inherit">
+        clear all filters
+      </button>
+      to see all items.
+    } @else {
+      There are no items available at this time.
+    }
+  `,
+    })
+], EmptyStateComponent);
+export { EmptyStateComponent };

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

@@ -0,0 +1,117 @@
+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, output, effect, 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.menuItems = GRID_CONTEXT_MENU_ITEMS;
+        this.formatShortcutFn = formatShortcut;
+        this.clickOutsideHandler = (e) => {
+            const el = this.menuRef()?.nativeElement;
+            if (el && !el.contains(e.target))
+                this.close.emit();
+        };
+        this.keyDownHandler = (e) => {
+            if (e.key === 'Escape')
+                this.close.emit();
+        };
+        effect(() => {
+            // Re-register listeners when component renders
+            document.addEventListener('mousedown', this.clickOutsideHandler, true);
+            document.addEventListener('keydown', this.keyDownHandler, true);
+        });
+        this.destroyRef.onDestroy(() => {
+            document.removeEventListener('mousedown', this.clickOutsideHandler, true);
+            document.removeEventListener('keydown', this.keyDownHandler, true);
+        });
+    }
+    isDisabled(item) {
+        if (item.disabledWhenNoSelection && !this.hasSelection())
+            return true;
+        if (item.id === 'undo' && !this.canUndoProp())
+            return true;
+        if (item.id === 'redo' && !this.canRedoProp())
+            return true;
+        return false;
+    }
+    onItemClick(id) {
+        switch (id) {
+            case 'copy':
+                this.copy.emit();
+                break;
+            case 'cut':
+                this.cut.emit();
+                break;
+            case 'paste':
+                this.paste.emit();
+                break;
+            case 'selectAll':
+                this.selectAll.emit();
+                break;
+            case 'undo':
+                this.undoAction.emit();
+                break;
+            case 'redo':
+                this.redoAction.emit();
+                break;
+        }
+        this.close.emit();
+    }
+};
+GridContextMenuComponent = __decorate([
+    Component({
+        selector: 'ogrid-context-menu',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <div
+      #menuRef
+      [class]="classNames()?.contextMenu ?? ''"
+      role="menu"
+      [style.left.px]="x()"
+      [style.top.px]="y()"
+      aria-label="Grid context menu"
+    >
+      @for (item of menuItems; track item.id) {
+        @if (item.dividerBefore) {
+          <div [class]="classNames()?.contextMenuDivider ?? ''"></div>
+        }
+        <button
+          type="button"
+          [class]="classNames()?.contextMenuItem ?? ''"
+          (click)="onItemClick(item.id)"
+          [disabled]="isDisabled(item)"
+        >
+          <span [class]="classNames()?.contextMenuItemLabel ?? ''">{{ item.label }}</span>
+          @if (item.shortcut) {
+            <span [class]="classNames()?.contextMenuItemShortcut ?? ''">
+              {{ formatShortcutFn(item.shortcut) }}
+            </span>
+          }
+        </button>
+      }
+    </div>
+  `,
+    })
+], GridContextMenuComponent);
+export { GridContextMenuComponent };

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

@@ -0,0 +1,155 @@
+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, effect, 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);
+}
+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.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();
+            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);
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            if (this.rafId)
+                cancelAnimationFrame(this.rafId);
+            if (this.resizeObserver)
+                this.resizeObserver.disconnect();
+        });
+    }
+    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);
+    }
+};
+MarchingAntsOverlayComponent = __decorate([
+    Component({
+        selector: 'ogrid-marching-ants-overlay',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    @if (selRect() && !clipRangeMatchesSel()) {
+      <svg
+        [style.position]="'absolute'"
+        [style.top.px]="selRect()!.top"
+        [style.left.px]="selRect()!.left"
+        [style.width.px]="selRect()!.width"
+        [style.height.px]="selRect()!.height"
+        [style.pointer-events]="'none'"
+        [style.z-index]="4"
+        [style.overflow]="'visible'"
+        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
+        [style.position]="'absolute'"
+        [style.top.px]="clipRect()!.top"
+        [style.left.px]="clipRect()!.left"
+        [style.width.px]="clipRect()!.width"
+        [style.height.px]="clipRect()!.height"
+        [style.pointer-events]="'none'"
+        [style.z-index]="5"
+        [style.overflow]="'visible'"
+        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

@@ -0,0 +1,96 @@
+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 } 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.borderRadius = GRID_BORDER_RADIUS;
+    }
+};
+OGridLayoutComponent = __decorate([
+    Component({
+        selector: 'ogrid-layout',
+        standalone: true,
+        imports: [CommonModule, SideBarComponent],
+        template: `
+    <div [class]="className() ?? ''" [style.display]="'flex'" [style.flex-direction]="'column'" [style.height]="'100%'">
+      <div [style.border]="'1px solid var(--ogrid-border, #e0e0e0)'"
+           [style.border-radius.px]="borderRadius"
+           [style.overflow]="'hidden'"
+           [style.display]="'flex'"
+           [style.flex-direction]="'column'"
+           [style.flex]="1"
+           [style.min-height]="0"
+           [style.background]="'var(--ogrid-bg, #fff)'"
+      >
+        <!-- Toolbar strip -->
+        @if (hasToolbar()) {
+          <div
+            [style.display]="'flex'"
+            [style.justify-content]="'space-between'"
+            [style.align-items]="'center'"
+            [style.padding]="'6px 12px'"
+            [style.background]="'var(--ogrid-header-bg, #f5f5f5)'"
+            [style.gap.px]="8"
+            [style.flex-wrap]="'wrap'"
+            [style.min-height]="0"
+            [style.border-bottom]="hasToolbarBelow() ? 'none' : '1px solid var(--ogrid-border, #e0e0e0)'"
+          >
+            <div style="display:flex;align-items:center;gap:8px">
+              <ng-content select="[toolbar]"></ng-content>
+            </div>
+            <div style="display:flex;align-items:center;gap:8px">
+              <ng-content select="[toolbarEnd]"></ng-content>
+            </div>
+          </div>
+        }
+
+        <!-- Secondary toolbar row -->
+        @if (hasToolbarBelow()) {
+          <div style="border-bottom:1px solid var(--ogrid-border, #e0e0e0);padding:6px 12px;background:var(--ogrid-header-bg, #f5f5f5)">
+            <ng-content select="[toolbarBelow]"></ng-content>
+          </div>
+        }
+
+        <!-- Grid area -->
+        @if (sideBar()) {
+          <div style="width:100%;min-width:0;min-height:0;flex:1;display:flex">
+            @if (sideBar()?.position === 'left') {
+              <ogrid-sidebar [sideBarProps]="sideBar()"></ogrid-sidebar>
+            }
+            <div style="flex:1;min-width:0;min-height:0;display:flex;flex-direction:column">
+              <ng-content></ng-content>
+            </div>
+            @if (sideBar()?.position !== 'left') {
+              <ogrid-sidebar [sideBarProps]="sideBar()"></ogrid-sidebar>
+            }
+          </div>
+        } @else {
+          <div style="width:100%;min-width:0;min-height:0;flex:1;display:flex;flex-direction:column">
+            <ng-content></ng-content>
+          </div>
+        }
+
+        <!-- Footer strip (pagination) -->
+        @if (hasPagination()) {
+          <div style="border-top:1px solid var(--ogrid-border, #e0e0e0);background:var(--ogrid-header-bg, #f5f5f5);padding:6px 12px">
+            <ng-content select="[pagination]"></ng-content>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+    })
+], OGridLayoutComponent);
+export { OGridLayoutComponent };

package/dist/esm/components/sidebar.component.js

@@ -0,0 +1,229 @@
+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 } from '@angular/core';
+import { CommonModule } from '@angular/common';
+const PANEL_WIDTH = 240;
+const TAB_WIDTH = 36;
+const PANEL_LABELS = { columns: 'Columns', filters: 'Filters' };
+let SideBarComponent = class SideBarComponent {
+    constructor() {
+        this.sideBarProps = input(null);
+        this.panelLabels = PANEL_LABELS;
+        this.tabWidth = TAB_WIDTH;
+        this.panelWidth = PANEL_WIDTH;
+    }
+    onTabClick(panel) {
+        const props = this.sideBarProps();
+        if (props)
+            props.onPanelChange(props.activePanel === panel ? null : panel);
+    }
+    allVisible() {
+        const props = this.sideBarProps();
+        if (!props)
+            return false;
+        return props.columns.every((c) => props.visibleColumns.has(c.columnId));
+    }
+    onSelectAll() {
+        const props = this.sideBarProps();
+        if (!props)
+            return;
+        const next = new Set(props.visibleColumns);
+        props.columns.forEach((c) => next.add(c.columnId));
+        props.onSetVisibleColumns(next);
+    }
+    onClearAll() {
+        const props = this.sideBarProps();
+        if (!props)
+            return;
+        const next = new Set();
+        props.columns.forEach((c) => {
+            if (c.required && props.visibleColumns.has(c.columnId))
+                next.add(c.columnId);
+        });
+        props.onSetVisibleColumns(next);
+    }
+    onVisibilityChange(columnKey, visible) {
+        this.sideBarProps()?.onVisibilityChange(columnKey, visible);
+    }
+    getTextFilterValue(filterField) {
+        const filters = this.sideBarProps()?.filters;
+        const fv = filters?.[filterField];
+        return fv?.type === 'text' ? fv.value : '';
+    }
+    onTextFilterChange(filterField, value) {
+        this.sideBarProps()?.onFilterChange(filterField, value ? { type: 'text', value } : undefined);
+    }
+    getDateFrom(filterField) {
+        const fv = this.sideBarProps()?.filters?.[filterField];
+        return fv?.type === 'date' ? (fv.value.from ?? '') : '';
+    }
+    getDateTo(filterField) {
+        const fv = this.sideBarProps()?.filters?.[filterField];
+        return fv?.type === 'date' ? (fv.value.to ?? '') : '';
+    }
+    onDateFromChange(filterField, value) {
+        const fv = this.sideBarProps()?.filters?.[filterField];
+        const existing = fv?.type === 'date' ? fv.value : {};
+        const from = value || undefined;
+        const to = existing.to;
+        this.sideBarProps()?.onFilterChange(filterField, from || to ? { type: 'date', value: { from, to } } : undefined);
+    }
+    onDateToChange(filterField, value) {
+        const fv = this.sideBarProps()?.filters?.[filterField];
+        const existing = fv?.type === 'date' ? fv.value : {};
+        const to = value || undefined;
+        const from = existing.from;
+        this.sideBarProps()?.onFilterChange(filterField, from || to ? { type: 'date', value: { from, to } } : undefined);
+    }
+    getFilterOptions(filterField) {
+        return this.sideBarProps()?.filterOptions?.[filterField] ?? [];
+    }
+    isMultiSelectChecked(filterField, opt) {
+        const fv = this.sideBarProps()?.filters?.[filterField];
+        return fv?.type === 'multiSelect' ? fv.value.includes(opt) : false;
+    }
+    onMultiSelectChange(filterField, opt, checked) {
+        const fv = this.sideBarProps()?.filters?.[filterField];
+        const current = fv?.type === 'multiSelect' ? fv.value : [];
+        const next = checked ? [...current, opt] : current.filter((v) => v !== opt);
+        this.sideBarProps()?.onFilterChange(filterField, next.length > 0 ? { type: 'multiSelect', value: next } : undefined);
+    }
+};
+SideBarComponent = __decorate([
+    Component({
+        selector: 'ogrid-sidebar',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <div style="display:flex;flex-direction:row;flex-shrink:0" role="complementary" aria-label="Side bar">
+      @if (sideBarProps()?.position === 'left') {
+        <ng-container *ngTemplateOutlet="tabStripTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="panelContentTpl"></ng-container>
+      }
+      @if (sideBarProps()?.position === 'right') {
+        <ng-container *ngTemplateOutlet="panelContentTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="tabStripTpl"></ng-container>
+      }
+    </div>
+
+    <ng-template #tabStripTpl>
+      <div
+        [style.display]="'flex'"
+        [style.flex-direction]="'column'"
+        [style.width.px]="tabWidth"
+        [style.background]="'var(--ogrid-header-bg, #f5f5f5)'"
+        [style.border-left]="sideBarProps()?.position === 'right' ? '1px solid var(--ogrid-border, #e0e0e0)' : 'none'"
+        [style.border-right]="sideBarProps()?.position === 'left' ? '1px solid var(--ogrid-border, #e0e0e0)' : 'none'"
+        role="tablist"
+        aria-label="Side bar tabs"
+      >
+        @for (panel of sideBarProps()?.panels ?? []; track panel) {
+          <button
+            role="tab"
+            [attr.aria-selected]="sideBarProps()?.activePanel === panel"
+            [attr.aria-label]="panelLabels[panel]"
+            (click)="onTabClick(panel)"
+            [title]="panelLabels[panel]"
+            [style.width.px]="tabWidth"
+            [style.height.px]="tabWidth"
+            [style.border]="'none'"
+            [style.cursor]="'pointer'"
+            [style.color]="'var(--ogrid-fg, #242424)'"
+            [style.font-size.px]="14"
+            [style.display]="'flex'"
+            [style.align-items]="'center'"
+            [style.justify-content]="'center'"
+            [style.background]="sideBarProps()?.activePanel === panel ? 'var(--ogrid-bg, #fff)' : 'transparent'"
+            [style.font-weight]="sideBarProps()?.activePanel === panel ? 'bold' : 'normal'"
+          >
+            {{ panel === 'columns' ? '\u2261' : '\u2A65' }}
+          </button>
+        }
+      </div>
+    </ng-template>
+
+    <ng-template #panelContentTpl>
+      @if (sideBarProps()?.activePanel) {
+        <div
+          role="tabpanel"
+          [attr.aria-label]="panelLabels[sideBarProps()!.activePanel!]"
+          [style.width.px]="panelWidth"
+          [style.display]="'flex'"
+          [style.flex-direction]="'column'"
+          [style.overflow]="'hidden'"
+          [style.background]="'var(--ogrid-bg, #fff)'"
+          [style.color]="'var(--ogrid-fg, #242424)'"
+          [style.border-left]="sideBarProps()?.position === 'right' ? '1px solid var(--ogrid-border, #e0e0e0)' : 'none'"
+          [style.border-right]="sideBarProps()?.position === 'left' ? '1px solid var(--ogrid-border, #e0e0e0)' : 'none'"
+        >
+          <div style="display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--ogrid-border, #e0e0e0);font-weight:600">
+            <span>{{ panelLabels[sideBarProps()!.activePanel!] }}</span>
+            <button (click)="sideBarProps()?.onPanelChange(null)" style="border:none;background:transparent;cursor:pointer;font-size:16px;color:var(--ogrid-fg, #242424)" aria-label="Close panel">&times;</button>
+          </div>
+          <div style="flex:1;overflow-y:auto;padding:8px 12px">
+            @if (sideBarProps()?.activePanel === 'columns') {
+              <div style="display:flex;gap:8px;margin-bottom:8px">
+                <button (click)="onSelectAll()" [disabled]="allVisible()" style="flex:1;cursor:pointer;background:var(--ogrid-bg-subtle, #f3f2f1);color:var(--ogrid-fg, #242424);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;padding:4px 8px">Select All</button>
+                <button (click)="onClearAll()" style="flex:1;cursor:pointer;background:var(--ogrid-bg-subtle, #f3f2f1);color:var(--ogrid-fg, #242424);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;padding:4px 8px">Clear All</button>
+              </div>
+              @for (col of sideBarProps()?.columns ?? []; track col.columnId) {
+                <label style="display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer">
+                  <input type="checkbox" [checked]="sideBarProps()?.visibleColumns?.has(col.columnId)" (change)="onVisibilityChange(col.columnId, $any($event.target).checked)" [disabled]="col.required" />
+                  <span>{{ col.name }}</span>
+                </label>
+              }
+            }
+            @if (sideBarProps()?.activePanel === 'filters') {
+              @if ((sideBarProps()?.filterableColumns ?? []).length === 0) {
+                <div style="color:var(--ogrid-muted, #999);font-style:italic">No filterable columns</div>
+              }
+              @for (col of sideBarProps()?.filterableColumns ?? []; track col.columnId) {
+                <div style="margin-bottom:12px">
+                  <div style="font-weight:500;margin-bottom:4px;font-size:13px">{{ col.name }}</div>
+                  @if (col.filterType === 'text') {
+                    <input
+                      type="text"
+                      [value]="getTextFilterValue(col.filterField)"
+                      (input)="onTextFilterChange(col.filterField, $any($event.target).value)"
+                      [placeholder]="'Filter ' + col.name + '...'"
+                      [attr.aria-label]="'Filter ' + col.name"
+                      style="width:100%;box-sizing:border-box;padding:4px 6px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px"
+                    />
+                  }
+                  @if (col.filterType === 'date') {
+                    <div style="display:flex;flex-direction:column;gap:4px">
+                      <label style="display:flex;align-items:center;gap:4px;font-size:12px">
+                        From:
+                        <input type="date" [value]="getDateFrom(col.filterField)" (change)="onDateFromChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' from date'" style="flex:1;padding:2px 4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px" />
+                      </label>
+                      <label style="display:flex;align-items:center;gap:4px;font-size:12px">
+                        To:
+                        <input type="date" [value]="getDateTo(col.filterField)" (change)="onDateToChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' to date'" style="flex:1;padding:2px 4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px" />
+                      </label>
+                    </div>
+                  }
+                  @if (col.filterType === 'multiSelect') {
+                    <div style="max-height:120px;overflow-y:auto" role="group" [attr.aria-label]="col.name + ' options'">
+                      @for (opt of getFilterOptions(col.filterField); track opt) {
+                        <label style="display:flex;align-items:center;gap:4px;padding:1px 0;cursor:pointer;font-size:13px">
+                          <input type="checkbox" [checked]="isMultiSelectChecked(col.filterField, opt)" (change)="onMultiSelectChange(col.filterField, opt, $any($event.target).checked)" />
+                          <span>{{ opt }}</span>
+                        </label>
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            }
+          </div>
+        </div>
+      }
+    </ng-template>
+  `,
+    })
+], SideBarComponent);
+export { SideBarComponent };