@weeehaoooz/talos-ui 0.1.0 → 0.1.1

package/fesm2022/weeehaoooz-talos-ui-data-display-data-grid.mjs

@@ -0,0 +1,1627 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component, output, signal, Pipe, effect, NgModule } from '@angular/core';
+import { TalosStatusTagComponent } from '@weeehaoooz/talos-ui/data-display/status-tag';
+import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import { TalosButtonDirective } from '@weeehaoooz/talos-ui/button/button';
+import { TalosTooltipDirective } from '@weeehaoooz/talos-ui/feedback/tooltip';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { LucideSearch, LucideCheck, LucideChevronDown, LucideX, LucideArrowUp, LucideArrowDown, LucideArrowUpDown, LucideChevronLeft, LucideChevronRight, LucideChevronsLeft, LucideChevronsRight, LucideInbox, LucideLoader2, LucideFilter } from '@lucide/angular';
+import { DatePickerComponent } from '@weeehaoooz/talos-ui/form/date-picker';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayModule, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+
+class TalosGridStatusCellComponent {
+    row = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    column = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    rawValue = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rawValue" }] : /* istanbul ignore next */ []));
+    value = computed(() => {
+        const directVal = this.rawValue();
+        if (directVal !== undefined) {
+            return directVal;
+        }
+        const r = this.row();
+        const col = this.column();
+        if (!r || !col?.field)
+            return '';
+        return r[col.field];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    status = computed(() => {
+        const val = this.value();
+        const r = this.row();
+        const config = this.column().statusConfig;
+        if (config?.statusMap) {
+            return config.statusMap(val, r);
+        }
+        return (val ?? 'PENDING');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    label = computed(() => {
+        const val = this.value();
+        const r = this.row();
+        const col = this.column();
+        if (col.formatter) {
+            return col.formatter(val, r);
+        }
+        return String(val ?? '');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    variant = computed(() => {
+        return this.column().statusConfig?.variant ?? 'subtle';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = computed(() => {
+        return this.column().statusConfig?.size ?? 'sm';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    shape = computed(() => {
+        return this.column().statusConfig?.shape ?? 'rounded';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    showIcon = computed(() => {
+        return this.column().statusConfig?.showIcon ?? true;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridStatusCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosGridStatusCellComponent, isStandalone: true, selector: "talos-grid-status-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rawValue: { classPropertyName: "rawValue", publicName: "rawValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "talos-grid-status-cell" }, ngImport: i0, template: `
+    <talos-status-tag
+      [status]="status()"
+      [variant]="variant()"
+      [size]="size()"
+      [shape]="shape()"
+      [showIcon]="showIcon()"
+    >
+      {{ label() }}
+    </talos-status-tag>
+  `, isInline: true, dependencies: [{ kind: "component", type: TalosStatusTagComponent, selector: "talos-status-tag, [talosStatusTag]", inputs: ["status", "label", "variant", "size", "shape", "showIcon", "icon", "iconOnly", "pulse", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridStatusCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'talos-grid-status-cell',
+                    imports: [TalosStatusTagComponent],
+                    template: `
+    <talos-status-tag
+      [status]="status()"
+      [variant]="variant()"
+      [size]="size()"
+      [shape]="shape()"
+      [showIcon]="showIcon()"
+    >
+      {{ label() }}
+    </talos-status-tag>
+  `,
+                    host: {
+                        class: 'talos-grid-status-cell',
+                    },
+                }]
+        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], rawValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rawValue", required: false }] }] } });
+
+class TalosGridActionsCellComponent {
+    row = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    rowIndex = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    actionClick = output();
+    visibleActions() {
+        const r = this.row();
+        return (this.actions() || []).filter((a) => {
+            if (typeof a.hidden === 'function') {
+                return !a.hidden(r);
+            }
+            return !a.hidden;
+        });
+    }
+    isActionDisabled(action) {
+        if (typeof action.disabled === 'function') {
+            return action.disabled(this.row());
+        }
+        return !!action.disabled;
+    }
+    getActionTooltip(action) {
+        if (typeof action.tooltip === 'function') {
+            return action.tooltip(this.row());
+        }
+        return action.tooltip || '';
+    }
+    onActionClick(action, event) {
+        event.stopPropagation();
+        if (this.isActionDisabled(action))
+            return;
+        if (action.onClick) {
+            action.onClick(this.row(), this.rowIndex(), event);
+        }
+        this.actionClick.emit({
+            actionId: action.id,
+            row: this.row(),
+            index: this.rowIndex(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridActionsCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosGridActionsCellComponent, isStandalone: true, selector: "talos-grid-actions-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, host: { classAttribute: "talos-grid-actions-cell" }, ngImport: i0, template: `
+    <div class="talos-grid-actions-wrapper">
+      @for (action of visibleActions(); track action.id) {
+        <button
+          talosButton
+          type="button"
+          [variant]="action.variant ?? 'ghost'"
+          [size]="action.size ?? 'xs'"
+          [iconOnly]="action.iconOnly ?? !action.label"
+          [disabled]="isActionDisabled(action)"
+          [talosTooltip]="getActionTooltip(action)"
+          [tooltipDisabled]="!getActionTooltip(action)"
+          (click)="onActionClick(action, $event)"
+        >
+          @if (action.icon) {
+            <ng-container *ngComponentOutlet="action.icon" />
+          }
+          @if (action.label && !action.iconOnly) {
+            <span class="action-label">{{ action.label }}</span>
+          }
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".talos-grid-actions-wrapper{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap}.action-label{margin-left:2px;font-size:11.5px;font-weight:500}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: TalosButtonDirective, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: ["variant", "size", "iconOnly", "fullWidth", "pill", "loading", "disabled", "animation", "spinning", "popping", "feedback"] }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridActionsCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-grid-actions-cell', imports: [NgComponentOutlet, TalosButtonDirective, TalosTooltipDirective], template: `
+    <div class="talos-grid-actions-wrapper">
+      @for (action of visibleActions(); track action.id) {
+        <button
+          talosButton
+          type="button"
+          [variant]="action.variant ?? 'ghost'"
+          [size]="action.size ?? 'xs'"
+          [iconOnly]="action.iconOnly ?? !action.label"
+          [disabled]="isActionDisabled(action)"
+          [talosTooltip]="getActionTooltip(action)"
+          [tooltipDisabled]="!getActionTooltip(action)"
+          (click)="onActionClick(action, $event)"
+        >
+          @if (action.icon) {
+            <ng-container *ngComponentOutlet="action.icon" />
+          }
+          @if (action.label && !action.iconOnly) {
+            <span class="action-label">{{ action.label }}</span>
+          }
+        </button>
+      }
+    </div>
+  `, host: {
+                        class: 'talos-grid-actions-cell',
+                    }, styles: [".talos-grid-actions-wrapper{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap}.action-label{margin-left:2px;font-size:11.5px;font-weight:500}\n"] }]
+        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
+
+class TalosGridFilterDialogComponent {
+    column = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    distinctValues = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "distinctValues" }] : /* istanbul ignore next */ []));
+    currentFilter = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentFilter" }] : /* istanbul ignore next */ []));
+    align = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    filterApplied = output();
+    filterCleared = output();
+    closed = output();
+    // Template icons
+    searchIcon = LucideSearch;
+    checkIcon = LucideCheck;
+    chevronDownIcon = LucideChevronDown;
+    xIcon = LucideX;
+    // Filter mode derived from column:
+    // Mode A: text, select, status
+    // Mode B: number, date
+    filterMode = computed(() => {
+        const col = this.column();
+        if (col.filterMode)
+            return col.filterMode;
+        if (col.type === 'number' ||
+            col.sortType === 'number' ||
+            col.type === 'date' ||
+            col.sortType === 'date') {
+            return 'condition';
+        }
+        return 'set';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []));
+    // Mode A local state
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    selectedSet = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedSet" }] : /* istanbul ignore next */ []));
+    // Mode B local state
+    selectedOperator = signal('eq', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOperator" }] : /* istanbul ignore next */ []));
+    filterVal = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterVal" }] : /* istanbul ignore next */ []));
+    filterVal2 = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterVal2" }] : /* istanbul ignore next */ []));
+    operatorOptions = computed(() => {
+        if (this.isDateField()) {
+            return [
+                { value: 'eq', label: 'Is on' },
+                { value: 'neq', label: 'Is not on' },
+                { value: 'gt', label: 'After' },
+                { value: 'gte', label: 'On or after' },
+                { value: 'lt', label: 'Before' },
+                { value: 'lte', label: 'On or before' },
+                { value: 'between', label: 'Between' },
+                { value: 'blank', label: 'Blank' },
+                { value: 'notBlank', label: 'Not blank' },
+            ];
+        }
+        if (this.isNumberField()) {
+            return [
+                { value: 'eq', label: 'Equals' },
+                { value: 'neq', label: 'Does not equal' },
+                { value: 'gt', label: 'Greater than' },
+                { value: 'gte', label: 'Greater than or equal to' },
+                { value: 'lt', label: 'Less than' },
+                { value: 'lte', label: 'Less than or equal to' },
+                { value: 'between', label: 'Between' },
+                { value: 'blank', label: 'Blank' },
+                { value: 'notBlank', label: 'Not blank' },
+            ];
+        }
+        return [
+            { value: 'contains', label: 'Contains' },
+            { value: 'eq', label: 'Equals' },
+            { value: 'neq', label: 'Does not equal' },
+            { value: 'startsWith', label: 'Starts with' },
+            { value: 'endsWith', label: 'Ends with' },
+            { value: 'blank', label: 'Blank' },
+            { value: 'notBlank', label: 'Not blank' },
+        ];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operatorOptions" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.initFromCurrentFilter();
+    }
+    initFromCurrentFilter() {
+        const cf = this.currentFilter();
+        const all = this.distinctValues();
+        if (this.filterMode() === 'set') {
+            if (cf && cf.mode === 'set' && cf.selectedValues) {
+                this.selectedSet.set(new Set(cf.selectedValues));
+            }
+            else {
+                // Default: all selected
+                this.selectedSet.set(new Set(all));
+            }
+        }
+        else {
+            if (cf && cf.mode === 'condition') {
+                this.selectedOperator.set(cf.operator || 'eq');
+                this.filterVal.set(cf.value !== undefined && cf.value !== null ? String(cf.value) : '');
+                this.filterVal2.set(cf.secondValue !== undefined && cf.secondValue !== null ? String(cf.secondValue) : '');
+            }
+            else {
+                const defaultOp = this.isDateField() || this.isNumberField() ? 'eq' : 'contains';
+                this.selectedOperator.set(defaultOp);
+                this.filterVal.set('');
+                this.filterVal2.set('');
+            }
+        }
+    }
+    isDateField() {
+        const col = this.column();
+        return col.type === 'date' || col.sortType === 'date';
+    }
+    isNumberField() {
+        const col = this.column();
+        return col.type === 'number' || col.sortType === 'number';
+    }
+    onDateFilterValChange(val) {
+        if (!val) {
+            this.filterVal.set('');
+        }
+        else if (val instanceof Date) {
+            const y = val.getFullYear();
+            const m = String(val.getMonth() + 1).padStart(2, '0');
+            const d = String(val.getDate()).padStart(2, '0');
+            this.filterVal.set(`${y}-${m}-${d}`);
+        }
+        else {
+            this.filterVal.set(String(val));
+        }
+    }
+    onDateFilterVal2Change(val) {
+        if (!val) {
+            this.filterVal2.set('');
+        }
+        else if (val instanceof Date) {
+            const y = val.getFullYear();
+            const m = String(val.getMonth() + 1).padStart(2, '0');
+            const d = String(val.getDate()).padStart(2, '0');
+            this.filterVal2.set(`${y}-${m}-${d}`);
+        }
+        else {
+            this.filterVal2.set(String(val));
+        }
+    }
+    // Mode A Helpers
+    visibleDistinctValues = computed(() => {
+        const term = this.searchTerm().toLowerCase().trim();
+        const all = this.distinctValues();
+        if (!term)
+            return all;
+        return all.filter((v) => (v || '').toLowerCase().includes(term));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleDistinctValues" }] : /* istanbul ignore next */ []));
+    isAllSelected() {
+        const visible = this.visibleDistinctValues();
+        if (visible.length === 0)
+            return false;
+        const sel = this.selectedSet();
+        return visible.every((v) => sel.has(v));
+    }
+    isIndeterminate() {
+        const visible = this.visibleDistinctValues();
+        if (visible.length === 0)
+            return false;
+        const sel = this.selectedSet();
+        const count = visible.filter((v) => sel.has(v)).length;
+        return count > 0 && count < visible.length;
+    }
+    toggleSelectAll(event) {
+        const checked = event.target.checked;
+        const sel = new Set(this.selectedSet());
+        const visible = this.visibleDistinctValues();
+        if (checked) {
+            visible.forEach((v) => sel.add(v));
+        }
+        else {
+            visible.forEach((v) => sel.delete(v));
+        }
+        this.selectedSet.set(sel);
+    }
+    isValSelected(val) {
+        return this.selectedSet().has(val);
+    }
+    toggleVal(val, event) {
+        const checked = event.target.checked;
+        const sel = new Set(this.selectedSet());
+        if (checked) {
+            sel.add(val);
+        }
+        else {
+            sel.delete(val);
+        }
+        this.selectedSet.set(sel);
+    }
+    onSearchEnter() {
+        const term = this.searchTerm().trim();
+        if (term) {
+            const visible = this.visibleDistinctValues();
+            this.selectedSet.set(new Set(visible));
+        }
+        this.applySetFilter();
+    }
+    // Apply Actions
+    applyFilter() {
+        if (this.filterMode() === 'set') {
+            this.applySetFilter();
+        }
+        else {
+            this.applyConditionFilter();
+        }
+    }
+    applySetFilter() {
+        const field = this.column().field;
+        const all = this.distinctValues();
+        let sel = Array.from(this.selectedSet());
+        // If search term is present and user hadn't changed individual checkboxes (still all selected),
+        // narrow selection to the visible search matches
+        const term = this.searchTerm().trim();
+        if (term && sel.length === all.length) {
+            sel = this.visibleDistinctValues();
+            this.selectedSet.set(new Set(sel));
+        }
+        // If all distinct values are selected and no search term, it's effectively no filter
+        if (sel.length === all.length && all.every((v) => this.selectedSet().has(v))) {
+            this.clearFilter();
+            return;
+        }
+        this.filterApplied.emit({
+            field,
+            mode: 'set',
+            selectedValues: sel,
+        });
+        this.closed.emit();
+    }
+    applyConditionFilter() {
+        const field = this.column().field;
+        const op = this.selectedOperator();
+        const val = this.filterVal().trim();
+        const val2 = this.filterVal2().trim();
+        if (op !== 'blank' && op !== 'notBlank' && val === '') {
+            this.clearFilter();
+            return;
+        }
+        this.filterApplied.emit({
+            field,
+            mode: 'condition',
+            operator: op,
+            value: val,
+            secondValue: op === 'between' ? val2 : undefined,
+        });
+        this.closed.emit();
+    }
+    clearFilter() {
+        this.filterCleared.emit();
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridFilterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosGridFilterDialogComponent, isStandalone: true, selector: "talos-grid-filter-dialog", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, distinctValues: { classPropertyName: "distinctValues", publicName: "distinctValues", isSignal: true, isRequired: false, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterApplied: "filterApplied", filterCleared: "filterCleared", closed: "closed" }, host: { listeners: { "keydown.escape": "closed.emit()" }, properties: { "class.align-right": "align() === 'right'" } }, ngImport: i0, template: `
+    <div class="filter-dialog-container" (click)="$event.stopPropagation()">
+      @if (filterMode() === 'set') {
+        <!-- MODE A: Searchable Checkbox List (for text / select / status) -->
+        <div class="mode-a-wrapper">
+          <!-- Search input -->
+          <div class="search-input-wrapper">
+            <span class="search-icon">
+              <ng-container *ngComponentOutlet="searchIcon" />
+            </span>
+            <input
+              type="text"
+              class="filter-search-input"
+              placeholder="Search..."
+              [ngModel]="searchTerm()"
+              (ngModelChange)="searchTerm.set($event)"
+              (keydown.enter)="onSearchEnter()"
+              autofocus
+            />
+            @if (searchTerm()) {
+              <button type="button" class="clear-search-btn" (click)="searchTerm.set('')">
+                <ng-container *ngComponentOutlet="xIcon" />
+              </button>
+            }
+          </div>
+
+          <!-- Checkbox List -->
+          <div class="checkbox-list-wrapper">
+            <!-- (Select All) item -->
+            <label class="checkbox-item select-all-item">
+              <input
+                type="checkbox"
+                class="filter-checkbox"
+                [checked]="isAllSelected()"
+                [indeterminate]="isIndeterminate()"
+                (change)="toggleSelectAll($event)"
+              />
+              <span
+                class="checkbox-custom"
+                [class.is-checked]="isAllSelected()"
+                [class.is-indeterminate]="isIndeterminate()"
+              >
+                @if (isAllSelected()) {
+                  <ng-container *ngComponentOutlet="checkIcon" />
+                } @else if (isIndeterminate()) {
+                  <span class="indeterminate-bar"></span>
+                }
+              </span>
+              <span class="checkbox-label">
+                {{ searchTerm() ? '(Select All Matches)' : '(Select All)' }}
+              </span>
+            </label>
+
+            <!-- Distinct item checkboxes -->
+            @for (val of visibleDistinctValues(); track val) {
+              <label class="checkbox-item">
+                <input
+                  type="checkbox"
+                  class="filter-checkbox"
+                  [checked]="isValSelected(val)"
+                  (change)="toggleVal(val, $event)"
+                />
+                <span class="checkbox-custom" [class.is-checked]="isValSelected(val)">
+                  @if (isValSelected(val)) {
+                    <ng-container *ngComponentOutlet="checkIcon" />
+                  }
+                </span>
+                <span class="checkbox-label">{{ val || '(Blank)' }}</span>
+              </label>
+            }
+
+            @if (visibleDistinctValues().length === 0) {
+              <div class="no-matches-msg">No matching values</div>
+            }
+          </div>
+        </div>
+      } @else {
+        <!-- MODE B: Operator Dropdown & Filter Input (for numbers / dates) -->
+        <div class="mode-b-wrapper">
+          <!-- Operator Dropdown -->
+          <div class="operator-dropdown-wrapper">
+            <select
+              class="operator-select"
+              [ngModel]="selectedOperator()"
+              (ngModelChange)="selectedOperator.set($event)"
+            >
+              @for (op of operatorOptions(); track op.value) {
+                <option [value]="op.value">{{ op.label }}</option>
+              }
+            </select>
+            <span class="dropdown-arrow">
+              <ng-container *ngComponentOutlet="chevronDownIcon" />
+            </span>
+          </div>
+
+          <!-- Filter Value Input -->
+          @if (selectedOperator() !== 'blank' && selectedOperator() !== 'notBlank') {
+            @if (isDateField()) {
+              <div class="date-picker-wrapper" (keydown.enter)="applyConditionFilter()">
+                <talos-date-picker
+                  [ngModel]="filterVal()"
+                  (ngModelChange)="onDateFilterValChange($event)"
+                  size="sm"
+                  placeholder="Select date"
+                />
+              </div>
+            } @else {
+              <div class="search-input-wrapper">
+                <span class="search-icon">
+                  <ng-container *ngComponentOutlet="searchIcon" />
+                </span>
+                <input
+                  type="text"
+                  class="filter-search-input"
+                  placeholder="Filter..."
+                  [ngModel]="filterVal()"
+                  (ngModelChange)="filterVal.set($event)"
+                  (keydown.enter)="applyConditionFilter()"
+                  autofocus
+                />
+              </div>
+            }
+
+            <!-- Second input for Between -->
+            @if (selectedOperator() === 'between') {
+              @if (isDateField()) {
+                <div class="date-picker-wrapper" style="margin-top: 6px;" (keydown.enter)="applyConditionFilter()">
+                  <talos-date-picker
+                    [ngModel]="filterVal2()"
+                    (ngModelChange)="onDateFilterVal2Change($event)"
+                    size="sm"
+                    placeholder="And max date"
+                  />
+                </div>
+              } @else {
+                <div class="search-input-wrapper" style="margin-top: 6px;">
+                  <span class="search-icon">
+                    <ng-container *ngComponentOutlet="searchIcon" />
+                  </span>
+                  <input
+                    type="text"
+                    class="filter-search-input"
+                    placeholder="And max value..."
+                    [ngModel]="filterVal2()"
+                    (ngModelChange)="filterVal2.set($event)"
+                    (keydown.enter)="applyConditionFilter()"
+                  />
+                </div>
+              }
+            }
+          }
+        </div>
+      }
+
+      <!-- Dialog Footer -->
+      <div class="dialog-footer">
+        <button talosButton variant="ghost" size="sm" type="button" (click)="clearFilter()">
+          Clear
+        </button>
+        <button talosButton variant="primary" size="sm" type="button" (click)="applyFilter()">
+          Apply
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--talos-font-sans, system-ui, sans-serif);font-size:13px}.filter-dialog-container{background:var(--talos-dropdown-bg, var(--talos-bg-surface, #ffffff));color:var(--talos-text-primary, #0f172a);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-md, 8px);box-shadow:0 12px 28px -4px #00000040,0 4px 10px #0000001a;width:240px;padding:10px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.date-picker-wrapper{width:100%}.date-picker-wrapper talos-date-picker{display:block;width:100%}.search-input-wrapper{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:9px;width:14px;height:14px;opacity:.6;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--talos-text-muted, #94a3b8)}.search-icon ::ng-deep svg,.search-icon svg{width:13px;height:13px;display:block}.filter-search-input{width:100%;height:32px;padding:0 24px 0 28px;background:var(--talos-bg-subtle, #f8fafc);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 6px);color:var(--talos-text-primary, #0f172a);font-size:13px;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.filter-search-input::placeholder{color:var(--talos-text-muted, #94a3b8)}.filter-search-input:focus{border-color:var(--talos-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40}.clear-search-btn{position:absolute;right:6px;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.clear-search-btn ::ng-deep svg,.clear-search-btn svg{width:12px;height:12px;display:block}.clear-search-btn:hover{color:var(--talos-text-primary, #0f172a)}.checkbox-list-wrapper{margin-top:8px;max-height:175px;overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.checkbox-list-wrapper::-webkit-scrollbar{width:5px}.checkbox-list-wrapper::-webkit-scrollbar-thumb{background:var(--talos-border-default, #cbd5e1);border-radius:4px}.checkbox-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:4px;cursor:pointer;color:var(--talos-text-primary, #0f172a);transition:background-color .12s}.checkbox-item:hover{background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .05))}.checkbox-item.select-all-item{font-weight:500;border-bottom:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .08));margin-bottom:3px;padding-bottom:6px}.filter-checkbox{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-custom{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--talos-border-hover, #94a3b8);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s}.checkbox-custom ::ng-deep svg,.checkbox-custom svg{width:12px;height:12px;display:block}.checkbox-custom.is-checked,.checkbox-custom.is-indeterminate{background:var(--talos-primary, #2563eb);border-color:var(--talos-primary, #2563eb);color:#fff}.checkbox-custom .indeterminate-bar{width:8px;height:2px;background:#fff;border-radius:1px}.checkbox-label{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.no-matches-msg{padding:12px;text-align:center;color:var(--talos-text-muted, #94a3b8);font-size:12px}.operator-dropdown-wrapper{position:relative;margin-bottom:8px}.operator-select{width:100%;height:32px;padding:0 24px 0 10px;background:var(--talos-bg-subtle, #f8fafc);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 6px);color:var(--talos-text-primary, #0f172a);font-size:13px;outline:none;cursor:pointer;appearance:none;box-sizing:border-box}.operator-select:focus{border-color:var(--talos-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40}.dropdown-arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.6;width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #94a3b8)}.dropdown-arrow ::ng-deep svg,.dropdown-arrow svg{width:13px;height:13px;display:block}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .08))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: TalosButtonDirective, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: ["variant", "size", "iconOnly", "fullWidth", "pill", "loading", "disabled", "animation", "spinning", "popping", "feedback"] }, { kind: "component", type: DatePickerComponent, selector: "talos-date-picker", inputs: ["placeholder", "label", "floatingLabel", "floating", "required", "disabled", "clearable", "size", "displayFormat", "valueFormat", "showTime", "use24Hour", "showSeconds", "minuteStep", "minDate", "maxDate", "firstDayOfWeek", "filterDate"], outputs: ["dateChange", "opened", "closed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridFilterDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-grid-filter-dialog', imports: [FormsModule, NgComponentOutlet, TalosButtonDirective, DatePickerComponent], host: {
+                        '[class.align-right]': "align() === 'right'",
+                        '(keydown.escape)': 'closed.emit()',
+                    }, template: `
+    <div class="filter-dialog-container" (click)="$event.stopPropagation()">
+      @if (filterMode() === 'set') {
+        <!-- MODE A: Searchable Checkbox List (for text / select / status) -->
+        <div class="mode-a-wrapper">
+          <!-- Search input -->
+          <div class="search-input-wrapper">
+            <span class="search-icon">
+              <ng-container *ngComponentOutlet="searchIcon" />
+            </span>
+            <input
+              type="text"
+              class="filter-search-input"
+              placeholder="Search..."
+              [ngModel]="searchTerm()"
+              (ngModelChange)="searchTerm.set($event)"
+              (keydown.enter)="onSearchEnter()"
+              autofocus
+            />
+            @if (searchTerm()) {
+              <button type="button" class="clear-search-btn" (click)="searchTerm.set('')">
+                <ng-container *ngComponentOutlet="xIcon" />
+              </button>
+            }
+          </div>
+
+          <!-- Checkbox List -->
+          <div class="checkbox-list-wrapper">
+            <!-- (Select All) item -->
+            <label class="checkbox-item select-all-item">
+              <input
+                type="checkbox"
+                class="filter-checkbox"
+                [checked]="isAllSelected()"
+                [indeterminate]="isIndeterminate()"
+                (change)="toggleSelectAll($event)"
+              />
+              <span
+                class="checkbox-custom"
+                [class.is-checked]="isAllSelected()"
+                [class.is-indeterminate]="isIndeterminate()"
+              >
+                @if (isAllSelected()) {
+                  <ng-container *ngComponentOutlet="checkIcon" />
+                } @else if (isIndeterminate()) {
+                  <span class="indeterminate-bar"></span>
+                }
+              </span>
+              <span class="checkbox-label">
+                {{ searchTerm() ? '(Select All Matches)' : '(Select All)' }}
+              </span>
+            </label>
+
+            <!-- Distinct item checkboxes -->
+            @for (val of visibleDistinctValues(); track val) {
+              <label class="checkbox-item">
+                <input
+                  type="checkbox"
+                  class="filter-checkbox"
+                  [checked]="isValSelected(val)"
+                  (change)="toggleVal(val, $event)"
+                />
+                <span class="checkbox-custom" [class.is-checked]="isValSelected(val)">
+                  @if (isValSelected(val)) {
+                    <ng-container *ngComponentOutlet="checkIcon" />
+                  }
+                </span>
+                <span class="checkbox-label">{{ val || '(Blank)' }}</span>
+              </label>
+            }
+
+            @if (visibleDistinctValues().length === 0) {
+              <div class="no-matches-msg">No matching values</div>
+            }
+          </div>
+        </div>
+      } @else {
+        <!-- MODE B: Operator Dropdown & Filter Input (for numbers / dates) -->
+        <div class="mode-b-wrapper">
+          <!-- Operator Dropdown -->
+          <div class="operator-dropdown-wrapper">
+            <select
+              class="operator-select"
+              [ngModel]="selectedOperator()"
+              (ngModelChange)="selectedOperator.set($event)"
+            >
+              @for (op of operatorOptions(); track op.value) {
+                <option [value]="op.value">{{ op.label }}</option>
+              }
+            </select>
+            <span class="dropdown-arrow">
+              <ng-container *ngComponentOutlet="chevronDownIcon" />
+            </span>
+          </div>
+
+          <!-- Filter Value Input -->
+          @if (selectedOperator() !== 'blank' && selectedOperator() !== 'notBlank') {
+            @if (isDateField()) {
+              <div class="date-picker-wrapper" (keydown.enter)="applyConditionFilter()">
+                <talos-date-picker
+                  [ngModel]="filterVal()"
+                  (ngModelChange)="onDateFilterValChange($event)"
+                  size="sm"
+                  placeholder="Select date"
+                />
+              </div>
+            } @else {
+              <div class="search-input-wrapper">
+                <span class="search-icon">
+                  <ng-container *ngComponentOutlet="searchIcon" />
+                </span>
+                <input
+                  type="text"
+                  class="filter-search-input"
+                  placeholder="Filter..."
+                  [ngModel]="filterVal()"
+                  (ngModelChange)="filterVal.set($event)"
+                  (keydown.enter)="applyConditionFilter()"
+                  autofocus
+                />
+              </div>
+            }
+
+            <!-- Second input for Between -->
+            @if (selectedOperator() === 'between') {
+              @if (isDateField()) {
+                <div class="date-picker-wrapper" style="margin-top: 6px;" (keydown.enter)="applyConditionFilter()">
+                  <talos-date-picker
+                    [ngModel]="filterVal2()"
+                    (ngModelChange)="onDateFilterVal2Change($event)"
+                    size="sm"
+                    placeholder="And max date"
+                  />
+                </div>
+              } @else {
+                <div class="search-input-wrapper" style="margin-top: 6px;">
+                  <span class="search-icon">
+                    <ng-container *ngComponentOutlet="searchIcon" />
+                  </span>
+                  <input
+                    type="text"
+                    class="filter-search-input"
+                    placeholder="And max value..."
+                    [ngModel]="filterVal2()"
+                    (ngModelChange)="filterVal2.set($event)"
+                    (keydown.enter)="applyConditionFilter()"
+                  />
+                </div>
+              }
+            }
+          }
+        </div>
+      }
+
+      <!-- Dialog Footer -->
+      <div class="dialog-footer">
+        <button talosButton variant="ghost" size="sm" type="button" (click)="clearFilter()">
+          Clear
+        </button>
+        <button talosButton variant="primary" size="sm" type="button" (click)="applyFilter()">
+          Apply
+        </button>
+      </div>
+    </div>
+  `, styles: [":host{display:block;font-family:var(--talos-font-sans, system-ui, sans-serif);font-size:13px}.filter-dialog-container{background:var(--talos-dropdown-bg, var(--talos-bg-surface, #ffffff));color:var(--talos-text-primary, #0f172a);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-md, 8px);box-shadow:0 12px 28px -4px #00000040,0 4px 10px #0000001a;width:240px;padding:10px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.date-picker-wrapper{width:100%}.date-picker-wrapper talos-date-picker{display:block;width:100%}.search-input-wrapper{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:9px;width:14px;height:14px;opacity:.6;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--talos-text-muted, #94a3b8)}.search-icon ::ng-deep svg,.search-icon svg{width:13px;height:13px;display:block}.filter-search-input{width:100%;height:32px;padding:0 24px 0 28px;background:var(--talos-bg-subtle, #f8fafc);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 6px);color:var(--talos-text-primary, #0f172a);font-size:13px;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.filter-search-input::placeholder{color:var(--talos-text-muted, #94a3b8)}.filter-search-input:focus{border-color:var(--talos-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40}.clear-search-btn{position:absolute;right:6px;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.clear-search-btn ::ng-deep svg,.clear-search-btn svg{width:12px;height:12px;display:block}.clear-search-btn:hover{color:var(--talos-text-primary, #0f172a)}.checkbox-list-wrapper{margin-top:8px;max-height:175px;overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.checkbox-list-wrapper::-webkit-scrollbar{width:5px}.checkbox-list-wrapper::-webkit-scrollbar-thumb{background:var(--talos-border-default, #cbd5e1);border-radius:4px}.checkbox-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:4px;cursor:pointer;color:var(--talos-text-primary, #0f172a);transition:background-color .12s}.checkbox-item:hover{background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .05))}.checkbox-item.select-all-item{font-weight:500;border-bottom:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .08));margin-bottom:3px;padding-bottom:6px}.filter-checkbox{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-custom{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--talos-border-hover, #94a3b8);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s}.checkbox-custom ::ng-deep svg,.checkbox-custom svg{width:12px;height:12px;display:block}.checkbox-custom.is-checked,.checkbox-custom.is-indeterminate{background:var(--talos-primary, #2563eb);border-color:var(--talos-primary, #2563eb);color:#fff}.checkbox-custom .indeterminate-bar{width:8px;height:2px;background:#fff;border-radius:1px}.checkbox-label{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.no-matches-msg{padding:12px;text-align:center;color:var(--talos-text-muted, #94a3b8);font-size:12px}.operator-dropdown-wrapper{position:relative;margin-bottom:8px}.operator-select{width:100%;height:32px;padding:0 24px 0 10px;background:var(--talos-bg-subtle, #f8fafc);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 6px);color:var(--talos-text-primary, #0f172a);font-size:13px;outline:none;cursor:pointer;appearance:none;box-sizing:border-box}.operator-select:focus{border-color:var(--talos-primary, #2563eb);box-shadow:0 0 0 2px #2563eb40}.dropdown-arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.6;width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #94a3b8)}.dropdown-arrow ::ng-deep svg,.dropdown-arrow svg{width:13px;height:13px;display:block}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--talos-border-subtle, rgba(0, 0, 0, .08))}\n"] }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], distinctValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "distinctValues", required: false }] }], currentFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFilter", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], filterApplied: [{ type: i0.Output, args: ["filterApplied"] }], filterCleared: [{ type: i0.Output, args: ["filterCleared"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class TalosGridCellFormatPipe {
+    fieldPartsCache = new Map();
+    transform(row, col) {
+        if (!row || !col)
+            return '';
+        const val = this.extractFieldValue(row, col.field);
+        if (col.formatter) {
+            return col.formatter(val, row);
+        }
+        if (val === null || val === undefined) {
+            return '';
+        }
+        if (col.type === 'date' && val instanceof Date) {
+            return val.toLocaleDateString();
+        }
+        return String(val);
+    }
+    extractFieldValue(item, field) {
+        if (!item || !field)
+            return undefined;
+        if (!field.includes('.')) {
+            return item[field];
+        }
+        let parts = this.fieldPartsCache.get(field);
+        if (!parts) {
+            parts = field.split('.');
+            this.fieldPartsCache.set(field, parts);
+        }
+        let cur = item;
+        for (let i = 0; i < parts.length; i++) {
+            if (cur == null)
+                return undefined;
+            cur = cur[parts[i]];
+        }
+        return cur;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridCellFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosGridCellFormatPipe, isStandalone: true, name: "talosGridCellFormat" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosGridCellFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'talosGridCellFormat',
+                    pure: true,
+                }]
+        }] });
+
+class TalosDataGridComponent {
+    // Inputs
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    density = input('comfortable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    filterable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
+    pagination = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+    pageSize = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input([5, 10, 20, 50], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    pageIndex = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+    totalItems = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    trackBy = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    striped = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
+    bordered = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    hoverable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('No records to display', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    clientSort = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientSort" }] : /* istanbul ignore next */ []));
+    clientPagination = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientPagination" }] : /* istanbul ignore next */ []));
+    clientFilter = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clientFilter" }] : /* istanbul ignore next */ []));
+    resizable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+    rowKey = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
+    // Outputs
+    sortChange = output();
+    filterChange = output();
+    pageChange = output();
+    rowClick = output();
+    actionClick = output();
+    columnResize = output();
+    // Icons for template
+    arrowUpIcon = LucideArrowUp;
+    arrowDownIcon = LucideArrowDown;
+    arrowUpDownIcon = LucideArrowUpDown;
+    chevronLeftIcon = LucideChevronLeft;
+    chevronRightIcon = LucideChevronRight;
+    chevronsLeftIcon = LucideChevronsLeft;
+    chevronsRightIcon = LucideChevronsRight;
+    xIcon = LucideX;
+    inboxIcon = LucideInbox;
+    loaderIcon = LucideLoader2;
+    filterIcon = LucideFilter;
+    // Internal reactive states
+    internalSortState = signal({ field: '', direction: null }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalSortState" }] : /* istanbul ignore next */ []));
+    internalFilterStates = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalFilterStates" }] : /* istanbul ignore next */ []));
+    internalPageIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalPageIndex" }] : /* istanbul ignore next */ []));
+    internalPageSize = signal(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalPageSize" }] : /* istanbul ignore next */ []));
+    activeFilterCol = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeFilterCol" }] : /* istanbul ignore next */ []));
+    columnWidths = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
+    resizingColumn = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizingColumn" }] : /* istanbul ignore next */ []));
+    isResizing = computed(() => this.resizingColumn() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
+    hasResizableColumns = computed(() => {
+        return this.resizable() || this.columns().some((c) => c.resizable === true);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasResizableColumns" }] : /* istanbul ignore next */ []));
+    // CDK Connected Overlay Positions
+    overlayPositions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: 6,
+        },
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: 6,
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -6,
+        },
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetY: -6,
+        },
+    ];
+    constructor() {
+        effect(() => {
+            this.internalPageIndex.set(this.pageIndex());
+        });
+        effect(() => {
+            this.internalPageSize.set(this.pageSize());
+        });
+    }
+    // Active filters list
+    activeFiltersList = computed(() => {
+        return Array.from(this.internalFilterStates().values());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeFiltersList" }] : /* istanbul ignore next */ []));
+    hasActiveFilters = computed(() => {
+        return this.internalFilterStates().size > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActiveFilters" }] : /* istanbul ignore next */ []));
+    // Cached distinct values for the currently active filter column
+    activeColumnDistinctValues = computed(() => {
+        const field = this.activeFilterCol();
+        if (!field)
+            return [];
+        const col = this.columns().find((c) => c.field === field);
+        if (!col)
+            return [];
+        return this.getDistinctValues(col);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeColumnDistinctValues" }] : /* istanbul ignore next */ []));
+    // Multi-Stage Processing Pipeline:
+    // Stage 1: Filtered Data
+    filteredData = computed(() => {
+        const raw = this.data() || [];
+        if (!this.clientFilter() || this.internalFilterStates().size === 0) {
+            return raw;
+        }
+        const filters = this.internalFilterStates();
+        const colsMap = new Map(this.columns().map((c) => [c.field, c]));
+        return raw.filter((item) => {
+            for (const [field, filter] of filters.entries()) {
+                const rawVal = this.extractFieldValue(item, field);
+                const col = colsMap.get(field);
+                if (!this.matchesFilter(rawVal, filter, col)) {
+                    return false;
+                }
+            }
+            return true;
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
+    // Stage 2: Sorted Data
+    sortedData = computed(() => {
+        const base = this.filteredData();
+        const sort = this.internalSortState();
+        if (!this.clientSort() || !sort.direction || !sort.field) {
+            return base;
+        }
+        const col = this.columns().find((c) => c.field === sort.field);
+        const sortType = sort.sortType || col?.sortType || this.inferSortType(col);
+        const dir = sort.direction === 'asc' ? 1 : -1;
+        // Schwartzian transform: Pre-extract and parse sort keys in an O(N) pass
+        // to eliminate reflection, string conversions, and Date parsing from the O(N log N) comparator
+        const mapped = base.map((item, index) => {
+            const raw = this.extractFieldValue(item, sort.field);
+            let sortKey = null;
+            if (raw !== null && raw !== undefined && raw !== '') {
+                switch (sortType) {
+                    case 'number': {
+                        const num = Number(raw);
+                        sortKey = isNaN(num) ? null : num;
+                        break;
+                    }
+                    case 'date': {
+                        const time = raw instanceof Date ? raw.getTime() : new Date(raw).getTime();
+                        sortKey = isNaN(time) ? null : time;
+                        break;
+                    }
+                    case 'string':
+                    default:
+                        sortKey = String(raw);
+                        break;
+                }
+            }
+            return { item, index, sortKey };
+        });
+        mapped.sort((a, b) => {
+            if (a.sortKey === b.sortKey)
+                return a.index - b.index;
+            if (a.sortKey === null)
+                return 1;
+            if (b.sortKey === null)
+                return -1;
+            if (sortType === 'number' || sortType === 'date') {
+                const diff = (a.sortKey - b.sortKey) * dir;
+                return diff !== 0 ? diff : a.index - b.index;
+            }
+            // string
+            const cmp = a.sortKey.localeCompare(b.sortKey, undefined, {
+                numeric: true,
+                sensitivity: 'base',
+            }) * dir;
+            return cmp !== 0 ? cmp : a.index - b.index;
+        });
+        return mapped.map((m) => m.item);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
+    // Stage 3: Paged Data
+    pagedData = computed(() => {
+        const sorted = this.sortedData();
+        if (!this.pagination() || !this.clientPagination()) {
+            return sorted;
+        }
+        const pageSize = this.internalPageSize();
+        const pageIndex = this.internalPageIndex();
+        const start = pageIndex * pageSize;
+        return sorted.slice(start, start + pageSize);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagedData" }] : /* istanbul ignore next */ []));
+    // Stage 4: Pagination Metrics
+    totalCount = computed(() => {
+        const externalTotal = this.totalItems();
+        if (externalTotal !== null && externalTotal !== undefined) {
+            return externalTotal;
+        }
+        return this.filteredData().length;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []));
+    totalPages = computed(() => {
+        const count = this.totalCount();
+        const size = this.internalPageSize();
+        if (count <= 0 || size <= 0)
+            return 1;
+        return Math.ceil(count / size);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    startRecord = computed(() => {
+        const total = this.totalCount();
+        if (total === 0)
+            return 0;
+        return this.internalPageIndex() * this.internalPageSize() + 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startRecord" }] : /* istanbul ignore next */ []));
+    endRecord = computed(() => {
+        const total = this.totalCount();
+        if (total === 0)
+            return 0;
+        return Math.min(total, (this.internalPageIndex() + 1) * this.internalPageSize());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endRecord" }] : /* istanbul ignore next */ []));
+    get hasRowClickListeners() {
+        return true;
+    }
+    // Row Identification for TrackBy
+    trackByRow(index, row) {
+        const customTrack = this.trackBy();
+        if (customTrack) {
+            return customTrack(index, row);
+        }
+        const customKey = this.rowKey();
+        if (customKey && row && typeof row === 'object') {
+            return row[customKey];
+        }
+        if (row && typeof row === 'object') {
+            const anyRow = row;
+            return anyRow.id ?? anyRow._id ?? anyRow.uuid ?? anyRow.key ?? index;
+        }
+        return index;
+    }
+    // Header & Sorting helpers
+    isSortable(col) {
+        if (col.type === 'actions')
+            return false;
+        if (col.sortable !== undefined)
+            return col.sortable;
+        return !!col.sortType;
+    }
+    isSorted(col) {
+        return (this.internalSortState().field === col.field && this.internalSortState().direction !== null);
+    }
+    getSortDirection(col) {
+        if (this.internalSortState().field !== col.field) {
+            return null;
+        }
+        return this.internalSortState().direction;
+    }
+    getAriaSort(col) {
+        if (!this.isSortable(col))
+            return null;
+        const dir = this.getSortDirection(col);
+        if (dir === 'asc')
+            return 'ascending';
+        if (dir === 'desc')
+            return 'descending';
+        return 'none';
+    }
+    onHeaderClick(col) {
+        if (!this.isSortable(col))
+            return;
+        const current = this.internalSortState();
+        let nextDirection;
+        if (current.field !== col.field) {
+            nextDirection = 'asc';
+        }
+        else if (current.direction === 'asc') {
+            nextDirection = 'desc';
+        }
+        else if (current.direction === 'desc') {
+            nextDirection = null;
+        }
+        else {
+            nextDirection = 'asc';
+        }
+        const sortType = col.sortType || this.inferSortType(col);
+        const newState = {
+            field: nextDirection ? col.field : '',
+            direction: nextDirection,
+            sortType,
+        };
+        this.internalSortState.set(newState);
+        this.sortChange.emit(newState);
+    }
+    // Column Resizing Helpers & Handlers
+    isResizable(col) {
+        if (col.resizable !== undefined) {
+            return col.resizable;
+        }
+        if (col.type === 'actions') {
+            return false;
+        }
+        return this.resizable();
+    }
+    isColumnResizing(field) {
+        return this.resizingColumn() === field;
+    }
+    getColumnWidth(col) {
+        const dynamic = this.columnWidths()[col.field];
+        if (dynamic !== undefined) {
+            return `${dynamic}px`;
+        }
+        return col.width || col.minWidth;
+    }
+    setColumnWidth(field, width) {
+        this.columnWidths.update((prev) => ({
+            ...prev,
+            [field]: width,
+        }));
+    }
+    resetColumnWidths() {
+        this.columnWidths.set({});
+    }
+    onResizeStart(col, event, thEl) {
+        if (!this.isResizable(col))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const startX = 'touches' in event ? event.touches[0].clientX : event.clientX;
+        const startWidth = thEl.getBoundingClientRect().width;
+        const minW = col.minWidth ? parseInt(col.minWidth, 10) : 50;
+        const maxW = col.maxWidth ? parseInt(col.maxWidth, 10) : undefined;
+        this.resizingColumn.set(col.field);
+        if (typeof document !== 'undefined') {
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+        }
+        let lastWidth = startWidth;
+        const onMove = (moveEvent) => {
+            const currentX = 'touches' in moveEvent ? moveEvent.touches[0].clientX : moveEvent.clientX;
+            const deltaX = currentX - startX;
+            let newWidth = Math.round(startWidth + deltaX);
+            if (minW !== undefined && newWidth < minW)
+                newWidth = minW;
+            if (maxW !== undefined && newWidth > maxW)
+                newWidth = maxW;
+            lastWidth = newWidth;
+            this.columnWidths.update((prev) => ({
+                ...prev,
+                [col.field]: newWidth,
+            }));
+        };
+        const onEnd = () => {
+            if (typeof document !== 'undefined') {
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onEnd);
+                document.removeEventListener('touchmove', onMove);
+                document.removeEventListener('touchend', onEnd);
+                document.body.style.cursor = '';
+                document.body.style.userSelect = '';
+            }
+            this.resizingColumn.set(null);
+            this.columnResize.emit({ column: col, width: lastWidth });
+        };
+        if (typeof document !== 'undefined') {
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onEnd);
+            document.addEventListener('touchmove', onMove, { passive: true });
+            document.addEventListener('touchend', onEnd);
+        }
+    }
+    onResizeDoubleClick(col, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.columnWidths.update((prev) => {
+            const next = { ...prev };
+            delete next[col.field];
+            return next;
+        });
+        if (col.width) {
+            const parsed = parseInt(col.width, 10);
+            if (!isNaN(parsed)) {
+                this.columnResize.emit({ column: col, width: parsed });
+            }
+        }
+    }
+    onResizeKeydown(col, event, thEl) {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            event.preventDefault();
+            event.stopPropagation();
+            const currentWidth = this.columnWidths()[col.field] ?? thEl.getBoundingClientRect().width;
+            const step = event.key === 'ArrowRight' ? 10 : -10;
+            const minW = col.minWidth ? parseInt(col.minWidth, 10) : 50;
+            const maxW = col.maxWidth ? parseInt(col.maxWidth, 10) : undefined;
+            let newWidth = Math.round(currentWidth + step);
+            if (minW !== undefined && newWidth < minW)
+                newWidth = minW;
+            if (maxW !== undefined && newWidth > maxW)
+                newWidth = maxW;
+            this.columnWidths.update((prev) => ({
+                ...prev,
+                [col.field]: newWidth,
+            }));
+            this.columnResize.emit({ column: col, width: newWidth });
+        }
+    }
+    // Filter Helpers & Dialog Management
+    isFilterable(col) {
+        if (col.type === 'actions')
+            return false;
+        if (col.filterable !== undefined)
+            return col.filterable;
+        return this.filterable();
+    }
+    isFilterDialogOpen(field) {
+        return this.activeFilterCol() === field;
+    }
+    toggleFilterDialog(field, event) {
+        event.stopPropagation();
+        if (this.activeFilterCol() === field) {
+            this.activeFilterCol.set(null);
+        }
+        else {
+            this.activeFilterCol.set(field);
+        }
+    }
+    closeFilterDialog() {
+        this.activeFilterCol.set(null);
+    }
+    onOverlayOutsideClick(event, field) {
+        const target = event.target;
+        if (target &&
+            (target.closest(`.filter-anchor-${field}`) ||
+                target.closest('.datepicker-dropdown-panel') ||
+                target.closest('.talos-datepicker-host'))) {
+            return;
+        }
+        this.closeFilterDialog();
+    }
+    getDistinctValues(col) {
+        const raw = this.data() || [];
+        const valuesSet = new Set();
+        for (const item of raw) {
+            const val = this.extractFieldValue(item, col.field);
+            if (val === null || val === undefined) {
+                valuesSet.add('');
+            }
+            else {
+                valuesSet.add(String(val));
+            }
+        }
+        return Array.from(valuesSet).sort((a, b) => {
+            if (a === '')
+                return 1;
+            if (b === '')
+                return -1;
+            return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+        });
+    }
+    getFilter(field) {
+        return this.internalFilterStates().get(field);
+    }
+    hasFilter(field) {
+        return this.internalFilterStates().has(field);
+    }
+    onFilterApplied(filter) {
+        const map = new Map(this.internalFilterStates());
+        map.set(filter.field, filter);
+        this.internalFilterStates.set(map);
+        this.internalPageIndex.set(0);
+        this.filterChange.emit(this.activeFiltersList());
+    }
+    onFilterCleared(field) {
+        const map = new Map(this.internalFilterStates());
+        map.delete(field);
+        this.internalFilterStates.set(map);
+        this.internalPageIndex.set(0);
+        this.filterChange.emit(this.activeFiltersList());
+    }
+    clearAllFilters() {
+        this.internalFilterStates.set(new Map());
+        this.internalPageIndex.set(0);
+        this.filterChange.emit([]);
+    }
+    // Filter Matching Evaluator
+    matchesFilter(rawValue, filter, col) {
+        // Mode A: Set Filter (text / select / status)
+        if (filter.mode === 'set') {
+            if (!filter.selectedValues)
+                return true;
+            const strVal = rawValue === null || rawValue === undefined ? '' : String(rawValue);
+            return filter.selectedValues.includes(strVal);
+        }
+        // Mode B: Condition Filter (numbers / dates / text)
+        const op = filter.operator || 'eq';
+        if (op === 'blank') {
+            return rawValue === null || rawValue === undefined || rawValue === '';
+        }
+        if (op === 'notBlank') {
+            return rawValue !== null && rawValue !== undefined && rawValue !== '';
+        }
+        if (rawValue === null || rawValue === undefined || rawValue === '') {
+            return false;
+        }
+        const filterVal = filter.value;
+        const secondVal = filter.secondValue;
+        // Check if comparing dates
+        const isDate = col?.type === 'date' ||
+            col?.sortType === 'date' ||
+            filterVal instanceof Date ||
+            (typeof filterVal === 'string' && /^\d{4}-\d{2}-\d{2}/.test(filterVal)) ||
+            rawValue instanceof Date;
+        if (isDate) {
+            const rowDate = this.normalizeDateToYMD(rawValue);
+            const targetDate = this.normalizeDateToYMD(filterVal);
+            const targetDate2 = secondVal ? this.normalizeDateToYMD(secondVal) : '';
+            switch (op) {
+                case 'eq':
+                    return rowDate === targetDate;
+                case 'neq':
+                    return rowDate !== targetDate;
+                case 'gt':
+                    return rowDate > targetDate;
+                case 'gte':
+                    return rowDate >= targetDate;
+                case 'lt':
+                    return rowDate < targetDate;
+                case 'lte':
+                    return rowDate <= targetDate;
+                case 'between': {
+                    if (!targetDate2)
+                        return rowDate >= targetDate;
+                    const minD = targetDate <= targetDate2 ? targetDate : targetDate2;
+                    const maxD = targetDate <= targetDate2 ? targetDate2 : targetDate;
+                    return rowDate >= minD && rowDate <= maxD;
+                }
+                default:
+                    return true;
+            }
+        }
+        // Check if comparing numbers
+        const isNumber = col?.type === 'number' || col?.sortType === 'number';
+        const hasFilterNum = filterVal !== '' &&
+            filterVal !== null &&
+            filterVal !== undefined &&
+            !isNaN(Number(filterVal));
+        const numRaw = Number(rawValue);
+        if ((isNumber || hasFilterNum) && !isNaN(numRaw)) {
+            const numFilter = Number(filterVal);
+            const numFilter2 = secondVal !== '' && secondVal !== null && secondVal !== undefined ? Number(secondVal) : NaN;
+            switch (op) {
+                case 'eq':
+                    return numRaw === numFilter;
+                case 'neq':
+                    return numRaw !== numFilter;
+                case 'gt':
+                    return numRaw > numFilter;
+                case 'gte':
+                    return numRaw >= numFilter;
+                case 'lt':
+                    return numRaw < numFilter;
+                case 'lte':
+                    return numRaw <= numFilter;
+                case 'between': {
+                    if (isNaN(numFilter2))
+                        return numRaw >= numFilter;
+                    const minN = Math.min(numFilter, numFilter2);
+                    const maxN = Math.max(numFilter, numFilter2);
+                    return numRaw >= minN && numRaw <= maxN;
+                }
+                default:
+                    return true;
+            }
+        }
+        // String / Text comparison
+        const strRaw = String(rawValue).toLowerCase().trim();
+        const strFilter = String(filterVal ?? '')
+            .toLowerCase()
+            .trim();
+        switch (op) {
+            case 'eq':
+                return strRaw === strFilter;
+            case 'neq':
+                return strRaw !== strFilter;
+            case 'startsWith':
+                return strRaw.startsWith(strFilter);
+            case 'endsWith':
+                return strRaw.endsWith(strFilter);
+            case 'contains':
+            default:
+                return strRaw.includes(strFilter);
+        }
+    }
+    normalizeDateToYMD(val) {
+        if (!val)
+            return '';
+        if (typeof val === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(val)) {
+            return val;
+        }
+        const d = new Date(val);
+        if (isNaN(d.getTime()))
+            return '';
+        const y = d.getFullYear();
+        const m = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        return `${y}-${m}-${day}`;
+    }
+    // Pagination Handlers
+    setPage(pageIndex) {
+        const validPage = Math.max(0, Math.min(pageIndex, this.totalPages() - 1));
+        if (validPage !== this.internalPageIndex()) {
+            this.internalPageIndex.set(validPage);
+            this.pageChange.emit({
+                pageIndex: validPage,
+                pageSize: this.internalPageSize(),
+                totalItems: this.totalCount(),
+            });
+        }
+    }
+    onPageSizeChange(event) {
+        const target = event.target;
+        const newSize = Number(target.value);
+        this.internalPageSize.set(newSize);
+        this.internalPageIndex.set(0);
+        this.pageChange.emit({
+            pageIndex: 0,
+            pageSize: newSize,
+            totalItems: this.totalCount(),
+        });
+    }
+    // Cell Content & Row Click Helpers
+    getCellValue(row, col) {
+        return this.extractFieldValue(row, col.field);
+    }
+    formatCellValue(row, col) {
+        const val = this.getCellValue(row, col);
+        if (col.formatter) {
+            return col.formatter(val, row);
+        }
+        if (val === null || val === undefined) {
+            return '';
+        }
+        if (col.type === 'date' && val instanceof Date) {
+            return val.toLocaleDateString();
+        }
+        return String(val);
+    }
+    onRowClick(row, index) {
+        this.rowClick.emit({ row, index });
+    }
+    fieldPartsCache = new Map();
+    extractFieldValue(item, field) {
+        if (!item || !field)
+            return undefined;
+        if (!field.includes('.')) {
+            return item[field];
+        }
+        let parts = this.fieldPartsCache.get(field);
+        if (!parts) {
+            parts = field.split('.');
+            this.fieldPartsCache.set(field, parts);
+        }
+        let cur = item;
+        for (let i = 0; i < parts.length; i++) {
+            if (cur == null)
+                return undefined;
+            cur = cur[parts[i]];
+        }
+        return cur;
+    }
+    inferSortType(col) {
+        if (!col)
+            return 'string';
+        if (col.type === 'number')
+            return 'number';
+        if (col.type === 'date')
+            return 'date';
+        return 'string';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosDataGridComponent, isStandalone: true, selector: "talos-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, clientSort: { classPropertyName: "clientSort", publicName: "clientSort", isSignal: true, isRequired: false, transformFunction: null }, clientPagination: { classPropertyName: "clientPagination", publicName: "clientPagination", isSignal: true, isRequired: false, transformFunction: null }, clientFilter: { classPropertyName: "clientFilter", publicName: "clientFilter", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", filterChange: "filterChange", pageChange: "pageChange", rowClick: "rowClick", actionClick: "actionClick", columnResize: "columnResize" }, host: { classAttribute: "talos-data-grid-host" }, ngImport: i0, template: "<div\n  class=\"talos-data-grid-container\"\n  [class.density-compact]=\"density() === 'compact'\"\n  [class.density-comfortable]=\"density() === 'comfortable'\"\n  [class.density-spacious]=\"density() === 'spacious'\"\n  [class.is-bordered]=\"bordered()\"\n  [class.is-striped]=\"striped()\"\n  [class.is-resizing]=\"isResizing()\"\n>\n  <!-- Loading overlay -->\n  @if (loading()) {\n    <div class=\"talos-data-grid-loading-overlay\">\n      <ng-container *ngComponentOutlet=\"loaderIcon\" />\n    </div>\n  }\n\n  <!-- Main Scrollable Table Wrapper -->\n  <div class=\"talos-data-grid-table-wrapper\">\n    <table class=\"talos-data-grid-table\" [class.has-resizable-columns]=\"hasResizableColumns()\" role=\"grid\">\n      <thead>\n        <!-- Header Column Row -->\n        <tr>\n          @for (col of columns(); track col.field) {\n            <th\n              #thEl\n              [style.width]=\"getColumnWidth(col)\"\n              [style.min-width]=\"col.minWidth\"\n              [style.max-width]=\"col.maxWidth\"\n              [class.align-left]=\"!col.align || col.align === 'left'\"\n              [class.align-center]=\"col.align === 'center'\"\n              [class.align-right]=\"col.align === 'right'\"\n              [class.is-sortable]=\"isSortable(col)\"\n              [class.is-sorted]=\"isSorted(col)\"\n              [class.is-resizable]=\"isResizable(col)\"\n              [class.is-resizing]=\"isColumnResizing(col.field)\"\n              (click)=\"onHeaderClick(col)\"\n              role=\"columnheader\"\n              [attr.aria-sort]=\"getAriaSort(col)\"\n            >\n              <div class=\"header-content-wrapper\">\n                <span class=\"header-title\" [title]=\"col.header\">{{ col.header }}</span>\n                @if (isSortable(col) || isFilterable(col)) {\n                  <div class=\"header-tools\">\n                    @if (isSortable(col)) {\n                      <button\n                        talosButton\n                        variant=\"ghost\"\n                        size=\"xs\"\n                        [iconOnly]=\"true\"\n                        type=\"button\"\n                        class=\"header-sort-btn\"\n                        [class.is-sorted]=\"isSorted(col)\"\n                        (click)=\"$event.stopPropagation(); onHeaderClick(col)\"\n                        [attr.aria-label]=\"'Sort by ' + col.header\"\n                        [title]=\"'Sort by ' + col.header\"\n                      >\n                        @if (getSortDirection(col) === 'asc') {\n                          <ng-container *ngComponentOutlet=\"arrowUpIcon\" />\n                        } @else if (getSortDirection(col) === 'desc') {\n                          <ng-container *ngComponentOutlet=\"arrowDownIcon\" />\n                        } @else {\n                          <ng-container *ngComponentOutlet=\"arrowUpDownIcon\" />\n                        }\n                      </button>\n                    }\n                    @if (isFilterable(col)) {\n                      <div\n                        class=\"talos-grid-filter-anchor\"\n                        [class]=\"'filter-anchor-' + col.field\"\n                        cdkOverlayOrigin\n                        #filterOrigin=\"cdkOverlayOrigin\"\n                        (click)=\"$event.stopPropagation()\"\n                      >\n                        <button\n                          talosButton\n                          variant=\"ghost\"\n                          size=\"xs\"\n                          [iconOnly]=\"true\"\n                          type=\"button\"\n                          class=\"header-filter-btn\"\n                          [class.is-active]=\"hasFilter(col.field)\"\n                          [class.is-open]=\"isFilterDialogOpen(col.field)\"\n                          (click)=\"toggleFilterDialog(col.field, $event)\"\n                          [attr.aria-label]=\"'Filter ' + col.header\"\n                          title=\"Filter\"\n                        >\n                          <ng-container *ngComponentOutlet=\"filterIcon\" />\n                        </button>\n\n                        <ng-template\n                          cdkConnectedOverlay\n                          [cdkConnectedOverlayOrigin]=\"filterOrigin\"\n                          [cdkConnectedOverlayOpen]=\"isFilterDialogOpen(col.field)\"\n                          [cdkConnectedOverlayPositions]=\"overlayPositions\"\n                          [cdkConnectedOverlayPush]=\"true\"\n                          (overlayOutsideClick)=\"onOverlayOutsideClick($event, col.field)\"\n                        >\n                          <talos-grid-filter-dialog\n                            [column]=\"col\"\n                            [distinctValues]=\"activeColumnDistinctValues()\"\n                            [currentFilter]=\"getFilter(col.field)\"\n                            [align]=\"col.align === 'right' ? 'right' : 'left'\"\n                            (filterApplied)=\"onFilterApplied($event)\"\n                            (filterCleared)=\"onFilterCleared(col.field)\"\n                            (closed)=\"closeFilterDialog()\"\n                          />\n                        </ng-template>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n              @if (isResizable(col)) {\n                <div\n                  class=\"talos-grid-resize-handle\"\n                  [class.is-resizing]=\"isColumnResizing(col.field)\"\n                  (mousedown)=\"onResizeStart(col, $event, thEl)\"\n                  (touchstart)=\"onResizeStart(col, $event, thEl)\"\n                  (dblclick)=\"onResizeDoubleClick(col, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"'Resize ' + col.header + ' column'\"\n                  (keydown)=\"onResizeKeydown(col, $event, thEl)\"\n                ></div>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body with TrackBy for Optimal Refresh Performance -->\n      <tbody>\n        @for (row of pagedData(); track trackByRow($index, row)) {\n          <tr\n            [class.is-hoverable]=\"hoverable()\"\n            [class.is-clickable]=\"hasRowClickListeners\"\n            (click)=\"onRowClick(row, $index)\"\n            role=\"row\"\n          >\n            @for (col of columns(); track col.field) {\n              <td\n                [class.align-left]=\"!col.align || col.align === 'left'\"\n                [class.align-center]=\"col.align === 'center'\"\n                [class.align-right]=\"col.align === 'right'\"\n                role=\"gridcell\"\n              >\n                @if (col.cellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      col.cellTemplate;\n                      context: {\n                        $implicit: getCellValue(row, col),\n                        row: row,\n                        index: $index,\n                        column: col,\n                      }\n                    \"\n                  />\n                } @else if (col.type === 'status') {\n                  <talos-grid-status-cell\n                    [row]=\"row\"\n                    [column]=\"col\"\n                    [rawValue]=\"getCellValue(row, col)\"\n                  />\n                } @else if (col.type === 'actions' && col.actionsConfig) {\n                  <talos-grid-actions-cell\n                    [row]=\"row\"\n                    [rowIndex]=\"$index\"\n                    [actions]=\"col.actionsConfig\"\n                    (actionClick)=\"actionClick.emit($event)\"\n                  />\n                } @else {\n                  {{ row | talosGridCellFormat: col }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n\n    <!-- Empty State -->\n    @if (pagedData().length === 0) {\n      <div class=\"talos-data-grid-empty\">\n        <div class=\"empty-icon\">\n          <ng-container *ngComponentOutlet=\"inboxIcon\" />\n        </div>\n        <div class=\"empty-text\">\n          @if (hasActiveFilters()) {\n            <span>No results matching the active filters.</span>\n          } @else {\n            <span>{{ emptyMessage() }}</span>\n          }\n        </div>\n        @if (hasActiveFilters()) {\n          <button talosButton variant=\"outline\" size=\"sm\" (click)=\"clearAllFilters()\">\n            Clear Filters\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pagination Bar -->\n  @if (pagination()) {\n    <div class=\"talos-data-grid-pagination\">\n      <div class=\"pagination-left\">\n        <span class=\"pagination-info\">\n          Showing {{ startRecord() }} to {{ endRecord() }} of {{ totalCount() }} entries\n        </span>\n\n        @if (pageSizeOptions().length > 1) {\n          <div class=\"pagination-size-selector\">\n            <span>Rows per page:</span>\n            <select\n              [value]=\"internalPageSize()\"\n              (change)=\"onPageSizeChange($event)\"\n              aria-label=\"Select page size\"\n            >\n              @for (size of pageSizeOptions(); track size) {\n                <option [value]=\"size\">{{ size }}</option>\n              }\n            </select>\n          </div>\n        }\n      </div>\n\n      <div class=\"pagination-right\">\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() <= 0\"\n          (click)=\"setPage(0)\"\n          title=\"First page\"\n          aria-label=\"First page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronsLeftIcon\" />\n        </button>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() <= 0\"\n          (click)=\"setPage(internalPageIndex() - 1)\"\n          title=\"Previous page\"\n          aria-label=\"Previous page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronLeftIcon\" />\n        </button>\n\n        <span class=\"page-indicator\">\n          Page {{ internalPageIndex() + 1 }} of {{ totalPages() }}\n        </span>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() >= totalPages() - 1\"\n          (click)=\"setPage(internalPageIndex() + 1)\"\n          title=\"Next page\"\n          aria-label=\"Next page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronRightIcon\" />\n        </button>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() >= totalPages() - 1\"\n          (click)=\"setPage(totalPages() - 1)\"\n          title=\"Last page\"\n          aria-label=\"Last page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronsRightIcon\" />\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--talos-font-sans, system-ui, -apple-system, sans-serif);color:var(--talos-text-primary, #0f172a)}.talos-data-grid-container{display:flex;flex-direction:column;background-color:var(--talos-bg-surface, #ffffff);border-radius:var(--talos-radius-lg, 8px);position:relative;width:100%;overflow:hidden}.talos-data-grid-container.is-bordered{border:1px solid var(--talos-border-default, #cbd5e1)}.talos-data-grid-container.is-resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.talos-data-grid-container.is-resizing *{-webkit-user-select:none!important;user-select:none!important;cursor:col-resize!important}.talos-data-grid-table-wrapper{width:100%;overflow-x:auto;overflow-y:visible;position:relative;scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.talos-data-grid-table-wrapper::-webkit-scrollbar{height:6px;width:6px}.talos-data-grid-table-wrapper::-webkit-scrollbar-thumb{background:var(--talos-border-default, #cbd5e1);border-radius:4px}.talos-data-grid-table{width:100%;min-width:100%;border-collapse:collapse;text-align:left;font-size:var(--talos-font-size-sm, 13px);line-height:var(--talos-line-height-normal, 1.5)}.talos-data-grid-table.has-resizable-columns{table-layout:fixed;width:max-content;min-width:100%}.talos-data-grid-container.density-compact{--grid-header-padding-y: 6px;--grid-header-padding-x: 10px;--grid-cell-padding-y: 5px;--grid-cell-padding-x: 10px;--grid-font-size: 12px;--grid-header-font-size: 11px;--grid-filter-height: 24px}.talos-data-grid-container.density-comfortable{--grid-header-padding-y: 10px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 9px;--grid-cell-padding-x: 14px;--grid-font-size: 13.5px;--grid-header-font-size: 12px;--grid-filter-height: 28px}.talos-data-grid-container.density-spacious{--grid-header-padding-y: 14px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 14px;--grid-cell-padding-x: 18px;--grid-font-size: 14.5px;--grid-header-font-size: 13px;--grid-filter-height: 32px}.talos-data-grid-table thead th{position:relative;background-color:var(--talos-bg-subtle, #f8fafc);color:var(--talos-text-secondary, #475569);font-size:var(--grid-header-font-size, 12px);font-weight:var(--talos-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;padding:var(--grid-header-padding-y) 8px var(--grid-header-padding-y) var(--grid-header-padding-x);border-bottom:1px solid var(--talos-border-default, #cbd5e1);white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle;overflow:hidden}.talos-data-grid-table thead th.is-sortable{cursor:pointer;transition:background-color var(--talos-transition, .15s ease)}.talos-data-grid-table thead th.is-sortable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f1f5f9);color:var(--talos-text-primary, #0f172a)}.talos-data-grid-table thead th.is-sorted{color:var(--talos-primary, #2563eb);background-color:var(--talos-primary-subtle-bg, #eff6ff)}.talos-data-grid-table thead th.is-resizable{padding-right:10px}.talos-data-grid-table thead th.is-resizing{background-color:var(--talos-neutral-subtle-bg-hover, #f1f5f9)}.header-content-wrapper{display:flex;align-items:center;gap:4px;width:100%;min-width:0;overflow:hidden}.header-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-tools{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sort-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;opacity:.45;transition:opacity var(--talos-transition, .15s ease),transform .15s ease}.sort-icon-wrapper ::ng-deep svg,.sort-icon-wrapper ::ng-deep .lucide,.sort-icon-wrapper svg,.sort-icon-wrapper .lucide{width:13px!important;height:13px!important;display:block}.is-sortable:hover .sort-icon-wrapper{opacity:.85}.is-sorted .sort-icon-wrapper{opacity:1;color:var(--talos-primary, #2563eb)}.header-sort-btn{width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;border-radius:var(--talos-radius-sm, 4px)!important;border:1px solid transparent!important;background:transparent!important;color:var(--talos-text-muted, #94a3b8)!important;cursor:pointer;opacity:.45;transition:all var(--talos-transition, .15s ease);box-shadow:none!important}.header-sort-btn ::ng-deep svg,.header-sort-btn ::ng-deep .lucide,.header-sort-btn svg,.header-sort-btn .lucide{width:13px!important;height:13px!important;display:block;flex-shrink:0}th:hover .header-sort-btn{opacity:.85}.header-sort-btn:hover{opacity:1;color:var(--talos-text-primary, #0f172a)!important;background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .06))!important}.header-sort-btn.is-sorted{opacity:1;color:var(--talos-primary, #2563eb)!important;background:var(--talos-primary-subtle-bg, #eff6ff)!important}.align-left{text-align:left}.align-left .header-content-wrapper{justify-content:flex-start}.align-center{text-align:center}.align-center .header-content-wrapper{justify-content:center}.align-right{text-align:right}.align-right .header-content-wrapper{justify-content:flex-end}.talos-grid-resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:2;display:flex;align-items:center;justify-content:center}.talos-grid-resize-handle:after{content:\"\";display:block;width:2px;height:50%;border-radius:1px;background-color:transparent;transition:background-color var(--talos-transition, .15s ease),height var(--talos-transition, .15s ease)}.talos-grid-resize-handle:hover:after,.talos-grid-resize-handle:focus-visible:after,.talos-grid-resize-handle.is-resizing:after{background-color:var(--talos-primary, #2563eb);height:100%}.talos-grid-resize-handle:focus-visible{outline:none}.talos-grid-filter-anchor{position:relative;display:inline-flex;align-items:center}.header-filter-btn{display:inline-flex;align-items:center;justify-content:center;width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;border-radius:var(--talos-radius-sm, 4px)!important;border:1px solid transparent!important;background:transparent!important;color:var(--talos-text-muted, #94a3b8)!important;cursor:pointer;opacity:.5;transition:all var(--talos-transition, .15s ease);box-shadow:none!important}.header-filter-btn ::ng-deep svg,.header-filter-btn ::ng-deep .lucide,.header-filter-btn svg,.header-filter-btn .lucide{width:13px!important;height:13px!important;display:block;flex-shrink:0}th:hover .header-filter-btn{opacity:.85}.header-filter-btn:hover,.header-filter-btn.is-open{opacity:1;color:var(--talos-text-primary, #0f172a)!important;background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .06))!important}.header-filter-btn.is-active{opacity:1;color:#fff!important;background:var(--talos-primary, #2563eb)!important;border-color:var(--talos-primary, #2563eb)!important}.talos-data-grid-table tbody tr{border-bottom:1px solid var(--talos-border-subtle, #f1f5f9);transition:background-color var(--talos-transition, .12s ease)}.talos-data-grid-table tbody tr.is-hoverable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f8fafc)}.talos-data-grid-table tbody tr.is-clickable{cursor:pointer}.talos-data-grid-container.is-striped .talos-data-grid-table tbody tr:nth-child(2n){background-color:var(--talos-bg-subtle, #fcfdfe)}.talos-data-grid-container.is-striped .talos-data-grid-table tbody tr:nth-child(2n).is-hoverable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f8fafc)}.talos-data-grid-table tbody td{padding:var(--grid-cell-padding-y) var(--grid-cell-padding-x);font-size:var(--grid-font-size, 13.5px);color:var(--talos-text-primary, #0f172a);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.talos-data-grid-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--talos-text-muted, #64748b);text-align:center;gap:12px}.talos-data-grid-empty .empty-icon{opacity:.5;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.talos-data-grid-empty .empty-icon ::ng-deep svg,.talos-data-grid-empty .empty-icon ::ng-deep .lucide,.talos-data-grid-empty .empty-icon svg,.talos-data-grid-empty .empty-icon .lucide{width:36px;height:36px}.talos-data-grid-empty .empty-text{font-size:var(--talos-font-size-base, 14px);font-weight:var(--talos-font-weight-medium, 500)}.talos-data-grid-pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--talos-border-default, #cbd5e1);background-color:var(--talos-bg-surface, #ffffff);gap:12px;flex-wrap:wrap}.pagination-left{display:flex;align-items:center;gap:12px}.pagination-info{font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-muted, #64748b)}.pagination-size-selector{display:flex;align-items:center;gap:6px;font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-secondary, #334155)}.pagination-size-selector select{height:28px;padding:0 8px;font-size:var(--talos-font-size-sm, 13px);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 4px);background-color:var(--talos-bg-surface, #ffffff);color:var(--talos-text-primary, #0f172a);cursor:pointer;outline:none}.pagination-size-selector select:focus{border-color:var(--talos-border-focus, #2563eb)}.pagination-right{display:flex;align-items:center;gap:4px}.pagination-right ::ng-deep button.talos-btn svg,.pagination-right ::ng-deep button.talos-btn .lucide{width:14px;height:14px}.page-indicator{font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-secondary, #334155);font-weight:var(--talos-font-weight-medium, 500);padding:0 8px}.talos-data-grid-loading-overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}.talos-data-grid-loading-overlay ::ng-deep svg,.talos-data-grid-loading-overlay ::ng-deep .lucide,.talos-data-grid-loading-overlay svg,.talos-data-grid-loading-overlay .lucide{width:24px;height:24px;animation:talos-grid-spin .8s linear infinite}@keyframes talos-grid-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: TalosButtonDirective, selector: "button[talosButton], a[talosButton], button[talos-btn], a[talos-btn]", inputs: ["variant", "size", "iconOnly", "fullWidth", "pill", "loading", "disabled", "animation", "spinning", "popping", "feedback"] }, { kind: "component", type: TalosGridStatusCellComponent, selector: "talos-grid-status-cell", inputs: ["row", "column", "rawValue"] }, { kind: "component", type: TalosGridActionsCellComponent, selector: "talos-grid-actions-cell", inputs: ["row", "rowIndex", "actions"], outputs: ["actionClick"] }, { kind: "component", type: TalosGridFilterDialogComponent, selector: "talos-grid-filter-dialog", inputs: ["column", "distinctValues", "currentFilter", "align"], outputs: ["filterApplied", "filterCleared", "closed"] }, { kind: "pipe", type: TalosGridCellFormatPipe, name: "talosGridCellFormat" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-data-grid', imports: [
+                        NgComponentOutlet,
+                        NgTemplateOutlet,
+                        OverlayModule,
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
+                        TalosButtonDirective,
+                        TalosGridStatusCellComponent,
+                        TalosGridActionsCellComponent,
+                        TalosGridFilterDialogComponent,
+                        TalosGridCellFormatPipe,
+                    ], host: {
+                        class: 'talos-data-grid-host',
+                    }, template: "<div\n  class=\"talos-data-grid-container\"\n  [class.density-compact]=\"density() === 'compact'\"\n  [class.density-comfortable]=\"density() === 'comfortable'\"\n  [class.density-spacious]=\"density() === 'spacious'\"\n  [class.is-bordered]=\"bordered()\"\n  [class.is-striped]=\"striped()\"\n  [class.is-resizing]=\"isResizing()\"\n>\n  <!-- Loading overlay -->\n  @if (loading()) {\n    <div class=\"talos-data-grid-loading-overlay\">\n      <ng-container *ngComponentOutlet=\"loaderIcon\" />\n    </div>\n  }\n\n  <!-- Main Scrollable Table Wrapper -->\n  <div class=\"talos-data-grid-table-wrapper\">\n    <table class=\"talos-data-grid-table\" [class.has-resizable-columns]=\"hasResizableColumns()\" role=\"grid\">\n      <thead>\n        <!-- Header Column Row -->\n        <tr>\n          @for (col of columns(); track col.field) {\n            <th\n              #thEl\n              [style.width]=\"getColumnWidth(col)\"\n              [style.min-width]=\"col.minWidth\"\n              [style.max-width]=\"col.maxWidth\"\n              [class.align-left]=\"!col.align || col.align === 'left'\"\n              [class.align-center]=\"col.align === 'center'\"\n              [class.align-right]=\"col.align === 'right'\"\n              [class.is-sortable]=\"isSortable(col)\"\n              [class.is-sorted]=\"isSorted(col)\"\n              [class.is-resizable]=\"isResizable(col)\"\n              [class.is-resizing]=\"isColumnResizing(col.field)\"\n              (click)=\"onHeaderClick(col)\"\n              role=\"columnheader\"\n              [attr.aria-sort]=\"getAriaSort(col)\"\n            >\n              <div class=\"header-content-wrapper\">\n                <span class=\"header-title\" [title]=\"col.header\">{{ col.header }}</span>\n                @if (isSortable(col) || isFilterable(col)) {\n                  <div class=\"header-tools\">\n                    @if (isSortable(col)) {\n                      <button\n                        talosButton\n                        variant=\"ghost\"\n                        size=\"xs\"\n                        [iconOnly]=\"true\"\n                        type=\"button\"\n                        class=\"header-sort-btn\"\n                        [class.is-sorted]=\"isSorted(col)\"\n                        (click)=\"$event.stopPropagation(); onHeaderClick(col)\"\n                        [attr.aria-label]=\"'Sort by ' + col.header\"\n                        [title]=\"'Sort by ' + col.header\"\n                      >\n                        @if (getSortDirection(col) === 'asc') {\n                          <ng-container *ngComponentOutlet=\"arrowUpIcon\" />\n                        } @else if (getSortDirection(col) === 'desc') {\n                          <ng-container *ngComponentOutlet=\"arrowDownIcon\" />\n                        } @else {\n                          <ng-container *ngComponentOutlet=\"arrowUpDownIcon\" />\n                        }\n                      </button>\n                    }\n                    @if (isFilterable(col)) {\n                      <div\n                        class=\"talos-grid-filter-anchor\"\n                        [class]=\"'filter-anchor-' + col.field\"\n                        cdkOverlayOrigin\n                        #filterOrigin=\"cdkOverlayOrigin\"\n                        (click)=\"$event.stopPropagation()\"\n                      >\n                        <button\n                          talosButton\n                          variant=\"ghost\"\n                          size=\"xs\"\n                          [iconOnly]=\"true\"\n                          type=\"button\"\n                          class=\"header-filter-btn\"\n                          [class.is-active]=\"hasFilter(col.field)\"\n                          [class.is-open]=\"isFilterDialogOpen(col.field)\"\n                          (click)=\"toggleFilterDialog(col.field, $event)\"\n                          [attr.aria-label]=\"'Filter ' + col.header\"\n                          title=\"Filter\"\n                        >\n                          <ng-container *ngComponentOutlet=\"filterIcon\" />\n                        </button>\n\n                        <ng-template\n                          cdkConnectedOverlay\n                          [cdkConnectedOverlayOrigin]=\"filterOrigin\"\n                          [cdkConnectedOverlayOpen]=\"isFilterDialogOpen(col.field)\"\n                          [cdkConnectedOverlayPositions]=\"overlayPositions\"\n                          [cdkConnectedOverlayPush]=\"true\"\n                          (overlayOutsideClick)=\"onOverlayOutsideClick($event, col.field)\"\n                        >\n                          <talos-grid-filter-dialog\n                            [column]=\"col\"\n                            [distinctValues]=\"activeColumnDistinctValues()\"\n                            [currentFilter]=\"getFilter(col.field)\"\n                            [align]=\"col.align === 'right' ? 'right' : 'left'\"\n                            (filterApplied)=\"onFilterApplied($event)\"\n                            (filterCleared)=\"onFilterCleared(col.field)\"\n                            (closed)=\"closeFilterDialog()\"\n                          />\n                        </ng-template>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n              @if (isResizable(col)) {\n                <div\n                  class=\"talos-grid-resize-handle\"\n                  [class.is-resizing]=\"isColumnResizing(col.field)\"\n                  (mousedown)=\"onResizeStart(col, $event, thEl)\"\n                  (touchstart)=\"onResizeStart(col, $event, thEl)\"\n                  (dblclick)=\"onResizeDoubleClick(col, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"'Resize ' + col.header + ' column'\"\n                  (keydown)=\"onResizeKeydown(col, $event, thEl)\"\n                ></div>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body with TrackBy for Optimal Refresh Performance -->\n      <tbody>\n        @for (row of pagedData(); track trackByRow($index, row)) {\n          <tr\n            [class.is-hoverable]=\"hoverable()\"\n            [class.is-clickable]=\"hasRowClickListeners\"\n            (click)=\"onRowClick(row, $index)\"\n            role=\"row\"\n          >\n            @for (col of columns(); track col.field) {\n              <td\n                [class.align-left]=\"!col.align || col.align === 'left'\"\n                [class.align-center]=\"col.align === 'center'\"\n                [class.align-right]=\"col.align === 'right'\"\n                role=\"gridcell\"\n              >\n                @if (col.cellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      col.cellTemplate;\n                      context: {\n                        $implicit: getCellValue(row, col),\n                        row: row,\n                        index: $index,\n                        column: col,\n                      }\n                    \"\n                  />\n                } @else if (col.type === 'status') {\n                  <talos-grid-status-cell\n                    [row]=\"row\"\n                    [column]=\"col\"\n                    [rawValue]=\"getCellValue(row, col)\"\n                  />\n                } @else if (col.type === 'actions' && col.actionsConfig) {\n                  <talos-grid-actions-cell\n                    [row]=\"row\"\n                    [rowIndex]=\"$index\"\n                    [actions]=\"col.actionsConfig\"\n                    (actionClick)=\"actionClick.emit($event)\"\n                  />\n                } @else {\n                  {{ row | talosGridCellFormat: col }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n\n    <!-- Empty State -->\n    @if (pagedData().length === 0) {\n      <div class=\"talos-data-grid-empty\">\n        <div class=\"empty-icon\">\n          <ng-container *ngComponentOutlet=\"inboxIcon\" />\n        </div>\n        <div class=\"empty-text\">\n          @if (hasActiveFilters()) {\n            <span>No results matching the active filters.</span>\n          } @else {\n            <span>{{ emptyMessage() }}</span>\n          }\n        </div>\n        @if (hasActiveFilters()) {\n          <button talosButton variant=\"outline\" size=\"sm\" (click)=\"clearAllFilters()\">\n            Clear Filters\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Pagination Bar -->\n  @if (pagination()) {\n    <div class=\"talos-data-grid-pagination\">\n      <div class=\"pagination-left\">\n        <span class=\"pagination-info\">\n          Showing {{ startRecord() }} to {{ endRecord() }} of {{ totalCount() }} entries\n        </span>\n\n        @if (pageSizeOptions().length > 1) {\n          <div class=\"pagination-size-selector\">\n            <span>Rows per page:</span>\n            <select\n              [value]=\"internalPageSize()\"\n              (change)=\"onPageSizeChange($event)\"\n              aria-label=\"Select page size\"\n            >\n              @for (size of pageSizeOptions(); track size) {\n                <option [value]=\"size\">{{ size }}</option>\n              }\n            </select>\n          </div>\n        }\n      </div>\n\n      <div class=\"pagination-right\">\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() <= 0\"\n          (click)=\"setPage(0)\"\n          title=\"First page\"\n          aria-label=\"First page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronsLeftIcon\" />\n        </button>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() <= 0\"\n          (click)=\"setPage(internalPageIndex() - 1)\"\n          title=\"Previous page\"\n          aria-label=\"Previous page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronLeftIcon\" />\n        </button>\n\n        <span class=\"page-indicator\">\n          Page {{ internalPageIndex() + 1 }} of {{ totalPages() }}\n        </span>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() >= totalPages() - 1\"\n          (click)=\"setPage(internalPageIndex() + 1)\"\n          title=\"Next page\"\n          aria-label=\"Next page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronRightIcon\" />\n        </button>\n\n        <button\n          talosButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [iconOnly]=\"true\"\n          [disabled]=\"internalPageIndex() >= totalPages() - 1\"\n          (click)=\"setPage(totalPages() - 1)\"\n          title=\"Last page\"\n          aria-label=\"Last page\"\n        >\n          <ng-container *ngComponentOutlet=\"chevronsRightIcon\" />\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;font-family:var(--talos-font-sans, system-ui, -apple-system, sans-serif);color:var(--talos-text-primary, #0f172a)}.talos-data-grid-container{display:flex;flex-direction:column;background-color:var(--talos-bg-surface, #ffffff);border-radius:var(--talos-radius-lg, 8px);position:relative;width:100%;overflow:hidden}.talos-data-grid-container.is-bordered{border:1px solid var(--talos-border-default, #cbd5e1)}.talos-data-grid-container.is-resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.talos-data-grid-container.is-resizing *{-webkit-user-select:none!important;user-select:none!important;cursor:col-resize!important}.talos-data-grid-table-wrapper{width:100%;overflow-x:auto;overflow-y:visible;position:relative;scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.talos-data-grid-table-wrapper::-webkit-scrollbar{height:6px;width:6px}.talos-data-grid-table-wrapper::-webkit-scrollbar-thumb{background:var(--talos-border-default, #cbd5e1);border-radius:4px}.talos-data-grid-table{width:100%;min-width:100%;border-collapse:collapse;text-align:left;font-size:var(--talos-font-size-sm, 13px);line-height:var(--talos-line-height-normal, 1.5)}.talos-data-grid-table.has-resizable-columns{table-layout:fixed;width:max-content;min-width:100%}.talos-data-grid-container.density-compact{--grid-header-padding-y: 6px;--grid-header-padding-x: 10px;--grid-cell-padding-y: 5px;--grid-cell-padding-x: 10px;--grid-font-size: 12px;--grid-header-font-size: 11px;--grid-filter-height: 24px}.talos-data-grid-container.density-comfortable{--grid-header-padding-y: 10px;--grid-header-padding-x: 14px;--grid-cell-padding-y: 9px;--grid-cell-padding-x: 14px;--grid-font-size: 13.5px;--grid-header-font-size: 12px;--grid-filter-height: 28px}.talos-data-grid-container.density-spacious{--grid-header-padding-y: 14px;--grid-header-padding-x: 18px;--grid-cell-padding-y: 14px;--grid-cell-padding-x: 18px;--grid-font-size: 14.5px;--grid-header-font-size: 13px;--grid-filter-height: 32px}.talos-data-grid-table thead th{position:relative;background-color:var(--talos-bg-subtle, #f8fafc);color:var(--talos-text-secondary, #475569);font-size:var(--grid-header-font-size, 12px);font-weight:var(--talos-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;padding:var(--grid-header-padding-y) 8px var(--grid-header-padding-y) var(--grid-header-padding-x);border-bottom:1px solid var(--talos-border-default, #cbd5e1);white-space:nowrap;-webkit-user-select:none;user-select:none;vertical-align:middle;overflow:hidden}.talos-data-grid-table thead th.is-sortable{cursor:pointer;transition:background-color var(--talos-transition, .15s ease)}.talos-data-grid-table thead th.is-sortable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f1f5f9);color:var(--talos-text-primary, #0f172a)}.talos-data-grid-table thead th.is-sorted{color:var(--talos-primary, #2563eb);background-color:var(--talos-primary-subtle-bg, #eff6ff)}.talos-data-grid-table thead th.is-resizable{padding-right:10px}.talos-data-grid-table thead th.is-resizing{background-color:var(--talos-neutral-subtle-bg-hover, #f1f5f9)}.header-content-wrapper{display:flex;align-items:center;gap:4px;width:100%;min-width:0;overflow:hidden}.header-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-tools{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sort-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;opacity:.45;transition:opacity var(--talos-transition, .15s ease),transform .15s ease}.sort-icon-wrapper ::ng-deep svg,.sort-icon-wrapper ::ng-deep .lucide,.sort-icon-wrapper svg,.sort-icon-wrapper .lucide{width:13px!important;height:13px!important;display:block}.is-sortable:hover .sort-icon-wrapper{opacity:.85}.is-sorted .sort-icon-wrapper{opacity:1;color:var(--talos-primary, #2563eb)}.header-sort-btn{width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;border-radius:var(--talos-radius-sm, 4px)!important;border:1px solid transparent!important;background:transparent!important;color:var(--talos-text-muted, #94a3b8)!important;cursor:pointer;opacity:.45;transition:all var(--talos-transition, .15s ease);box-shadow:none!important}.header-sort-btn ::ng-deep svg,.header-sort-btn ::ng-deep .lucide,.header-sort-btn svg,.header-sort-btn .lucide{width:13px!important;height:13px!important;display:block;flex-shrink:0}th:hover .header-sort-btn{opacity:.85}.header-sort-btn:hover{opacity:1;color:var(--talos-text-primary, #0f172a)!important;background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .06))!important}.header-sort-btn.is-sorted{opacity:1;color:var(--talos-primary, #2563eb)!important;background:var(--talos-primary-subtle-bg, #eff6ff)!important}.align-left{text-align:left}.align-left .header-content-wrapper{justify-content:flex-start}.align-center{text-align:center}.align-center .header-content-wrapper{justify-content:center}.align-right{text-align:right}.align-right .header-content-wrapper{justify-content:flex-end}.talos-grid-resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:2;display:flex;align-items:center;justify-content:center}.talos-grid-resize-handle:after{content:\"\";display:block;width:2px;height:50%;border-radius:1px;background-color:transparent;transition:background-color var(--talos-transition, .15s ease),height var(--talos-transition, .15s ease)}.talos-grid-resize-handle:hover:after,.talos-grid-resize-handle:focus-visible:after,.talos-grid-resize-handle.is-resizing:after{background-color:var(--talos-primary, #2563eb);height:100%}.talos-grid-resize-handle:focus-visible{outline:none}.talos-grid-filter-anchor{position:relative;display:inline-flex;align-items:center}.header-filter-btn{display:inline-flex;align-items:center;justify-content:center;width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;border-radius:var(--talos-radius-sm, 4px)!important;border:1px solid transparent!important;background:transparent!important;color:var(--talos-text-muted, #94a3b8)!important;cursor:pointer;opacity:.5;transition:all var(--talos-transition, .15s ease);box-shadow:none!important}.header-filter-btn ::ng-deep svg,.header-filter-btn ::ng-deep .lucide,.header-filter-btn svg,.header-filter-btn .lucide{width:13px!important;height:13px!important;display:block;flex-shrink:0}th:hover .header-filter-btn{opacity:.85}.header-filter-btn:hover,.header-filter-btn.is-open{opacity:1;color:var(--talos-text-primary, #0f172a)!important;background:var(--talos-neutral-subtle-bg-hover, rgba(0, 0, 0, .06))!important}.header-filter-btn.is-active{opacity:1;color:#fff!important;background:var(--talos-primary, #2563eb)!important;border-color:var(--talos-primary, #2563eb)!important}.talos-data-grid-table tbody tr{border-bottom:1px solid var(--talos-border-subtle, #f1f5f9);transition:background-color var(--talos-transition, .12s ease)}.talos-data-grid-table tbody tr.is-hoverable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f8fafc)}.talos-data-grid-table tbody tr.is-clickable{cursor:pointer}.talos-data-grid-container.is-striped .talos-data-grid-table tbody tr:nth-child(2n){background-color:var(--talos-bg-subtle, #fcfdfe)}.talos-data-grid-container.is-striped .talos-data-grid-table tbody tr:nth-child(2n).is-hoverable:hover{background-color:var(--talos-neutral-subtle-bg-hover, #f8fafc)}.talos-data-grid-table tbody td{padding:var(--grid-cell-padding-y) var(--grid-cell-padding-x);font-size:var(--grid-font-size, 13.5px);color:var(--talos-text-primary, #0f172a);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.talos-data-grid-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--talos-text-muted, #64748b);text-align:center;gap:12px}.talos-data-grid-empty .empty-icon{opacity:.5;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.talos-data-grid-empty .empty-icon ::ng-deep svg,.talos-data-grid-empty .empty-icon ::ng-deep .lucide,.talos-data-grid-empty .empty-icon svg,.talos-data-grid-empty .empty-icon .lucide{width:36px;height:36px}.talos-data-grid-empty .empty-text{font-size:var(--talos-font-size-base, 14px);font-weight:var(--talos-font-weight-medium, 500)}.talos-data-grid-pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--talos-border-default, #cbd5e1);background-color:var(--talos-bg-surface, #ffffff);gap:12px;flex-wrap:wrap}.pagination-left{display:flex;align-items:center;gap:12px}.pagination-info{font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-muted, #64748b)}.pagination-size-selector{display:flex;align-items:center;gap:6px;font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-secondary, #334155)}.pagination-size-selector select{height:28px;padding:0 8px;font-size:var(--talos-font-size-sm, 13px);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-sm, 4px);background-color:var(--talos-bg-surface, #ffffff);color:var(--talos-text-primary, #0f172a);cursor:pointer;outline:none}.pagination-size-selector select:focus{border-color:var(--talos-border-focus, #2563eb)}.pagination-right{display:flex;align-items:center;gap:4px}.pagination-right ::ng-deep button.talos-btn svg,.pagination-right ::ng-deep button.talos-btn .lucide{width:14px;height:14px}.page-indicator{font-size:var(--talos-font-size-sm, 13px);color:var(--talos-text-secondary, #334155);font-weight:var(--talos-font-weight-medium, 500);padding:0 8px}.talos-data-grid-loading-overlay{position:absolute;inset:0;background:#ffffffb3;display:flex;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}.talos-data-grid-loading-overlay ::ng-deep svg,.talos-data-grid-loading-overlay ::ng-deep .lucide,.talos-data-grid-loading-overlay svg,.talos-data-grid-loading-overlay .lucide{width:24px;height:24px;animation:talos-grid-spin .8s linear infinite}@keyframes talos-grid-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], clientSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientSort", required: false }] }], clientPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientPagination", required: false }] }], clientFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientFilter", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }] } });
+
+class TalosDataGridModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridModule, imports: [TalosDataGridComponent,
+            TalosGridStatusCellComponent,
+            TalosGridActionsCellComponent,
+            TalosGridFilterDialogComponent,
+            TalosGridCellFormatPipe], exports: [TalosDataGridComponent,
+            TalosGridStatusCellComponent,
+            TalosGridActionsCellComponent,
+            TalosGridFilterDialogComponent,
+            TalosGridCellFormatPipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridModule, imports: [TalosDataGridComponent,
+            TalosGridStatusCellComponent,
+            TalosGridFilterDialogComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosDataGridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TalosDataGridComponent,
+                        TalosGridStatusCellComponent,
+                        TalosGridActionsCellComponent,
+                        TalosGridFilterDialogComponent,
+                        TalosGridCellFormatPipe,
+                    ],
+                    exports: [
+                        TalosDataGridComponent,
+                        TalosGridStatusCellComponent,
+                        TalosGridActionsCellComponent,
+                        TalosGridFilterDialogComponent,
+                        TalosGridCellFormatPipe,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TalosDataGridComponent, TalosDataGridModule, TalosGridActionsCellComponent, TalosGridCellFormatPipe, TalosGridFilterDialogComponent, TalosGridStatusCellComponent };
+//# sourceMappingURL=weeehaoooz-talos-ui-data-display-data-grid.mjs.map