@alaarab/ogrid-angular 2.0.8 → 2.0.11

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,20 +4,34 @@ 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 } 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',
@@ -44,21 +58,21 @@ OGridLayoutComponent = __decorate([
       padding: 6px 12px; background: var(--ogrid-header-bg, #f5f5f5);
     }
     .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-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, #e0e0e0);
       background: var(--ogrid-header-bg, #f5f5f5); 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,23 +84,23 @@ 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()) {
+        @if (sideBar) {
           <div class="ogrid-layout-grid-area">
-            @if (sideBar()?.position === 'left') {
-              <ogrid-sidebar [sideBarProps]="sideBar()"></ogrid-sidebar>
+            @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>
+            @if (sideBar?.position !== 'left') {
+              <ogrid-sidebar [sideBarProps]="sideBar"></ogrid-sidebar>
             }
           </div>
         } @else {
@@ -96,7 +110,7 @@ OGridLayoutComponent = __decorate([
         }
 
         <!-- Footer strip (pagination) -->
-        @if (hasPagination()) {
+        @if (hasPagination) {
           <div class="ogrid-layout-footer">
             <ng-content select="[pagination]"></ng-content>
           </div>

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

@@ -4,31 +4,31 @@ 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 } 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.sideBarProps = null;
         this.panelLabels = PANEL_LABELS;
         this.tabWidth = TAB_WIDTH;
         this.panelWidth = PANEL_WIDTH;
     }
     onTabClick(panel) {
-        const props = this.sideBarProps();
+        const props = this.sideBarProps;
         if (props)
             props.onPanelChange(props.activePanel === panel ? null : panel);
     }
     allVisible() {
-        const props = this.sideBarProps();
+        const props = this.sideBarProps;
         if (!props)
             return false;
         return props.columns.every((c) => props.visibleColumns.has(c.columnId));
     }
     onSelectAll() {
-        const props = this.sideBarProps();
+        const props = this.sideBarProps;
         if (!props)
             return;
         const next = new Set(props.visibleColumns);
@@ -36,7 +36,7 @@ let SideBarComponent = class SideBarComponent {
         props.onSetVisibleColumns(next);
     }
     onClearAll() {
-        const props = this.sideBarProps();
+        const props = this.sideBarProps;
         if (!props)
             return;
         const next = new Set();
@@ -47,52 +47,55 @@ let SideBarComponent = class SideBarComponent {
         props.onSetVisibleColumns(next);
     }
     onVisibilityChange(columnKey, visible) {
-        this.sideBarProps()?.onVisibilityChange(columnKey, visible);
+        this.sideBarProps?.onVisibilityChange(columnKey, visible);
     }
     getTextFilterValue(filterField) {
-        const filters = this.sideBarProps()?.filters;
+        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);
+        this.sideBarProps?.onFilterChange(filterField, value ? { type: 'text', value } : undefined);
     }
     getDateFrom(filterField) {
-        const fv = this.sideBarProps()?.filters?.[filterField];
+        const fv = this.sideBarProps?.filters?.[filterField];
         return fv?.type === 'date' ? (fv.value.from ?? '') : '';
     }
     getDateTo(filterField) {
-        const fv = this.sideBarProps()?.filters?.[filterField];
+        const fv = this.sideBarProps?.filters?.[filterField];
         return fv?.type === 'date' ? (fv.value.to ?? '') : '';
     }
     onDateFromChange(filterField, value) {
-        const fv = this.sideBarProps()?.filters?.[filterField];
+        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);
+        this.sideBarProps?.onFilterChange(filterField, from || to ? { type: 'date', value: { from, to } } : undefined);
     }
     onDateToChange(filterField, value) {
-        const fv = this.sideBarProps()?.filters?.[filterField];
+        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);
+        this.sideBarProps?.onFilterChange(filterField, from || to ? { type: 'date', value: { from, to } } : undefined);
     }
     getFilterOptions(filterField) {
-        return this.sideBarProps()?.filterOptions?.[filterField] ?? [];
+        return this.sideBarProps?.filterOptions?.[filterField] ?? [];
     }
     isMultiSelectChecked(filterField, opt) {
-        const fv = this.sideBarProps()?.filters?.[filterField];
+        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 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);
+        this.sideBarProps?.onFilterChange(filterField, next.length > 0 ? { type: 'multiSelect', value: next } : undefined);
     }
 };
+__decorate([
+    Input()
+], SideBarComponent.prototype, "sideBarProps", void 0);
 SideBarComponent = __decorate([
     Component({
         selector: 'ogrid-sidebar',
@@ -162,11 +165,11 @@ SideBarComponent = __decorate([
   `],
         template: `
     <div class="ogrid-sidebar-root" role="complementary" aria-label="Side bar">
-      @if (sideBarProps()?.position === 'left') {
+      @if (sideBarProps?.position === 'left') {
         <ng-container *ngTemplateOutlet="tabStripTpl"></ng-container>
         <ng-container *ngTemplateOutlet="panelContentTpl"></ng-container>
       }
-      @if (sideBarProps()?.position === 'right') {
+      @if (sideBarProps?.position === 'right') {
         <ng-container *ngTemplateOutlet="panelContentTpl"></ng-container>
         <ng-container *ngTemplateOutlet="tabStripTpl"></ng-container>
       }
@@ -175,17 +178,17 @@ SideBarComponent = __decorate([
     <ng-template #tabStripTpl>
       <div
         class="ogrid-sidebar-tab-strip"
-        [class.ogrid-sidebar-tab-strip--left]="sideBarProps()?.position === 'left'"
-        [class.ogrid-sidebar-tab-strip--right]="sideBarProps()?.position === 'right'"
+        [class.ogrid-sidebar-tab-strip--left]="sideBarProps?.position === 'left'"
+        [class.ogrid-sidebar-tab-strip--right]="sideBarProps?.position === 'right'"
         role="tablist"
         aria-label="Side bar tabs"
       >
-        @for (panel of sideBarProps()?.panels ?? []; track panel) {
+        @for (panel of sideBarProps?.panels ?? []; track panel) {
           <button
             role="tab"
             class="ogrid-sidebar-tab"
-            [class.ogrid-sidebar-tab--active]="sideBarProps()?.activePanel === panel"
-            [attr.aria-selected]="sideBarProps()?.activePanel === panel"
+            [class.ogrid-sidebar-tab--active]="sideBarProps?.activePanel === panel"
+            [attr.aria-selected]="sideBarProps?.activePanel === panel"
             [attr.aria-label]="panelLabels[panel]"
             (click)="onTabClick(panel)"
             [title]="panelLabels[panel]"
@@ -197,36 +200,36 @@ SideBarComponent = __decorate([
     </ng-template>
 
     <ng-template #panelContentTpl>
-      @if (sideBarProps()?.activePanel) {
+      @if (sideBarProps?.activePanel) {
         <div
           role="tabpanel"
           class="ogrid-sidebar-panel"
-          [class.ogrid-sidebar-panel--left]="sideBarProps()?.position === 'left'"
-          [class.ogrid-sidebar-panel--right]="sideBarProps()?.position === 'right'"
-          [attr.aria-label]="panelLabels[sideBarProps()!.activePanel!]"
+          [class.ogrid-sidebar-panel--left]="sideBarProps?.position === 'left'"
+          [class.ogrid-sidebar-panel--right]="sideBarProps?.position === 'right'"
+          [attr.aria-label]="panelLabels[sideBarProps!.activePanel!]"
         >
           <div class="ogrid-sidebar-panel-header">
-            <span>{{ panelLabels[sideBarProps()!.activePanel!] }}</span>
-            <button (click)="sideBarProps()?.onPanelChange(null)" class="ogrid-sidebar-panel-close" aria-label="Close panel">&times;</button>
+            <span>{{ panelLabels[sideBarProps!.activePanel!] }}</span>
+            <button (click)="sideBarProps?.onPanelChange(null)" class="ogrid-sidebar-panel-close" aria-label="Close panel">&times;</button>
           </div>
           <div class="ogrid-sidebar-panel-body">
-            @if (sideBarProps()?.activePanel === 'columns') {
+            @if (sideBarProps?.activePanel === 'columns') {
               <div class="ogrid-sidebar-actions">
                 <button (click)="onSelectAll()" [disabled]="allVisible()" class="ogrid-sidebar-action-btn">Select All</button>
                 <button (click)="onClearAll()" class="ogrid-sidebar-action-btn">Clear All</button>
               </div>
-              @for (col of sideBarProps()?.columns ?? []; track col.columnId) {
+              @for (col of sideBarProps?.columns ?? []; track col.columnId) {
                 <label class="ogrid-sidebar-col-label">
-                  <input type="checkbox" [checked]="sideBarProps()?.visibleColumns?.has(col.columnId)" (change)="onVisibilityChange(col.columnId, $any($event.target).checked)" [disabled]="col.required" />
+                  <input type="checkbox" [checked]="sideBarProps?.visibleColumns?.has(col.columnId)" (change)="onVisibilityChange(col.columnId, ($event.target as HTMLInputElement).checked)" [disabled]="col.required" />
                   <span>{{ col.name }}</span>
                 </label>
               }
             }
-            @if (sideBarProps()?.activePanel === 'filters') {
-              @if ((sideBarProps()?.filterableColumns ?? []).length === 0) {
+            @if (sideBarProps?.activePanel === 'filters') {
+              @if ((sideBarProps?.filterableColumns ?? []).length === 0) {
                 <div class="ogrid-sidebar-empty">No filterable columns</div>
               }
-              @for (col of sideBarProps()?.filterableColumns ?? []; track col.columnId) {
+              @for (col of sideBarProps?.filterableColumns ?? []; track col.columnId) {
                 <div class="ogrid-sidebar-filter-group">
                   <div class="ogrid-sidebar-filter-label">{{ col.name }}</div>
                   @if (col.filterType === 'text') {
@@ -234,7 +237,7 @@ SideBarComponent = __decorate([
                       type="text"
                       class="ogrid-sidebar-text-input"
                       [value]="getTextFilterValue(col.filterField)"
-                      (input)="onTextFilterChange(col.filterField, $any($event.target).value)"
+                      (input)="onTextFilterChange(col.filterField, ($event.target as HTMLInputElement).value)"
                       [placeholder]="'Filter ' + col.name + '...'"
                       [attr.aria-label]="'Filter ' + col.name"
                     />
@@ -243,11 +246,11 @@ SideBarComponent = __decorate([
                     <div class="ogrid-sidebar-date-row">
                       <label class="ogrid-sidebar-date-label">
                         From:
-                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateFrom(col.filterField)" (change)="onDateFromChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' from date'" />
+                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateFrom(col.filterField)" (change)="onDateFromChange(col.filterField, ($event.target as HTMLInputElement).value)" [attr.aria-label]="col.name + ' from date'" />
                       </label>
                       <label class="ogrid-sidebar-date-label">
                         To:
-                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateTo(col.filterField)" (change)="onDateToChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' to date'" />
+                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateTo(col.filterField)" (change)="onDateToChange(col.filterField, ($event.target as HTMLInputElement).value)" [attr.aria-label]="col.name + ' to date'" />
                       </label>
                     </div>
                   }
@@ -255,7 +258,7 @@ SideBarComponent = __decorate([
                     <div class="ogrid-sidebar-multiselect-list" role="group" [attr.aria-label]="col.name + ' options'">
                       @for (opt of getFilterOptions(col.filterField); track opt) {
                         <label class="ogrid-sidebar-multiselect-item">
-                          <input type="checkbox" [checked]="isMultiSelectChecked(col.filterField, opt)" (change)="onMultiSelectChange(col.filterField, opt, $any($event.target).checked)" />
+                          <input type="checkbox" [checked]="isMultiSelectChecked(col.filterField, opt)" (change)="onMultiSelectChange(col.filterField, opt, ($event.target as HTMLInputElement).checked)" />
                           <span>{{ opt }}</span>
                         </label>
                       }