@weeehaoooz/talos-ui 0.1.1 → 0.1.2

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

@@ -1,1627 +0,0 @@
-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