invensys-ng 22.1.1 → 22.1.3

package/fesm2022/invensys-ng.mjs

@@ -14,6 +14,7 @@ import { animate, state, style, transition, trigger } from "@angular/animations"
 import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
 import { Chart, registerables } from "chart.js";
 import * as i1 from "@angular/platform-browser";
+import { CdkDrag, CdkDragHandle, CdkDropList, moveItemInArray } from "@angular/cdk/drag-drop";
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
@@ -6753,8 +6754,8 @@ var IStepper = class IStepper {
 			predicate: IStep
 		}],
 		ngImport: i0,
-		template: "<div class=\"i-stepper\" [ngClass]=\"'i-stepper--' + orientation\" [attr.id]=\"componentId\">\n  <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n    @for (step of steps; track step; let index = $index; let last = $last) {\n      <li class=\"i-stepper__item\"\n        [class.i-stepper__item--active]=\"activeIndex === index\"\n        [class.i-stepper__item--completed]=\"step.completed\"\n        [class.i-stepper__item--disabled]=\"!canSelect(index)\">\n        <button class=\"i-stepper__trigger\" type=\"button\"\n          [attr.id]=\"componentId + '-step-' + index\"\n          [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n          [attr.aria-controls]=\"componentId + '-panel-' + index\"\n          [attr.aria-describedby]=\"step.description ? componentId + '-description-' + index : null\"\n          [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n          [disabled]=\"!canSelect(index)\"\n          (click)=\"selectStep($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\">\n          <span class=\"i-stepper__sr-only\">Step {{ index + 1 }} of {{ steps.length }}.</span>\n          <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n            @if (step.icon) { <i [ngClass]=\"step.icon\"></i> }\n            @else { {{ index + 1 }} }\n          </span>\n          <span class=\"i-stepper__copy\">\n            <span class=\"i-stepper__label\">{{ step.label }}</span>\n            @if (step.description) {\n              <span class=\"i-stepper__description\" [attr.id]=\"componentId + '-description-' + index\">{{ step.description }}</span>\n            }\n          </span>\n          @if (step.optional && !step.completed) { <span class=\"i-stepper__optional\">Optional</span> }\n          @if (step.completed) {\n            <span class=\"i-stepper__completion\"><i class=\"pi pi-check\" aria-hidden=\"true\"></i><span class=\"i-stepper__sr-only\">Completed.</span></span>\n          } @else if (!last) {\n            <i class=\"pi pi-chevron-right i-stepper__chevron\" aria-hidden=\"true\"></i>\n          }\n        </button>\n        @if (!last) { <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span> }\n      </li>\n    }\n  </ol>\n  @for (step of steps; track step; let index = $index) {\n    <section class=\"i-stepper__panel\"\n      [class.i-stepper__panel--active]=\"activeIndex === index\"\n      [attr.id]=\"componentId + '-panel-' + index\"\n      [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n      [attr.hidden]=\"activeIndex !== index || null\" role=\"region\">\n      @if (activeIndex === index) { <ng-container [ngTemplateOutlet]=\"step.contentTemplate\" /> }\n    </section>\n  }\n</div>\n",
-		styles: [":host{display:block;container-type:inline-size}.i-stepper{display:flex;width:100%;min-width:0}.i-stepper--horizontal{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}.i-stepper--vertical{gap:24px;align-items:flex-start}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%);display:grid;gap:16px}.i-stepper--vertical .i-stepper__panel{flex:1 1 0;min-width:0;padding-top:0}.i-stepper__navigation{margin:0;padding:0;list-style:none}.i-stepper__item{position:relative;min-width:0}.i-stepper__trigger{border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px;position:relative;z-index:1;box-sizing:border-box;height:100%;border:0;border-bottom:4px solid transparent;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}.i-stepper__indicator{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-stepper__indicator i{font-size:20px}.i-stepper__indicator{font-size:20px;line-height:1}.i-stepper__copy{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-stepper__label{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-stepper__description{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-stepper__completion{flex-shrink:0;font-size:18px;line-height:1}.i-stepper__optional{flex-shrink:0;font-size:.8em}.i-stepper__chevron{flex-shrink:0;font-size:12px}.i-stepper__connector{position:absolute;left:100%;top:50%;width:24px;height:2px;transform:translateY(-50%)}.i-stepper--vertical .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--vertical .i-stepper__chevron{transform:rotate(90deg)}.i-stepper__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.i-stepper__panel{display:none;padding-top:24px}.i-stepper__panel--active{display:block}@container (max-width: 900px){.i-stepper--horizontal .i-stepper__navigation{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:16px}.i-stepper--horizontal .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--horizontal .i-stepper__chevron{transform:rotate(90deg)}}@container (max-width: 768px){.i-stepper--vertical{flex-direction:column}.i-stepper--vertical .i-stepper__navigation{flex-basis:auto;width:100%}}@media(prefers-reduced-motion:reduce){.i-stepper__trigger{transition:none}}.i-stepper{color:var(--color-text-primary)}.i-stepper__trigger{background:var(--surface-section);color:var(--color-text-primary);border-bottom-color:var(--color-text-tertiary)}.i-stepper__trigger:hover:not(:disabled){background:var(--surface-hover)}.i-stepper__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-stepper__trigger:disabled{cursor:not-allowed}.i-stepper__indicator{color:var(--color-text-tertiary)}.i-stepper__optional{color:var(--color-text-secondary)}.i-stepper__completion{color:var(--color-success)}.i-stepper__chevron{color:var(--color-text-secondary)}.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--completed>.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__chevron{color:var(--color-primary)}.i-stepper__item--completed .i-stepper__trigger{border-bottom-color:var(--color-success)}.i-stepper__item--completed .i-stepper__indicator{color:var(--color-success)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__trigger{border-bottom-color:var(--color-primary)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__indicator{color:var(--color-primary)}.i-stepper__item--disabled{opacity:.55}\n"],
+		template: "<div class=\"i-stepper\" [ngClass]=\"'i-stepper--' + orientation\" [attr.id]=\"componentId\">\n  <div class=\"i-stepper__body\">\n  <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n    @for (step of steps; track step; let index = $index; let last = $last) {\n      <li class=\"i-stepper__item\"\n        [class.i-stepper__item--active]=\"activeIndex === index\"\n        [class.i-stepper__item--completed]=\"step.completed\"\n        [class.i-stepper__item--disabled]=\"!canSelect(index)\">\n        <button class=\"i-stepper__trigger\" type=\"button\"\n          [attr.id]=\"componentId + '-step-' + index\"\n          [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n          [attr.aria-controls]=\"componentId + '-panel-' + index\"\n          [attr.aria-describedby]=\"step.description ? componentId + '-description-' + index : null\"\n          [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n          [disabled]=\"!canSelect(index)\"\n          (click)=\"selectStep($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\">\n          <span class=\"i-stepper__sr-only\">Step {{ index + 1 }} of {{ steps.length }}.</span>\n          <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n            @if (step.icon) { <i [ngClass]=\"step.icon\"></i> }\n            @else { {{ index + 1 }} }\n          </span>\n          <span class=\"i-stepper__copy\">\n            <span class=\"i-stepper__label\">{{ step.label }}</span>\n            @if (step.description) {\n              <span class=\"i-stepper__description\" [attr.id]=\"componentId + '-description-' + index\">{{ step.description }}</span>\n            }\n          </span>\n          @if (step.optional && !step.completed) { <span class=\"i-stepper__optional\">Optional</span> }\n          @if (step.completed) {\n            <span class=\"i-stepper__completion\"><i class=\"pi pi-check\" aria-hidden=\"true\"></i><span class=\"i-stepper__sr-only\">Completed.</span></span>\n          } @else if (!last) {\n            <i class=\"pi pi-chevron-right i-stepper__chevron\" aria-hidden=\"true\"></i>\n          }\n        </button>\n        @if (!last) { <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span> }\n      </li>\n    }\n  </ol>\n  @for (step of steps; track step; let index = $index) {\n    <section class=\"i-stepper__panel\"\n      [class.i-stepper__panel--active]=\"activeIndex === index\"\n      [attr.id]=\"componentId + '-panel-' + index\"\n      [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n      [attr.hidden]=\"activeIndex !== index || null\" role=\"region\">\n      @if (activeIndex === index) { <ng-container [ngTemplateOutlet]=\"step.contentTemplate\" /> }\n    </section>\n  }\n  </div>\n  <div class=\"i-stepper__actions\"><ng-content select=\"[stepperActions]\" /></div>\n</div>\n",
+		styles: [":host{display:block;container-type:inline-size}.i-stepper{display:flex;flex-direction:column;width:100%;min-width:0}.i-stepper__body{display:flex;min-width:0}.i-stepper--horizontal .i-stepper__body{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}.i-stepper--vertical .i-stepper__body{gap:24px;align-items:flex-start}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%);display:grid;gap:16px}.i-stepper--vertical .i-stepper__panel{flex:1 1 0;min-width:0;padding-top:0}.i-stepper__navigation{margin:0;padding:0;list-style:none}.i-stepper__item{position:relative;min-width:0}.i-stepper__trigger{border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px;position:relative;z-index:1;box-sizing:border-box;height:100%;border:0;border-bottom:4px solid transparent;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}.i-stepper__indicator{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-stepper__indicator i{font-size:20px}.i-stepper__indicator{font-size:20px;line-height:1}.i-stepper__copy{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-stepper__label{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-stepper__description{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-stepper__completion{flex-shrink:0;font-size:18px;line-height:1}.i-stepper__optional{flex-shrink:0;font-size:.8em}.i-stepper__chevron{flex-shrink:0;font-size:12px}.i-stepper__connector{position:absolute;left:100%;top:50%;width:24px;height:2px;transform:translateY(-50%)}.i-stepper--vertical .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--vertical .i-stepper__chevron{transform:rotate(90deg)}.i-stepper__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.i-stepper__panel{display:none;min-width:0;padding-top:24px}.i-stepper__panel--active{display:flow-root}.i-stepper__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.i-stepper__actions:empty{display:none}@container (max-width: 900px){.i-stepper--horizontal .i-stepper__navigation{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:16px}.i-stepper--horizontal .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--horizontal .i-stepper__chevron{transform:rotate(90deg)}}@container (max-width: 768px){.i-stepper--vertical .i-stepper__body{flex-direction:column}.i-stepper--vertical .i-stepper__navigation,.i-stepper--vertical .i-stepper__panel{flex-basis:auto;width:100%}}@media(prefers-reduced-motion:reduce){.i-stepper__trigger{transition:none}}.i-stepper{color:var(--color-text-primary)}.i-stepper__trigger{background:var(--surface-section);color:var(--color-text-primary);border-bottom-color:var(--color-text-tertiary)}.i-stepper__trigger:hover:not(:disabled){background:var(--surface-hover)}.i-stepper__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-stepper__trigger:disabled{cursor:not-allowed}.i-stepper__indicator{color:var(--color-text-tertiary)}.i-stepper__optional{color:var(--color-text-secondary)}.i-stepper__completion{color:var(--color-success)}.i-stepper__chevron{color:var(--color-text-secondary)}.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--completed>.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__chevron{color:var(--color-primary)}.i-stepper__item--completed .i-stepper__trigger{border-bottom-color:var(--color-success)}.i-stepper__item--completed .i-stepper__indicator{color:var(--color-success)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__trigger{border-bottom-color:var(--color-primary)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__indicator{color:var(--color-primary)}.i-stepper__item--disabled{opacity:.55}\n"],
 		dependencies: [{
 			kind: "directive",
 			type: NgClass,
@@ -6785,8 +6786,8 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			imports: [NgClass, NgTemplateOutlet],
 			changeDetection: ChangeDetectionStrategy.Eager,
-			template: "<div class=\"i-stepper\" [ngClass]=\"'i-stepper--' + orientation\" [attr.id]=\"componentId\">\n  <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n    @for (step of steps; track step; let index = $index; let last = $last) {\n      <li class=\"i-stepper__item\"\n        [class.i-stepper__item--active]=\"activeIndex === index\"\n        [class.i-stepper__item--completed]=\"step.completed\"\n        [class.i-stepper__item--disabled]=\"!canSelect(index)\">\n        <button class=\"i-stepper__trigger\" type=\"button\"\n          [attr.id]=\"componentId + '-step-' + index\"\n          [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n          [attr.aria-controls]=\"componentId + '-panel-' + index\"\n          [attr.aria-describedby]=\"step.description ? componentId + '-description-' + index : null\"\n          [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n          [disabled]=\"!canSelect(index)\"\n          (click)=\"selectStep($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\">\n          <span class=\"i-stepper__sr-only\">Step {{ index + 1 }} of {{ steps.length }}.</span>\n          <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n            @if (step.icon) { <i [ngClass]=\"step.icon\"></i> }\n            @else { {{ index + 1 }} }\n          </span>\n          <span class=\"i-stepper__copy\">\n            <span class=\"i-stepper__label\">{{ step.label }}</span>\n            @if (step.description) {\n              <span class=\"i-stepper__description\" [attr.id]=\"componentId + '-description-' + index\">{{ step.description }}</span>\n            }\n          </span>\n          @if (step.optional && !step.completed) { <span class=\"i-stepper__optional\">Optional</span> }\n          @if (step.completed) {\n            <span class=\"i-stepper__completion\"><i class=\"pi pi-check\" aria-hidden=\"true\"></i><span class=\"i-stepper__sr-only\">Completed.</span></span>\n          } @else if (!last) {\n            <i class=\"pi pi-chevron-right i-stepper__chevron\" aria-hidden=\"true\"></i>\n          }\n        </button>\n        @if (!last) { <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span> }\n      </li>\n    }\n  </ol>\n  @for (step of steps; track step; let index = $index) {\n    <section class=\"i-stepper__panel\"\n      [class.i-stepper__panel--active]=\"activeIndex === index\"\n      [attr.id]=\"componentId + '-panel-' + index\"\n      [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n      [attr.hidden]=\"activeIndex !== index || null\" role=\"region\">\n      @if (activeIndex === index) { <ng-container [ngTemplateOutlet]=\"step.contentTemplate\" /> }\n    </section>\n  }\n</div>\n",
-			styles: [":host{display:block;container-type:inline-size}.i-stepper{display:flex;width:100%;min-width:0}.i-stepper--horizontal{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}.i-stepper--vertical{gap:24px;align-items:flex-start}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%);display:grid;gap:16px}.i-stepper--vertical .i-stepper__panel{flex:1 1 0;min-width:0;padding-top:0}.i-stepper__navigation{margin:0;padding:0;list-style:none}.i-stepper__item{position:relative;min-width:0}.i-stepper__trigger{border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px;position:relative;z-index:1;box-sizing:border-box;height:100%;border:0;border-bottom:4px solid transparent;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}.i-stepper__indicator{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-stepper__indicator i{font-size:20px}.i-stepper__indicator{font-size:20px;line-height:1}.i-stepper__copy{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-stepper__label{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-stepper__description{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-stepper__completion{flex-shrink:0;font-size:18px;line-height:1}.i-stepper__optional{flex-shrink:0;font-size:.8em}.i-stepper__chevron{flex-shrink:0;font-size:12px}.i-stepper__connector{position:absolute;left:100%;top:50%;width:24px;height:2px;transform:translateY(-50%)}.i-stepper--vertical .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--vertical .i-stepper__chevron{transform:rotate(90deg)}.i-stepper__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.i-stepper__panel{display:none;padding-top:24px}.i-stepper__panel--active{display:block}@container (max-width: 900px){.i-stepper--horizontal .i-stepper__navigation{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:16px}.i-stepper--horizontal .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--horizontal .i-stepper__chevron{transform:rotate(90deg)}}@container (max-width: 768px){.i-stepper--vertical{flex-direction:column}.i-stepper--vertical .i-stepper__navigation{flex-basis:auto;width:100%}}@media(prefers-reduced-motion:reduce){.i-stepper__trigger{transition:none}}.i-stepper{color:var(--color-text-primary)}.i-stepper__trigger{background:var(--surface-section);color:var(--color-text-primary);border-bottom-color:var(--color-text-tertiary)}.i-stepper__trigger:hover:not(:disabled){background:var(--surface-hover)}.i-stepper__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-stepper__trigger:disabled{cursor:not-allowed}.i-stepper__indicator{color:var(--color-text-tertiary)}.i-stepper__optional{color:var(--color-text-secondary)}.i-stepper__completion{color:var(--color-success)}.i-stepper__chevron{color:var(--color-text-secondary)}.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--completed>.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__chevron{color:var(--color-primary)}.i-stepper__item--completed .i-stepper__trigger{border-bottom-color:var(--color-success)}.i-stepper__item--completed .i-stepper__indicator{color:var(--color-success)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__trigger{border-bottom-color:var(--color-primary)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__indicator{color:var(--color-primary)}.i-stepper__item--disabled{opacity:.55}\n"]
+			template: "<div class=\"i-stepper\" [ngClass]=\"'i-stepper--' + orientation\" [attr.id]=\"componentId\">\n  <div class=\"i-stepper__body\">\n  <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n    @for (step of steps; track step; let index = $index; let last = $last) {\n      <li class=\"i-stepper__item\"\n        [class.i-stepper__item--active]=\"activeIndex === index\"\n        [class.i-stepper__item--completed]=\"step.completed\"\n        [class.i-stepper__item--disabled]=\"!canSelect(index)\">\n        <button class=\"i-stepper__trigger\" type=\"button\"\n          [attr.id]=\"componentId + '-step-' + index\"\n          [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n          [attr.aria-controls]=\"componentId + '-panel-' + index\"\n          [attr.aria-describedby]=\"step.description ? componentId + '-description-' + index : null\"\n          [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n          [disabled]=\"!canSelect(index)\"\n          (click)=\"selectStep($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\">\n          <span class=\"i-stepper__sr-only\">Step {{ index + 1 }} of {{ steps.length }}.</span>\n          <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n            @if (step.icon) { <i [ngClass]=\"step.icon\"></i> }\n            @else { {{ index + 1 }} }\n          </span>\n          <span class=\"i-stepper__copy\">\n            <span class=\"i-stepper__label\">{{ step.label }}</span>\n            @if (step.description) {\n              <span class=\"i-stepper__description\" [attr.id]=\"componentId + '-description-' + index\">{{ step.description }}</span>\n            }\n          </span>\n          @if (step.optional && !step.completed) { <span class=\"i-stepper__optional\">Optional</span> }\n          @if (step.completed) {\n            <span class=\"i-stepper__completion\"><i class=\"pi pi-check\" aria-hidden=\"true\"></i><span class=\"i-stepper__sr-only\">Completed.</span></span>\n          } @else if (!last) {\n            <i class=\"pi pi-chevron-right i-stepper__chevron\" aria-hidden=\"true\"></i>\n          }\n        </button>\n        @if (!last) { <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span> }\n      </li>\n    }\n  </ol>\n  @for (step of steps; track step; let index = $index) {\n    <section class=\"i-stepper__panel\"\n      [class.i-stepper__panel--active]=\"activeIndex === index\"\n      [attr.id]=\"componentId + '-panel-' + index\"\n      [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n      [attr.hidden]=\"activeIndex !== index || null\" role=\"region\">\n      @if (activeIndex === index) { <ng-container [ngTemplateOutlet]=\"step.contentTemplate\" /> }\n    </section>\n  }\n  </div>\n  <div class=\"i-stepper__actions\"><ng-content select=\"[stepperActions]\" /></div>\n</div>\n",
+			styles: [":host{display:block;container-type:inline-size}.i-stepper{display:flex;flex-direction:column;width:100%;min-width:0}.i-stepper__body{display:flex;min-width:0}.i-stepper--horizontal .i-stepper__body{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px}.i-stepper--vertical .i-stepper__body{gap:24px;align-items:flex-start}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%);display:grid;gap:16px}.i-stepper--vertical .i-stepper__panel{flex:1 1 0;min-width:0;padding-top:0}.i-stepper__navigation{margin:0;padding:0;list-style:none}.i-stepper__item{position:relative;min-width:0}.i-stepper__trigger{border-radius:8px;box-shadow:0 4px 12px #00000026;overflow:hidden;display:flex;align-items:center;padding:12px 16px;width:100%;gap:12px;min-height:56px;position:relative;z-index:1;box-sizing:border-box;height:100%;border:0;border-bottom:4px solid transparent;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}.i-stepper__indicator{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.i-stepper__indicator i{font-size:20px}.i-stepper__indicator{font-size:20px;line-height:1}.i-stepper__copy{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.i-stepper__label{font-weight:600;font-size:1em;line-height:1.4;word-wrap:break-word}.i-stepper__description{font-size:.9em;line-height:1.4;word-wrap:break-word;opacity:.9}.i-stepper__completion{flex-shrink:0;font-size:18px;line-height:1}.i-stepper__optional{flex-shrink:0;font-size:.8em}.i-stepper__chevron{flex-shrink:0;font-size:12px}.i-stepper__connector{position:absolute;left:100%;top:50%;width:24px;height:2px;transform:translateY(-50%)}.i-stepper--vertical .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--vertical .i-stepper__chevron{transform:rotate(90deg)}.i-stepper__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.i-stepper__panel{display:none;min-width:0;padding-top:24px}.i-stepper__panel--active{display:flow-root}.i-stepper__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.i-stepper__actions:empty{display:none}@container (max-width: 900px){.i-stepper--horizontal .i-stepper__navigation{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:16px}.i-stepper--horizontal .i-stepper__connector{left:26px;top:100%;width:2px;height:16px;transform:none}.i-stepper--horizontal .i-stepper__chevron{transform:rotate(90deg)}}@container (max-width: 768px){.i-stepper--vertical .i-stepper__body{flex-direction:column}.i-stepper--vertical .i-stepper__navigation,.i-stepper--vertical .i-stepper__panel{flex-basis:auto;width:100%}}@media(prefers-reduced-motion:reduce){.i-stepper__trigger{transition:none}}.i-stepper{color:var(--color-text-primary)}.i-stepper__trigger{background:var(--surface-section);color:var(--color-text-primary);border-bottom-color:var(--color-text-tertiary)}.i-stepper__trigger:hover:not(:disabled){background:var(--surface-hover)}.i-stepper__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-stepper__trigger:disabled{cursor:not-allowed}.i-stepper__indicator{color:var(--color-text-tertiary)}.i-stepper__optional{color:var(--color-text-secondary)}.i-stepper__completion{color:var(--color-success)}.i-stepper__chevron{color:var(--color-text-secondary)}.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--completed>.i-stepper__connector{background:var(--surface-border)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__chevron{color:var(--color-primary)}.i-stepper__item--completed .i-stepper__trigger{border-bottom-color:var(--color-success)}.i-stepper__item--completed .i-stepper__indicator{color:var(--color-success)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__trigger{border-bottom-color:var(--color-primary)}.i-stepper__item--active:not(.i-stepper__item--completed) .i-stepper__indicator{color:var(--color-primary)}.i-stepper__item--disabled{opacity:.55}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -8512,8 +8513,8 @@ var ITable = class ITable {
 			descendants: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header: global filter + download -->\n  @if (globalFilter || downloadable) {\n    <div class=\"i-table-header\">\n      <div class=\"i-table-header-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n      <div class=\"i-table-header-end\">\n        @if (globalFilter) {\n          <div class=\"i-table-global-filter\">\n            <i-input-text\n              [useFloatLabel]=\"false\"\n              label=\"Search table\"\n              placeholder=\"Search…\"\n              [ngModel]=\"globalFilterValue()\"\n              (ngModelChange)=\"onGlobalFilterInput($event)\"\n              [fluid]=\"true\"\n              [icon]=\"'pi pi-search'\"\n            ></i-input-text>\n          </div>\n        }\n        @if (downloadable) {\n          <div class=\"i-table-download\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              icon=\"pi pi-download\"\n              label=\"Download\"\n              (clicked)=\"handleDownload()\"\n            ></i-button>\n          </div>\n        }\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  <!-- ================================================================\n       PATH A — Detail-expandable table\n       Uses a standard scrollable container so that nested <i-table>\n       components can expand inline below their parent rows.\n  ================================================================ -->\n  @if (hasDetails()) {\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter 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              <th class=\"i-table-expand-header\"></th>\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              <th class=\"i-table-detail-count-header\"></th>\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            <th class=\"i-table-expand-header\"></th>\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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            <th class=\"i-table-detail-count-header\"></th>\n            @if (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\n            <!-- Parent row -->\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                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              <td class=\"i-table-expand-cell\">\n                <i-button\n                  severity=\"secondary\"\n                  [text]=\"true\"\n                  size=\"xtra-small\"\n                  [icon]=\"\n                    isRowExpanded(row)\n                      ? 'pi pi-chevron-down'\n                      : 'pi pi-chevron-right'\n                  \"\n                  [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n                  [ariaExpanded]=\"isRowExpanded(row)\"\n                  (clicked)=\"toggleRowExpansion(row, $event)\"\n                ></i-button>\n              </td>\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              <td class=\"i-table-detail-count-cell\">\n                ({{ getDetailRowCount(row) }})\n              </td>\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [loading]=\"isActionLoading(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n\n            <!-- Detail expansion row -->\n            @if (isRowExpanded(row)) {\n              <tr class=\"i-table-expanded-row\">\n                <td\n                  [attr.colspan]=\"totalColspan()\"\n                  class=\"i-table-expanded-cell\"\n                >\n                  <div class=\"i-table-expanded-content\">\n                    <i-table\n                      [grid]=\"getDetailGrid(row)\"\n                      [rowBorders]=\"detailRowBorders\"\n                      [sortable]=\"sortable\"\n                      [filterable]=\"filterable\"\n                      [selectionMode]=\"selectionMode\"\n                      [selection]=\"selection\"\n                      [striped]=\"striped\"\n                      [hoverable]=\"hoverable\"\n                      [bordered]=\"bordered\"\n                      [size]=\"size\"\n                      [dataKey]=\"dataKey\"\n                      [resizableColumns]=\"resizableColumns\"\n                      (onSort)=\"onSort.emit($event)\"\n                      (onFilter)=\"onFilter.emit($event)\"\n                      (onSelectionChange)=\"onSelectionChange.emit($event)\"\n                      (selectionChange)=\"selectionChange.emit($event)\"\n                      (onRowSelect)=\"onRowSelect.emit($event)\"\n                      (onRowUnselect)=\"onRowUnselect.emit($event)\"\n                    ></i-table>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else if (virtualScroll) {\n    <!-- ================================================================\n         PATH B — CDK Virtual Scroll (div-based rows)\n         Use only for large row counts (≥ ~500 rows). Uses flex <div> rows\n         so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n      [style.height]=\"effectiveHeight()\"\n    >\n      <!-- Sticky header — flex rows that mirror the virtual body rows -->\n      <div class=\"i-table-virtual-header\">\n        @if (filterable) {\n          <div class=\"i-table-virtual-row i-table-filter-row\">\n            @if (selectionMode === \"multiple\") {\n              <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\n              @if (column.filterable !== false) {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                >\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                </div>\n              } @else {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                ></div>\n              }\n            }\n            @if (gridActions().length > 0) {\n              <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n            }\n          </div>\n        }\n        <div class=\"i-table-virtual-row i-table-header-row\">\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-header\">\n              <i-checkbox\n                [checked]=\"areAllRowsSelected()\"\n                [indeterminate]=\"areSomeRowsSelected()\"\n                (onChange)=\"toggleAllSelection()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell i-table-header-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\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\n                    [class]=\"getSortIcon(column)\"\n                    class=\"i-table-sort-icon\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-header\">\n              {{ grid().actionsHeader ?? 'Actions' }}\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Virtual Scroll Viewport — *cdkVirtualFor on <div>, not <tr> -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        @if (processedData().length === 0) {\n          <div class=\"i-table-virtual-row i-table-empty-row\">\n            <div\n              class=\"i-table-virtual-cell\"\n              style=\"flex: 1; text-align: center; padding: 40px 16px\"\n            >\n              <i-no-content />\n            </div>\n          </div>\n        }\n        <div\n          *cdkVirtualFor=\"\n            let row of processedData();\n            let rowIndex = index;\n            trackBy: trackByRow\n          \"\n          class=\"i-table-virtual-row\"\n          [style.height.px]=\"virtualScrollItemSize\"\n          [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-cell\">\n              <i-checkbox\n                [checked]=\"isRowSelected(row)\"\n                (onChange)=\"toggleRowSelection(row)\"\n                (click)=\"$event.stopPropagation()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n              [style.text-align]=\"column.align || 'left'\"\n              [ngClass]=\"\n                getCellSeverity(row, column)\n                  ? 'i-table-cell-' + getCellSeverity(row, column)\n                  : ''\n              \"\n            >\n              @if (isIconColumn(column)) {\n                <i\n                  [class]=\"getIconClasses(row, column)\"\n                  [style.font-size]=\"column.iconSize || '1rem'\"\n                ></i>\n              } @else if (isListColumn(column)) {\n                <div class=\"i-table-list-cell\">\n                  @for (item of getCellListItems(row, column); track item) {\n                    <i-chip [label]=\"item\"></i-chip>\n                  }\n                </div>\n              } @else {\n                <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n                  {{ formatCellValue(getCellValue(row, column.field), column) }}\n                </span>\n              }\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-cell\">\n              <div class=\"i-table-actions\">\n                @for (action of gridActions(); 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                        [loading]=\"isActionLoading(action, row)\"\n                    [iTooltip]=\"getActionTooltip(action, row)\"\n                        [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n                    [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                    (clicked)=\"triggerAction(action, row, $event)\"\n                  >\n                    @if (action.label) {\n                      {{ action.label }}\n                    }\n                  </i-button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  } @else {\n    <!-- ================================================================\n         PATH C — Regular scrollable table\n         Default for small/medium datasets and nested detail tables.\n         Uses a plain overflow container with a @for loop — no CDK needed.\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter 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              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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 (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\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                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getIconClasses(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [loading]=\"isActionLoading(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\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(--color-component-background)}.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(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);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(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.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--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-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):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.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:16px}.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}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.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:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.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-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;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 tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.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:1em;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 .i-table-expanded-content{padding:0;margin:2px 0 24px;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:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.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-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.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-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:0;max-width:100%;overflow-x:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:.75rem}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}\n"],
+		template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header: global filter + download -->\n  @if (globalFilter || downloadable) {\n    <div class=\"i-table-header\">\n      <div class=\"i-table-header-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n      <div class=\"i-table-header-end\">\n        @if (globalFilter) {\n          <div class=\"i-table-global-filter\">\n            <i-input-text\n              [useFloatLabel]=\"false\"\n              label=\"Search table\"\n              placeholder=\"Search…\"\n              [ngModel]=\"globalFilterValue()\"\n              (ngModelChange)=\"onGlobalFilterInput($event)\"\n              [fluid]=\"true\"\n              [icon]=\"'pi pi-search'\"\n            ></i-input-text>\n          </div>\n        }\n        @if (downloadable) {\n          <div class=\"i-table-download\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              icon=\"pi pi-download\"\n              label=\"Download\"\n              (clicked)=\"handleDownload()\"\n            ></i-button>\n          </div>\n        }\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  <!-- ================================================================\n       PATH A — Detail-expandable table\n       Uses a standard scrollable container so that nested <i-table>\n       components can expand inline below their parent rows.\n  ================================================================ -->\n  @if (hasDetails()) {\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter 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              <th class=\"i-table-expand-header\"></th>\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              <th class=\"i-table-detail-count-header\"></th>\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            <th class=\"i-table-expand-header\"></th>\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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            <th class=\"i-table-detail-count-header\"></th>\n            @if (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\n            <!-- Parent row -->\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                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              <td class=\"i-table-expand-cell\">\n                <i-button\n                  severity=\"secondary\"\n                  [text]=\"true\"\n                  size=\"xtra-small\"\n                  [icon]=\"\n                    isRowExpanded(row)\n                      ? 'pi pi-chevron-down'\n                      : 'pi pi-chevron-right'\n                  \"\n                  [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n                  [ariaExpanded]=\"isRowExpanded(row)\"\n                  (clicked)=\"toggleRowExpansion(row, $event)\"\n                ></i-button>\n              </td>\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              <td class=\"i-table-detail-count-cell\">\n                ({{ getDetailRowCount(row) }})\n              </td>\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [loading]=\"isActionLoading(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n\n            <!-- Detail expansion row -->\n            @if (isRowExpanded(row)) {\n              <tr class=\"i-table-expanded-row\">\n                <td\n                  [attr.colspan]=\"totalColspan()\"\n                  class=\"i-table-expanded-cell\"\n                >\n                  <div class=\"i-table-expanded-content\">\n                    <i-table\n                      [class.i-table-compact-details]=\"!detailRowBorders\"\n                      [grid]=\"getDetailGrid(row)\"\n                      [rowBorders]=\"detailRowBorders\"\n                      [sortable]=\"sortable\"\n                      [filterable]=\"filterable\"\n                      [selectionMode]=\"selectionMode\"\n                      [selection]=\"selection\"\n                      [striped]=\"striped\"\n                      [hoverable]=\"hoverable\"\n                      [bordered]=\"bordered\"\n                      [size]=\"size\"\n                      [dataKey]=\"dataKey\"\n                      [resizableColumns]=\"resizableColumns\"\n                      (onSort)=\"onSort.emit($event)\"\n                      (onFilter)=\"onFilter.emit($event)\"\n                      (onSelectionChange)=\"onSelectionChange.emit($event)\"\n                      (selectionChange)=\"selectionChange.emit($event)\"\n                      (onRowSelect)=\"onRowSelect.emit($event)\"\n                      (onRowUnselect)=\"onRowUnselect.emit($event)\"\n                    ></i-table>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else if (virtualScroll) {\n    <!-- ================================================================\n         PATH B — CDK Virtual Scroll (div-based rows)\n         Use only for large row counts (≥ ~500 rows). Uses flex <div> rows\n         so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n      [style.height]=\"effectiveHeight()\"\n    >\n      <!-- Sticky header — flex rows that mirror the virtual body rows -->\n      <div class=\"i-table-virtual-header\">\n        @if (filterable) {\n          <div class=\"i-table-virtual-row i-table-filter-row\">\n            @if (selectionMode === \"multiple\") {\n              <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\n              @if (column.filterable !== false) {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                >\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                </div>\n              } @else {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                ></div>\n              }\n            }\n            @if (gridActions().length > 0) {\n              <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n            }\n          </div>\n        }\n        <div class=\"i-table-virtual-row i-table-header-row\">\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-header\">\n              <i-checkbox\n                [checked]=\"areAllRowsSelected()\"\n                [indeterminate]=\"areSomeRowsSelected()\"\n                (onChange)=\"toggleAllSelection()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell i-table-header-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\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\n                    [class]=\"getSortIcon(column)\"\n                    class=\"i-table-sort-icon\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-header\">\n              {{ grid().actionsHeader ?? 'Actions' }}\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Virtual Scroll Viewport — *cdkVirtualFor on <div>, not <tr> -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        @if (processedData().length === 0) {\n          <div class=\"i-table-virtual-row i-table-empty-row\">\n            <div\n              class=\"i-table-virtual-cell\"\n              style=\"flex: 1; text-align: center; padding: 40px 16px\"\n            >\n              <i-no-content />\n            </div>\n          </div>\n        }\n        <div\n          *cdkVirtualFor=\"\n            let row of processedData();\n            let rowIndex = index;\n            trackBy: trackByRow\n          \"\n          class=\"i-table-virtual-row\"\n          [style.height.px]=\"virtualScrollItemSize\"\n          [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-cell\">\n              <i-checkbox\n                [checked]=\"isRowSelected(row)\"\n                (onChange)=\"toggleRowSelection(row)\"\n                (click)=\"$event.stopPropagation()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n              [style.text-align]=\"column.align || 'left'\"\n              [ngClass]=\"\n                getCellSeverity(row, column)\n                  ? 'i-table-cell-' + getCellSeverity(row, column)\n                  : ''\n              \"\n            >\n              @if (isIconColumn(column)) {\n                <i\n                  [class]=\"getIconClasses(row, column)\"\n                  [style.font-size]=\"column.iconSize || '1rem'\"\n                ></i>\n              } @else if (isListColumn(column)) {\n                <div class=\"i-table-list-cell\">\n                  @for (item of getCellListItems(row, column); track item) {\n                    <i-chip [label]=\"item\"></i-chip>\n                  }\n                </div>\n              } @else {\n                <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n                  {{ formatCellValue(getCellValue(row, column.field), column) }}\n                </span>\n              }\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-cell\">\n              <div class=\"i-table-actions\">\n                @for (action of gridActions(); 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                        [loading]=\"isActionLoading(action, row)\"\n                    [iTooltip]=\"getActionTooltip(action, row)\"\n                        [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n                    [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                    (clicked)=\"triggerAction(action, row, $event)\"\n                  >\n                    @if (action.label) {\n                      {{ action.label }}\n                    }\n                  </i-button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  } @else {\n    <!-- ================================================================\n         PATH C — Regular scrollable table\n         Default for small/medium datasets and nested detail tables.\n         Uses a plain overflow container with a @for loop — no CDK needed.\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter 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              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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 (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\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                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getIconClasses(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [loading]=\"isActionLoading(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\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(--color-component-background)}.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(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);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(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.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--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-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):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}:host(.i-table-compact-details)>.i-table-wrapper>.i-table-container>table>tbody>tr:not(.i-table-empty-row)>td{padding-block:4px}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.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:16px}.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}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.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:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.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-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;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 tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.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:1em;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 .i-table-expanded-content{padding:0;margin:2px 0 24px;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:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.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-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.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-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:0;max-width:100%;overflow-x:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:.75rem}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}\n"],
 		dependencies: [
 			{
 				kind: "component",
@@ -8744,8 +8745,8 @@ i0.ɵɵngDeclareClassMetadata({
 				TooltipDirective,
 				forwardRef(() => ITable)
 			],
-			template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header: global filter + download -->\n  @if (globalFilter || downloadable) {\n    <div class=\"i-table-header\">\n      <div class=\"i-table-header-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n      <div class=\"i-table-header-end\">\n        @if (globalFilter) {\n          <div class=\"i-table-global-filter\">\n            <i-input-text\n              [useFloatLabel]=\"false\"\n              label=\"Search table\"\n              placeholder=\"Search…\"\n              [ngModel]=\"globalFilterValue()\"\n              (ngModelChange)=\"onGlobalFilterInput($event)\"\n              [fluid]=\"true\"\n              [icon]=\"'pi pi-search'\"\n            ></i-input-text>\n          </div>\n        }\n        @if (downloadable) {\n          <div class=\"i-table-download\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              icon=\"pi pi-download\"\n              label=\"Download\"\n              (clicked)=\"handleDownload()\"\n            ></i-button>\n          </div>\n        }\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  <!-- ================================================================\n       PATH A — Detail-expandable table\n       Uses a standard scrollable container so that nested <i-table>\n       components can expand inline below their parent rows.\n  ================================================================ -->\n  @if (hasDetails()) {\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter 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              <th class=\"i-table-expand-header\"></th>\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              <th class=\"i-table-detail-count-header\"></th>\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            <th class=\"i-table-expand-header\"></th>\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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            <th class=\"i-table-detail-count-header\"></th>\n            @if (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\n            <!-- Parent row -->\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                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              <td class=\"i-table-expand-cell\">\n                <i-button\n                  severity=\"secondary\"\n                  [text]=\"true\"\n                  size=\"xtra-small\"\n                  [icon]=\"\n                    isRowExpanded(row)\n                      ? 'pi pi-chevron-down'\n                      : 'pi pi-chevron-right'\n                  \"\n                  [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n                  [ariaExpanded]=\"isRowExpanded(row)\"\n                  (clicked)=\"toggleRowExpansion(row, $event)\"\n                ></i-button>\n              </td>\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              <td class=\"i-table-detail-count-cell\">\n                ({{ getDetailRowCount(row) }})\n              </td>\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [loading]=\"isActionLoading(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n\n            <!-- Detail expansion row -->\n            @if (isRowExpanded(row)) {\n              <tr class=\"i-table-expanded-row\">\n                <td\n                  [attr.colspan]=\"totalColspan()\"\n                  class=\"i-table-expanded-cell\"\n                >\n                  <div class=\"i-table-expanded-content\">\n                    <i-table\n                      [grid]=\"getDetailGrid(row)\"\n                      [rowBorders]=\"detailRowBorders\"\n                      [sortable]=\"sortable\"\n                      [filterable]=\"filterable\"\n                      [selectionMode]=\"selectionMode\"\n                      [selection]=\"selection\"\n                      [striped]=\"striped\"\n                      [hoverable]=\"hoverable\"\n                      [bordered]=\"bordered\"\n                      [size]=\"size\"\n                      [dataKey]=\"dataKey\"\n                      [resizableColumns]=\"resizableColumns\"\n                      (onSort)=\"onSort.emit($event)\"\n                      (onFilter)=\"onFilter.emit($event)\"\n                      (onSelectionChange)=\"onSelectionChange.emit($event)\"\n                      (selectionChange)=\"selectionChange.emit($event)\"\n                      (onRowSelect)=\"onRowSelect.emit($event)\"\n                      (onRowUnselect)=\"onRowUnselect.emit($event)\"\n                    ></i-table>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else if (virtualScroll) {\n    <!-- ================================================================\n         PATH B — CDK Virtual Scroll (div-based rows)\n         Use only for large row counts (≥ ~500 rows). Uses flex <div> rows\n         so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n      [style.height]=\"effectiveHeight()\"\n    >\n      <!-- Sticky header — flex rows that mirror the virtual body rows -->\n      <div class=\"i-table-virtual-header\">\n        @if (filterable) {\n          <div class=\"i-table-virtual-row i-table-filter-row\">\n            @if (selectionMode === \"multiple\") {\n              <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\n              @if (column.filterable !== false) {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                >\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                </div>\n              } @else {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                ></div>\n              }\n            }\n            @if (gridActions().length > 0) {\n              <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n            }\n          </div>\n        }\n        <div class=\"i-table-virtual-row i-table-header-row\">\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-header\">\n              <i-checkbox\n                [checked]=\"areAllRowsSelected()\"\n                [indeterminate]=\"areSomeRowsSelected()\"\n                (onChange)=\"toggleAllSelection()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell i-table-header-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\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\n                    [class]=\"getSortIcon(column)\"\n                    class=\"i-table-sort-icon\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-header\">\n              {{ grid().actionsHeader ?? 'Actions' }}\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Virtual Scroll Viewport — *cdkVirtualFor on <div>, not <tr> -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        @if (processedData().length === 0) {\n          <div class=\"i-table-virtual-row i-table-empty-row\">\n            <div\n              class=\"i-table-virtual-cell\"\n              style=\"flex: 1; text-align: center; padding: 40px 16px\"\n            >\n              <i-no-content />\n            </div>\n          </div>\n        }\n        <div\n          *cdkVirtualFor=\"\n            let row of processedData();\n            let rowIndex = index;\n            trackBy: trackByRow\n          \"\n          class=\"i-table-virtual-row\"\n          [style.height.px]=\"virtualScrollItemSize\"\n          [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-cell\">\n              <i-checkbox\n                [checked]=\"isRowSelected(row)\"\n                (onChange)=\"toggleRowSelection(row)\"\n                (click)=\"$event.stopPropagation()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n              [style.text-align]=\"column.align || 'left'\"\n              [ngClass]=\"\n                getCellSeverity(row, column)\n                  ? 'i-table-cell-' + getCellSeverity(row, column)\n                  : ''\n              \"\n            >\n              @if (isIconColumn(column)) {\n                <i\n                  [class]=\"getIconClasses(row, column)\"\n                  [style.font-size]=\"column.iconSize || '1rem'\"\n                ></i>\n              } @else if (isListColumn(column)) {\n                <div class=\"i-table-list-cell\">\n                  @for (item of getCellListItems(row, column); track item) {\n                    <i-chip [label]=\"item\"></i-chip>\n                  }\n                </div>\n              } @else {\n                <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n                  {{ formatCellValue(getCellValue(row, column.field), column) }}\n                </span>\n              }\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-cell\">\n              <div class=\"i-table-actions\">\n                @for (action of gridActions(); 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                        [loading]=\"isActionLoading(action, row)\"\n                    [iTooltip]=\"getActionTooltip(action, row)\"\n                        [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n                    [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                    (clicked)=\"triggerAction(action, row, $event)\"\n                  >\n                    @if (action.label) {\n                      {{ action.label }}\n                    }\n                  </i-button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  } @else {\n    <!-- ================================================================\n         PATH C — Regular scrollable table\n         Default for small/medium datasets and nested detail tables.\n         Uses a plain overflow container with a @for loop — no CDK needed.\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter 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              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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 (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\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                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getIconClasses(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [loading]=\"isActionLoading(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\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(--color-component-background)}.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(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);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(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.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--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-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):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.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:16px}.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}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.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:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.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-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;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 tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.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:1em;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 .i-table-expanded-content{padding:0;margin:2px 0 24px;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:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.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-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.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-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:0;max-width:100%;overflow-x:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:.75rem}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}\n"]
+			template: "<div class=\"i-table-wrapper\" [ngClass]=\"getTableClasses()\">\n  <!-- Table Header: global filter + download -->\n  @if (globalFilter || downloadable) {\n    <div class=\"i-table-header\">\n      <div class=\"i-table-header-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n      <div class=\"i-table-header-end\">\n        @if (globalFilter) {\n          <div class=\"i-table-global-filter\">\n            <i-input-text\n              [useFloatLabel]=\"false\"\n              label=\"Search table\"\n              placeholder=\"Search…\"\n              [ngModel]=\"globalFilterValue()\"\n              (ngModelChange)=\"onGlobalFilterInput($event)\"\n              [fluid]=\"true\"\n              [icon]=\"'pi pi-search'\"\n            ></i-input-text>\n          </div>\n        }\n        @if (downloadable) {\n          <div class=\"i-table-download\">\n            <i-button\n              severity=\"secondary\"\n              [text]=\"true\"\n              size=\"small\"\n              icon=\"pi pi-download\"\n              label=\"Download\"\n              (clicked)=\"handleDownload()\"\n            ></i-button>\n          </div>\n        }\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  <!-- ================================================================\n       PATH A — Detail-expandable table\n       Uses a standard scrollable container so that nested <i-table>\n       components can expand inline below their parent rows.\n  ================================================================ -->\n  @if (hasDetails()) {\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter 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              <th class=\"i-table-expand-header\"></th>\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              <th class=\"i-table-detail-count-header\"></th>\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            <th class=\"i-table-expand-header\"></th>\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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            <th class=\"i-table-detail-count-header\"></th>\n            @if (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\n            <!-- Parent row -->\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                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              <td class=\"i-table-expand-cell\">\n                <i-button\n                  severity=\"secondary\"\n                  [text]=\"true\"\n                  size=\"xtra-small\"\n                  [icon]=\"\n                    isRowExpanded(row)\n                      ? 'pi pi-chevron-down'\n                      : 'pi pi-chevron-right'\n                  \"\n                  [ariaLabel]=\"isRowExpanded(row) ? 'Collapse details' : 'Expand details'\"\n                  [ariaExpanded]=\"isRowExpanded(row)\"\n                  (clicked)=\"toggleRowExpansion(row, $event)\"\n                ></i-button>\n              </td>\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getCellIcon(row, column)\"\n                      [class.i-severity-icon]=\"getCellSeverity(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              <td class=\"i-table-detail-count-cell\">\n                ({{ getDetailRowCount(row) }})\n              </td>\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [loading]=\"isActionLoading(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n\n            <!-- Detail expansion row -->\n            @if (isRowExpanded(row)) {\n              <tr class=\"i-table-expanded-row\">\n                <td\n                  [attr.colspan]=\"totalColspan()\"\n                  class=\"i-table-expanded-cell\"\n                >\n                  <div class=\"i-table-expanded-content\">\n                    <i-table\n                      [class.i-table-compact-details]=\"!detailRowBorders\"\n                      [grid]=\"getDetailGrid(row)\"\n                      [rowBorders]=\"detailRowBorders\"\n                      [sortable]=\"sortable\"\n                      [filterable]=\"filterable\"\n                      [selectionMode]=\"selectionMode\"\n                      [selection]=\"selection\"\n                      [striped]=\"striped\"\n                      [hoverable]=\"hoverable\"\n                      [bordered]=\"bordered\"\n                      [size]=\"size\"\n                      [dataKey]=\"dataKey\"\n                      [resizableColumns]=\"resizableColumns\"\n                      (onSort)=\"onSort.emit($event)\"\n                      (onFilter)=\"onFilter.emit($event)\"\n                      (onSelectionChange)=\"onSelectionChange.emit($event)\"\n                      (selectionChange)=\"selectionChange.emit($event)\"\n                      (onRowSelect)=\"onRowSelect.emit($event)\"\n                      (onRowUnselect)=\"onRowUnselect.emit($event)\"\n                    ></i-table>\n                  </div>\n                </td>\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else if (virtualScroll) {\n    <!-- ================================================================\n         PATH B — CDK Virtual Scroll (div-based rows)\n         Use only for large row counts (≥ ~500 rows). Uses flex <div> rows\n         so CDK's wrapper <div> does not end up inside <tbody> (invalid HTML).\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable i-table-container--virtual-scroll\"\n      [style.height]=\"effectiveHeight()\"\n    >\n      <!-- Sticky header — flex rows that mirror the virtual body rows -->\n      <div class=\"i-table-virtual-header\">\n        @if (filterable) {\n          <div class=\"i-table-virtual-row i-table-filter-row\">\n            @if (selectionMode === \"multiple\") {\n              <div class=\"i-table-virtual-cell i-table-selection-header\"></div>\n            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\n              @if (column.filterable !== false) {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                >\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                </div>\n              } @else {\n                <div\n                  class=\"i-table-virtual-cell\"\n                  [style.width]=\"\n                    getColumnWidth(column) !== 'auto'\n                      ? getColumnWidth(column)\n                      : null\n                  \"\n                  [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n                ></div>\n              }\n            }\n            @if (gridActions().length > 0) {\n              <div class=\"i-table-virtual-cell i-table-actions-header\"></div>\n            }\n          </div>\n        }\n        <div class=\"i-table-virtual-row i-table-header-row\">\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-header\">\n              <i-checkbox\n                [checked]=\"areAllRowsSelected()\"\n                [indeterminate]=\"areSomeRowsSelected()\"\n                (onChange)=\"toggleAllSelection()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell i-table-header-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\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\n                    [class]=\"getSortIcon(column)\"\n                    class=\"i-table-sort-icon\"\n                  ></i>\n                }\n              </div>\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-header\">\n              {{ grid().actionsHeader ?? 'Actions' }}\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Virtual Scroll Viewport — *cdkVirtualFor on <div>, not <tr> -->\n      <cdk-virtual-scroll-viewport\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        class=\"i-table-virtual-viewport\"\n      >\n        @if (processedData().length === 0) {\n          <div class=\"i-table-virtual-row i-table-empty-row\">\n            <div\n              class=\"i-table-virtual-cell\"\n              style=\"flex: 1; text-align: center; padding: 40px 16px\"\n            >\n              <i-no-content />\n            </div>\n          </div>\n        }\n        <div\n          *cdkVirtualFor=\"\n            let row of processedData();\n            let rowIndex = index;\n            trackBy: trackByRow\n          \"\n          class=\"i-table-virtual-row\"\n          [style.height.px]=\"virtualScrollItemSize\"\n          [class.i-table-row-odd]=\"rowIndex % 2 !== 0\"\n          [class.i-table-row-selected]=\"isRowSelected(row)\"\n          (click)=\"toggleRowSelection(row)\"\n        >\n          @if (selectionMode === \"multiple\") {\n            <div class=\"i-table-virtual-cell i-table-selection-cell\">\n              <i-checkbox\n                [checked]=\"isRowSelected(row)\"\n                (onChange)=\"toggleRowSelection(row)\"\n                (click)=\"$event.stopPropagation()\"\n              ></i-checkbox>\n            </div>\n          }\n          @for (column of gridColumns(); track trackByColumn($index, column)) {\n            <div\n              class=\"i-table-virtual-cell\"\n              [style.width]=\"\n                getColumnWidth(column) !== 'auto'\n                  ? getColumnWidth(column)\n                  : null\n              \"\n              [style.flex]=\"getColumnWidth(column) === 'auto' ? '1' : null\"\n              [style.text-align]=\"column.align || 'left'\"\n              [ngClass]=\"\n                getCellSeverity(row, column)\n                  ? 'i-table-cell-' + getCellSeverity(row, column)\n                  : ''\n              \"\n            >\n              @if (isIconColumn(column)) {\n                <i\n                  [class]=\"getIconClasses(row, column)\"\n                  [style.font-size]=\"column.iconSize || '1rem'\"\n                ></i>\n              } @else if (isListColumn(column)) {\n                <div class=\"i-table-list-cell\">\n                  @for (item of getCellListItems(row, column); track item) {\n                    <i-chip [label]=\"item\"></i-chip>\n                  }\n                </div>\n              } @else {\n                <span [class.i-severity-text]=\"getCellSeverity(row, column)\">\n                  {{ formatCellValue(getCellValue(row, column.field), column) }}\n                </span>\n              }\n            </div>\n          }\n          @if (gridActions().length > 0) {\n            <div class=\"i-table-virtual-cell i-table-actions-cell\">\n              <div class=\"i-table-actions\">\n                @for (action of gridActions(); 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                        [loading]=\"isActionLoading(action, row)\"\n                    [iTooltip]=\"getActionTooltip(action, row)\"\n                        [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n                    [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                    (clicked)=\"triggerAction(action, row, $event)\"\n                  >\n                    @if (action.label) {\n                      {{ action.label }}\n                    }\n                  </i-button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  } @else {\n    <!-- ================================================================\n         PATH C — Regular scrollable table\n         Default for small/medium datasets and nested detail tables.\n         Uses a plain overflow container with a @for loop — no CDK needed.\n    ================================================================ -->\n    <div\n      class=\"i-table-container i-table-container--scrollable\"\n      [style.max-height]=\"effectiveHeight()\"\n    >\n      <table class=\"i-table\">\n        <thead>\n          <!-- Column Filter 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              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\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)=\"\n                        onColumnFilterInput(column.field, $event)\n                      \"\n                    />\n                  </th>\n                } @else {\n                  <th [style.width]=\"getColumnWidth(column)\"></th>\n                }\n              }\n              @if (gridActions().length > 0) {\n                <th class=\"i-table-actions-header\"></th>\n              }\n            </tr>\n          }\n\n          <!-- Column Headers -->\n          <tr>\n            @if (selectionMode === \"multiple\") {\n              <th class=\"i-table-selection-header\">\n                <i-checkbox\n                  [checked]=\"areAllRowsSelected()\"\n                  [indeterminate]=\"areSomeRowsSelected()\"\n                  (onChange)=\"toggleAllSelection()\"\n                ></i-checkbox>\n              </th>\n            }\n            @for (\n              column of gridColumns();\n              track trackByColumn($index, column)\n            ) {\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\n                      [class]=\"getSortIcon(column)\"\n                      class=\"i-table-sort-icon\"\n                    ></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 (gridActions().length > 0) {\n              <th class=\"i-table-actions-header\">{{ grid().actionsHeader ?? 'Actions' }}</th>\n            }\n          </tr>\n        </thead>\n\n        <tbody>\n          @if (processedData().length === 0) {\n            <tr class=\"i-table-empty-row\">\n              <td [attr.colspan]=\"totalColspan()\">\n                <i-no-content />\n              </td>\n            </tr>\n          }\n          @for (row of processedData(); track trackByRow($index, row)) {\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                    [checked]=\"isRowSelected(row)\"\n                    (onChange)=\"toggleRowSelection(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></i-checkbox>\n                </td>\n              }\n              @for (\n                column of gridColumns();\n                track trackByColumn($index, column)\n              ) {\n                <td\n                  [style.text-align]=\"column.align || 'left'\"\n                  [style.width]=\"getColumnWidth(column)\"\n                  [class]=\"\n                    getCellSeverity(row, column)\n                      ? 'i-table-cell-' + getCellSeverity(row, column)\n                      : ''\n                  \"\n                >\n                  @if (isIconColumn(column)) {\n                    <i\n                      [class]=\"getIconClasses(row, column)\"\n                      [style.font-size]=\"column.iconSize || '1rem'\"\n                    ></i>\n                  } @else if (isListColumn(column)) {\n                    <div class=\"i-table-list-cell\">\n                      @for (item of getCellListItems(row, column); track item) {\n                        <i-chip [label]=\"item\"></i-chip>\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      [class.i-severity-text]=\"getCellSeverity(row, column)\"\n                    >\n                      {{\n                        formatCellValue(getCellValue(row, column.field), column)\n                      }}\n                    </span>\n                  }\n                </td>\n              }\n              @if (gridActions().length > 0) {\n                <td class=\"i-table-actions-cell\">\n                  <div class=\"i-table-actions\">\n                    @for (action of gridActions(); 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                        [loading]=\"isActionLoading(action, row)\"\n                        [iTooltip]=\"getActionTooltip(action, row)\"\n                        [ariaLabel]=\"action.label || getActionTooltip(action, row) || action.id\"\n                        [class.i-action-hidden]=\"!isActionVisible(action, row)\"\n                        (clicked)=\"triggerAction(action, row, $event)\"\n                      >\n                        @if (action.label) {\n                          {{ action.label }}\n                        }\n                      </i-button>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\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(--color-component-background)}.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(--color-component-background)}.i-table-wrapper table thead .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);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(--color-component-background)}.i-table-wrapper table tbody tr.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-expanded-row{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-expanded-row .i-table-expanded-content{background:transparent}.i-table-wrapper table tbody .i-table-empty-row td{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-header{background:var(--color-component-background);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-header td{color:var(--color-text-primary)}.i-table-wrapper table tbody .i-table-group-header:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-header .i-table-group-toggle-icon,.i-table-wrapper table tbody .i-table-group-header .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-columns-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-columns-header th{color:var(--color-text-primary);border-bottom:1px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-row,.i-table-wrapper table tbody .i-table-group-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper table tbody .i-table-group-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper table tbody .i-table-group-summary-row{background:var(--surface-section);border-bottom:2px solid var(--surface-border)}.i-table-wrapper table tbody .i-table-group-summary-row td{color:var(--color-text-primary);font-weight:600}.i-table-wrapper table tbody .i-table-group-summary-row:hover{background:var(--surface-hover)}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-count{color:var(--color-text-secondary)}.i-table-wrapper table tbody .i-table-group-detail-row,.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{background:var(--surface-ground)}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper table thead tr{background:var(--surface-section)}.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--no-row-borders>.i-table-container>table>tbody>tr{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container>table>tbody>tr>td{border-bottom:none}.i-table-wrapper.i-table--no-row-borders>.i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row{border-bottom:none}.i-table-wrapper.i-table--no-detail-row-borders>.i-table-container>table>tbody>.i-table-expanded-row>td{border-bottom:none}.i-table-wrapper.i-table--hoverable table tbody tr:not(.i-table-empty-row):not(.i-table-expanded-row):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-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):not(.i-table-group-header):not(.i-table-group-columns-header):not(.i-table-group-detail-row).i-table-row-selected:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-column-resizer{background:var(--surface-border)}.i-table-wrapper .i-table-column-resizer:hover{background:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{background:var(--color-component-background);border-bottom:1px solid var(--surface-border)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-virtual-cell{color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell .i-table-sort-icon{color:var(--color-text-secondary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover{background:var(--surface-hover)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sorted .i-table-sort-icon{color:var(--color-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter{border:1px solid var(--surface-border);background:var(--surface-ground);color:var(--color-text-primary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter:focus{border-color:var(--color-primary);outline:none}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-column-filter::placeholder{color:var(--color-text-tertiary)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row{background:var(--color-component-background);border-bottom:1px solid var(--surface-border);color:var(--color-text-primary);transition:background-color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-odd{background:var(--color-component-background)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .i-table-virtual-row.i-table-row-selected{background:var(--surface-hover);color:var(--color-primary)}.i-table-wrapper.i-table--nested{background:transparent}.i-table-wrapper.i-table--nested table thead tr{background:var(--surface-section)}:host(.i-table-compact-details)>.i-table-wrapper>.i-table-container>table>tbody>tr:not(.i-table-empty-row)>td{padding-block:4px}.i-table-wrapper{position:relative;display:block;border-radius:4px;overflow:visible}.i-table-wrapper.i-table--small table thead th{padding:8px 12px;font-size:13px}.i-table-wrapper.i-table--small table tbody td{padding:6px 12px;font-size:1em}.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:16px}.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}.i-table-wrapper .i-table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:16px}.i-table-wrapper .i-table-header .i-table-header-start{flex:0 1 auto;display:flex;align-items:center}.i-table-wrapper .i-table-header .i-table-header-end{flex:0 1 auto;display:flex;align-items:center;gap:12px;margin-left:auto}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:250px}.i-table-wrapper .i-table-header .i-table-header-end .i-table-download{flex-shrink:0}.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:32px}.i-table-wrapper .i-table-container{overflow-x:auto}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-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{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--scrollable{overflow-y:auto;scrollbar-gutter:stable}.i-table-wrapper .i-table-container--scrollable>table>thead{position:sticky;top:0;z-index:2}.i-table-wrapper .i-table-container--virtual-scroll{overflow:hidden;display:flex;flex-direction:column}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header{flex-shrink:0;overflow:hidden}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-sort-icon{font-size:.8em;opacity:.6;transition:opacity .15s ease,color .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column{cursor:pointer}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column .i-table-sort-icon{opacity:.4}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column:hover .i-table-sort-icon,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-header-cell.i-table-sortable-column.i-table-sorted .i-table-sort-icon{opacity:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell{padding:8px 16px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header .i-table-filter-row .i-table-virtual-cell .i-table-column-filter{width:100%;padding:6px 10px;font-size:1em;border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{flex:1;min-height:0;width:100%;overflow-y:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track, transparent);border-radius:var(--scrollbar-radius, 3px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:#0003;border-radius:var(--scrollbar-radius, 3px);transition:background .2s ease}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:#00000059}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:#00000080}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-corner{background:transparent}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;scroll-behavior:smooth}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track, transparent)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-track{background:var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05));border-radius:var(--scrollbar-radius, 3px);margin:2px 0}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-radius, 3px);min-height:20px;background:var(--scrollbar-thumb, var(--color-text-secondary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover, var(--color-text-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active, var(--color-primary))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb, var(--color-text-secondary)) var(--scrollbar-track-dropdown, rgba(0, 0, 0, .05))}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-row{display:flex;align-items:center;width:100%;box-sizing:border-box}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{padding:12px 16px;box-sizing:border-box;flex-shrink:0;overflow:hidden;display:flex;align-items:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell{-webkit-user-select:none;user-select:none;font-weight:600;white-space:nowrap}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-header-cell .i-table-header-content .i-table-header-text{flex:1}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-selection-cell{width:50px;flex:0 0 50px;justify-content:center}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell{flex:0 0 auto;justify-content:flex-end}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-header .i-table-actions,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell.i-table-actions-cell .i-table-actions{display:flex;gap:4px;justify-content:flex-end}.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-content .i-table-header-text{flex:1}.i-table-wrapper table thead tr th .i-table-sort-icon{font-size:.8em;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 tr th:hover .i-table-column-resizer{opacity:.5}.i-table-wrapper table thead tr th.i-table-actions-header{text-align:right}.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:1em;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 .i-table-expanded-content{padding:0;margin:2px 0 24px;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:1em;white-space:pre-wrap;word-wrap:break-word}.i-table-wrapper table tbody .i-table-group-summary-row{cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-summary-row td{padding:12px 16px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.05em}.i-table-wrapper table tbody .i-table-group-summary-row .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell{padding:0;overflow:hidden}.i-table-wrapper table tbody .i-table-group-detail-row .i-table-group-detail-cell .i-table-wrapper{border-radius:0;border-top:none;overflow:hidden}.i-table-wrapper table tbody .i-table-group-count-header{width:60px;text-align:center;font-weight:400;opacity:.6;font-size:.85em}.i-table-wrapper table tbody .i-table-group-count-cell{width:60px;text-align:right;white-space:nowrap}.i-table-wrapper table tbody .i-table-group-count-cell .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-header td{padding:12px 16px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.i-table-wrapper table tbody .i-table-group-header td:hover{opacity:.8}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content{display:flex;align-items:center;gap:8px}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-toggle-icon{font-size:.8em;transition:transform .15s ease}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-label{flex:1;font-size:1.1em}.i-table-wrapper table tbody .i-table-group-header .i-table-group-header-content .i-table-group-count{opacity:.7;font-size:.9em;font-weight:400}.i-table-wrapper table tbody .i-table-group-columns-header th{font-size:.95em;font-weight:600;padding:10px 16px}.i-table-wrapper table tbody .i-table-group-row td{padding-left:32px}.i-table-wrapper table tbody .i-table-group-row td:first-child{padding-left:16px}.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-detail-count-header{width:36px;padding:0}.i-table-wrapper .i-table-detail-count-cell{width:36px;padding:0 4px 0 0;text-align:right;white-space:nowrap;font-size:.78em;opacity:.5;font-weight:400}.i-table-wrapper .i-table-actions-header,.i-table-wrapper .i-table-actions-cell{width:auto;white-space:nowrap;text-align:right}.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-severity-icon.success,.i-table-cell-success .i-severity-icon,.i-severity-text.success,.i-table-cell-success .i-severity-text{color:var(--color-success)}.i-severity-icon.info,.i-table-cell-info .i-severity-icon,.i-severity-text.info,.i-table-cell-info .i-severity-text{color:var(--color-info)}.i-severity-icon.warning,.i-table-cell-warning .i-severity-icon,.i-severity-text.warning,.i-table-cell-warning .i-severity-text{color:var(--color-warning)}.i-severity-icon.danger,.i-table-cell-danger .i-severity-icon,.i-severity-text.danger,.i-table-cell-danger .i-severity-text{color:var(--color-danger)}.i-severity-icon.secondary,.i-table-cell-secondary .i-severity-icon,.i-severity-text.secondary,.i-table-cell-secondary .i-severity-text{color:var(--color-text-secondary)}.i-table-list-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.i-table-list-cell i-chip{display:block}.i-action-hidden{visibility:hidden;pointer-events:none}@media(max-width:768px){.i-table-wrapper .i-table-header{padding:8px 12px;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{flex:1 1 100%;margin-bottom:8px}.i-table-wrapper .i-table-header .i-table-header-end{flex:1 1 100%;justify-content:flex-end}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{flex:1;max-width:250px}.i-table-wrapper table{min-width:max-content}.i-table-wrapper .i-table-container--virtual-scroll{min-width:0;max-width:100%;overflow-x:auto}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-header,.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-viewport{min-width:600px}.i-table-wrapper .i-table-container--virtual-scroll .i-table-virtual-cell{min-width:80px}}:host{display:block;min-width:0}.i-table-wrapper .i-table-header{flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-start{min-width:0;flex-wrap:wrap;gap:.75rem}.i-table-wrapper .i-table-header .i-table-header-end{min-width:0;flex-wrap:wrap}.i-table-wrapper .i-table-header .i-table-header-end .i-table-global-filter{width:min(250px,100%)}\n"]
 		}]
 	}],
 	ctorParameters: () => [{ type: i0.ElementRef }],
@@ -9779,11 +9780,13 @@ var IOrderedList = class IOrderedList {
 	onRemove = new EventEmitter();
 	announcement = "";
 	move(index, direction) {
-		const target = index + direction;
-		if (this.readonly || this.disabled || index < 0 || index >= this.items.length || target < 0 || target >= this.items.length) return;
+		this.reorder(index, index + direction);
+	}
+	reorder(index, target) {
+		if (this.readonly || this.disabled || index === target || index < 0 || index >= this.items.length || target < 0 || target >= this.items.length) return;
 		const items = [...this.items];
 		const item = items[index];
-		[items[index], items[target]] = [items[target], items[index]];
+		moveItemInArray(items, index, target);
 		this.announcement = `${this.itemLabel(item)} moved to position ${target + 1}.`;
 		this.itemsChange.emit(items);
 		this.onMove.emit({
@@ -9833,8 +9836,8 @@ var IOrderedList = class IOrderedList {
 			onRemove: "onRemove"
 		},
 		ngImport: i0,
-		template: "<ol class=\"i-ordered-list\" [attr.aria-label]=\"ariaLabel\">\n  @for (item of items; track itemKey(item); let index = $index) {\n    <li class=\"i-ordered-list__item\">\n      <span class=\"i-ordered-list__position\" aria-hidden=\"true\">{{\n        index + 1\n      }}</span>\n      <div class=\"i-ordered-list__content\">\n        <strong>{{ itemLabel(item) }}</strong>\n        @if (itemTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              index: index,\n              readonly: readonly || disabled,\n            }\"\n          />\n        }\n      </div>\n      <div\n        class=\"i-ordered-list__actions\"\n        role=\"group\"\n        [attr.aria-label]=\"'Actions for ' + itemLabel(item)\"\n      >\n        <i-button\n          icon=\"pi pi-arrow-up\"\n          size=\"small\"\n          [text]=\"true\"\n          [disabled]=\"readonly || disabled || index === 0\"\n          (clicked)=\"move(index, -1)\"\n          >Move up</i-button\n        >\n        <i-button\n          icon=\"pi pi-arrow-down\"\n          size=\"small\"\n          [text]=\"true\"\n          [disabled]=\"readonly || disabled || index === items.length - 1\"\n          (clicked)=\"move(index, 1)\"\n          >Move down</i-button\n        >\n        @if (removable) {\n          <i-button\n            icon=\"pi pi-times\"\n            size=\"small\"\n            severity=\"danger\"\n            [text]=\"true\"\n            [disabled]=\"readonly || disabled\"\n            (clicked)=\"remove(index)\"\n            >Remove</i-button\n          >\n        }\n      </div>\n    </li>\n  }\n</ol>\n@if (!items.length) {\n  <i-no-content [message]=\"emptyMessage\" />\n}\n<span class=\"i-ordered-list__announcement\" role=\"status\" aria-live=\"polite\">{{\n  announcement\n}}</span>\n",
-		styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}.i-ordered-list__position{color:var(--color-primary);background:var(--surface-section)}:host{display:block}.i-ordered-list{display:grid;gap:.75rem;list-style:none;padding:0;margin:0}.i-ordered-list__item{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-ordered-list__position{display:grid;flex:0 0 1.75rem;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;font-size:.8125rem;font-weight:700}.i-ordered-list__content{flex:1 1 15rem;min-width:0;display:flex;flex-direction:column;gap:.5rem;padding-top:.25rem}.i-ordered-list__actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25rem}.i-ordered-list__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:34rem){.i-ordered-list__actions{flex-basis:100%;margin-left:2.75rem}}\n"],
+		template: "<ol class=\"i-ordered-list\" [attr.aria-label]=\"ariaLabel\"\n  cdkDropList [cdkDropListDisabled]=\"readonly || disabled\"\n  (cdkDropListDropped)=\"reorder($event.previousIndex, $event.currentIndex)\">\n  @for (item of items; track itemKey(item); let index = $index) {\n    <li class=\"i-ordered-list__item\" cdkDrag cdkDragLockAxis=\"y\"\n      cdkDragPreviewContainer=\"parent\" [cdkDragDisabled]=\"readonly || disabled\">\n      <button type=\"button\" class=\"i-ordered-list__drag-handle\" cdkDragHandle\n        [disabled]=\"readonly || disabled\"\n        [attr.aria-label]=\"'Reorder ' + itemLabel(item) + '. Use up and down arrow keys.'\"\n        title=\"Drag to reorder\"\n        (keydown.arrowup)=\"move(index, -1); $event.preventDefault()\"\n        (keydown.arrowdown)=\"move(index, 1); $event.preventDefault()\">\n        <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n      </button>\n      <div class=\"i-ordered-list__content\">\n        <strong>{{ itemLabel(item) }}</strong>\n        @if (itemTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              index: index,\n              readonly: readonly || disabled,\n            }\"\n          />\n        }\n      </div>\n      <div\n        class=\"i-ordered-list__actions\"\n        role=\"group\"\n        [attr.aria-label]=\"'Actions for ' + itemLabel(item)\"\n      >\n        <i-button\n          icon=\"pi pi-arrow-up\"\n          size=\"small\"\n          [text]=\"true\"\n          [ariaLabel]=\"'Move ' + itemLabel(item) + ' up'\"\n          title=\"Move up\"\n          [disabled]=\"readonly || disabled || index === 0\"\n          (clicked)=\"move(index, -1)\"\n        />\n        <i-button\n          icon=\"pi pi-arrow-down\"\n          size=\"small\"\n          [text]=\"true\"\n          [ariaLabel]=\"'Move ' + itemLabel(item) + ' down'\"\n          title=\"Move down\"\n          [disabled]=\"readonly || disabled || index === items.length - 1\"\n          (clicked)=\"move(index, 1)\"\n        />\n        @if (removable) {\n          <i-button\n            icon=\"pi pi-times\"\n            size=\"small\"\n            severity=\"danger\"\n            [text]=\"true\"\n            [ariaLabel]=\"'Remove ' + itemLabel(item)\"\n            title=\"Remove\"\n            [disabled]=\"readonly || disabled\"\n            (clicked)=\"remove(index)\"\n          />\n        }\n      </div>\n    </li>\n  }\n</ol>\n@if (!items.length) {\n  <i-no-content [message]=\"emptyMessage\" />\n}\n<span class=\"i-ordered-list__announcement\" role=\"status\" aria-live=\"polite\">{{\n  announcement\n}}</span>\n",
+		styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}:host{display:block}.i-ordered-list{display:grid;gap:.75rem;list-style:none;padding:0;margin:0}.i-ordered-list__item{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-ordered-list__drag-handle{display:grid;flex:0 0 2rem;place-items:center;width:2rem;height:2rem;padding:0;border:0;border-radius:.25rem;color:inherit;background:transparent;cursor:grab;touch-action:none}.i-ordered-list__drag-handle:active{cursor:grabbing}.i-ordered-list__drag-handle:disabled{cursor:default;opacity:.4}.i-ordered-list__drag-handle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-ordered-list__content{flex:1 1 15rem;min-width:0;display:flex;flex-direction:column;gap:.5rem;padding-top:.25rem}.i-ordered-list__actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25rem}.i-ordered-list__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.i-ordered-list__item.cdk-drag-preview{box-sizing:border-box;list-style:none;box-shadow:0 8px 24px #00000026}.i-ordered-list__item.cdk-drag-placeholder{opacity:.25}@media(max-width:34rem){.i-ordered-list__actions{flex-basis:100%;margin-left:3rem}}\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -9846,6 +9849,67 @@ var IOrderedList = class IOrderedList {
 					"ngTemplateOutletInjector"
 				]
 			},
+			{
+				kind: "directive",
+				type: CdkDrag,
+				selector: "[cdkDrag]",
+				inputs: [
+					"cdkDragData",
+					"cdkDragLockAxis",
+					"cdkDragRootElement",
+					"cdkDragBoundary",
+					"cdkDragStartDelay",
+					"cdkDragFreeDragPosition",
+					"cdkDragDisabled",
+					"cdkDragConstrainPosition",
+					"cdkDragPreviewClass",
+					"cdkDragPreviewContainer",
+					"cdkDragScale"
+				],
+				outputs: [
+					"cdkDragStarted",
+					"cdkDragReleased",
+					"cdkDragEnded",
+					"cdkDragEntered",
+					"cdkDragExited",
+					"cdkDragDropped",
+					"cdkDragMoved"
+				],
+				exportAs: ["cdkDrag"]
+			},
+			{
+				kind: "directive",
+				type: CdkDragHandle,
+				selector: "[cdkDragHandle]",
+				inputs: ["cdkDragHandleDisabled"]
+			},
+			{
+				kind: "directive",
+				type: CdkDropList,
+				selector: "[cdkDropList], cdk-drop-list",
+				inputs: [
+					"cdkDropListConnectedTo",
+					"cdkDropListData",
+					"cdkDropListOrientation",
+					"id",
+					"cdkDropListLockAxis",
+					"cdkDropListDisabled",
+					"cdkDropListSortingDisabled",
+					"cdkDropListEnterPredicate",
+					"cdkDropListSortPredicate",
+					"cdkDropListAutoScrollDisabled",
+					"cdkDropListAutoScrollStep",
+					"cdkDropListElementContainer",
+					"cdkDropListHasAnchor"
+				],
+				outputs: [
+					"cdkDropListDropped",
+					"cdkDropListEntered",
+					"cdkDropListExited",
+					"cdkDropListSorted"
+				],
+				exportAs: ["cdkDropList"]
+			},
 			{
 				kind: "component",
 				type: IButton,
@@ -9888,12 +9952,15 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			imports: [
 				NgTemplateOutlet,
+				CdkDrag,
+				CdkDragHandle,
+				CdkDropList,
 				IButton,
 				NoContentComponent
 			],
 			changeDetection: ChangeDetectionStrategy.Eager,
-			template: "<ol class=\"i-ordered-list\" [attr.aria-label]=\"ariaLabel\">\n  @for (item of items; track itemKey(item); let index = $index) {\n    <li class=\"i-ordered-list__item\">\n      <span class=\"i-ordered-list__position\" aria-hidden=\"true\">{{\n        index + 1\n      }}</span>\n      <div class=\"i-ordered-list__content\">\n        <strong>{{ itemLabel(item) }}</strong>\n        @if (itemTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              index: index,\n              readonly: readonly || disabled,\n            }\"\n          />\n        }\n      </div>\n      <div\n        class=\"i-ordered-list__actions\"\n        role=\"group\"\n        [attr.aria-label]=\"'Actions for ' + itemLabel(item)\"\n      >\n        <i-button\n          icon=\"pi pi-arrow-up\"\n          size=\"small\"\n          [text]=\"true\"\n          [disabled]=\"readonly || disabled || index === 0\"\n          (clicked)=\"move(index, -1)\"\n          >Move up</i-button\n        >\n        <i-button\n          icon=\"pi pi-arrow-down\"\n          size=\"small\"\n          [text]=\"true\"\n          [disabled]=\"readonly || disabled || index === items.length - 1\"\n          (clicked)=\"move(index, 1)\"\n          >Move down</i-button\n        >\n        @if (removable) {\n          <i-button\n            icon=\"pi pi-times\"\n            size=\"small\"\n            severity=\"danger\"\n            [text]=\"true\"\n            [disabled]=\"readonly || disabled\"\n            (clicked)=\"remove(index)\"\n            >Remove</i-button\n          >\n        }\n      </div>\n    </li>\n  }\n</ol>\n@if (!items.length) {\n  <i-no-content [message]=\"emptyMessage\" />\n}\n<span class=\"i-ordered-list__announcement\" role=\"status\" aria-live=\"polite\">{{\n  announcement\n}}</span>\n",
-			styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}.i-ordered-list__position{color:var(--color-primary);background:var(--surface-section)}:host{display:block}.i-ordered-list{display:grid;gap:.75rem;list-style:none;padding:0;margin:0}.i-ordered-list__item{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-ordered-list__position{display:grid;flex:0 0 1.75rem;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;font-size:.8125rem;font-weight:700}.i-ordered-list__content{flex:1 1 15rem;min-width:0;display:flex;flex-direction:column;gap:.5rem;padding-top:.25rem}.i-ordered-list__actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25rem}.i-ordered-list__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:34rem){.i-ordered-list__actions{flex-basis:100%;margin-left:2.75rem}}\n"]
+			template: "<ol class=\"i-ordered-list\" [attr.aria-label]=\"ariaLabel\"\n  cdkDropList [cdkDropListDisabled]=\"readonly || disabled\"\n  (cdkDropListDropped)=\"reorder($event.previousIndex, $event.currentIndex)\">\n  @for (item of items; track itemKey(item); let index = $index) {\n    <li class=\"i-ordered-list__item\" cdkDrag cdkDragLockAxis=\"y\"\n      cdkDragPreviewContainer=\"parent\" [cdkDragDisabled]=\"readonly || disabled\">\n      <button type=\"button\" class=\"i-ordered-list__drag-handle\" cdkDragHandle\n        [disabled]=\"readonly || disabled\"\n        [attr.aria-label]=\"'Reorder ' + itemLabel(item) + '. Use up and down arrow keys.'\"\n        title=\"Drag to reorder\"\n        (keydown.arrowup)=\"move(index, -1); $event.preventDefault()\"\n        (keydown.arrowdown)=\"move(index, 1); $event.preventDefault()\">\n        <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n      </button>\n      <div class=\"i-ordered-list__content\">\n        <strong>{{ itemLabel(item) }}</strong>\n        @if (itemTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              index: index,\n              readonly: readonly || disabled,\n            }\"\n          />\n        }\n      </div>\n      <div\n        class=\"i-ordered-list__actions\"\n        role=\"group\"\n        [attr.aria-label]=\"'Actions for ' + itemLabel(item)\"\n      >\n        <i-button\n          icon=\"pi pi-arrow-up\"\n          size=\"small\"\n          [text]=\"true\"\n          [ariaLabel]=\"'Move ' + itemLabel(item) + ' up'\"\n          title=\"Move up\"\n          [disabled]=\"readonly || disabled || index === 0\"\n          (clicked)=\"move(index, -1)\"\n        />\n        <i-button\n          icon=\"pi pi-arrow-down\"\n          size=\"small\"\n          [text]=\"true\"\n          [ariaLabel]=\"'Move ' + itemLabel(item) + ' down'\"\n          title=\"Move down\"\n          [disabled]=\"readonly || disabled || index === items.length - 1\"\n          (clicked)=\"move(index, 1)\"\n        />\n        @if (removable) {\n          <i-button\n            icon=\"pi pi-times\"\n            size=\"small\"\n            severity=\"danger\"\n            [text]=\"true\"\n            [ariaLabel]=\"'Remove ' + itemLabel(item)\"\n            title=\"Remove\"\n            [disabled]=\"readonly || disabled\"\n            (clicked)=\"remove(index)\"\n          />\n        }\n      </div>\n    </li>\n  }\n</ol>\n@if (!items.length) {\n  <i-no-content [message]=\"emptyMessage\" />\n}\n<span class=\"i-ordered-list__announcement\" role=\"status\" aria-live=\"polite\">{{\n  announcement\n}}</span>\n",
+			styles: [".i-ordered-list{color:var(--color-text-primary)}.i-ordered-list__item{border-color:var(--surface-border);background:var(--surface-card)}:host{display:block}.i-ordered-list{display:grid;gap:.75rem;list-style:none;padding:0;margin:0}.i-ordered-list__item{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-ordered-list__drag-handle{display:grid;flex:0 0 2rem;place-items:center;width:2rem;height:2rem;padding:0;border:0;border-radius:.25rem;color:inherit;background:transparent;cursor:grab;touch-action:none}.i-ordered-list__drag-handle:active{cursor:grabbing}.i-ordered-list__drag-handle:disabled{cursor:default;opacity:.4}.i-ordered-list__drag-handle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-ordered-list__content{flex:1 1 15rem;min-width:0;display:flex;flex-direction:column;gap:.5rem;padding-top:.25rem}.i-ordered-list__actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.25rem}.i-ordered-list__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.i-ordered-list__item.cdk-drag-preview{box-sizing:border-box;list-style:none;box-shadow:0 8px 24px #00000026}.i-ordered-list__item.cdk-drag-placeholder{opacity:.25}@media(max-width:34rem){.i-ordered-list__actions{flex-basis:100%;margin-left:3rem}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -9922,6 +9989,7 @@ var IRuleEditor = class IRuleEditor {
 	readonly = false;
 	disabled = false;
 	rulesChange = new EventEmitter();
+	announcement = "";
 	booleanOptions = [{
 		key: "true",
 		label: "True"
@@ -9975,6 +10043,13 @@ var IRuleEditor = class IRuleEditor {
 			...changes
 		} : rule));
 	}
+	reorder(index, target) {
+		if (this.readonly || this.disabled || index === target || index < 0 || index >= this.rules.length || target < 0 || target >= this.rules.length) return;
+		const rules = [...this.rules];
+		moveItemInArray(rules, index, target);
+		this.announcement = `${this.field(this.rules[index])?.label ?? "Rule"} moved to position ${target + 1}.`;
+		this.rulesChange.emit(rules);
+	}
 	remove(index) {
 		if (this.readonly || this.disabled || index < 0 || index >= this.rules.length) return;
 		this.rulesChange.emit(this.rules.filter((_, i) => i !== index));
@@ -10006,8 +10081,8 @@ var IRuleEditor = class IRuleEditor {
 		},
 		outputs: { rulesChange: "rulesChange" },
 		ngImport: i0,
-		template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n  <div class=\"i-rule-editor__toolbar\">\n    <i-button\n      icon=\"pi pi-plus\"\n      size=\"small\"\n      [disabled]=\"!canAdd\"\n      (clicked)=\"add()\"\n      >{{ addLabel }}</i-button\n    >\n  </div>\n  <div class=\"i-rule-editor__rules\">\n    @for (rule of rules; track $index; let index = $index) {\n      <div\n        class=\"i-rule-editor__row\"\n        role=\"group\"\n        [attr.aria-label]=\"'Rule ' + (index + 1)\"\n      >\n        <span class=\"i-rule-editor__number\" aria-hidden=\"true\">{{\n          index + 1\n        }}</span>\n        <i-select\n          label=\"Field\"\n          [options]=\"fields\"\n          optionLabel=\"label\"\n          [readonly]=\"readonly || disabled\"\n          [fluid]=\"true\"\n          [ngModel]=\"field(rule)\"\n          (ngModelChange)=\"changeField(index, $event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n        />\n        <i-select\n          [label]=\"operatorLabel\"\n          [options]=\"operatorsFor(field(rule))\"\n          optionLabel=\"label\"\n          [filter]=\"false\"\n          [readonly]=\"readonly || disabled\"\n          [fluid]=\"true\"\n          [ngModel]=\"operator(rule)\"\n          (ngModelChange)=\"changeOperator(index, $event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n        />\n        @if (operator(rule)?.requiresValue !== false) {\n          @if (field(rule)?.type === \"boolean\") {\n            <i-select\n              label=\"Value\"\n              [options]=\"booleanOptions\"\n              optionLabel=\"label\"\n              [filter]=\"false\"\n              [readonly]=\"readonly || disabled\"\n              [fluid]=\"true\"\n              [ngModel]=\"booleanValue(rule)\"\n              (ngModelChange)=\"update(index, { value: $event?.key ?? '' })\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n          } @else {\n            <i-input-text\n              label=\"Value\"\n              [type]=\"field(rule)?.type ?? 'text'\"\n              [readonly]=\"readonly || disabled\"\n              [fluid]=\"true\"\n              [ngModel]=\"rule.value\"\n              (ngModelChange)=\"\n                update(index, { value: $event == null ? '' : '' + $event })\n              \"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n          }\n        }\n        <i-button\n          icon=\"pi pi-trash\"\n          size=\"small\"\n          severity=\"danger\"\n          [text]=\"true\"\n          [disabled]=\"readonly || disabled\"\n          (clicked)=\"remove(index)\"\n          >Remove</i-button\n        >\n      </div>\n    } @empty {\n      <i-no-content [message]=\"emptyMessage\" />\n    }\n  </div>\n</div>\n",
-		styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}.i-rule-editor__number{color:var(--color-primary);background:var(--surface-section)}:host{display:block}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.i-rule-editor__rules{display:grid;gap:.75rem}.i-rule-editor__row{display:grid;grid-template-columns:auto minmax(9rem,1fr) minmax(9rem,1fr) minmax(9rem,1fr) auto;align-items:end;gap:.75rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-rule-editor__number{display:grid;place-items:center;width:1.75rem;height:1.75rem;margin-bottom:.25rem;border-radius:50%;font-size:.8125rem;font-weight:700}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{min-width:0}.i-rule-editor__row>i-button{grid-column:-1}@media(max-width:48rem){.i-rule-editor__row{grid-template-columns:auto repeat(2,minmax(0,1fr))}.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:3;justify-self:end}}@media(max-width:34rem){.i-rule-editor__row{grid-template-columns:auto minmax(0,1fr)}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:2;justify-self:end}}\n"],
+		template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n  <div class=\"i-rule-editor__toolbar\">\n    <i-button\n      icon=\"pi pi-plus\"\n      size=\"small\"\n      [disabled]=\"!canAdd\"\n      (clicked)=\"add()\"\n      >{{ addLabel }}</i-button\n    >\n  </div>\n  <div class=\"i-rule-editor__rules\" cdkDropList\n    [cdkDropListDisabled]=\"readonly || disabled\"\n    (cdkDropListDropped)=\"reorder($event.previousIndex, $event.currentIndex)\">\n    @for (rule of rules; track $index; let index = $index) {\n      <div\n        class=\"i-rule-editor__row\"\n        cdkDrag cdkDragLockAxis=\"y\" cdkDragPreviewContainer=\"parent\"\n        [cdkDragDisabled]=\"readonly || disabled\"\n        role=\"group\"\n        [attr.aria-label]=\"'Rule ' + (index + 1)\"\n      >\n        <button type=\"button\" class=\"i-rule-editor__drag-handle\" cdkDragHandle\n          [disabled]=\"readonly || disabled\"\n          [attr.aria-label]=\"'Reorder rule ' + (index + 1) + '. Use up and down arrow keys.'\"\n          title=\"Drag to reorder\"\n          (keydown.arrowup)=\"reorder(index, index - 1); $event.preventDefault()\"\n          (keydown.arrowdown)=\"reorder(index, index + 1); $event.preventDefault()\">\n          <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n        </button>\n        <i-select\n          label=\"Field\"\n          [options]=\"fields\"\n          optionLabel=\"label\"\n          [readonly]=\"readonly || disabled\"\n          [fluid]=\"true\"\n          [ngModel]=\"field(rule)\"\n          (ngModelChange)=\"changeField(index, $event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n        />\n        <i-select\n          [label]=\"operatorLabel\"\n          [options]=\"operatorsFor(field(rule))\"\n          optionLabel=\"label\"\n          [filter]=\"false\"\n          [readonly]=\"readonly || disabled\"\n          [fluid]=\"true\"\n          [ngModel]=\"operator(rule)\"\n          (ngModelChange)=\"changeOperator(index, $event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n        />\n        @if (operator(rule)?.requiresValue !== false) {\n          @if (field(rule)?.type === \"boolean\") {\n            <i-select\n              label=\"Value\"\n              [options]=\"booleanOptions\"\n              optionLabel=\"label\"\n              [filter]=\"false\"\n              [readonly]=\"readonly || disabled\"\n              [fluid]=\"true\"\n              [ngModel]=\"booleanValue(rule)\"\n              (ngModelChange)=\"update(index, { value: $event?.key ?? '' })\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n          } @else {\n            <i-input-text\n              label=\"Value\"\n              [type]=\"field(rule)?.type ?? 'text'\"\n              [readonly]=\"readonly || disabled\"\n              [fluid]=\"true\"\n              [ngModel]=\"rule.value\"\n              (ngModelChange)=\"\n                update(index, { value: $event == null ? '' : '' + $event })\n              \"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n          }\n        }\n        <i-button\n          icon=\"pi pi-trash\"\n          size=\"small\"\n          severity=\"danger\"\n          [text]=\"true\"\n          [ariaLabel]=\"'Remove rule ' + (index + 1)\"\n          title=\"Remove\"\n          [disabled]=\"readonly || disabled\"\n          (clicked)=\"remove(index)\"\n        />\n      </div>\n    } @empty {\n      <i-no-content [message]=\"emptyMessage\" />\n    }\n  </div>\n  <span class=\"i-rule-editor__announcement\" role=\"status\" aria-live=\"polite\">{{ announcement }}</span>\n</div>\n",
+		styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}:host{display:block}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.i-rule-editor__rules{display:grid;gap:.75rem}.i-rule-editor__row{display:grid;grid-template-columns:auto minmax(9rem,1fr) minmax(9rem,1fr) minmax(9rem,1fr) auto;align-items:end;gap:.75rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-rule-editor__drag-handle{display:grid;place-items:center;width:2rem;height:2rem;padding:0;margin-bottom:.125rem;border:0;border-radius:.25rem;color:inherit;background:transparent;cursor:grab;touch-action:none}.i-rule-editor__drag-handle:active{cursor:grabbing}.i-rule-editor__drag-handle:disabled{cursor:default;opacity:.4}.i-rule-editor__drag-handle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{min-width:0}.i-rule-editor__row>i-button{grid-column:5}.i-rule-editor__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.i-rule-editor__row.cdk-drag-preview{box-sizing:border-box;box-shadow:0 8px 24px #00000026}.i-rule-editor__row.cdk-drag-placeholder{opacity:.25}@media(max-width:48rem){.i-rule-editor__row{grid-template-columns:auto repeat(2,minmax(0,1fr))}.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:3;justify-self:end}}@media(max-width:34rem){.i-rule-editor__row{grid-template-columns:auto minmax(0,1fr)}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:2;justify-self:end}}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -10031,6 +10106,67 @@ var IRuleEditor = class IRuleEditor {
 				outputs: ["ngModelChange"],
 				exportAs: ["ngModel"]
 			},
+			{
+				kind: "directive",
+				type: CdkDrag,
+				selector: "[cdkDrag]",
+				inputs: [
+					"cdkDragData",
+					"cdkDragLockAxis",
+					"cdkDragRootElement",
+					"cdkDragBoundary",
+					"cdkDragStartDelay",
+					"cdkDragFreeDragPosition",
+					"cdkDragDisabled",
+					"cdkDragConstrainPosition",
+					"cdkDragPreviewClass",
+					"cdkDragPreviewContainer",
+					"cdkDragScale"
+				],
+				outputs: [
+					"cdkDragStarted",
+					"cdkDragReleased",
+					"cdkDragEnded",
+					"cdkDragEntered",
+					"cdkDragExited",
+					"cdkDragDropped",
+					"cdkDragMoved"
+				],
+				exportAs: ["cdkDrag"]
+			},
+			{
+				kind: "directive",
+				type: CdkDragHandle,
+				selector: "[cdkDragHandle]",
+				inputs: ["cdkDragHandleDisabled"]
+			},
+			{
+				kind: "directive",
+				type: CdkDropList,
+				selector: "[cdkDropList], cdk-drop-list",
+				inputs: [
+					"cdkDropListConnectedTo",
+					"cdkDropListData",
+					"cdkDropListOrientation",
+					"id",
+					"cdkDropListLockAxis",
+					"cdkDropListDisabled",
+					"cdkDropListSortingDisabled",
+					"cdkDropListEnterPredicate",
+					"cdkDropListSortPredicate",
+					"cdkDropListAutoScrollDisabled",
+					"cdkDropListAutoScrollStep",
+					"cdkDropListElementContainer",
+					"cdkDropListHasAnchor"
+				],
+				outputs: [
+					"cdkDropListDropped",
+					"cdkDropListEntered",
+					"cdkDropListExited",
+					"cdkDropListSorted"
+				],
+				exportAs: ["cdkDropList"]
+			},
 			{
 				kind: "component",
 				type: IButton,
@@ -10117,14 +10253,17 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			imports: [
 				FormsModule,
+				CdkDrag,
+				CdkDragHandle,
+				CdkDropList,
 				IButton,
 				IInputText,
 				ISelect,
 				NoContentComponent
 			],
 			changeDetection: ChangeDetectionStrategy.Eager,
-			template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n  <div class=\"i-rule-editor__toolbar\">\n    <i-button\n      icon=\"pi pi-plus\"\n      size=\"small\"\n      [disabled]=\"!canAdd\"\n      (clicked)=\"add()\"\n      >{{ addLabel }}</i-button\n    >\n  </div>\n  <div class=\"i-rule-editor__rules\">\n    @for (rule of rules; track $index; let index = $index) {\n      <div\n        class=\"i-rule-editor__row\"\n        role=\"group\"\n        [attr.aria-label]=\"'Rule ' + (index + 1)\"\n      >\n        <span class=\"i-rule-editor__number\" aria-hidden=\"true\">{{\n          index + 1\n        }}</span>\n        <i-select\n          label=\"Field\"\n          [options]=\"fields\"\n          optionLabel=\"label\"\n          [readonly]=\"readonly || disabled\"\n          [fluid]=\"true\"\n          [ngModel]=\"field(rule)\"\n          (ngModelChange)=\"changeField(index, $event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n        />\n        <i-select\n          [label]=\"operatorLabel\"\n          [options]=\"operatorsFor(field(rule))\"\n          optionLabel=\"label\"\n          [filter]=\"false\"\n          [readonly]=\"readonly || disabled\"\n          [fluid]=\"true\"\n          [ngModel]=\"operator(rule)\"\n          (ngModelChange)=\"changeOperator(index, $event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n        />\n        @if (operator(rule)?.requiresValue !== false) {\n          @if (field(rule)?.type === \"boolean\") {\n            <i-select\n              label=\"Value\"\n              [options]=\"booleanOptions\"\n              optionLabel=\"label\"\n              [filter]=\"false\"\n              [readonly]=\"readonly || disabled\"\n              [fluid]=\"true\"\n              [ngModel]=\"booleanValue(rule)\"\n              (ngModelChange)=\"update(index, { value: $event?.key ?? '' })\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n          } @else {\n            <i-input-text\n              label=\"Value\"\n              [type]=\"field(rule)?.type ?? 'text'\"\n              [readonly]=\"readonly || disabled\"\n              [fluid]=\"true\"\n              [ngModel]=\"rule.value\"\n              (ngModelChange)=\"\n                update(index, { value: $event == null ? '' : '' + $event })\n              \"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n          }\n        }\n        <i-button\n          icon=\"pi pi-trash\"\n          size=\"small\"\n          severity=\"danger\"\n          [text]=\"true\"\n          [disabled]=\"readonly || disabled\"\n          (clicked)=\"remove(index)\"\n          >Remove</i-button\n        >\n      </div>\n    } @empty {\n      <i-no-content [message]=\"emptyMessage\" />\n    }\n  </div>\n</div>\n",
-			styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}.i-rule-editor__number{color:var(--color-primary);background:var(--surface-section)}:host{display:block}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.i-rule-editor__rules{display:grid;gap:.75rem}.i-rule-editor__row{display:grid;grid-template-columns:auto minmax(9rem,1fr) minmax(9rem,1fr) minmax(9rem,1fr) auto;align-items:end;gap:.75rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-rule-editor__number{display:grid;place-items:center;width:1.75rem;height:1.75rem;margin-bottom:.25rem;border-radius:50%;font-size:.8125rem;font-weight:700}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{min-width:0}.i-rule-editor__row>i-button{grid-column:-1}@media(max-width:48rem){.i-rule-editor__row{grid-template-columns:auto repeat(2,minmax(0,1fr))}.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:3;justify-self:end}}@media(max-width:34rem){.i-rule-editor__row{grid-template-columns:auto minmax(0,1fr)}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:2;justify-self:end}}\n"]
+			template: "<div class=\"i-rule-editor\" role=\"group\" [attr.aria-label]=\"ariaLabel\">\n  <div class=\"i-rule-editor__toolbar\">\n    <i-button\n      icon=\"pi pi-plus\"\n      size=\"small\"\n      [disabled]=\"!canAdd\"\n      (clicked)=\"add()\"\n      >{{ addLabel }}</i-button\n    >\n  </div>\n  <div class=\"i-rule-editor__rules\" cdkDropList\n    [cdkDropListDisabled]=\"readonly || disabled\"\n    (cdkDropListDropped)=\"reorder($event.previousIndex, $event.currentIndex)\">\n    @for (rule of rules; track $index; let index = $index) {\n      <div\n        class=\"i-rule-editor__row\"\n        cdkDrag cdkDragLockAxis=\"y\" cdkDragPreviewContainer=\"parent\"\n        [cdkDragDisabled]=\"readonly || disabled\"\n        role=\"group\"\n        [attr.aria-label]=\"'Rule ' + (index + 1)\"\n      >\n        <button type=\"button\" class=\"i-rule-editor__drag-handle\" cdkDragHandle\n          [disabled]=\"readonly || disabled\"\n          [attr.aria-label]=\"'Reorder rule ' + (index + 1) + '. Use up and down arrow keys.'\"\n          title=\"Drag to reorder\"\n          (keydown.arrowup)=\"reorder(index, index - 1); $event.preventDefault()\"\n          (keydown.arrowdown)=\"reorder(index, index + 1); $event.preventDefault()\">\n          <i class=\"pi pi-bars\" aria-hidden=\"true\"></i>\n        </button>\n        <i-select\n          label=\"Field\"\n          [options]=\"fields\"\n          optionLabel=\"label\"\n          [readonly]=\"readonly || disabled\"\n          [fluid]=\"true\"\n          [ngModel]=\"field(rule)\"\n          (ngModelChange)=\"changeField(index, $event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n        />\n        <i-select\n          [label]=\"operatorLabel\"\n          [options]=\"operatorsFor(field(rule))\"\n          optionLabel=\"label\"\n          [filter]=\"false\"\n          [readonly]=\"readonly || disabled\"\n          [fluid]=\"true\"\n          [ngModel]=\"operator(rule)\"\n          (ngModelChange)=\"changeOperator(index, $event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n        />\n        @if (operator(rule)?.requiresValue !== false) {\n          @if (field(rule)?.type === \"boolean\") {\n            <i-select\n              label=\"Value\"\n              [options]=\"booleanOptions\"\n              optionLabel=\"label\"\n              [filter]=\"false\"\n              [readonly]=\"readonly || disabled\"\n              [fluid]=\"true\"\n              [ngModel]=\"booleanValue(rule)\"\n              (ngModelChange)=\"update(index, { value: $event?.key ?? '' })\"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n          } @else {\n            <i-input-text\n              label=\"Value\"\n              [type]=\"field(rule)?.type ?? 'text'\"\n              [readonly]=\"readonly || disabled\"\n              [fluid]=\"true\"\n              [ngModel]=\"rule.value\"\n              (ngModelChange)=\"\n                update(index, { value: $event == null ? '' : '' + $event })\n              \"\n              [ngModelOptions]=\"{ standalone: true }\"\n            />\n          }\n        }\n        <i-button\n          icon=\"pi pi-trash\"\n          size=\"small\"\n          severity=\"danger\"\n          [text]=\"true\"\n          [ariaLabel]=\"'Remove rule ' + (index + 1)\"\n          title=\"Remove\"\n          [disabled]=\"readonly || disabled\"\n          (clicked)=\"remove(index)\"\n        />\n      </div>\n    } @empty {\n      <i-no-content [message]=\"emptyMessage\" />\n    }\n  </div>\n  <span class=\"i-rule-editor__announcement\" role=\"status\" aria-live=\"polite\">{{ announcement }}</span>\n</div>\n",
+			styles: [".i-rule-editor{color:var(--color-text-primary)}.i-rule-editor__row{border-color:var(--surface-border);background:var(--surface-card)}:host{display:block}.i-rule-editor__toolbar{display:flex;justify-content:flex-end;margin-bottom:.75rem}.i-rule-editor__rules{display:grid;gap:.75rem}.i-rule-editor__row{display:grid;grid-template-columns:auto minmax(9rem,1fr) minmax(9rem,1fr) minmax(9rem,1fr) auto;align-items:end;gap:.75rem;padding:1rem;border:1px solid var(--surface-border);border-radius:.5rem}.i-rule-editor__drag-handle{display:grid;place-items:center;width:2rem;height:2rem;padding:0;margin-bottom:.125rem;border:0;border-radius:.25rem;color:inherit;background:transparent;cursor:grab;touch-action:none}.i-rule-editor__drag-handle:active{cursor:grabbing}.i-rule-editor__drag-handle:disabled{cursor:default;opacity:.4}.i-rule-editor__drag-handle:focus-visible{outline:2px solid currentColor;outline-offset:2px}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{min-width:0}.i-rule-editor__row>i-button{grid-column:5}.i-rule-editor__announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.i-rule-editor__row.cdk-drag-preview{box-sizing:border-box;box-shadow:0 8px 24px #00000026}.i-rule-editor__row.cdk-drag-placeholder{opacity:.25}@media(max-width:48rem){.i-rule-editor__row{grid-template-columns:auto repeat(2,minmax(0,1fr))}.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:3;justify-self:end}}@media(max-width:34rem){.i-rule-editor__row{grid-template-columns:auto minmax(0,1fr)}.i-rule-editor__row>i-select,.i-rule-editor__row>i-input-text{grid-column:2}.i-rule-editor__row>i-button{grid-column:2;justify-self:end}}\n"]
 		}]
 	}],
 	propDecorators: {