integra-ng 20.1.6 → 20.1.7

package/fesm2022/integra-ng.mjs

@@ -3098,8 +3098,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * @remarks
  * This component implements ControlValueAccessor for seamless integration with Angular Forms.
  * Radio buttons with the same `name` attribute work as a group, allowing only one selection.
+ *
+ * Note: For Reactive Forms (formControlName), the component will attempt to infer the `name`
+ * from the `formControlName` directive when `name` is not explicitly set, but it's still
+ * recommended to set the `name` Input for clarity and group scoping.
  */
 class IRadioButton {
+    elementRef;
+    cdr;
+    injector;
     /**
      * Label text displayed next to the radio button
      */
@@ -3140,6 +3147,11 @@ class IRadioButton {
      * @internal
      */
     _modelValue;
+    // Grouping state shared across instances (name + form scope)
+    static groupSubjects = new Map();
+    static groupValues = new Map();
+    groupKey;
+    subscription;
     /**
      * Callback for ControlValueAccessor
      * @internal
@@ -3150,6 +3162,11 @@ class IRadioButton {
      * @internal
      */
     onTouchedCallback = () => { };
+    constructor(elementRef, cdr, injector) {
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.injector = injector;
+    }
     /**
      * Gets the effective input ID
      */
@@ -3178,6 +3195,14 @@ class IRadioButton {
             setTimeout(() => {
                 this.onChange.emit(this.value);
             }, 0);
+            // Notify group subscribers (if name is provided)
+            if (this.groupKey) {
+                const subject = IRadioButton.groupSubjects.get(this.groupKey);
+                if (subject) {
+                    IRadioButton.groupValues.set(this.groupKey, this.value);
+                    subject.next(this.value);
+                }
+            }
         }
     }
     /**
@@ -3186,6 +3211,69 @@ class IRadioButton {
      */
     writeValue(value) {
         this._modelValue = value;
+        // If the control receives a value, notify the group so all members update
+        if (this.groupKey) {
+            const current = IRadioButton.groupValues.get(this.groupKey);
+            if (current !== value) {
+                let subject = IRadioButton.groupSubjects.get(this.groupKey);
+                if (!subject) {
+                    subject = new Subject();
+                    IRadioButton.groupSubjects.set(this.groupKey, subject);
+                }
+                IRadioButton.groupValues.set(this.groupKey, value);
+                subject.next(value);
+            }
+        }
+    }
+    ngOnInit() {
+        // If the consumer used reactive forms but didn't provide a 'name' input,
+        // try to use the NgControl name for grouping
+        const ngControl = this.injector.get(NgControl, null);
+        if (!this.name && ngControl?.name) {
+            try {
+                this.name = String(ngControl.name);
+            }
+            catch { }
+        }
+        // Only group radios when a common name is provided
+        if (!this.name)
+            return;
+        // compute a form-scoped key: name@formId or name@root
+        const form = this.elementRef.nativeElement.closest('form');
+        let formKey = 'root';
+        if (form) {
+            formKey = form.id || form.getAttribute('data-integrang-form-id') || UniqueComponentId('i-radio-form-');
+            if (!form.id && !form.getAttribute('data-integrang-form-id')) {
+                form.setAttribute('data-integrang-form-id', formKey);
+            }
+        }
+        this.groupKey = `${this.name}@${formKey}`;
+        // ensure subject exists
+        let subject = IRadioButton.groupSubjects.get(this.groupKey);
+        if (!subject) {
+            subject = new Subject();
+            IRadioButton.groupSubjects.set(this.groupKey, subject);
+        }
+        // subscribe to group changes
+        this.subscription = subject.subscribe((value) => {
+            // update model and view
+            this._modelValue = value;
+            // run change detection to update CSS classes
+            this.cdr.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        // Cleanup: if there are no more observers for this group, remove the subject and value
+        if (this.groupKey) {
+            const subject = IRadioButton.groupSubjects.get(this.groupKey);
+            if (subject && subject.observers && subject.observers.length === 0) {
+                IRadioButton.groupSubjects.delete(this.groupKey);
+                IRadioButton.groupValues.delete(this.groupKey);
+            }
+        }
     }
     /**
      * Registers the onChange callback (ControlValueAccessor)
@@ -3208,7 +3296,7 @@ class IRadioButton {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: IRadioButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: IRadioButton, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: IRadioButton, isStandalone: true, selector: "i-radio-button", inputs: { label: "label", value: "value", name: "name", inputId: "inputId", disabled: "disabled", fluid: "fluid" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -3226,7 +3314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                             multi: true,
                         },
                     ], template: "<div\n  class=\"i-radio-button-wrapper\"\n  [class.i-radio-button--disabled]=\"disabled\"\n  [class.i-radio-button--fluid]=\"fluid\"\n>\n  <div\n    class=\"i-radio-button\"\n    [class.i-radio-button--checked]=\"checked\"\n    (click)=\"select()\"\n    [attr.id]=\"effectiveInputId\"\n    role=\"radio\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-labelledby]=\"label ? effectiveInputId + '-label' : null\"\n    tabindex=\"0\"\n    (keydown.space)=\"$event.preventDefault(); select()\"\n  >\n    <span class=\"i-radio-button-icon\"></span>\n  </div>\n  @if (label) {\n  <label\n    [id]=\"effectiveInputId + '-label'\"\n    class=\"i-radio-button-label\"\n    (click)=\"select()\"\n  >\n    {{ label }}\n  </label>\n  }\n</div>\n", styles: [".i-radio-button-wrapper .i-radio-button{border:1px solid var(--surface-border);background-color:var(--surface-ground)}.i-radio-button-wrapper .i-radio-button:hover:not(.i-radio-button--disabled){border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button:focus{box-shadow:0 2px 10px #0003}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked{border-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:var(--color-primary)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked:hover{border-color:color-mix(in srgb,var(--color-primary) 80%,transparent)}.i-radio-button-wrapper .i-radio-button-label{color:var(--color-text-primary)}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button{border-color:#e0e0e0;background-color:#f5f5f5}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked{border-color:#e0e0e0}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button.i-radio-button--checked .i-radio-button-icon{background-color:#9e9e9e}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{color:#9e9e9e}.i-radio-button-wrapper{display:inline-flex;align-items:center;gap:8px;font-size:1em}.i-radio-button-wrapper.i-radio-button--fluid{display:flex;width:100%}.i-radio-button-wrapper.i-radio-button--disabled{opacity:.6;cursor:not-allowed}.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button,.i-radio-button-wrapper.i-radio-button--disabled .i-radio-button-label{cursor:not-allowed;pointer-events:none}.i-radio-button-wrapper .i-radio-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:all .15s ease;cursor:pointer;box-sizing:border-box}.i-radio-button-wrapper .i-radio-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.i-radio-button-wrapper .i-radio-button .i-radio-button-icon{width:10px;height:10px;border-radius:50%;transition:all .15s ease;transform:scale(0)}.i-radio-button-wrapper .i-radio-button.i-radio-button--checked .i-radio-button-icon{transform:scale(1)}.i-radio-button-wrapper .i-radio-button-label{cursor:pointer;-webkit-user-select:none;user-select:none;line-height:1.4}\n"] }]
-        }], propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }], propDecorators: { label: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -3868,6 +3956,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
+/**
+ * Panel Component
+ *
+ * A collapsible panel container with a header that can be toggled open/closed.
+ * Displays a minus/plus icon to indicate the collapsed state.
+ *
+ * @example
+ * ```html
+ * <!-- Basic panel -->
+ * <i-panel header="Options">
+ *   <p>Content goes here</p>
+ * </i-panel>
+ *
+ * <!-- Initially collapsed panel -->
+ * <i-panel header="Settings" [collapsed]="true">
+ *   <p>Settings content</p>
+ * </i-panel>
+ *
+ * <!-- Panel with toggle event -->
+ * <i-panel header="Details" (onToggle)="handleToggle($event)">
+ *   <p>Detailed information</p>
+ * </i-panel>
+ *
+ * <!-- Non-toggleable panel -->
+ * <i-panel header="Fixed Section" [toggleable]="false">
+ *   <p>Always visible content</p>
+ * </i-panel>
+ * ```
+ *
+ * @remarks
+ * Use content projection to add any content inside the panel body.
+ * The panel header shows a minus icon when expanded and plus icon when collapsed.
+ */
+class IPanel {
+    /**
+     * The header/title text displayed in the panel
+     */
+    header = '';
+    /**
+     * Whether the panel content is collapsed
+     * @default false
+     */
+    collapsed = false;
+    /**
+     * Whether the panel can be toggled
+     * @default true
+     */
+    toggleable = true;
+    /**
+     * Event emitted when collapsed state changes
+     */
+    collapsedChange = new EventEmitter();
+    /**
+     * Event emitted when panel is toggled
+     */
+    onToggle = new EventEmitter();
+    /**
+     * Unique component identifier
+     * @internal
+     */
+    componentId = UniqueComponentId('i-panel-');
+    /**
+     * Toggles the panel collapsed state
+     * @internal
+     */
+    toggle() {
+        if (!this.toggleable) {
+            return;
+        }
+        this.collapsed = !this.collapsed;
+        this.collapsedChange.emit(this.collapsed);
+        this.onToggle.emit(this.collapsed);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: IPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: IPanel, isStandalone: true, selector: "i-panel", inputs: { header: "header", collapsed: "collapsed", toggleable: "toggleable" }, outputs: { collapsedChange: "collapsedChange", onToggle: "onToggle" }, ngImport: i0, template: "<div\n  class=\"i-panel\"\n  [class.i-panel--collapsed]=\"collapsed\"\n  [class.i-panel--toggleable]=\"toggleable\"\n  [attr.id]=\"componentId\"\n>\n  <div class=\"i-panel-header-wrap\">\n    @if (toggleable) {\n    <button\n      class=\"i-panel-header\"\n      type=\"button\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"!collapsed\"\n    >\n      <i\n        class=\"i-panel-toggle-icon pi\"\n        [class.pi-minus]=\"!collapsed\"\n        [class.pi-plus]=\"collapsed\"\n        aria-hidden=\"true\"\n      ></i>\n      <span class=\"i-panel-title\">{{ header }}</span>\n    </button>\n    }\n\n    @if (!toggleable) {\n    <div class=\"i-panel-header\">\n      <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n      <span class=\"i-panel-title\">{{ header }}</span>\n    </div>\n    }\n  </div>\n  <div class=\"i-panel-content-wrapper\" [class.i-panel-content-wrapper--collapsed]=\"collapsed\">\n    <div class=\"i-panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:var(--surface-card)}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:var(--color-text-secondary)}.i-panel.i-panel--toggleable .i-panel-header:hover{background:var(--surface-hover)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel{border-radius:8px;overflow:visible;position:relative;padding-top:.9rem;min-height:3rem}.i-panel .i-panel-header-wrap{position:absolute;top:0;left:0;right:0;height:0;z-index:1}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:.5rem;position:relative;top:0;transform:translateY(-50%);padding:.25rem .75rem;margin-left:1.25rem;background:var(--surface-card);-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:var(--surface-card);cursor:pointer;padding:.25rem .75rem;font-family:inherit;color:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:.75rem;font-weight:600;display:inline-block}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:.875rem;line-height:1;display:inline-block;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:hidden;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0}.i-panel .i-panel-content{padding:1rem}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: IPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-panel', template: "<div\n  class=\"i-panel\"\n  [class.i-panel--collapsed]=\"collapsed\"\n  [class.i-panel--toggleable]=\"toggleable\"\n  [attr.id]=\"componentId\"\n>\n  <div class=\"i-panel-header-wrap\">\n    @if (toggleable) {\n    <button\n      class=\"i-panel-header\"\n      type=\"button\"\n      (click)=\"toggle()\"\n      [attr.aria-expanded]=\"!collapsed\"\n    >\n      <i\n        class=\"i-panel-toggle-icon pi\"\n        [class.pi-minus]=\"!collapsed\"\n        [class.pi-plus]=\"collapsed\"\n        aria-hidden=\"true\"\n      ></i>\n      <span class=\"i-panel-title\">{{ header }}</span>\n    </button>\n    }\n\n    @if (!toggleable) {\n    <div class=\"i-panel-header\">\n      <i class=\"i-panel-toggle-icon\" aria-hidden=\"true\"></i>\n      <span class=\"i-panel-title\">{{ header }}</span>\n    </div>\n    }\n  </div>\n  <div class=\"i-panel-content-wrapper\" [class.i-panel-content-wrapper--collapsed]=\"collapsed\">\n    <div class=\"i-panel-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".i-panel{background:var(--surface-card);color:var(--color-text-primary);border:1px solid var(--surface-border)}.i-panel .i-panel-header{color:var(--color-text-secondary);background:var(--surface-card)}.i-panel .i-panel-header .i-panel-toggle-icon{color:var(--color-primary)}.i-panel .i-panel-header .i-panel-title{color:var(--color-text-secondary)}.i-panel.i-panel--toggleable .i-panel-header:hover{background:var(--surface-hover)}.i-panel .i-panel-content{color:var(--color-text-primary)}.i-panel{border-radius:8px;overflow:visible;position:relative;padding-top:.9rem;min-height:3rem}.i-panel .i-panel-header-wrap{position:absolute;top:0;left:0;right:0;height:0;z-index:1}.i-panel .i-panel-header-wrap .i-panel-header{display:inline-flex;flex-direction:row;align-items:center;gap:.5rem;position:relative;top:0;transform:translateY(-50%);padding:.25rem .75rem;margin-left:1.25rem;background:var(--surface-card);-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.i-panel .i-panel-header-wrap .i-panel-header.i-panel-header:where(button){border:none;background:var(--surface-card);cursor:pointer;padding:.25rem .75rem;font-family:inherit;color:inherit}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-toggle-icon{font-size:.75rem;font-weight:600;display:inline-block}.i-panel .i-panel-header-wrap .i-panel-header .i-panel-title{font-weight:500;font-size:.875rem;line-height:1;display:inline-block;white-space:nowrap}.i-panel .i-panel-content-wrapper{overflow:hidden;transition:max-height .3s ease,opacity .2s ease;max-height:1000px;opacity:1}.i-panel .i-panel-content-wrapper.i-panel-content-wrapper--collapsed{max-height:0;opacity:0}.i-panel .i-panel-content{padding:1rem}\n"] }]
+        }], propDecorators: { header: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], toggleable: [{
+                type: Input
+            }], collapsedChange: [{
+                type: Output
+            }], onToggle: [{
+                type: Output
+            }] } });
+
 /**
  * Select Component
  *
@@ -6303,7 +6482,7 @@ class ITable {
         return column.field;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ITable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: ITable, isStandalone: true, selector: "i-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: false, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: false, isRequired: false, transformFunction: null }, rowExpandable: { classPropertyName: "rowExpandable", publicName: "rowExpandable", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onAction: "onAction", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Global Filter -->\n  @if (globalFilter) {\n  <div class=\"i-table-header\">\n    <div class=\"i-table-global-filter\">\n      <i-input-text\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"globalFilterValue()\"\n        (ngModelChange)=\"onGlobalFilterInput($event)\"\n        [fluid]=\"false\"\n        [icon]=\"'pi pi-search'\"\n      ></i-input-text>\n    </div>\n  </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n  <div class=\"i-table-loading-overlay\">\n    <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n  </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [style.max-height]=\"height || scrollHeight || null\"\n  >\n    <table class=\"i-table\">\n      <!-- Table Header (sticky when scrollable) -->\n      <thead>\n        <!-- Column Filters Row -->\n        @if (filterable) {\n        <tr class=\"i-table-filter-row\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          }\n          @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          }\n          @for (column of columns(); track trackByColumn($index, column)) {\n            @if (column.filterable !== false) {\n            <th [style.width]=\"getColumnWidth(column)\">\n              <input\n                type=\"text\"\n                class=\"i-table-column-filter\"\n                placeholder=\"Filter...\"\n                [ngModel]=\"columnFilters()[column.field] || ''\"\n                (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n              />\n            </th>\n            } @else {\n            <th [style.width]=\"getColumnWidth(column)\"></th>\n            }\n          }\n          @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\"></th>\n          }\n        </tr>\n        }\n\n        <!-- Column Headers Row -->\n        <tr>\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\">\n            <i-checkbox\n              [ngModel]=\"areAllRowsSelected()\"\n              [indeterminate]=\"areSomeRowsSelected()\"\n              (ngModelChange)=\"toggleAllSelection()\"\n            ></i-checkbox>\n          </th>\n          }\n          @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          }\n          @for (column of columns(); track trackByColumn($index, column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n            [class.i-table-sortable-column]=\"sortable && column.sortable\"\n            [class.i-table-sorted]=\"sortField === column.field\"\n            (click)=\"onSortColumn(column)\"\n          >\n            <div class=\"i-table-header-content\">\n              <span class=\"i-table-header-text\">{{ column.header }}</span>\n              @if (sortable && column.sortable) {\n              <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n              }\n            </div>\n            @if (resizableColumns) {\n            <span\n              class=\"i-table-column-resizer\"\n              (mousedown)=\"onColumnResizeStart($event, column)\"\n            ></span>\n            }\n          </th>\n          }\n          @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody>\n        @if (processedData().length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-empty-state-table></i-empty-state-table>\n          </td>\n        </tr>\n        } @else {\n          @for (row of processedData(); track trackByRow($index, row); let rowIndex = $index) {\n          <tr\n            [class.i-table-row-odd]=\"$odd\"\n            [class.i-table-row-selected]=\"isRowSelected(row)\"\n            (click)=\"toggleRowSelection(row)\"\n          >\n            @if (selectionMode === 'multiple') {\n            <td class=\"i-table-selection-cell\">\n              <i-checkbox\n                [ngModel]=\"isRowSelected(row)\"\n                (ngModelChange)=\"toggleRowSelection(row, $event)\"\n              ></i-checkbox>\n            </td>\n            }\n            @if (rowExpandable) {\n            <td class=\"i-table-expand-cell\">\n              <i-button\n                severity=\"secondary\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"isRowExpanded(row) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n                (clicked)=\"toggleRowExpansion(row, $event)\"\n              ></i-button>\n            </td>\n            }\n            @for (column of columns(); track trackByColumn($index, column)) {\n            <td\n              [style.text-align]=\"column.align || 'left'\"\n              [style.width]=\"getColumnWidth(column)\"\n            >\n              {{ formatCellValue(getCellValue(row, column.field), column) }}\n            </td>\n            }\n            @if (showActions && actions.length > 0) {\n            <td class=\"i-table-actions-cell\">\n              <div class=\"i-table-actions\">\n                @for (action of actions; track action.id) {\n                <i-button\n                  [severity]=\"action.severity || 'secondary'\"\n                  [text]=\"true\"\n                  size=\"small\"\n                  [icon]=\"action.icon || ''\"\n                  [disabled]=\"isActionDisabled(action, row)\"\n                  (clicked)=\"onActionClick(action, row, $event)\"\n                >\n                  @if (action.label) {\n                  {{ action.label }}\n                  }\n                </i-button>\n                }\n              </div>\n            </td>\n            }\n          </tr>\n          <!-- Expanded Row Content -->\n          @if (rowExpandable && isRowExpanded(row)) {\n          <tr class=\"i-table-expanded-row\">\n            <td\n              [attr.colspan]=\"\n                columns().length +\n                (selectionMode === 'multiple' ? 1 : 0) +\n                1 +\n                (showActions && actions.length > 0 ? 1 : 0)\n              \"\n            >\n              <div class=\"i-table-expanded-content\">\n                <pre>{{ row | json }}</pre>\n              </div>\n            </td>\n          </tr>\n          }\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n</div>", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--surface-ground)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row).i-table-row-selected:hover{background:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper .i-table-header{display:flex;justify-content:flex-end;align-items:center;padding:12px 16px}.i-table-wrapper .i-table-header .i-table-global-filter{width:250px}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:2rem}.i-table-wrapper .i-table-container{overflow-x:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.85rem;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:.875rem;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:.85rem;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-table-wrapper th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:.8rem}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:.85rem}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:1rem}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.i-table-wrapper .i-table-header{padding:8px 12px}.i-table-wrapper .i-table-header .i-table-global-filter{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid"], outputs: ["clicked"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: EmptyStateTableComponent, selector: "i-empty-state-table", inputs: ["colorScheme"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: ITable, isStandalone: true, selector: "i-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: false, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: false, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: false, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: false, isRequired: false, transformFunction: null }, filterDelay: { classPropertyName: "filterDelay", publicName: "filterDelay", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: false, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: false, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: false, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: false, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: false, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: false, isRequired: false, transformFunction: null }, rowExpandable: { classPropertyName: "rowExpandable", publicName: "rowExpandable", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort", onFilter: "onFilter", selectionChange: "selectionChange", onSelectionChange: "onSelectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onAction: "onAction", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse" }, host: { listeners: { "document:mousemove": "onColumnResize($event)", "document:mouseup": "onColumnResizeEnd()" } }, ngImport: i0, template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Global Filter -->\n  @if (globalFilter) {\n  <div class=\"i-table-header\">\n    <div class=\"i-table-global-filter\">\n      <i-input-text\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"globalFilterValue()\"\n        (ngModelChange)=\"onGlobalFilterInput($event)\"\n        [fluid]=\"false\"\n        [icon]=\"'pi pi-search'\"\n      ></i-input-text>\n    </div>\n  </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n  <div class=\"i-table-loading-overlay\">\n    <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n  </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [style.max-height]=\"height || scrollHeight || null\"\n  >\n    <table class=\"i-table\">\n      <!-- Table Header (sticky when scrollable) -->\n      <thead>\n        <!-- Column Filters Row -->\n        @if (filterable) {\n        <tr class=\"i-table-filter-row\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          @if (column.filterable !== false) {\n          <th [style.width]=\"getColumnWidth(column)\">\n            <input\n              type=\"text\"\n              class=\"i-table-column-filter\"\n              placeholder=\"Filter...\"\n              [ngModel]=\"columnFilters()[column.field] || ''\"\n              (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n            />\n          </th>\n          } @else {\n          <th [style.width]=\"getColumnWidth(column)\"></th>\n          } } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\"></th>\n          }\n        </tr>\n        }\n\n        <!-- Column Headers Row -->\n        <tr>\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\">\n            <i-checkbox\n              [ngModel]=\"areAllRowsSelected()\"\n              [indeterminate]=\"areSomeRowsSelected()\"\n              (ngModelChange)=\"toggleAllSelection()\"\n            ></i-checkbox>\n          </th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n            [class.i-table-sortable-column]=\"sortable && column.sortable\"\n            [class.i-table-sorted]=\"sortField === column.field\"\n            (click)=\"onSortColumn(column)\"\n          >\n            <div class=\"i-table-header-content\">\n              <span class=\"i-table-header-text\">{{ column.header }}</span>\n              @if (sortable && column.sortable) {\n              <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n              }\n            </div>\n            @if (resizableColumns) {\n            <span\n              class=\"i-table-column-resizer\"\n              (mousedown)=\"onColumnResizeStart($event, column)\"\n            ></span>\n            }\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody>\n        @if (processedData().length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-empty-state-table></i-empty-state-table>\n          </td>\n        </tr>\n        } @else { @for (row of processedData(); track trackByRow($index, row);\n        let rowIndex = $index) {\n        <tr\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [ngModel]=\"isRowSelected(row)\"\n              (ngModelChange)=\"toggleRowSelection(row, $event)\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } }\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--surface-ground)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row).i-table-row-selected:hover{background:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper .i-table-header{display:flex;justify-content:flex-end;align-items:center;padding:12px 16px}.i-table-wrapper .i-table-header .i-table-global-filter{width:250px}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:2rem}.i-table-wrapper .i-table-container{overflow-x:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.85rem;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:.875rem;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:.85rem;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-table-wrapper th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:.8rem}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:.85rem}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:1rem}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.i-table-wrapper .i-table-header{padding:8px 12px}.i-table-wrapper .i-table-header .i-table-global-filter{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IInputText, selector: "i-input-text", inputs: ["label", "type", "id", "fluid", "forceFloated", "hideText", "useFloatLabel", "placeholder", "externalInvalid", "externalErrorMessage", "backgroundStyle", "icon", "readonly", "disabled", "errorMessages"] }, { kind: "component", type: IButton, selector: "i-button", inputs: ["severity", "size", "type", "disabled", "outlined", "raised", "text", "icon", "fluid"], outputs: ["clicked"] }, { kind: "component", type: ICheckbox, selector: "i-checkbox", inputs: ["label", "id", "disabled", "readonly", "size", "indeterminate", "checked"], outputs: ["onChange"] }, { kind: "component", type: EmptyStateTableComponent, selector: "i-empty-state-table", inputs: ["colorScheme"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ITable, decorators: [{
             type: Component,
@@ -6314,7 +6493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         IButton,
                         ICheckbox,
                         EmptyStateTableComponent,
-                    ], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Global Filter -->\n  @if (globalFilter) {\n  <div class=\"i-table-header\">\n    <div class=\"i-table-global-filter\">\n      <i-input-text\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"globalFilterValue()\"\n        (ngModelChange)=\"onGlobalFilterInput($event)\"\n        [fluid]=\"false\"\n        [icon]=\"'pi pi-search'\"\n      ></i-input-text>\n    </div>\n  </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n  <div class=\"i-table-loading-overlay\">\n    <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n  </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [style.max-height]=\"height || scrollHeight || null\"\n  >\n    <table class=\"i-table\">\n      <!-- Table Header (sticky when scrollable) -->\n      <thead>\n        <!-- Column Filters Row -->\n        @if (filterable) {\n        <tr class=\"i-table-filter-row\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          }\n          @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          }\n          @for (column of columns(); track trackByColumn($index, column)) {\n            @if (column.filterable !== false) {\n            <th [style.width]=\"getColumnWidth(column)\">\n              <input\n                type=\"text\"\n                class=\"i-table-column-filter\"\n                placeholder=\"Filter...\"\n                [ngModel]=\"columnFilters()[column.field] || ''\"\n                (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n              />\n            </th>\n            } @else {\n            <th [style.width]=\"getColumnWidth(column)\"></th>\n            }\n          }\n          @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\"></th>\n          }\n        </tr>\n        }\n\n        <!-- Column Headers Row -->\n        <tr>\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\">\n            <i-checkbox\n              [ngModel]=\"areAllRowsSelected()\"\n              [indeterminate]=\"areSomeRowsSelected()\"\n              (ngModelChange)=\"toggleAllSelection()\"\n            ></i-checkbox>\n          </th>\n          }\n          @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          }\n          @for (column of columns(); track trackByColumn($index, column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n            [class.i-table-sortable-column]=\"sortable && column.sortable\"\n            [class.i-table-sorted]=\"sortField === column.field\"\n            (click)=\"onSortColumn(column)\"\n          >\n            <div class=\"i-table-header-content\">\n              <span class=\"i-table-header-text\">{{ column.header }}</span>\n              @if (sortable && column.sortable) {\n              <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n              }\n            </div>\n            @if (resizableColumns) {\n            <span\n              class=\"i-table-column-resizer\"\n              (mousedown)=\"onColumnResizeStart($event, column)\"\n            ></span>\n            }\n          </th>\n          }\n          @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody>\n        @if (processedData().length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-empty-state-table></i-empty-state-table>\n          </td>\n        </tr>\n        } @else {\n          @for (row of processedData(); track trackByRow($index, row); let rowIndex = $index) {\n          <tr\n            [class.i-table-row-odd]=\"$odd\"\n            [class.i-table-row-selected]=\"isRowSelected(row)\"\n            (click)=\"toggleRowSelection(row)\"\n          >\n            @if (selectionMode === 'multiple') {\n            <td class=\"i-table-selection-cell\">\n              <i-checkbox\n                [ngModel]=\"isRowSelected(row)\"\n                (ngModelChange)=\"toggleRowSelection(row, $event)\"\n              ></i-checkbox>\n            </td>\n            }\n            @if (rowExpandable) {\n            <td class=\"i-table-expand-cell\">\n              <i-button\n                severity=\"secondary\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"isRowExpanded(row) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"\n                (clicked)=\"toggleRowExpansion(row, $event)\"\n              ></i-button>\n            </td>\n            }\n            @for (column of columns(); track trackByColumn($index, column)) {\n            <td\n              [style.text-align]=\"column.align || 'left'\"\n              [style.width]=\"getColumnWidth(column)\"\n            >\n              {{ formatCellValue(getCellValue(row, column.field), column) }}\n            </td>\n            }\n            @if (showActions && actions.length > 0) {\n            <td class=\"i-table-actions-cell\">\n              <div class=\"i-table-actions\">\n                @for (action of actions; track action.id) {\n                <i-button\n                  [severity]=\"action.severity || 'secondary'\"\n                  [text]=\"true\"\n                  size=\"small\"\n                  [icon]=\"action.icon || ''\"\n                  [disabled]=\"isActionDisabled(action, row)\"\n                  (clicked)=\"onActionClick(action, row, $event)\"\n                >\n                  @if (action.label) {\n                  {{ action.label }}\n                  }\n                </i-button>\n                }\n              </div>\n            </td>\n            }\n          </tr>\n          <!-- Expanded Row Content -->\n          @if (rowExpandable && isRowExpanded(row)) {\n          <tr class=\"i-table-expanded-row\">\n            <td\n              [attr.colspan]=\"\n                columns().length +\n                (selectionMode === 'multiple' ? 1 : 0) +\n                1 +\n                (showActions && actions.length > 0 ? 1 : 0)\n              \"\n            >\n              <div class=\"i-table-expanded-content\">\n                <pre>{{ row | json }}</pre>\n              </div>\n            </td>\n          </tr>\n          }\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n</div>", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--surface-ground)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row).i-table-row-selected:hover{background:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper .i-table-header{display:flex;justify-content:flex-end;align-items:center;padding:12px 16px}.i-table-wrapper .i-table-header .i-table-global-filter{width:250px}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:2rem}.i-table-wrapper .i-table-container{overflow-x:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.85rem;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:.875rem;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:.85rem;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-table-wrapper th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:.8rem}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:.85rem}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:1rem}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.i-table-wrapper .i-table-header{padding:8px 12px}.i-table-wrapper .i-table-header .i-table-global-filter{width:100%}}\n"] }]
+                    ], template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Global Filter -->\n  @if (globalFilter) {\n  <div class=\"i-table-header\">\n    <div class=\"i-table-global-filter\">\n      <i-input-text\n        [useFloatLabel]=\"false\"\n        placeholder=\"Search...\"\n        [ngModel]=\"globalFilterValue()\"\n        (ngModelChange)=\"onGlobalFilterInput($event)\"\n        [fluid]=\"false\"\n        [icon]=\"'pi pi-search'\"\n      ></i-input-text>\n    </div>\n  </div>\n  }\n\n  <!-- Loading Overlay -->\n  @if (loading) {\n  <div class=\"i-table-loading-overlay\">\n    <i class=\"pi pi-spin pi-spinner i-table-loading-icon\"></i>\n  </div>\n  }\n\n  <!-- Scrollable Table Container -->\n  <div\n    class=\"i-table-container\"\n    [class.i-table-container--scrollable]=\"scrollable || height || scrollHeight\"\n    [style.max-height]=\"height || scrollHeight || null\"\n  >\n    <table class=\"i-table\">\n      <!-- Table Header (sticky when scrollable) -->\n      <thead>\n        <!-- Column Filters Row -->\n        @if (filterable) {\n        <tr class=\"i-table-filter-row\">\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\"></th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          @if (column.filterable !== false) {\n          <th [style.width]=\"getColumnWidth(column)\">\n            <input\n              type=\"text\"\n              class=\"i-table-column-filter\"\n              placeholder=\"Filter...\"\n              [ngModel]=\"columnFilters()[column.field] || ''\"\n              (ngModelChange)=\"onColumnFilterInput(column.field, $event)\"\n            />\n          </th>\n          } @else {\n          <th [style.width]=\"getColumnWidth(column)\"></th>\n          } } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\"></th>\n          }\n        </tr>\n        }\n\n        <!-- Column Headers Row -->\n        <tr>\n          @if (selectionMode === 'multiple') {\n          <th class=\"i-table-selection-header\">\n            <i-checkbox\n              [ngModel]=\"areAllRowsSelected()\"\n              [indeterminate]=\"areSomeRowsSelected()\"\n              (ngModelChange)=\"toggleAllSelection()\"\n            ></i-checkbox>\n          </th>\n          } @if (rowExpandable) {\n          <th class=\"i-table-expand-header\"></th>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <th\n            [style.width]=\"getColumnWidth(column)\"\n            [style.text-align]=\"column.align || 'left'\"\n            [class.i-table-sortable-column]=\"sortable && column.sortable\"\n            [class.i-table-sorted]=\"sortField === column.field\"\n            (click)=\"onSortColumn(column)\"\n          >\n            <div class=\"i-table-header-content\">\n              <span class=\"i-table-header-text\">{{ column.header }}</span>\n              @if (sortable && column.sortable) {\n              <i [class]=\"getSortIcon(column)\" class=\"i-table-sort-icon\"></i>\n              }\n            </div>\n            @if (resizableColumns) {\n            <span\n              class=\"i-table-column-resizer\"\n              (mousedown)=\"onColumnResizeStart($event, column)\"\n            ></span>\n            }\n          </th>\n          } @if (showActions && actions.length > 0) {\n          <th class=\"i-table-actions-header\">Actions</th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody>\n        @if (processedData().length === 0) {\n        <tr class=\"i-table-empty-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              (rowExpandable ? 1 : 0) +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <i-empty-state-table></i-empty-state-table>\n          </td>\n        </tr>\n        } @else { @for (row of processedData(); track trackByRow($index, row);\n        let rowIndex = $index) {\n        <tr\n          [class.i-table-row-odd]=\"$odd\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === 'multiple') {\n          <td class=\"i-table-selection-cell\">\n            <i-checkbox\n              [ngModel]=\"isRowSelected(row)\"\n              (ngModelChange)=\"toggleRowSelection(row, $event)\"\n            ></i-checkbox>\n          </td>\n          } @if (rowExpandable) {\n          <td class=\"i-table-expand-cell\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              [icon]=\"\n                isRowExpanded(row)\n                  ? 'pi pi-chevron-down'\n                  : 'pi pi-chevron-right'\n              \"\n              (clicked)=\"toggleRowExpansion(row, $event)\"\n            ></i-button>\n          </td>\n          } @for (column of columns(); track trackByColumn($index, column)) {\n          <td\n            [style.text-align]=\"column.align || 'left'\"\n            [style.width]=\"getColumnWidth(column)\"\n          >\n            {{ formatCellValue(getCellValue(row, column.field), column) }}\n          </td>\n          } @if (showActions && actions.length > 0) {\n          <td class=\"i-table-actions-cell\">\n            <div class=\"i-table-actions\">\n              @for (action of actions; track action.id) {\n              <i-button\n                [severity]=\"action.severity || 'secondary'\"\n                [text]=\"true\"\n                size=\"small\"\n                [icon]=\"action.icon || ''\"\n                [disabled]=\"isActionDisabled(action, row)\"\n                (clicked)=\"onActionClick(action, row, $event)\"\n              >\n                @if (action.label) {\n                {{ action.label }}\n                }\n              </i-button>\n              }\n            </div>\n          </td>\n          }\n        </tr>\n        <!-- Expanded Row Content -->\n        @if (rowExpandable && isRowExpanded(row)) {\n        <tr class=\"i-table-expanded-row\">\n          <td\n            [attr.colspan]=\"\n              columns().length +\n              (selectionMode === 'multiple' ? 1 : 0) +\n              1 +\n              (showActions && actions.length > 0 ? 1 : 0)\n            \"\n          >\n            <div class=\"i-table-expanded-content\">\n              <pre>{{ row | json }}</pre>\n            </div>\n          </td>\n        </tr>\n        } } }\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [".i-table-wrapper{color:var(--color-text-primary);background:var(--color-component-background)}.i-table-wrapper .i-table-header{background:var(--surface-section);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-global-filter .i-input-text{background:var(--surface-ground)}.i-table-wrapper .i-table-loading-overlay{background:#ffffffb3}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{color:var(--color-primary)}.i-table-wrapper table thead tr{background:var(--surface-section)}.i-table-wrapper table thead tr th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table thead tr th.i-table-sortable-column{cursor:pointer}.i-table-wrapper table thead tr th.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper table thead tr th.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table thead tr th .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper table thead tr th.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper table thead .i-table-filter-row th{background:var(--surface-ground)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--color-component-background);color:var(--color-text-primary)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);box-shadow:0 2px 10px #0003;outline:none}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper table tbody tr{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody tr td{color:var(--color-text-primary)}.i-table-wrapper table tbody tr.i-table-row-odd{background:var(--surface-ground)}.i-table-wrapper table tbody tr.i-table-row-selected{background:rgba(var(--color-primary-rgb, 59, 130, 246),.1)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--surface-section)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:var(--surface-ground);border:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--surface-ground)}.i-table-wrapper.i-table--bordered table,.i-table-wrapper.i-table--bordered table th,.i-table-wrapper.i-table--bordered table td{border:1px solid var(--surface-border)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):hover{background:var(--surface-hover)}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row).i-table-row-selected:hover{background:rgba(var(--color-primary-rgb, 59, 130, 246),.15)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}:host-context([data-theme=dark]) .i-table-loading-overlay{background:#00000080}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper .i-table-header{display:flex;justify-content:flex-end;align-items:center;padding:12px 16px}.i-table-wrapper .i-table-header .i-table-global-filter{width:250px}.i-table-wrapper .i-table-loading-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}.i-table-wrapper .i-table-loading-overlay .i-table-loading-icon{font-size:2rem}.i-table-wrapper .i-table-container{overflow-x:auto;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth;scrollbar-color:var(--color-text-secondary) transparent;scrollbar-width:thin;scrollbar-color:var(--color-text-secondary) rgba(0,0,0,.05)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:transparent;border-radius:3px}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:3px;transition:background .2s ease}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--color-text-secondary);opacity:.4}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.7}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:6px;height:6px}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:#0000000d;border-radius:3px;margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:3px;min-height:20px;background:var(--color-text-secondary);opacity:.6}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-primary);opacity:.8}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--color-primary);opacity:.9}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto}.i-table-wrapper .i-table-container--scrollable thead{position:sticky;top:0;z-index:2}.i-table-wrapper table{width:100%;border-collapse:collapse;table-layout:auto}.i-table-wrapper table thead tr th{position:relative;padding:12px 16px;font-weight:600;text-align:left;white-space:nowrap;-webkit-user-select:none;user-select:none}.i-table-wrapper table thead tr th .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table thead tr th .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.85rem;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column{transition:background-color .15s ease}.i-table-wrapper table thead tr th.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper table thead tr th.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper table thead tr th.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper table thead .i-table-filter-row th{padding:8px 16px}.i-table-wrapper table thead .i-table-filter-row th .i-table-column-filter{width:100%;padding:6px 10px;font-size:.875rem;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper table tbody{display:table-row-group}.i-table-wrapper table tbody tr{transition:background-color .15s ease}.i-table-wrapper table tbody tr td{padding:12px 16px;vertical-align:middle}.i-table-wrapper table tbody .i-table-empty-row td{padding:40px 16px;text-align:center}.i-table-wrapper table tbody .i-table-expanded-row td{padding:0}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content{padding:16px;margin:8px 16px;border-radius:4px}.i-table-wrapper table tbody .i-table-expanded-row td .i-table-expanded-content pre{margin:0;font-family:monospace;font-size:.85rem;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper .i-table-selection-header,.i-table-wrapper .i-table-selection-cell,.i-table-wrapper .i-table-expand-header,.i-table-wrapper .i-table-expand-cell{width:50px;text-align:center}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap}.i-table-wrapper .i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.i-table-wrapper .i-table-column-resizer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:60%;cursor:col-resize;opacity:0;transition:opacity .15s ease,background-color .15s ease}.i-table-wrapper .i-table-column-resizer:hover{opacity:1}.i-table-wrapper th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:.8rem}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:.85rem}.i-table-wrapper.i-table--small table .i-table-filter-row th{padding:4px 12px}.i-table-wrapper.i-table--large table thead th,.i-table-wrapper.i-table--large table tbody td{padding:16px 20px;font-size:1rem}.i-table-wrapper.i-table--large table .i-table-filter-row th{padding:12px 20px}.i-table-wrapper.i-table--scrollable table{table-layout:fixed}.i-table-wrapper.i-table--loading{pointer-events:none;-webkit-user-select:none;user-select:none}@media (max-width: 768px){.i-table-wrapper .i-table-header{padding:8px 12px}.i-table-wrapper .i-table-header .i-table-global-filter{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { emptyMessage: [{
                 type: Input
             }], sortable: [{
@@ -6493,5 +6672,5 @@ var zindexutils = ZIndexUtils();
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDialog, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, EmptyStateTableComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, ICheckbox, IChip, IDialog, IDialogActions, IDialogBase, IInputText, IListbox, IMessage, IMultiSelect, IRadioButton, ISelect, ITabPanel, ITable, ITabs, ITreeView, IWhisper, TooltipComponent, TooltipDirective, UniqueComponentId, WhisperService, ZIndexUtils, lastId };
+export { AbstractDialog, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, EmptyStateTableComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, ICheckbox, IChip, IDialog, IDialogActions, IDialogBase, IInputText, IListbox, IMessage, IMultiSelect, IPanel, IRadioButton, ISelect, ITabPanel, ITable, ITabs, ITreeView, IWhisper, TooltipComponent, TooltipDirective, UniqueComponentId, WhisperService, ZIndexUtils, lastId };
 //# sourceMappingURL=integra-ng.mjs.map