cloud-ide-element 1.1.250 → 1.1.253

package/fesm2022/cloud-ide-element.mjs

@@ -5,7 +5,8 @@ import { Pipe, Injectable, inject, ChangeDetectorRef, EventEmitter, ViewContaine
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, takeUntil, Observable, retry, catchError, finalize, throwError, map, of } from 'rxjs';
-import * as i1$1 from '@angular/common/http';
+import * as i1$1 from '@angular/platform-browser';
+import * as i1$2 from '@angular/common/http';
 import { HttpClient, HttpEventType, HttpParams, HttpRequest } from '@angular/common/http';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { generateStringFromObject, coreRoutesUrl, cidePath as cidePath$1, hostManagerRoutesUrl as hostManagerRoutesUrl$1 } from 'cloud-ide-lms-model';
@@ -3000,24 +3001,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: ['dropdownContainer', { read: ViewContainerRef, static: false }]
             }] } });
 
+/**
+ * Load SVG icons directly from assets/icons/svg/*.svg files.
+ * Add .svg files to projects/cloud-ide-element/src/lib/assets/icons/svg/
+ */
+const CACHE = new Map();
+function getBase() {
+    if (typeof document === 'undefined')
+        return '';
+    const base = document.querySelector('base')?.getAttribute('href') || '/';
+    return base.replace(/\/$/, '') || '';
+}
+function findGradientIds(s) {
+    const ids = new Set();
+    const idRe = /id="([^"]+)"|url\(#([^)]+)\)/g;
+    let m;
+    while ((m = idRe.exec(s)) !== null) {
+        ids.add(m[1] || m[2]);
+    }
+    return ids;
+}
+/** Fetch SVG from assets/icons/svg/{name}.svg */
+async function fetchCideIcon(name) {
+    const cached = CACHE.get(name);
+    if (cached)
+        return cached;
+    const base = getBase();
+    const url = `${base}/assets/icons/svg/${name}.svg`;
+    const res = await fetch(url);
+    if (!res.ok)
+        throw new Error(`Icon not found: ${name}`);
+    const svg = await res.text();
+    CACHE.set(name, svg);
+    return svg;
+}
+/** Returns SVG with unique gradient ID to avoid conflicts when multiple instances. */
+async function getCideIconSvg(name, uniqueId) {
+    try {
+        let svg = await fetchCideIcon(name);
+        const suffix = uniqueId ?? Math.random().toString(36).slice(2, 9);
+        for (const id of findGradientIds(svg)) {
+            svg = svg.split(id).join(`cide-${name}-${suffix}`);
+        }
+        return svg;
+    }
+    catch {
+        return undefined;
+    }
+}
+
 class CideIconComponent {
+    sanitizer;
+    cdr;
     size = "xs";
     type = "round";
     toolTip = "";
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideIconComponent, isStandalone: true, selector: "cide-ele-icon", inputs: { size: "size", type: "type", toolTip: "toolTip" }, host: { properties: { "class.mpro-icon-field": "type === 'box'" } }, ngImport: i0, template: "<button class=\"cide-icon tw-m-1 tw-inline-flex tw-items-center tw-justify-center tw-outline-none tw-relative\" [ngClass]=\"{\r\n        'tw-h-[35px] tw-w-[35px]': (size === 'lg'), \r\n        'tw-h-[27px] tw-w-[27px]': (size === 'md'), \r\n        'tw-h-[23px] tw-w-[23px]': (size === 'sm'), \r\n        'tw-h-[19px] tw-w-[19px] !tw-m-[2px]': (size === 'xs'), \r\n        'tw-h-[14px] tw-w-[14px] !tw-m-[1px] cide-icon-2xs': (size === '2xs'), \r\n        'tw-h-[11px] tw-w-[11px] !tw-m-[1px] cide-icon-3xs': (size === '3xs'), \r\n        'tw-rounded-2xl' : (type === 'round'), 'tw-rounded-[0.2rem]' : (type === 'box') , \r\n        'tw-h-[15px] tw-w-[15px] none-type !tw-m-0': (type === 'none'),\r\n        'cide-tooltip': (toolTip),\r\n        }\" type=\"button\">\r\n    <span class=\"cide-tooltip-content\">{{toolTip}}</span>\r\n\r\n    <span class=\"material-symbols-outlined tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full\"\r\n        [ngClass]=\"{'tw-text-[28px]': (size === 'lg'), 'tw-text-[22px]': (size === 'md'), 'tw-text-[25px]': (size === 'sm'), 'tw-text-[18px]': (size === 'xs'), 'tw-text-[15px]': (size === '2xs'), 'tw-text-[11px]': (size === '3xs')}\">\r\n        <ng-content></ng-content>\r\n    </span>\r\n</button>", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;color:inherit}:host(.mpro-icon-field),:host-context(.mpro-icon-field){position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}:host(.mpro-icon-field):before,:host-context(.mpro-icon-field):before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}:host(.mpro-icon-field):hover:before,:host-context(.mpro-icon-field):hover:before{opacity:1;transform:scale(1)}:host(.mpro-icon-field):hover,:host-context(.mpro-icon-field):hover{color:#3b82f6}:host(.mpro-icon-field):active,:host-context(.mpro-icon-field):active{transform:scale(.95)}:host(.mpro-icon-field) .header-tooltip,:host-context(.mpro-icon-field) .header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}:host(.mpro-icon-field) .header-tooltip:before,:host-context(.mpro-icon-field) .header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}:host(.mpro-icon-field):hover .header-tooltip,:host-context(.mpro-icon-field):hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    /** Custom icon name with cide- prefix (e.g. 'cide-ai-sparkle'). When set, renders SVG from assets/icons/svg/*.svg. */
+    name = "";
+    customSvg = null;
+    constructor(sanitizer, cdr) {
+        this.sanitizer = sanitizer;
+        this.cdr = cdr;
+    }
+    ngOnChanges() {
+        if (this.name?.startsWith('cide-')) {
+            const iconName = this.name.slice(5); // strip 'cide-' prefix
+            getCideIconSvg(iconName).then((svg) => {
+                this.customSvg = svg ? this.sanitizer.bypassSecurityTrustHtml(svg) : null;
+                this.cdr.detectChanges();
+            });
+        }
+        else {
+            this.customSvg = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideIconComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideIconComponent, isStandalone: true, selector: "cide-ele-icon", inputs: { size: "size", type: "type", toolTip: "toolTip", name: "name" }, host: { properties: { "class.mpro-icon-field": "type === 'box'" } }, usesOnChanges: true, ngImport: i0, template: "<button class=\"cide-icon tw-m-1 tw-inline-flex tw-items-center tw-justify-center tw-outline-none tw-relative\" [ngClass]=\"{\r\n        'tw-h-[35px] tw-w-[35px]': (size === 'lg'), \r\n        'tw-h-[27px] tw-w-[27px]': (size === 'md'), \r\n        'tw-h-[23px] tw-w-[23px]': (size === 'sm'), \r\n        'tw-h-[19px] tw-w-[19px] !tw-m-[2px]': (size === 'xs'), \r\n        'tw-h-[14px] tw-w-[14px] !tw-m-[1px] cide-icon-2xs': (size === '2xs'), \r\n        'tw-h-[11px] tw-w-[11px] !tw-m-[1px] cide-icon-3xs': (size === '3xs'), \r\n        'tw-rounded-2xl' : (type === 'round'), 'tw-rounded-[0.2rem]' : (type === 'box') , \r\n        'tw-h-[15px] tw-w-[15px] none-type !tw-m-0': (type === 'none'),\r\n        'cide-tooltip': (toolTip),\r\n        }\" type=\"button\">\r\n    <span class=\"cide-tooltip-content\">{{toolTip}}</span>\r\n\r\n    @if (customSvg) {\r\n      <span class=\"cide-icon-custom tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full\" [innerHTML]=\"customSvg\"></span>\r\n    } @else {\r\n      <span class=\"material-symbols-outlined tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full\"\r\n          [ngClass]=\"{'tw-text-[28px]': (size === 'lg'), 'tw-text-[22px]': (size === 'md'), 'tw-text-[25px]': (size === 'sm'), 'tw-text-[18px]': (size === 'xs'), 'tw-text-[15px]': (size === '2xs'), 'tw-text-[11px]': (size === '3xs')}\">\r\n          <ng-content></ng-content>\r\n      </span>\r\n    }\r\n</button>", styles: [".cide-icon-custom svg{width:100%;height:100%;display:block}:host{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;color:inherit}:host(.mpro-icon-field),:host-context(.mpro-icon-field){position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}:host(.mpro-icon-field):before,:host-context(.mpro-icon-field):before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}:host(.mpro-icon-field):hover:before,:host-context(.mpro-icon-field):hover:before{opacity:1;transform:scale(1)}:host(.mpro-icon-field):hover,:host-context(.mpro-icon-field):hover{color:#3b82f6}:host(.mpro-icon-field):active,:host-context(.mpro-icon-field):active{transform:scale(.95)}:host(.mpro-icon-field) .header-tooltip,:host-context(.mpro-icon-field) .header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}:host(.mpro-icon-field) .header-tooltip:before,:host-context(.mpro-icon-field) .header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}:host(.mpro-icon-field):hover .header-tooltip,:host-context(.mpro-icon-field):hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-ele-icon', standalone: true, imports: [CommonModule], host: {
                         '[class.mpro-icon-field]': "type === 'box'"
-                    }, template: "<button class=\"cide-icon tw-m-1 tw-inline-flex tw-items-center tw-justify-center tw-outline-none tw-relative\" [ngClass]=\"{\r\n        'tw-h-[35px] tw-w-[35px]': (size === 'lg'), \r\n        'tw-h-[27px] tw-w-[27px]': (size === 'md'), \r\n        'tw-h-[23px] tw-w-[23px]': (size === 'sm'), \r\n        'tw-h-[19px] tw-w-[19px] !tw-m-[2px]': (size === 'xs'), \r\n        'tw-h-[14px] tw-w-[14px] !tw-m-[1px] cide-icon-2xs': (size === '2xs'), \r\n        'tw-h-[11px] tw-w-[11px] !tw-m-[1px] cide-icon-3xs': (size === '3xs'), \r\n        'tw-rounded-2xl' : (type === 'round'), 'tw-rounded-[0.2rem]' : (type === 'box') , \r\n        'tw-h-[15px] tw-w-[15px] none-type !tw-m-0': (type === 'none'),\r\n        'cide-tooltip': (toolTip),\r\n        }\" type=\"button\">\r\n    <span class=\"cide-tooltip-content\">{{toolTip}}</span>\r\n\r\n    <span class=\"material-symbols-outlined tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full\"\r\n        [ngClass]=\"{'tw-text-[28px]': (size === 'lg'), 'tw-text-[22px]': (size === 'md'), 'tw-text-[25px]': (size === 'sm'), 'tw-text-[18px]': (size === 'xs'), 'tw-text-[15px]': (size === '2xs'), 'tw-text-[11px]': (size === '3xs')}\">\r\n        <ng-content></ng-content>\r\n    </span>\r\n</button>", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;color:inherit}:host(.mpro-icon-field),:host-context(.mpro-icon-field){position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}:host(.mpro-icon-field):before,:host-context(.mpro-icon-field):before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}:host(.mpro-icon-field):hover:before,:host-context(.mpro-icon-field):hover:before{opacity:1;transform:scale(1)}:host(.mpro-icon-field):hover,:host-context(.mpro-icon-field):hover{color:#3b82f6}:host(.mpro-icon-field):active,:host-context(.mpro-icon-field):active{transform:scale(.95)}:host(.mpro-icon-field) .header-tooltip,:host-context(.mpro-icon-field) .header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}:host(.mpro-icon-field) .header-tooltip:before,:host-context(.mpro-icon-field) .header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}:host(.mpro-icon-field):hover .header-tooltip,:host-context(.mpro-icon-field):hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}\n"] }]
-        }], propDecorators: { size: [{
+                    }, template: "<button class=\"cide-icon tw-m-1 tw-inline-flex tw-items-center tw-justify-center tw-outline-none tw-relative\" [ngClass]=\"{\r\n        'tw-h-[35px] tw-w-[35px]': (size === 'lg'), \r\n        'tw-h-[27px] tw-w-[27px]': (size === 'md'), \r\n        'tw-h-[23px] tw-w-[23px]': (size === 'sm'), \r\n        'tw-h-[19px] tw-w-[19px] !tw-m-[2px]': (size === 'xs'), \r\n        'tw-h-[14px] tw-w-[14px] !tw-m-[1px] cide-icon-2xs': (size === '2xs'), \r\n        'tw-h-[11px] tw-w-[11px] !tw-m-[1px] cide-icon-3xs': (size === '3xs'), \r\n        'tw-rounded-2xl' : (type === 'round'), 'tw-rounded-[0.2rem]' : (type === 'box') , \r\n        'tw-h-[15px] tw-w-[15px] none-type !tw-m-0': (type === 'none'),\r\n        'cide-tooltip': (toolTip),\r\n        }\" type=\"button\">\r\n    <span class=\"cide-tooltip-content\">{{toolTip}}</span>\r\n\r\n    @if (customSvg) {\r\n      <span class=\"cide-icon-custom tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full\" [innerHTML]=\"customSvg\"></span>\r\n    } @else {\r\n      <span class=\"material-symbols-outlined tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full\"\r\n          [ngClass]=\"{'tw-text-[28px]': (size === 'lg'), 'tw-text-[22px]': (size === 'md'), 'tw-text-[25px]': (size === 'sm'), 'tw-text-[18px]': (size === 'xs'), 'tw-text-[15px]': (size === '2xs'), 'tw-text-[11px]': (size === '3xs')}\">\r\n          <ng-content></ng-content>\r\n      </span>\r\n    }\r\n</button>", styles: [".cide-icon-custom svg{width:100%;height:100%;display:block}:host{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;color:inherit}:host(.mpro-icon-field),:host-context(.mpro-icon-field){position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}:host(.mpro-icon-field):before,:host-context(.mpro-icon-field):before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}:host(.mpro-icon-field):hover:before,:host-context(.mpro-icon-field):hover:before{opacity:1;transform:scale(1)}:host(.mpro-icon-field):hover,:host-context(.mpro-icon-field):hover{color:#3b82f6}:host(.mpro-icon-field):active,:host-context(.mpro-icon-field):active{transform:scale(.95)}:host(.mpro-icon-field) .header-tooltip,:host-context(.mpro-icon-field) .header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}:host(.mpro-icon-field) .header-tooltip:before,:host-context(.mpro-icon-field) .header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}:host(.mpro-icon-field):hover .header-tooltip,:host-context(.mpro-icon-field):hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { size: [{
                 type: Input
             }], type: [{
                 type: Input
             }], toolTip: [{
                 type: Input
+            }], name: [{
+                type: Input
             }] } });
 
 class CideEleTabComponent {
@@ -3069,7 +3142,7 @@ class CideEleTabComponent {
             .join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleTabComponent, isStandalone: true, selector: "cide-ele-tab", inputs: { tabs: "tabs", activeTabId: "activeTabId", size: "size", variant: "variant", fullWidth: "fullWidth", disabled: "disabled" }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: "<div [class]=\"getContainerClasses()\">\r\n  @for (tab of tabs; track tab.id) {\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"getTabClasses(tab)\"\r\n      [disabled]=\"tab.disabled || disabled\"\r\n      (click)=\"onTabClick(tab)\"\r\n      [attr.aria-selected]=\"isActive(tab.id)\"\r\n      [attr.aria-controls]=\"'panel-' + tab.id\"\r\n      role=\"tab\">\r\n      \r\n      @if (tab.icon) {\r\n        <cide-ele-icon class=\"cide-tab-icon\">{{ tab.icon }}</cide-ele-icon>\r\n      }\r\n      \r\n      <span class=\"cide-tab-label\">{{ tab.label }}</span>\r\n      \r\n      @if (tab.badge) {\r\n        <span class=\"cide-tab-badge\">{{ tab.badge }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</div> ", styles: [".cide-tab-container{display:flex;border-bottom:1px solid #e5e7eb;overflow-x:auto;scrollbar-width:none}.cide-tab-container::-webkit-scrollbar{display:none}.cide-tab-container.cide-tab-full-width .cide-tab-item{flex:1}.cide-tab-container.cide-tab-container-pills{border-bottom:none;gap:.25rem;padding:.25rem;background:#f9fafb;border-radius:.375rem}.cide-tab-container.cide-tab-container-underline{border-bottom:2px solid #e5e7eb}.cide-tab-item{display:inline-flex;align-items:center;gap:.375rem;border:none;background:none;cursor:pointer;transition:all .15s ease;font-weight:500;color:#6b7280;white-space:nowrap;outline:none}.cide-tab-item:hover:not(.cide-tab-disabled){color:#374151}.cide-tab-item:focus-visible{outline:2px solid var(--cide-ele-brand-primary, #3b82f6);outline-offset:2px}.cide-tab-item.cide-tab-active{color:var(--cide-ele-brand-primary, #3b82f6)}.cide-tab-item.cide-tab-disabled{opacity:.5;cursor:not-allowed}.cide-tab-sm{padding:.375rem .75rem;font-size:.875rem}.cide-tab-sm .cide-tab-icon{font-size:.75rem}.cide-tab-sm .cide-tab-badge{font-size:.625rem;padding:.125rem .375rem}.cide-tab-md{padding:.5rem 1rem;font-size:.875rem}.cide-tab-md .cide-tab-icon{font-size:.875rem}.cide-tab-md .cide-tab-badge{font-size:.75rem;padding:.125rem .5rem}.cide-tab-lg{padding:.75rem 1.25rem;font-size:1rem}.cide-tab-lg .cide-tab-icon{font-size:1rem}.cide-tab-lg .cide-tab-badge{font-size:.75rem;padding:.25rem .5rem}.cide-tab-default{border-bottom:2px solid transparent}.cide-tab-default.cide-tab-active{border-bottom-color:var(--cide-ele-brand-primary, #3b82f6)}.cide-tab-pills{border-radius:.25rem}.cide-tab-pills:hover:not(.cide-tab-disabled){background:#f3f4f6}.cide-tab-pills.cide-tab-active{background:#fff;color:#374151;box-shadow:0 1px 2px #0000000d}.cide-tab-underline{border-bottom:2px solid transparent;position:relative}.cide-tab-underline.cide-tab-active:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--cide-ele-brand-primary, #3b82f6);border-radius:1px 1px 0 0}.cide-tab-icon{display:inline-flex;align-items:center;flex-shrink:0}.cide-tab-label{display:inline-flex;align-items:center}.cide-tab-badge{display:inline-flex;align-items:center;justify-content:center;background:#dc2626;color:#fff;border-radius:9999px;font-weight:600;min-width:1.25rem;height:1.25rem;line-height:1}.cide-tab-active .cide-tab-badge{background:var(--cide-theme-primary-color)}@media (max-width: 640px){.cide-tab-container{gap:0}.cide-tab-item .cide-tab-label{display:none}.cide-tab-item:not(:has(.cide-tab-icon)) .cide-tab-label{display:inline-flex}.cide-tab-sm{padding:.25rem .5rem}.cide-tab-md{padding:.375rem .75rem}.cide-tab-lg{padding:.5rem 1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleTabComponent, isStandalone: true, selector: "cide-ele-tab", inputs: { tabs: "tabs", activeTabId: "activeTabId", size: "size", variant: "variant", fullWidth: "fullWidth", disabled: "disabled" }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: "<div [class]=\"getContainerClasses()\">\r\n  @for (tab of tabs; track tab.id) {\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"getTabClasses(tab)\"\r\n      [disabled]=\"tab.disabled || disabled\"\r\n      (click)=\"onTabClick(tab)\"\r\n      [attr.aria-selected]=\"isActive(tab.id)\"\r\n      [attr.aria-controls]=\"'panel-' + tab.id\"\r\n      role=\"tab\">\r\n      \r\n      @if (tab.icon) {\r\n        <cide-ele-icon class=\"cide-tab-icon\">{{ tab.icon }}</cide-ele-icon>\r\n      }\r\n      \r\n      <span class=\"cide-tab-label\">{{ tab.label }}</span>\r\n      \r\n      @if (tab.badge) {\r\n        <span class=\"cide-tab-badge\">{{ tab.badge }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</div> ", styles: [".cide-tab-container{display:flex;border-bottom:1px solid #e5e7eb;overflow-x:auto;scrollbar-width:none}.cide-tab-container::-webkit-scrollbar{display:none}.cide-tab-container.cide-tab-full-width .cide-tab-item{flex:1}.cide-tab-container.cide-tab-container-pills{border-bottom:none;gap:.25rem;padding:.25rem;background:#f9fafb;border-radius:.375rem}.cide-tab-container.cide-tab-container-underline{border-bottom:2px solid #e5e7eb}.cide-tab-item{display:inline-flex;align-items:center;gap:.375rem;border:none;background:none;cursor:pointer;transition:all .15s ease;font-weight:500;color:#6b7280;white-space:nowrap;outline:none}.cide-tab-item:hover:not(.cide-tab-disabled){color:#374151}.cide-tab-item:focus-visible{outline:2px solid var(--cide-ele-brand-primary, #3b82f6);outline-offset:2px}.cide-tab-item.cide-tab-active{color:var(--cide-ele-brand-primary, #3b82f6)}.cide-tab-item.cide-tab-disabled{opacity:.5;cursor:not-allowed}.cide-tab-sm{padding:.375rem .75rem;font-size:.875rem}.cide-tab-sm .cide-tab-icon{font-size:.75rem}.cide-tab-sm .cide-tab-badge{font-size:.625rem;padding:.125rem .375rem}.cide-tab-md{padding:.5rem 1rem;font-size:.875rem}.cide-tab-md .cide-tab-icon{font-size:.875rem}.cide-tab-md .cide-tab-badge{font-size:.75rem;padding:.125rem .5rem}.cide-tab-lg{padding:.75rem 1.25rem;font-size:1rem}.cide-tab-lg .cide-tab-icon{font-size:1rem}.cide-tab-lg .cide-tab-badge{font-size:.75rem;padding:.25rem .5rem}.cide-tab-default{border-bottom:2px solid transparent}.cide-tab-default.cide-tab-active{border-bottom-color:var(--cide-ele-brand-primary, #3b82f6)}.cide-tab-pills{border-radius:.25rem}.cide-tab-pills:hover:not(.cide-tab-disabled){background:#f3f4f6}.cide-tab-pills.cide-tab-active{background:#fff;color:#374151;box-shadow:0 1px 2px #0000000d}.cide-tab-underline{border-bottom:2px solid transparent;position:relative}.cide-tab-underline.cide-tab-active:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--cide-ele-brand-primary, #3b82f6);border-radius:1px 1px 0 0}.cide-tab-icon{display:inline-flex;align-items:center;flex-shrink:0}.cide-tab-label{display:inline-flex;align-items:center}.cide-tab-badge{display:inline-flex;align-items:center;justify-content:center;background:#dc2626;color:#fff;border-radius:9999px;font-weight:600;min-width:1.25rem;height:1.25rem;line-height:1}.cide-tab-active .cide-tab-badge{background:var(--cide-theme-primary-color)}@media (max-width: 640px){.cide-tab-container{gap:0}.cide-tab-item .cide-tab-label{display:none}.cide-tab-item:not(:has(.cide-tab-icon)) .cide-tab-label{display:inline-flex}.cide-tab-sm{padding:.25rem .5rem}.cide-tab-md{padding:.375rem .75rem}.cide-tab-lg{padding:.5rem 1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleTabComponent, decorators: [{
             type: Component,
@@ -5553,7 +5626,7 @@ class CideEleFileInputComponent {
                 useExisting: CideEleFileInputComponent,
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n  <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\"\n    [attr.for]=\"'cide-file-input-' + id()\">\n    {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n  </label>\n  }\n\n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n  <div class=\"tw-relative\">\n    <!-- Hidden file input -->\n    <input type=\"file\" [attr.id]=\"'cide-file-input-' + id()\" [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\" [disabled]=\"disabledSignal()\" (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\" />\n\n    <!-- Preview Box -->\n    <div\n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\" [style.width]=\"previewWidthSignal()\" [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n\n      <!-- No Image State -->\n      @if (!hasImages()) {\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n        <div class=\"tw-mb-2\">\n          <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' :\n            placeholderIconSignal() }}</cide-ele-icon>\n        </div>\n        <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n          {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n        </div>\n      </div>\n      }\n\n      <!-- Image Preview State -->\n      @if (hasImages()) {\n      <div class=\"tw-relative tw-w-full tw-h-full\">\n        <img [src]=\"previewUrls()[0]\" [alt]=\"fileNames()[0] || 'Preview image'\"\n          class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n        <div\n          class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n          <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">\n            Click to change</div>\n        </div>\n        @if (!disabledSignal()) {\n        <button type=\"button\"\n          class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n          (click)=\"clearFiles(); $event.stopPropagation()\" title=\"Remove image\">\n          \u00D7\n        </button>\n        }\n        @if (isInErrorState() && failedFile()) {\n        <button type=\"button\"\n          class=\"tw-absolute tw-bottom-2 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed tw-shadow-lg tw-z-10\"\n          (click)=\"retryUpload(); $event.stopPropagation()\" [disabled]=\"isUploading() || disabledSignal()\"\n          title=\"Retry upload\">\n          <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n          Retry Upload\n        </button>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n    <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n      {{ fileNames()[0] }}\n    </div>\n    }\n    <!-- Error message and retry button for preview box mode -->\n    @if (isInErrorState() && failedFile() && !hasImages()) {\n    <div class=\"tw-mt-2 tw-flex tw-flex-col tw-items-center tw-gap-2\">\n      <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n      <button type=\"button\"\n        class=\"tw-flex tw-items-center tw-gap-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n        (click)=\"retryUpload()\" [disabled]=\"isUploading() || disabledSignal()\">\n        <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n        Retry Upload\n      </button>\n    </div>\n    }\n  </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n  <!-- Hidden file input -->\n  <input type=\"file\" [attr.id]=\"'cide-file-input-' + id()\" [attr.accept]=\"acceptSignal()\"\n    [attr.multiple]=\"multipleSignal() ? true : null\" [disabled]=\"disabledSignal()\" (change)=\"onFileSelected($event)\"\n    class=\"tw-hidden\" />\n\n  <!-- Modern Drag and Drop Zone -->\n  <div\n    class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n    [class]=\"getDragDropZoneClasses()\" (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\"\n    (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n      <!-- Icon and Text -->\n      <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n        <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" [class]=\"getIconClasses()\"\n          size=\"sm\">\n          {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n        </cide-ele-icon>\n\n        <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n          @if (isDragOver()) {\n          <span\n            class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop\n            files here</span>\n          } @else if (hasFiles()) {\n          <span\n            class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n            @if (multipleSignal() && fileNames().length > 1) {\n            {{ fileNames().length }} files selected\n            } @else {\n            {{ fileNames()[0] }}\n            }\n          </span>\n          @if (totalFileSize() > 0) {\n          <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n          }\n          } @else {\n          <span\n            class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n            {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n          </span>\n          }\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n        <!-- Download Button -->\n        @if (hasFiles() && downloadUrls().length > 0) {\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-purple-600 hover:tw-bg-purple-50 dark:hover:tw-bg-purple-900/20 hover:tw-text-purple-700 tw-mr-1\"\n          (click)=\"viewFile(0); $event.stopPropagation()\" title=\"View file\">\n          <cide-ele-icon size=\"xs\">visibility</cide-ele-icon>\n        </button>\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-blue-600 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20 hover:tw-text-blue-700\"\n          (click)=\"downloadFile(0); $event.stopPropagation()\" title=\"Download file\">\n          <cide-ele-icon size=\"xs\">download</cide-ele-icon>\n        </button>\n        }\n\n        @if (isInErrorState() && failedFile()) {\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n          (click)=\"retryUpload(); $event.stopPropagation()\" [disabled]=\"isUploading() || disabledSignal()\"\n          title=\"Retry upload\">\n          <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n          Retry\n        </button>\n        }\n        @if (hasFiles()) {\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\"\n          (click)=\"clearFiles(); $event.stopPropagation()\" title=\"Clear files\">\n          <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n  <div class=\"tw-mt-3\">\n    <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n    <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n      @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n      <div\n        class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n        [style.width]=\"previewWidthSignal()\" [style.height]=\"previewHeightSignal()\">\n        <button type=\"button\"\n          class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\n          (click)=\"removePreview(i)\" title=\"Remove image\">\n          \u00D7\n        </button>\n        <img [src]=\"previewUrl\" [alt]=\"fileNames()[i] || 'Preview image'\" class=\"tw-w-full tw-h-full tw-object-cover\"\n          loading=\"lazy\">\n        <div\n          class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">\n          {{ fileNames()[i] }}</div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n  <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n    <div class=\"tw-flex tw-items-center tw-gap-2\">\n      <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n      <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n        @if (hasActiveUploads()) {\n        {{ getActiveUploadCount() }} uploading\n        } @else if (getUploadCount() > 0) {\n        {{ getUploadCount() }} completed\n        } @else if (hasEverUploaded()) {\n        View uploads\n        }\n      </span>\n    </div>\n    <button type=\"button\"\n      class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n      (click)=\"showFloatingUploaderDialog()\" title=\"View upload progress and history\">\n      <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n    </button>\n  </div>\n  }\n\n  @if (errorTextSignal()) {\n  <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (isInErrorState() && failedFile() && !errorTextSignal()) {\n  <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-1\">\n    <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n    <button type=\"button\"\n      class=\"tw-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n      (click)=\"retryUpload()\" [disabled]=\"isUploading() || disabledSignal()\">\n      <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n      Retry Upload\n    </button>\n  </div>\n  }\n  @if (helperTextSignal() && !errorTextSignal() && !isInErrorState()) {\n  <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n  <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\"\n    [attr.for]=\"'cide-file-input-' + id()\">\n    {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n  </label>\n  }\n\n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n  <div class=\"tw-relative\">\n    <!-- Hidden file input -->\n    <input type=\"file\" [attr.id]=\"'cide-file-input-' + id()\" [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\" [disabled]=\"disabledSignal()\" (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\" />\n\n    <!-- Preview Box -->\n    <div\n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\" [style.width]=\"previewWidthSignal()\" [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n\n      <!-- No Image State -->\n      @if (!hasImages()) {\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n        <div class=\"tw-mb-2\">\n          <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' :\n            placeholderIconSignal() }}</cide-ele-icon>\n        </div>\n        <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n          {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n        </div>\n      </div>\n      }\n\n      <!-- Image Preview State -->\n      @if (hasImages()) {\n      <div class=\"tw-relative tw-w-full tw-h-full\">\n        <img [src]=\"previewUrls()[0]\" [alt]=\"fileNames()[0] || 'Preview image'\"\n          class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n        <div\n          class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n          <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">\n            Click to change</div>\n        </div>\n        @if (!disabledSignal()) {\n        <button type=\"button\"\n          class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n          (click)=\"clearFiles(); $event.stopPropagation()\" title=\"Remove image\">\n          \u00D7\n        </button>\n        }\n        @if (isInErrorState() && failedFile()) {\n        <button type=\"button\"\n          class=\"tw-absolute tw-bottom-2 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed tw-shadow-lg tw-z-10\"\n          (click)=\"retryUpload(); $event.stopPropagation()\" [disabled]=\"isUploading() || disabledSignal()\"\n          title=\"Retry upload\">\n          <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n          Retry Upload\n        </button>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n    <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n      {{ fileNames()[0] }}\n    </div>\n    }\n    <!-- Error message and retry button for preview box mode -->\n    @if (isInErrorState() && failedFile() && !hasImages()) {\n    <div class=\"tw-mt-2 tw-flex tw-flex-col tw-items-center tw-gap-2\">\n      <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n      <button type=\"button\"\n        class=\"tw-flex tw-items-center tw-gap-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n        (click)=\"retryUpload()\" [disabled]=\"isUploading() || disabledSignal()\">\n        <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n        Retry Upload\n      </button>\n    </div>\n    }\n  </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n  <!-- Hidden file input -->\n  <input type=\"file\" [attr.id]=\"'cide-file-input-' + id()\" [attr.accept]=\"acceptSignal()\"\n    [attr.multiple]=\"multipleSignal() ? true : null\" [disabled]=\"disabledSignal()\" (change)=\"onFileSelected($event)\"\n    class=\"tw-hidden\" />\n\n  <!-- Modern Drag and Drop Zone -->\n  <div\n    class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n    [class]=\"getDragDropZoneClasses()\" (click)=\"triggerFileSelect()\" (dragover)=\"onDragOver($event)\"\n    (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\n\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n      <!-- Icon and Text -->\n      <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n        <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" [class]=\"getIconClasses()\"\n          size=\"sm\">\n          {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n        </cide-ele-icon>\n\n        <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n          @if (isDragOver()) {\n          <span\n            class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop\n            files here</span>\n          } @else if (hasFiles()) {\n          <span\n            class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n            @if (multipleSignal() && fileNames().length > 1) {\n            {{ fileNames().length }} files selected\n            } @else {\n            {{ fileNames()[0] }}\n            }\n          </span>\n          @if (totalFileSize() > 0) {\n          <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n          }\n          } @else {\n          <span\n            class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n            {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n          </span>\n          }\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n        <!-- Download Button -->\n        @if (hasFiles() && downloadUrls().length > 0) {\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-purple-600 hover:tw-bg-purple-50 dark:hover:tw-bg-purple-900/20 hover:tw-text-purple-700 tw-mr-1\"\n          (click)=\"viewFile(0); $event.stopPropagation()\" title=\"View file\">\n          <cide-ele-icon size=\"xs\">visibility</cide-ele-icon>\n        </button>\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-blue-600 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20 hover:tw-text-blue-700\"\n          (click)=\"downloadFile(0); $event.stopPropagation()\" title=\"Download file\">\n          <cide-ele-icon size=\"xs\">download</cide-ele-icon>\n        </button>\n        }\n\n        @if (isInErrorState() && failedFile()) {\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n          (click)=\"retryUpload(); $event.stopPropagation()\" [disabled]=\"isUploading() || disabledSignal()\"\n          title=\"Retry upload\">\n          <cide-ele-icon size=\"xs\" class=\"tw-mr-1\">refresh</cide-ele-icon>\n          Retry\n        </button>\n        }\n        @if (hasFiles()) {\n        <button type=\"button\"\n          class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\"\n          (click)=\"clearFiles(); $event.stopPropagation()\" title=\"Clear files\">\n          <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n  <div class=\"tw-mt-3\">\n    <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n    <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n      @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n      <div\n        class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n        [style.width]=\"previewWidthSignal()\" [style.height]=\"previewHeightSignal()\">\n        <button type=\"button\"\n          class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\n          (click)=\"removePreview(i)\" title=\"Remove image\">\n          \u00D7\n        </button>\n        <img [src]=\"previewUrl\" [alt]=\"fileNames()[i] || 'Preview image'\" class=\"tw-w-full tw-h-full tw-object-cover\"\n          loading=\"lazy\">\n        <div\n          class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">\n          {{ fileNames()[i] }}</div>\n      </div>\n      }\n    </div>\n  </div>\n  }\n\n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n  <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n    <div class=\"tw-flex tw-items-center tw-gap-2\">\n      <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n      <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n        @if (hasActiveUploads()) {\n        {{ getActiveUploadCount() }} uploading\n        } @else if (getUploadCount() > 0) {\n        {{ getUploadCount() }} completed\n        } @else if (hasEverUploaded()) {\n        View uploads\n        }\n      </span>\n    </div>\n    <button type=\"button\"\n      class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n      (click)=\"showFloatingUploaderDialog()\" title=\"View upload progress and history\">\n      <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n    </button>\n  </div>\n  }\n\n  @if (errorTextSignal()) {\n  <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (isInErrorState() && failedFile() && !errorTextSignal()) {\n  <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-1\">\n    <span class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400\">Upload failed. Please retry.</span>\n    <button type=\"button\"\n      class=\"tw-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-border-none tw-rounded tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-cursor-pointer tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n      (click)=\"retryUpload()\" [disabled]=\"isUploading() || disabledSignal()\">\n      <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n      Retry Upload\n    </button>\n  </div>\n  }\n  @if (helperTextSignal() && !errorTextSignal() && !isInErrorState()) {\n  <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleFileInputComponent, decorators: [{
             type: Component,
@@ -6048,7 +6121,7 @@ class CideEleFloatingFileUploaderComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleFloatingFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", inputs: { data: "data" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\r\n@if (isVisible()) {\r\n<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-overflow-hidden\">\r\n    <!-- Content starts directly - no header needed since floating container provides it -->\r\n\r\n  <!-- Content -->\r\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-pb-4\">\r\n    \r\n    <!-- Drag and Drop Zone -->\r\n    <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-bg-gray-50 tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-center hover:tw-border-blue-500 hover:tw-bg-blue-50\" \r\n         [class.tw-border-blue-500]=\"isDragOver()\"\r\n         [class.tw-bg-blue-100]=\"isDragOver()\"\r\n         [class.tw-scale-105]=\"isDragOver()\"\r\n         (dragover)=\"onDragOver($event)\"\r\n         (dragleave)=\"onDragLeave($event)\" \r\n         (drop)=\"onDrop($event)\" \r\n         (click)=\"triggerFileInput()\">\r\n      \r\n      <!-- Hidden file input -->\r\n      <input #fileInput \r\n             type=\"file\" \r\n             [multiple]=\"data.multiple !== false\" \r\n             [accept]=\"data.allowedFileTypes?.join(',') || '*/*'\" \r\n             (change)=\"onFileInputChange($event)\" \r\n             class=\"tw-hidden\">\r\n      \r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-colors tw-duration-200\" \r\n                       [class.tw-text-blue-500]=\"isDragOver()\"\r\n                       size=\"sm\">cloud_upload</cide-ele-icon>\r\n        \r\n        <div>\r\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">\r\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\r\n          </div>\r\n          @if (data.description) {\r\n          <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ data.description }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Upload Queue - Show files from service state -->\r\n    @if (allFilesForGroup().length > 0) {\r\n    <div class=\"tw-space-y-2\">\r\n      <!-- Show all files from service state -->\r\n      @for (file of allFilesForGroup(); track file.fileId) {\r\n      <div class=\"tw-flex tw-items-center tw-px-4 tw-py-3 tw-rounded-lg tw-transition-colors tw-duration-200 tw-bg-white tw-border tw-border-gray-200 hover:tw-bg-gray-100 hover:tw-shadow-sm\"\r\n           [class.tw-bg-blue-50]=\"file.stage === 'uploading'\"\r\n           [class.tw-bg-green-50]=\"file.stage === 'complete'\"\r\n           [class.tw-bg-red-50]=\"file.stage === 'error'\">\r\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0\">\r\n          <cide-ele-icon class=\"tw-flex-shrink-0\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\r\n          <div class=\"tw-min-w-0 tw-flex-1\">\r\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\">{{ file.fileName }}</div>\r\n            <div class=\"tw-text-xs\">\r\n              @switch (file.stage) {\r\n              @case ('pending') {\r\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Waiting...</span>\r\n              }\r\n              @case ('reading') {\r\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Reading...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"tw-text-blue-600 tw-font-medium\">Uploading...</span>\r\n              }\r\n              @case ('complete') {\r\n              <span class=\"tw-text-green-600 tw-font-medium\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"tw-text-red-600 tw-font-medium\">Failed</span>\r\n              }\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar (only for uploading files) -->\r\n        @if (file.stage === 'uploading' && file.percentage !== undefined) {\r\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-ml-2 tw-min-w-[80px]\">\r\n          <div class=\"tw-flex-1 tw-h-1 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden\">\r\n            <div class=\"tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300\" [style.width.%]=\"file.percentage\"></div>\r\n          </div>\r\n          <span class=\"tw-text-xs tw-text-gray-500 tw-min-w-[24px] tw-text-right\">{{ file.percentage }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"tw-flex tw-gap-1 tw-ml-2\">\r\n          @switch (file.stage) {\r\n          @case ('pending') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \r\n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('reading') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \r\n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \r\n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('complete') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-text-green-600\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-blue-50 hover:tw-text-blue-600\" \r\n                  title=\"Retry\">\r\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <!-- No uploads message when manually opened -->\r\n    <div class=\"tw-py-8 tw-text-center tw-text-gray-500\">\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\r\n        <cide-ele-icon size=\"md\" class=\"tw-text-gray-300 tw-opacity-70\">cloud_upload</cide-ele-icon>\r\n        <div>\r\n          <h4 class=\"tw-text-lg tw-font-semibold tw-text-gray-700 tw-mb-2\">No active uploads</h4>\r\n          <p class=\"tw-text-sm tw-text-gray-500\">Upload files to see their progress here</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Status summary - integrated into content -->\r\n  @if (hasActiveUploads()) {\r\n  <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\r\n    <div class=\"tw-flex tw-gap-3 tw-text-xs\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-blue-600\">\r\n        <cide-ele-icon size=\"xs\">upload</cide-ele-icon>\r\n        <span>{{ getUploadingCount() }} uploading</span>\r\n      </div>\r\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-green-600\">\r\n        <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n        <span>{{ getCompletedCount() }} completed</span>\r\n      </div>\r\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-red-600\">\r\n        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\r\n        <span>{{ getFailedCount() }} failed</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", inputs: { data: "data" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\r\n@if (isVisible()) {\r\n<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-overflow-hidden\">\r\n    <!-- Content starts directly - no header needed since floating container provides it -->\r\n\r\n  <!-- Content -->\r\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-pb-4\">\r\n    \r\n    <!-- Drag and Drop Zone -->\r\n    <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-bg-gray-50 tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-center hover:tw-border-blue-500 hover:tw-bg-blue-50\" \r\n         [class.tw-border-blue-500]=\"isDragOver()\"\r\n         [class.tw-bg-blue-100]=\"isDragOver()\"\r\n         [class.tw-scale-105]=\"isDragOver()\"\r\n         (dragover)=\"onDragOver($event)\"\r\n         (dragleave)=\"onDragLeave($event)\" \r\n         (drop)=\"onDrop($event)\" \r\n         (click)=\"triggerFileInput()\">\r\n      \r\n      <!-- Hidden file input -->\r\n      <input #fileInput \r\n             type=\"file\" \r\n             [multiple]=\"data.multiple !== false\" \r\n             [accept]=\"data.allowedFileTypes?.join(',') || '*/*'\" \r\n             (change)=\"onFileInputChange($event)\" \r\n             class=\"tw-hidden\">\r\n      \r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-colors tw-duration-200\" \r\n                       [class.tw-text-blue-500]=\"isDragOver()\"\r\n                       size=\"sm\">cloud_upload</cide-ele-icon>\r\n        \r\n        <div>\r\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">\r\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\r\n          </div>\r\n          @if (data.description) {\r\n          <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ data.description }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Upload Queue - Show files from service state -->\r\n    @if (allFilesForGroup().length > 0) {\r\n    <div class=\"tw-space-y-2\">\r\n      <!-- Show all files from service state -->\r\n      @for (file of allFilesForGroup(); track file.fileId) {\r\n      <div class=\"tw-flex tw-items-center tw-px-4 tw-py-3 tw-rounded-lg tw-transition-colors tw-duration-200 tw-bg-white tw-border tw-border-gray-200 hover:tw-bg-gray-100 hover:tw-shadow-sm\"\r\n           [class.tw-bg-blue-50]=\"file.stage === 'uploading'\"\r\n           [class.tw-bg-green-50]=\"file.stage === 'complete'\"\r\n           [class.tw-bg-red-50]=\"file.stage === 'error'\">\r\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0\">\r\n          <cide-ele-icon class=\"tw-flex-shrink-0\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\r\n          <div class=\"tw-min-w-0 tw-flex-1\">\r\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\">{{ file.fileName }}</div>\r\n            <div class=\"tw-text-xs\">\r\n              @switch (file.stage) {\r\n              @case ('pending') {\r\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Waiting...</span>\r\n              }\r\n              @case ('reading') {\r\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Reading...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"tw-text-blue-600 tw-font-medium\">Uploading...</span>\r\n              }\r\n              @case ('complete') {\r\n              <span class=\"tw-text-green-600 tw-font-medium\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"tw-text-red-600 tw-font-medium\">Failed</span>\r\n              }\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar (only for uploading files) -->\r\n        @if (file.stage === 'uploading' && file.percentage !== undefined) {\r\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-ml-2 tw-min-w-[80px]\">\r\n          <div class=\"tw-flex-1 tw-h-1 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden\">\r\n            <div class=\"tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300\" [style.width.%]=\"file.percentage\"></div>\r\n          </div>\r\n          <span class=\"tw-text-xs tw-text-gray-500 tw-min-w-[24px] tw-text-right\">{{ file.percentage }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"tw-flex tw-gap-1 tw-ml-2\">\r\n          @switch (file.stage) {\r\n          @case ('pending') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \r\n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('reading') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \r\n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \r\n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('complete') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-text-green-600\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-blue-50 hover:tw-text-blue-600\" \r\n                  title=\"Retry\">\r\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <!-- No uploads message when manually opened -->\r\n    <div class=\"tw-py-8 tw-text-center tw-text-gray-500\">\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\r\n        <cide-ele-icon size=\"md\" class=\"tw-text-gray-300 tw-opacity-70\">cloud_upload</cide-ele-icon>\r\n        <div>\r\n          <h4 class=\"tw-text-lg tw-font-semibold tw-text-gray-700 tw-mb-2\">No active uploads</h4>\r\n          <p class=\"tw-text-sm tw-text-gray-500\">Upload files to see their progress here</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Status summary - integrated into content -->\r\n  @if (hasActiveUploads()) {\r\n  <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\r\n    <div class=\"tw-flex tw-gap-3 tw-text-xs\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-blue-600\">\r\n        <cide-ele-icon size=\"xs\">upload</cide-ele-icon>\r\n        <span>{{ getUploadingCount() }} uploading</span>\r\n      </div>\r\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-green-600\">\r\n        <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n        <span>{{ getCompletedCount() }} completed</span>\r\n      </div>\r\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-red-600\">\r\n        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\r\n        <span>{{ getFailedCount() }} failed</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleFloatingFileUploaderComponent, decorators: [{
             type: Component,
@@ -6459,7 +6532,7 @@ class CideEleBreadcrumbComponent {
         this.localLoading.set(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleBreadcrumbComponent, isStandalone: true, selector: "cide-ele-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, showHomeIcon: { classPropertyName: "showHomeIcon", publicName: "showHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, homeIcon: { classPropertyName: "homeIcon", publicName: "homeIcon", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, showDropdownOnOverflow: { classPropertyName: "showDropdownOnOverflow", publicName: "showDropdownOnOverflow", isSignal: true, isRequired: false, transformFunction: null }, dropdownOptions: { classPropertyName: "dropdownOptions", publicName: "dropdownOptions", isSignal: true, isRequired: false, transformFunction: null }, clickableItems: { classPropertyName: "clickableItems", publicName: "clickableItems", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loadingInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contextId: { classPropertyName: "contextId", publicName: "contextId", isSignal: true, isRequired: false, transformFunction: null }, pageCode: { classPropertyName: "pageCode", publicName: "pageCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOptionClick: "dropdownOptionClick", homeClick: "homeClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-[8px] md:tw-text-xs tw-text-gray-700 tw-py-0 tw-leading-none breadcrumb-root\">\n\n  <!-- Loading State -->\n  @if (effectiveLoading()) {\n  <div class=\"breadcrumb-loading\">\n    <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\n    <span>Loading...</span>\n  </div>\n  }\n\n  <!-- Main Breadcrumb Content -->\n  @if (!effectiveLoading()) {\n  <nav class=\"tw-flex tw-items-center tw-p-0 tw-min-w-0 tw-flex-1 tw-w-full tw-overflow-hidden\" role=\"navigation\"\n    aria-label=\"Breadcrumb\">\n    <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-0 md:tw-gap-1 tw-flex-wrap tw-w-full tw-min-w-0 tw-overflow-hidden breadcrumb-list-el\">\n\n      <!-- Home Icon (if enabled) -->\n      @if (config().showHomeIcon) {\n      <li class=\"tw-flex tw-items-center tw-gap-0 md:tw-gap-1 tw-px-0 md:tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" (click)=\"onHomeClick()\"\n        [title]=\"showTooltips() ? 'Go to Home' : ''\">\n        <cide-ele-icon class=\"tw-text-gray-500 max-sm:tw-w-[20px] tw-text-[8px] md:tw-text-xs breadcrumb-icon\">\n          {{ config().homeIcon }}\n        </cide-ele-icon>\n      </li>\n\n      <!-- Separator after home -->\n      @if (visibleItemsSignal().length > 0) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0 md:tw-mx-0.5 tw-flex-shrink-0\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400 tw-text-[8px] md:tw-text-xs\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-[8px] md:tw-text-xs breadcrumb-sep max-sm:tw-w-[10px]\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Visible Items -->\n      @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\n      <li class=\"tw-flex tw-items-center tw-gap-0 md:tw-gap-1 tw-px-0 md:tw-px-1 tw-relative breadcrumb-item-li\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" [class.tw-text-gray-400]=\"isLast\"\n        [class.breadcrumb-item-last]=\"isLast\"\n        [class.tw-whitespace-nowrap]=\"!isLast\"\n        (click)=\"onItemClick(item)\" [title]=\"getTooltipText(item)\" [attr.aria-current]=\"isLast ? 'page' : null\">\n\n        <!-- Item Icon (if provided) -->\n        @if (item.icon) {\n        <cide-ele-icon class=\"tw-text-gray-500 tw-text-[8px] md:tw-text-xs tw-flex-shrink-0 breadcrumb-icon\">\n          {{ item.icon }}\n        </cide-ele-icon>\n        }\n\n        <!-- Item Label -->\n        <span class=\"tw-font-medium tw-text-[8px] md:tw-text-xs breadcrumb-label\" [class.tw-min-w-0]=\"isLast\"\n          [class.tw-truncate]=\"isLast\">\n          {{ item.label }}\n        </span>\n\n        <!-- Item Type Badge (for hierarchical style) -->\n        @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\n        <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\n          {{ item.type }}\n        </span>\n        }\n      </li>\n\n      <!-- Separator (except for last item) -->\n      @if (!isLast || isOverflowingSignal()) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0 md:tw-mx-0.5 tw-flex-shrink-0\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400 tw-text-[8px] md:tw-text-xs\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-[8px] md:tw-text-xs breadcrumb-sep max-sm:tw-w-[10px]\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Overflow Dropdown -->\n      @if (isOverflowingSignal() && showDropdownOnOverflow()) {\n      <li class=\"breadcrumb-item overflow-item\">\n        <div class=\"breadcrumb-dropdown-container\">\n          <button type=\"button\" class=\"overflow-button\" (click)=\"onDropdownToggle()\" [disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"showDropdownSignal()\" aria-haspopup=\"true\"\n            [title]=\"showTooltips() ? 'More items' : ''\">\n            <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\n            <span class=\"overflow-text\" [class.compact]=\"config().compact\">\n              {{ hiddenItemsSignal().length }}+ more\n            </span>\n          </button>\n\n          <!-- Dropdown Menu -->\n          @if (showDropdownSignal()) {\n          <div class=\"breadcrumb-dropdown\" role=\"menu\">\n            <div class=\"dropdown-header\">\n              <span>Hidden Items</span>\n            </div>\n\n            <!-- Hidden Items -->\n            @for (item of hiddenItemsSignal(); track item.id) {\n            <button type=\"button\" class=\"dropdown-item\" (click)=\"onItemClick(item)\"\n              [disabled]=\"item.disabled || disabled()\" role=\"menuitem\">\n              @if (item.icon) {\n              <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-item-label\">{{ item.label }}</span>\n            </button>\n            }\n\n            <!-- Custom Dropdown Options -->\n            @if (dropdownOptions().length > 0) {\n            <div class=\"dropdown-divider\"></div>\n            @for (option of dropdownOptions(); track option.id) {\n            <button type=\"button\" class=\"dropdown-option\" (click)=\"onDropdownOptionClick(option)\"\n              [disabled]=\"option.disabled || disabled()\" role=\"menuitem\">\n              @if (option.icon) {\n              <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-option-label\">{{ option.label }}</span>\n            </button>\n            }\n            }\n          </div>\n          }\n        </div>\n      </li>\n      }\n    </ol>\n  </nav>\n  }\n\n</div>", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding:0}.breadcrumb-container.loading{opacity:.6;pointer-events:none}.breadcrumb-container.disabled{opacity:.5;pointer-events:none}@media (max-width: 768px){.breadcrumb-container.responsive{font-size:10px;padding:1px 0;width:100%;overflow:visible}}.breadcrumb-container.compact{font-size:10px;padding:0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:2px;flex-wrap:wrap}@media (max-width: 768px){.breadcrumb-container,.breadcrumb-root{font-size:8px;line-height:1;padding:0}.breadcrumb-list,.breadcrumb-list-el{gap:0;flex-wrap:nowrap;min-width:0}.breadcrumb-item,.breadcrumb-item-li{gap:0;padding:0;flex-shrink:0}.breadcrumb-item-li.breadcrumb-item-last{min-width:0;flex-shrink:1;overflow:hidden}.breadcrumb-item-li.breadcrumb-item-last .breadcrumb-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0}.breadcrumb-separator .separator-icon,.breadcrumb-item.home-item .home-icon{font-size:8px}.breadcrumb-icon,.breadcrumb-sep{font-size:8px!important}}.breadcrumb-item{display:flex;align-items:center;gap:2px;padding:0 2px;position:relative;white-space:nowrap}.breadcrumb-item.clickable{cursor:pointer}.breadcrumb-item.clickable:hover{color:#1f2937}.breadcrumb-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.breadcrumb-item.last{color:#9ca3af}.breadcrumb-item.home-item{padding:0 1px}.breadcrumb-item.home-item .home-icon{color:#6b7280;font-size:13px}.breadcrumb-item.overflow-item{position:relative}.item-label{font-weight:500;color:inherit}.item-label.compact{font-weight:600}.item-icon{color:#6b7280;flex-shrink:0}.item-type-badge{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.item-type-badge.type-category{background-color:#dbeafe;color:#1e40af}.item-type-badge.type-entity{background-color:#dcfce7;color:#166534}.item-type-badge.type-custom{background-color:#f3e8ff;color:#7c3aed}.breadcrumb-separator{display:flex;align-items:center;color:#d1d5db;margin:0 .5px}.breadcrumb-separator .separator-icon{font-size:11px}.breadcrumb-separator .custom-separator{font-weight:400;color:#9ca3af}.breadcrumb-dropdown-container{position:relative}.overflow-button{display:flex;align-items:center;gap:2px;padding:2px 4px;border:none;background:transparent;cursor:pointer;transition:color .15s ease;color:#6b7280}.overflow-button:hover{color:#374151}.overflow-button:disabled{opacity:.5;cursor:not-allowed}.overflow-icon{font-size:14px}.overflow-text{font-size:11px;font-weight:400}.breadcrumb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:1000;min-width:200px;max-width:300px;overflow:hidden;animation:dropdownSlideIn .2s ease-out}.dropdown-header{padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.dropdown-item,.dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .15s ease;color:#374151}.dropdown-item:hover,.dropdown-option:hover{background:#f3f4f6}.dropdown-item:disabled,.dropdown-option:disabled{opacity:.5;cursor:not-allowed}.dropdown-item-icon,.dropdown-option-icon{font-size:14px;color:#6b7280;flex-shrink:0}.dropdown-item-label,.dropdown-option-label{font-size:14px;font-weight:500}.dropdown-divider{height:1px;background:#e5e7eb;margin:4px 0}.style-modern .breadcrumb-item.clickable:hover{color:#1f2937}.style-modern .separator-icon{color:#d1d5db}.style-classic .breadcrumb-item{padding:2px 4px}.style-classic .breadcrumb-item.clickable:hover{color:#1f2937}.style-classic .separator-icon{color:#9ca3af;font-size:12px}.style-minimal .breadcrumb-item{padding:1px 2px}.style-minimal .breadcrumb-item.clickable:hover{color:#1f2937}.style-minimal .separator-icon{color:#d1d5db;font-size:10px}.style-hierarchical{background:transparent;border:none;padding:2px 0}.style-hierarchical .breadcrumb-item{padding:0 2px}.style-hierarchical .breadcrumb-item.clickable:hover{color:#1f2937}.style-hierarchical .separator-icon{color:#d1d5db}.style-hierarchical .breadcrumb-actions{display:none}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.breadcrumb-container.animated .breadcrumb-item{transition:none}.breadcrumb-container.animated .breadcrumb-item:hover{transform:none}.breadcrumb-dropdown{animation:none}}@media (prefers-contrast: high){.breadcrumb-container .breadcrumb-item{border:1px solid transparent}.breadcrumb-container .breadcrumb-item.clickable:hover{border-color:#000}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleBreadcrumbComponent, isStandalone: true, selector: "cide-ele-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, showHomeIcon: { classPropertyName: "showHomeIcon", publicName: "showHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, homeIcon: { classPropertyName: "homeIcon", publicName: "homeIcon", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, showDropdownOnOverflow: { classPropertyName: "showDropdownOnOverflow", publicName: "showDropdownOnOverflow", isSignal: true, isRequired: false, transformFunction: null }, dropdownOptions: { classPropertyName: "dropdownOptions", publicName: "dropdownOptions", isSignal: true, isRequired: false, transformFunction: null }, clickableItems: { classPropertyName: "clickableItems", publicName: "clickableItems", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loadingInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contextId: { classPropertyName: "contextId", publicName: "contextId", isSignal: true, isRequired: false, transformFunction: null }, pageCode: { classPropertyName: "pageCode", publicName: "pageCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOptionClick: "dropdownOptionClick", homeClick: "homeClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-[8px] md:tw-text-xs tw-text-gray-700 tw-py-0 tw-leading-none breadcrumb-root\">\n\n  <!-- Loading State -->\n  @if (effectiveLoading()) {\n  <div class=\"breadcrumb-loading\">\n    <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\n    <span>Loading...</span>\n  </div>\n  }\n\n  <!-- Main Breadcrumb Content -->\n  @if (!effectiveLoading()) {\n  <nav class=\"tw-flex tw-items-center tw-p-0 tw-min-w-0 tw-flex-1 tw-w-full tw-overflow-hidden\" role=\"navigation\"\n    aria-label=\"Breadcrumb\">\n    <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-0 md:tw-gap-1 tw-flex-wrap tw-w-full tw-min-w-0 tw-overflow-hidden breadcrumb-list-el\">\n\n      <!-- Home Icon (if enabled) -->\n      @if (config().showHomeIcon) {\n      <li class=\"tw-flex tw-items-center tw-gap-0 md:tw-gap-1 tw-px-0 md:tw-px-1 tw-whitespace-nowrap tw-relative\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" (click)=\"onHomeClick()\"\n        [title]=\"showTooltips() ? 'Go to Home' : ''\">\n        <cide-ele-icon class=\"tw-text-gray-500 max-sm:tw-w-[20px] tw-text-[8px] md:tw-text-xs breadcrumb-icon\">\n          {{ config().homeIcon }}\n        </cide-ele-icon>\n      </li>\n\n      <!-- Separator after home -->\n      @if (visibleItemsSignal().length > 0) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0 md:tw-mx-0.5 tw-flex-shrink-0\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400 tw-text-[8px] md:tw-text-xs\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-[8px] md:tw-text-xs breadcrumb-sep max-sm:tw-w-[10px]\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Visible Items -->\n      @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\n      <li class=\"tw-flex tw-items-center tw-gap-0 md:tw-gap-1 tw-px-0 md:tw-px-1 tw-relative breadcrumb-item-li\"\n        [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\" [class.tw-text-gray-400]=\"isLast\"\n        [class.breadcrumb-item-last]=\"isLast\"\n        [class.tw-whitespace-nowrap]=\"!isLast\"\n        (click)=\"onItemClick(item)\" [title]=\"getTooltipText(item)\" [attr.aria-current]=\"isLast ? 'page' : null\">\n\n        <!-- Item Icon (if provided) -->\n        @if (item.icon) {\n        <cide-ele-icon class=\"tw-text-gray-500 tw-text-[8px] md:tw-text-xs tw-flex-shrink-0 breadcrumb-icon\">\n          {{ item.icon }}\n        </cide-ele-icon>\n        }\n\n        <!-- Item Label -->\n        <span class=\"tw-font-medium tw-text-[8px] md:tw-text-xs breadcrumb-label\" [class.tw-min-w-0]=\"isLast\"\n          [class.tw-truncate]=\"isLast\">\n          {{ item.label }}\n        </span>\n\n        <!-- Item Type Badge (for hierarchical style) -->\n        @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\n        <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\n          {{ item.type }}\n        </span>\n        }\n      </li>\n\n      <!-- Separator (except for last item) -->\n      @if (!isLast || isOverflowingSignal()) {\n      <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0 md:tw-mx-0.5 tw-flex-shrink-0\">\n        @if (separator().type === 'custom' && separator().text) {\n        <span class=\"tw-font-normal tw-text-gray-400 tw-text-[8px] md:tw-text-xs\">{{ separator().text }}</span>\n        } @else {\n        <cide-ele-icon class=\"tw-text-[8px] md:tw-text-xs breadcrumb-sep max-sm:tw-w-[10px]\">\n          {{ getSeparatorIcon() }}\n        </cide-ele-icon>\n        }\n      </li>\n      }\n      }\n\n      <!-- Overflow Dropdown -->\n      @if (isOverflowingSignal() && showDropdownOnOverflow()) {\n      <li class=\"breadcrumb-item overflow-item\">\n        <div class=\"breadcrumb-dropdown-container\">\n          <button type=\"button\" class=\"overflow-button\" (click)=\"onDropdownToggle()\" [disabled]=\"disabled()\"\n            [attr.aria-expanded]=\"showDropdownSignal()\" aria-haspopup=\"true\"\n            [title]=\"showTooltips() ? 'More items' : ''\">\n            <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\n            <span class=\"overflow-text\" [class.compact]=\"config().compact\">\n              {{ hiddenItemsSignal().length }}+ more\n            </span>\n          </button>\n\n          <!-- Dropdown Menu -->\n          @if (showDropdownSignal()) {\n          <div class=\"breadcrumb-dropdown\" role=\"menu\">\n            <div class=\"dropdown-header\">\n              <span>Hidden Items</span>\n            </div>\n\n            <!-- Hidden Items -->\n            @for (item of hiddenItemsSignal(); track item.id) {\n            <button type=\"button\" class=\"dropdown-item\" (click)=\"onItemClick(item)\"\n              [disabled]=\"item.disabled || disabled()\" role=\"menuitem\">\n              @if (item.icon) {\n              <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-item-label\">{{ item.label }}</span>\n            </button>\n            }\n\n            <!-- Custom Dropdown Options -->\n            @if (dropdownOptions().length > 0) {\n            <div class=\"dropdown-divider\"></div>\n            @for (option of dropdownOptions(); track option.id) {\n            <button type=\"button\" class=\"dropdown-option\" (click)=\"onDropdownOptionClick(option)\"\n              [disabled]=\"option.disabled || disabled()\" role=\"menuitem\">\n              @if (option.icon) {\n              <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\n              }\n              <span class=\"dropdown-option-label\">{{ option.label }}</span>\n            </button>\n            }\n            }\n          </div>\n          }\n        </div>\n      </li>\n      }\n    </ol>\n  </nav>\n  }\n\n</div>", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding:0}.breadcrumb-container.loading{opacity:.6;pointer-events:none}.breadcrumb-container.disabled{opacity:.5;pointer-events:none}@media (max-width: 768px){.breadcrumb-container.responsive{font-size:10px;padding:1px 0;width:100%;overflow:visible}}.breadcrumb-container.compact{font-size:10px;padding:0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:2px;flex-wrap:wrap}@media (max-width: 768px){.breadcrumb-container,.breadcrumb-root{font-size:8px;line-height:1;padding:0}.breadcrumb-list,.breadcrumb-list-el{gap:0;flex-wrap:nowrap;min-width:0}.breadcrumb-item,.breadcrumb-item-li{gap:0;padding:0;flex-shrink:0}.breadcrumb-item-li.breadcrumb-item-last{min-width:0;flex-shrink:1;overflow:hidden}.breadcrumb-item-li.breadcrumb-item-last .breadcrumb-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb-separator{margin:0}.breadcrumb-separator .separator-icon,.breadcrumb-item.home-item .home-icon{font-size:8px}.breadcrumb-icon,.breadcrumb-sep{font-size:8px!important}}.breadcrumb-item{display:flex;align-items:center;gap:2px;padding:0 2px;position:relative;white-space:nowrap}.breadcrumb-item.clickable{cursor:pointer}.breadcrumb-item.clickable:hover{color:#1f2937}.breadcrumb-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.breadcrumb-item.last{color:#9ca3af}.breadcrumb-item.home-item{padding:0 1px}.breadcrumb-item.home-item .home-icon{color:#6b7280;font-size:13px}.breadcrumb-item.overflow-item{position:relative}.item-label{font-weight:500;color:inherit}.item-label.compact{font-weight:600}.item-icon{color:#6b7280;flex-shrink:0}.item-type-badge{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.item-type-badge.type-category{background-color:#dbeafe;color:#1e40af}.item-type-badge.type-entity{background-color:#dcfce7;color:#166534}.item-type-badge.type-custom{background-color:#f3e8ff;color:#7c3aed}.breadcrumb-separator{display:flex;align-items:center;color:#d1d5db;margin:0 .5px}.breadcrumb-separator .separator-icon{font-size:11px}.breadcrumb-separator .custom-separator{font-weight:400;color:#9ca3af}.breadcrumb-dropdown-container{position:relative}.overflow-button{display:flex;align-items:center;gap:2px;padding:2px 4px;border:none;background:transparent;cursor:pointer;transition:color .15s ease;color:#6b7280}.overflow-button:hover{color:#374151}.overflow-button:disabled{opacity:.5;cursor:not-allowed}.overflow-icon{font-size:14px}.overflow-text{font-size:11px;font-weight:400}.breadcrumb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:1000;min-width:200px;max-width:300px;overflow:hidden;animation:dropdownSlideIn .2s ease-out}.dropdown-header{padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.dropdown-item,.dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .15s ease;color:#374151}.dropdown-item:hover,.dropdown-option:hover{background:#f3f4f6}.dropdown-item:disabled,.dropdown-option:disabled{opacity:.5;cursor:not-allowed}.dropdown-item-icon,.dropdown-option-icon{font-size:14px;color:#6b7280;flex-shrink:0}.dropdown-item-label,.dropdown-option-label{font-size:14px;font-weight:500}.dropdown-divider{height:1px;background:#e5e7eb;margin:4px 0}.style-modern .breadcrumb-item.clickable:hover{color:#1f2937}.style-modern .separator-icon{color:#d1d5db}.style-classic .breadcrumb-item{padding:2px 4px}.style-classic .breadcrumb-item.clickable:hover{color:#1f2937}.style-classic .separator-icon{color:#9ca3af;font-size:12px}.style-minimal .breadcrumb-item{padding:1px 2px}.style-minimal .breadcrumb-item.clickable:hover{color:#1f2937}.style-minimal .separator-icon{color:#d1d5db;font-size:10px}.style-hierarchical{background:transparent;border:none;padding:2px 0}.style-hierarchical .breadcrumb-item{padding:0 2px}.style-hierarchical .breadcrumb-item.clickable:hover{color:#1f2937}.style-hierarchical .separator-icon{color:#d1d5db}.style-hierarchical .breadcrumb-actions{display:none}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.breadcrumb-container.animated .breadcrumb-item{transition:none}.breadcrumb-container.animated .breadcrumb-item:hover{transform:none}.breadcrumb-dropdown{animation:none}}@media (prefers-contrast: high){.breadcrumb-container .breadcrumb-item{border:1px solid transparent}.breadcrumb-container .breadcrumb-item.clickable:hover{border-color:#000}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleBreadcrumbComponent, decorators: [{
             type: Component,
@@ -8595,7 +8668,7 @@ class CideEleCardComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".cide-card{display:inline-block;width:100%;background:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative;vertical-align:top}.cide-card-header{display:flex}.cide-card-rounded{border-radius:.75rem}.cide-card-bordered{border:1px solid #e5e7eb}.cide-card-shadow{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.cide-card-outlined{border:2px solid #e5e7eb;box-shadow:none}.cide-card-elevated{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.cide-card-flat{border:none;box-shadow:none;background:transparent}.cide-card-sm{font-size:.875rem}.cide-card-md{font-size:1rem}.cide-card-lg{font-size:1.125rem}.cide-card-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:linear-gradient(to right,#f0f9ff,#e0f2fe);border-bottom:1px solid #e5e7eb;min-height:2rem;cursor:pointer;-webkit-user-select:none;user-select:none}.cide-card-header-content{flex:1;min-width:0}.cide-card-title{margin:0;font-size:.875rem;font-weight:600;color:#1e40af;line-height:1.4}.cide-card-subtitle{margin:.125rem 0 0;font-size:.75rem;color:#64748b;line-height:1.3}.cide-card-actions{display:flex;align-items:center;gap:.25rem;margin-left:.5rem;flex-shrink:0;flex-wrap:wrap;max-width:60%}.cide-card-action-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:transparent;border:none;border-radius:.375rem;color:#64748b;cursor:pointer;transition:all .2s ease}.cide-card-action-btn:hover{background:#0000000d;color:#1e40af}.cide-card-action-btn:active{transform:scale(.95)}.cide-card-action-remove:hover{background:#ef44441a;color:#dc2626}.cide-card-content{padding:1.25rem;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);max-height:none}.cide-card-content-collapsed{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}.cide-card-content-minimized{display:none}.cide-card-collapsed .cide-card-content{max-height:0;padding-top:0;padding-bottom:0}.cide-card-minimized{max-height:60px}.cide-card-minimized .cide-card-content,.cide-card-minimized .cide-card-footer{display:none}.cide-card-maximized{position:fixed;inset:0;width:100vw;height:100vh;z-index:9999;border-radius:0;margin:0}.cide-card-maximized .cide-card-content{flex:1;overflow-y:auto}.cide-card-footer{padding:.75rem 1rem;background:#f9fafb;border-top:1px solid #e5e7eb;margin-top:auto}@media (max-width: 640px){.cide-card-header{padding:.5rem .875rem;flex-wrap:wrap}.cide-card-content{padding:.875rem}.cide-card-footer{padding:.625rem .875rem}.cide-card-actions{margin-left:.375rem;gap:.25rem}.cide-card-action-btn{width:1.375rem;height:1.375rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+  `, isInline: true, styles: [".cide-card{display:inline-block;width:100%;background:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative;vertical-align:top}.cide-card-header{display:flex}.cide-card-rounded{border-radius:.75rem}.cide-card-bordered{border:1px solid #e5e7eb}.cide-card-shadow{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.cide-card-outlined{border:2px solid #e5e7eb;box-shadow:none}.cide-card-elevated{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.cide-card-flat{border:none;box-shadow:none;background:transparent}.cide-card-sm{font-size:.875rem}.cide-card-md{font-size:1rem}.cide-card-lg{font-size:1.125rem}.cide-card-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:linear-gradient(to right,#f0f9ff,#e0f2fe);border-bottom:1px solid #e5e7eb;min-height:2rem;cursor:pointer;-webkit-user-select:none;user-select:none}.cide-card-header-content{flex:1;min-width:0}.cide-card-title{margin:0;font-size:.875rem;font-weight:600;color:#1e40af;line-height:1.4}.cide-card-subtitle{margin:.125rem 0 0;font-size:.75rem;color:#64748b;line-height:1.3}.cide-card-actions{display:flex;align-items:center;gap:.25rem;margin-left:.5rem;flex-shrink:0;flex-wrap:wrap;max-width:60%}.cide-card-action-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:transparent;border:none;border-radius:.375rem;color:#64748b;cursor:pointer;transition:all .2s ease}.cide-card-action-btn:hover{background:#0000000d;color:#1e40af}.cide-card-action-btn:active{transform:scale(.95)}.cide-card-action-remove:hover{background:#ef44441a;color:#dc2626}.cide-card-content{padding:1.25rem;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);max-height:none}.cide-card-content-collapsed{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}.cide-card-content-minimized{display:none}.cide-card-collapsed .cide-card-content{max-height:0;padding-top:0;padding-bottom:0}.cide-card-minimized{max-height:60px}.cide-card-minimized .cide-card-content,.cide-card-minimized .cide-card-footer{display:none}.cide-card-maximized{position:fixed;inset:0;width:100vw;height:100vh;z-index:9999;border-radius:0;margin:0}.cide-card-maximized .cide-card-content{flex:1;overflow-y:auto}.cide-card-footer{padding:.75rem 1rem;background:#f9fafb;border-top:1px solid #e5e7eb;margin-top:auto}@media (max-width: 640px){.cide-card-header{padding:.5rem .875rem;flex-wrap:wrap}.cide-card-content{padding:.875rem}.cide-card-footer{padding:.625rem .875rem}.cide-card-actions{margin-left:.375rem;gap:.25rem}.cide-card-action-btn{width:1.375rem;height:1.375rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleCardComponent, decorators: [{
             type: Component,
@@ -9225,7 +9298,7 @@ class CideCoreFileManagerService {
         console.error('CideCoreFileManagerService Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreFileManagerService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreFileManagerService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreFileManagerService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreFileManagerService, decorators: [{
@@ -9233,7 +9306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }] });
 
 class DropdownManagerService {
     activeDropdowns = signal(new Map(), ...(ngDevMode ? [{ debugName: "activeDropdowns" }] : []));
@@ -10016,7 +10089,7 @@ class CideFormFieldErrorComponent {
         </div>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideFormFieldErrorComponent, decorators: [{
             type: Component,
@@ -10197,7 +10270,7 @@ class CideEleConfirmationModalComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [".confirmation-backdrop{position:fixed;inset:0;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000;display:flex;align-items:center;justify-content:center}[data-theme=dark] .confirmation-backdrop,.dark-mode .confirmation-backdrop{background-color:#000c}.confirmation-modal{background:var(--cide-ele-bg-primary, #ffffff);border-radius:12px;box-shadow:var(--cide-ele-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04));max-width:480px;width:90%;max-height:90vh;overflow-y:auto;overflow-x:hidden;z-index:10001;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid var(--cide-ele-border-primary, #e5e7eb);display:flex;flex-direction:column}.modal-header{padding:24px 24px 16px;border-bottom:1px solid var(--cide-ele-border-primary, #e5e7eb);flex-shrink:0}.header-content{display:flex;align-items:center;gap:16px}.icon-container{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-container.danger{background-color:var(--cide-ele-error-light, #fef2f2);color:var(--cide-ele-error, #dc2626)}.icon-container.warning{background-color:var(--cide-ele-warning-light, #fffbeb);color:var(--cide-ele-warning, #d97706)}.icon-container.info{background-color:var(--cide-ele-info-light, #eff6ff);color:var(--cide-ele-info, #2563eb)}.icon-container.success{background-color:var(--cide-ele-success-light, #f0fdf4);color:var(--cide-ele-success, #16a34a)}.modal-title{margin:0;font-size:20px;font-weight:600;color:var(--cide-ele-text-primary, #111827);line-height:1.4}.modal-body{padding:16px 24px 24px;flex:1;overflow-y:auto;min-height:0}.modal-message{margin:0 0 16px;font-size:16px;line-height:1.5;color:var(--cide-ele-text-secondary, #6b7280)}.custom-content{margin-top:16px;padding-top:16px;border-top:1px solid var(--cide-ele-border-primary, #f3f4f6)}.prompt-input-container{margin-top:16px;display:flex;flex-direction:column;gap:8px}.prompt-label{font-size:14px;font-weight:500;color:var(--cide-ele-text-primary, #374151)}.prompt-input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--cide-ele-border-secondary, #d1d5db);background-color:var(--cide-ele-bg-primary, #ffffff);color:var(--cide-ele-text-primary, #111827);font-size:14px;transition:all .2s ease}.prompt-input:focus{outline:none;border-color:var(--cide-ele-brand-primary, #2563eb);box-shadow:0 0 0 3px #2563eb1a}.modal-footer{padding:16px 24px 24px;display:flex;gap:12px;justify-content:flex-end;border-top:1px solid var(--cide-ele-border-primary, #e5e7eb);flex-shrink:0}.btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;min-width:80px}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-secondary{background-color:var(--cide-ele-bg-secondary, #f9fafb);color:var(--cide-ele-text-primary, #374151);border:1px solid var(--cide-ele-border-secondary, #d1d5db)}.btn-secondary:hover{background-color:var(--cide-ele-bg-hover, #f3f4f6);border-color:var(--cide-ele-border-hover, #9ca3af)}.btn-primary{background-color:var(--cide-ele-brand-primary, #2563eb);color:#fff}.btn-primary:hover{background-color:var(--cide-ele-brand-primary-hover, #1d4ed8)}.btn-danger{background-color:var(--cide-ele-error, #dc2626);color:#fff}.btn-danger:hover{background-color:#b91c1c}.btn-warning{background-color:var(--cide-ele-warning, #d97706);color:#fff}.btn-warning:hover{background-color:#b45309}.btn-success{background-color:var(--cide-ele-success, #16a34a);color:#fff}.btn-success:hover{background-color:#15803d}@media (max-width: 640px){.confirmation-modal{width:calc(100% - 2rem);max-width:calc(100% - 2rem);top:50%;left:50%;transform:translate(-50%,-50%);max-height:calc(100vh - 2rem);position:fixed}.modal-header{padding:16px 16px 12px}.modal-body{padding:12px 16px 16px;flex:1;overflow-y:auto}.modal-footer{padding:12px 16px 16px;flex-direction:column-reverse;gap:8px;flex-shrink:0}.btn{width:100%;justify-content:center}.header-content{flex-direction:column;text-align:center;gap:12px}.modal-title{font-size:18px}.modal-message{font-size:14px}}@media (max-width: 480px){.confirmation-modal{width:calc(100% - 1rem);max-width:calc(100% - 1rem);border-radius:8px}.modal-header{padding:12px 12px 8px}.modal-body,.modal-footer{padding:8px 12px 12px}.icon-container{width:40px;height:40px}.modal-title{font-size:16px}.modal-message{font-size:13px}}.btn:focus{outline:2px solid var(--cide-ele-brand-primary, #2563eb);outline-offset:2px}.modal-enter{opacity:0;transform:scale(.95) translateY(-10px)}.modal-enter-active{opacity:1;transform:scale(1) translateY(0);transition:all .2s ease-out}.modal-exit{opacity:1;transform:scale(1) translateY(0)}.modal-exit-active{opacity:0;transform:scale(.95) translateY(-10px);transition:all .15s ease-in}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  `, isInline: true, styles: [".confirmation-backdrop{position:fixed;inset:0;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000;display:flex;align-items:center;justify-content:center}[data-theme=dark] .confirmation-backdrop,.dark-mode .confirmation-backdrop{background-color:#000c}.confirmation-modal{background:var(--cide-ele-bg-primary, #ffffff);border-radius:12px;box-shadow:var(--cide-ele-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04));max-width:480px;width:90%;max-height:90vh;overflow-y:auto;overflow-x:hidden;z-index:10001;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid var(--cide-ele-border-primary, #e5e7eb);display:flex;flex-direction:column}.modal-header{padding:24px 24px 16px;border-bottom:1px solid var(--cide-ele-border-primary, #e5e7eb);flex-shrink:0}.header-content{display:flex;align-items:center;gap:16px}.icon-container{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-container.danger{background-color:var(--cide-ele-error-light, #fef2f2);color:var(--cide-ele-error, #dc2626)}.icon-container.warning{background-color:var(--cide-ele-warning-light, #fffbeb);color:var(--cide-ele-warning, #d97706)}.icon-container.info{background-color:var(--cide-ele-info-light, #eff6ff);color:var(--cide-ele-info, #2563eb)}.icon-container.success{background-color:var(--cide-ele-success-light, #f0fdf4);color:var(--cide-ele-success, #16a34a)}.modal-title{margin:0;font-size:20px;font-weight:600;color:var(--cide-ele-text-primary, #111827);line-height:1.4}.modal-body{padding:16px 24px 24px;flex:1;overflow-y:auto;min-height:0}.modal-message{margin:0 0 16px;font-size:16px;line-height:1.5;color:var(--cide-ele-text-secondary, #6b7280)}.custom-content{margin-top:16px;padding-top:16px;border-top:1px solid var(--cide-ele-border-primary, #f3f4f6)}.prompt-input-container{margin-top:16px;display:flex;flex-direction:column;gap:8px}.prompt-label{font-size:14px;font-weight:500;color:var(--cide-ele-text-primary, #374151)}.prompt-input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--cide-ele-border-secondary, #d1d5db);background-color:var(--cide-ele-bg-primary, #ffffff);color:var(--cide-ele-text-primary, #111827);font-size:14px;transition:all .2s ease}.prompt-input:focus{outline:none;border-color:var(--cide-ele-brand-primary, #2563eb);box-shadow:0 0 0 3px #2563eb1a}.modal-footer{padding:16px 24px 24px;display:flex;gap:12px;justify-content:flex-end;border-top:1px solid var(--cide-ele-border-primary, #e5e7eb);flex-shrink:0}.btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;min-width:80px}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-secondary{background-color:var(--cide-ele-bg-secondary, #f9fafb);color:var(--cide-ele-text-primary, #374151);border:1px solid var(--cide-ele-border-secondary, #d1d5db)}.btn-secondary:hover{background-color:var(--cide-ele-bg-hover, #f3f4f6);border-color:var(--cide-ele-border-hover, #9ca3af)}.btn-primary{background-color:var(--cide-ele-brand-primary, #2563eb);color:#fff}.btn-primary:hover{background-color:var(--cide-ele-brand-primary-hover, #1d4ed8)}.btn-danger{background-color:var(--cide-ele-error, #dc2626);color:#fff}.btn-danger:hover{background-color:#b91c1c}.btn-warning{background-color:var(--cide-ele-warning, #d97706);color:#fff}.btn-warning:hover{background-color:#b45309}.btn-success{background-color:var(--cide-ele-success, #16a34a);color:#fff}.btn-success:hover{background-color:#15803d}@media (max-width: 640px){.confirmation-modal{width:calc(100% - 2rem);max-width:calc(100% - 2rem);top:50%;left:50%;transform:translate(-50%,-50%);max-height:calc(100vh - 2rem);position:fixed}.modal-header{padding:16px 16px 12px}.modal-body{padding:12px 16px 16px;flex:1;overflow-y:auto}.modal-footer{padding:12px 16px 16px;flex-direction:column-reverse;gap:8px;flex-shrink:0}.btn{width:100%;justify-content:center}.header-content{flex-direction:column;text-align:center;gap:12px}.modal-title{font-size:18px}.modal-message{font-size:14px}}@media (max-width: 480px){.confirmation-modal{width:calc(100% - 1rem);max-width:calc(100% - 1rem);border-radius:8px}.modal-header{padding:12px 12px 8px}.modal-body,.modal-footer{padding:8px 12px 12px}.icon-container{width:40px;height:40px}.modal-title{font-size:16px}.modal-message{font-size:13px}}.btn:focus{outline:2px solid var(--cide-ele-brand-primary, #2563eb);outline-offset:2px}.modal-enter{opacity:0;transform:scale(.95) translateY(-10px)}.modal-enter-active{opacity:1;transform:scale(1) translateY(0);transition:all .2s ease-out}.modal-exit{opacity:1;transform:scale(1) translateY(0)}.modal-exit-active{opacity:0;transform:scale(.95) translateY(-10px);transition:all .15s ease-in}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleConfirmationModalComponent, decorators: [{
             type: Component,
@@ -10362,7 +10435,7 @@ class CideEleToastNotificationComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".toast-container{position:fixed;top:auto;bottom:20px;right:20px;z-index:9990;display:flex;flex-direction:column-reverse;gap:12px;max-width:400px;width:100%}.toast-notification{background:var(--cide-ele-bg-primary, #ffffff);border-radius:8px;box-shadow:var(--cide-ele-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05));border:1px solid var(--cide-ele-border-primary, #e5e7eb);overflow:hidden;position:relative;animation:slideInRight .3s ease-out}.toast-notification.success{border-left:4px solid var(--cide-ele-success, #16a34a)}.toast-notification.error{border-left:4px solid var(--cide-ele-error, #dc2626)}.toast-notification.warning{border-left:4px solid var(--cide-ele-warning, #d97706)}.toast-notification.info{border-left:4px solid var(--cide-ele-info, #2563eb)}.toast-content{display:flex;align-items:flex-start;gap:12px;padding:16px}.toast-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.toast-icon.success{background-color:var(--cide-ele-success-light, #f0fdf4);color:var(--cide-ele-success, #16a34a)}.toast-icon.error{background-color:var(--cide-ele-error-light, #fef2f2);color:var(--cide-ele-error, #dc2626)}.toast-icon.warning{background-color:var(--cide-ele-warning-light, #fffbeb);color:var(--cide-ele-warning, #d97706)}.toast-icon.info{background-color:var(--cide-ele-info-light, #eff6ff);color:var(--cide-ele-info, #2563eb)}.toast-text{flex:1;min-width:0}.toast-title{font-size:14px;font-weight:600;color:var(--cide-ele-text-primary, #111827);margin-bottom:4px;line-height:1.4}.toast-message{font-size:14px;color:var(--cide-ele-text-secondary, #6b7280);line-height:1.4}.toast-close{background:none;border:none;color:var(--cide-ele-text-tertiary, #9ca3af);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.toast-close:hover{background-color:var(--cide-ele-bg-hover, #f3f4f6);color:var(--cide-ele-text-secondary, #6b7280)}.toast-actions{padding:0 16px 16px;display:flex;justify-content:flex-end}.toast-undo-btn{background:none;border:none;color:var(--cide-ele-brand-primary, #2563eb);font-size:14px;font-weight:500;cursor:pointer;padding:8px 12px;border-radius:6px;transition:all .2s ease}.toast-undo-btn:hover{background-color:var(--cide-ele-brand-primary-light, #eff6ff)}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background-color:var(--cide-ele-border-primary, #e5e7eb);animation:progressShrink linear forwards}.toast-notification.success .toast-progress{background-color:var(--cide-ele-success, #16a34a)}.toast-notification.error .toast-progress{background-color:var(--cide-ele-error, #dc2626)}.toast-notification.warning .toast-progress{background-color:var(--cide-ele-warning, #d97706)}.toast-notification.info .toast-progress{background-color:var(--cide-ele-info, #2563eb)}.toast-custom-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background-color:var(--cide-ele-border-primary, #e5e7eb);overflow:hidden}.toast-custom-progress-bar{height:100%;background-color:var(--cide-ele-info, #2563eb);transition:width .3s ease;border-radius:0 3px 0 0}.toast-notification.success .toast-custom-progress-bar{background-color:var(--cide-ele-success, #16a34a)}.toast-notification.error .toast-custom-progress-bar{background-color:var(--cide-ele-error, #dc2626)}.toast-notification.warning .toast-custom-progress-bar{background-color:var(--cide-ele-warning, #d97706)}.toast-notification.info .toast-custom-progress-bar{background-color:var(--cide-ele-info, #2563eb)}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes progressShrink{0%{width:100%}to{width:0%}}@media (max-width: 640px){.toast-container{inset:auto 12px 12px;max-width:none;flex-direction:column-reverse;gap:8px}.toast-notification{border-radius:6px;box-shadow:0 4px 12px #0000001f}.toast-content{padding:8px 12px;gap:8px;align-items:center}.toast-title{font-size:12px;margin-bottom:0;line-height:1.2}.toast-message{font-size:11.5px;line-height:1.25}.toast-icon{width:18px;height:18px;margin-top:0}.toast-close{padding:2px}.toast-actions{padding:0 12px 8px}.toast-undo-btn{font-size:12px;padding:4px 8px}}.toast-close:focus,.toast-undo-btn:focus{outline:2px solid var(--cide-ele-brand-primary, #2563eb);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], animations: [
+  `, isInline: true, styles: [".toast-container{position:fixed;top:auto;bottom:20px;right:20px;z-index:9990;display:flex;flex-direction:column-reverse;gap:12px;max-width:400px;width:100%}.toast-notification{background:var(--cide-ele-bg-primary, #ffffff);border-radius:8px;box-shadow:var(--cide-ele-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05));border:1px solid var(--cide-ele-border-primary, #e5e7eb);overflow:hidden;position:relative;animation:slideInRight .3s ease-out}.toast-notification.success{border-left:4px solid var(--cide-ele-success, #16a34a)}.toast-notification.error{border-left:4px solid var(--cide-ele-error, #dc2626)}.toast-notification.warning{border-left:4px solid var(--cide-ele-warning, #d97706)}.toast-notification.info{border-left:4px solid var(--cide-ele-info, #2563eb)}.toast-content{display:flex;align-items:flex-start;gap:12px;padding:16px}.toast-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.toast-icon.success{background-color:var(--cide-ele-success-light, #f0fdf4);color:var(--cide-ele-success, #16a34a)}.toast-icon.error{background-color:var(--cide-ele-error-light, #fef2f2);color:var(--cide-ele-error, #dc2626)}.toast-icon.warning{background-color:var(--cide-ele-warning-light, #fffbeb);color:var(--cide-ele-warning, #d97706)}.toast-icon.info{background-color:var(--cide-ele-info-light, #eff6ff);color:var(--cide-ele-info, #2563eb)}.toast-text{flex:1;min-width:0}.toast-title{font-size:14px;font-weight:600;color:var(--cide-ele-text-primary, #111827);margin-bottom:4px;line-height:1.4}.toast-message{font-size:14px;color:var(--cide-ele-text-secondary, #6b7280);line-height:1.4}.toast-close{background:none;border:none;color:var(--cide-ele-text-tertiary, #9ca3af);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.toast-close:hover{background-color:var(--cide-ele-bg-hover, #f3f4f6);color:var(--cide-ele-text-secondary, #6b7280)}.toast-actions{padding:0 16px 16px;display:flex;justify-content:flex-end}.toast-undo-btn{background:none;border:none;color:var(--cide-ele-brand-primary, #2563eb);font-size:14px;font-weight:500;cursor:pointer;padding:8px 12px;border-radius:6px;transition:all .2s ease}.toast-undo-btn:hover{background-color:var(--cide-ele-brand-primary-light, #eff6ff)}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background-color:var(--cide-ele-border-primary, #e5e7eb);animation:progressShrink linear forwards}.toast-notification.success .toast-progress{background-color:var(--cide-ele-success, #16a34a)}.toast-notification.error .toast-progress{background-color:var(--cide-ele-error, #dc2626)}.toast-notification.warning .toast-progress{background-color:var(--cide-ele-warning, #d97706)}.toast-notification.info .toast-progress{background-color:var(--cide-ele-info, #2563eb)}.toast-custom-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background-color:var(--cide-ele-border-primary, #e5e7eb);overflow:hidden}.toast-custom-progress-bar{height:100%;background-color:var(--cide-ele-info, #2563eb);transition:width .3s ease;border-radius:0 3px 0 0}.toast-notification.success .toast-custom-progress-bar{background-color:var(--cide-ele-success, #16a34a)}.toast-notification.error .toast-custom-progress-bar{background-color:var(--cide-ele-error, #dc2626)}.toast-notification.warning .toast-custom-progress-bar{background-color:var(--cide-ele-warning, #d97706)}.toast-notification.info .toast-custom-progress-bar{background-color:var(--cide-ele-info, #2563eb)}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes progressShrink{0%{width:100%}to{width:0%}}@media (max-width: 640px){.toast-container{inset:auto 12px 12px;max-width:none;flex-direction:column-reverse;gap:8px}.toast-notification{border-radius:6px;box-shadow:0 4px 12px #0000001f}.toast-content{padding:8px 12px;gap:8px;align-items:center}.toast-title{font-size:12px;margin-bottom:0;line-height:1.2}.toast-message{font-size:11.5px;line-height:1.25}.toast-icon{width:18px;height:18px;margin-top:0}.toast-close{padding:2px}.toast-actions{padding:0 12px 8px}.toast-undo-btn{font-size:12px;padding:4px 8px}}.toast-close:focus,.toast-undo-btn:focus{outline:2px solid var(--cide-ele-brand-primary, #2563eb);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }], animations: [
             trigger('toastAnimation', [
                 state('void', style({
                     transform: 'translateX(100%)',
@@ -13565,7 +13638,7 @@ class CideEleDataGridComponent {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleDataGridComponent, isStandalone: true, selector: "cide-ele-data-grid", inputs: { config: "config", templateRenderers: "templateRenderers", customFormatters: "customFormatters", actionHandlers: "actionHandlers", serverSidePagination: "serverSidePagination", totalServerItems: "totalServerItems", currentServerPage: "currentServerPage", currentServerPageSize: "currentServerPageSize", dragDropEnabled: "dragDropEnabled" }, outputs: { gridEvent: "gridEvent" }, usesOnChanges: true, ngImport: i0, template: "<!-- Data Grid Component -->\n<div class=\"data-grid-container tw-bg-white tw-shadow tw-overflow-visible tw-flex tw-flex-col\" [ngClass]=\"[\n         mergedConfig().tableClass || '',\n         mergedConfig().fullHeight ? 'tw-h-full' : '',\n         isDragDropEnabled() ? 'drag-drop-enabled' : '',\n         isTreeEnabled() ? 'tree-enabled' : ''\n       ]\">\n\n  <!-- Header Section -->\n  @if (mergedConfig().title || mergedConfig().subtitle) {\n  <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n    @if (mergedConfig().title) {\n    <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\n      {{ mergedConfig().title }}\n    </h3>\n    }\n    @if (mergedConfig().subtitle) {\n    <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\n      {{ mergedConfig().subtitle }}\n    </p>\n    }\n  </div>\n  }\n\n  <!-- Search Section -->\n  @if (searchConfig.enabled) {\n  <div class=\"tw-px-2 tw-py-1.5 sm:tw-px-3 sm:tw-py-2.5 tw-border-b tw-border-gray-200\">\n    <div class=\"tw-flex tw-items-center tw-justify-between\">\n      <!-- Left Side: Search Input and Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\n        <!-- Search Input - Apple Style -->\n        <div\n          class=\"tw-w-28 focus-within:tw-w-48 sm:tw-w-auto sm:tw-flex-1 sm:tw-max-w-md tw-transition-all tw-duration-300 data-grid-search-input\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\" (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\" [disabled]=\"loading() || isRefreshing()\" leadingIcon=\"search\"\n            fill=\"outline\" size=\"sm\">\n          </cide-ele-input>\n        </div>\n\n        <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\n          <!-- Filter Button with Dropdown -->\n          <div class=\"tw-relative\">\n            <button type=\"button\"\n              class=\"filter-dropdown-trigger tw-hidden sm:tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm:tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200 tw-relative !tw-border-0 sm:!tw-border sm:tw-border-gray-200/60\"\n              [class.tw-text-blue-600]=\"columnFilters().length > 0\" [class.tw-bg-blue-50]=\"columnFilters().length > 0\"\n              title=\"Filter\" (click)=\"toggleFilterDropdown()\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\n              @if (columnFilters().length > 0) {\n              <span\n                class=\"tw-absolute -tw-top-1 -tw-right-1 tw-inline-flex tw-items-center tw-justify-center tw-w-4 tw-h-4 tw-text-xs tw-font-semibold tw-text-white tw-bg-blue-600 tw-rounded-full tw-border tw-border-white\">\n                {{ columnFilters().length }}\n              </span>\n              }\n            </button>\n\n            <!-- Filter Dropdown Menu -->\n            @if (showFilterDropdown()) {\n            <div\n              class=\"filter-dropdown tw-absolute tw-left-0 tw-mt-2 tw-w-80 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tw-py-1.5\">\n                <div\n                  class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n                  <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Active\n                    Filters</span>\n                  @if (columnFilters().length > 0) {\n                  <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-font-medium\"\n                    (click)=\"clearAllFilters()\">\n                    Clear All\n                  </button>\n                  }\n                </div>\n                @if (columnFilters().length === 0) {\n                <div class=\"tw-px-4 tw-py-6 tw-text-center\">\n                  <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-text-gray-300 tw-mx-auto tw-mb-2\">filter_list</cide-ele-icon>\n                  <p class=\"tw-text-sm tw-text-gray-500\">No filters applied</p>\n                  <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Use column filters to narrow down your results</p>\n                </div>\n                } @else {\n                <div class=\"tw-max-h-96 tw-overflow-y-auto\">\n                  @for (filter of columnFilters(); track filter.columnKey) {\n                  <div class=\"tw-px-4 tw-py-3 hover:tw-bg-gray-50 tw-border-b tw-border-gray-100 last:tw-border-b-0\">\n                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n                      <div class=\"tw-flex-1 tw-min-w-0\">\n                        <div class=\"tw-text-xs tw-font-semibold tw-text-gray-600 tw-mb-1\">{{\n                          getColumnHeader(filter.columnKey) }}</div>\n                        <div class=\"tw-text-sm tw-text-gray-700 tw-flex tw-items-center tw-gap-1\">\n                          @if (filter.operator === 'in' && isArray(filter.value)) {\n                          <span class=\"tw-inline-flex tw-items-center tw-gap-1\">\n                            <cide-ele-icon class=\"tw-w-3 tw-h-3\">check_circle</cide-ele-icon>\n                            {{ getArrayLength(filter.value) }} selected\n                          </span>\n                          } @else {\n                          <span>{{ $any(filter.value) }}</span>\n                          }\n                        </div>\n                      </div>\n                      <button type=\"button\"\n                        class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-400 hover:tw-text-red-600 hover:tw-bg-red-50 tw-transition-colors\"\n                        (click)=\"removeFilter(filter.columnKey)\" title=\"Remove filter\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4\">close</cide-ele-icon>\n                      </button>\n                    </div>\n                  </div>\n                  }\n                </div>\n                }\n              </div>\n            </div>\n            }\n          </div>\n\n          <!-- View Toggle Button (Mobile Only) -->\n          @if (mergedConfig().mobileLayout?.enabled) {\n          <button type=\"button\"\n            class=\"tw-hidden sm:tw-hidden tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm:tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200 !tw-border-0\"\n            (click)=\"isMobileView.set(!isMobileView())\" [title]=\"isMobileView() ? 'Table View' : 'Card View'\">\n            <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">{{ isMobileView() ? 'table_chart' : 'view_agenda'\n              }}</cide-ele-icon>\n          </button>\n          }\n\n          <!-- Download/Export Button with Dropdown -->\n          <div class=\"tw-relative\">\n            <button type=\"button\"\n              class=\"tw-hidden sm:tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm:tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 !tw-border-0 sm:!tw-border sm:tw-border-gray-200/60\"\n              title=\"Export\" (click)=\"toggleExportMenu($event)\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\n            </button>\n\n            <!-- Export Dropdown Menu - Improved Design -->\n            @if (showExportMenu()) {\n            <div\n              class=\"tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tw-py-1.5\">\n                <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n                  <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Export\n                    Options</span>\n                </div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-green-50 hover:tw-text-green-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('csv')\">\n                  <div\n                    class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-green-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-green-600\">description</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">CSV</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Comma separated values</div>\n                  </div>\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-blue-50 hover:tw-text-blue-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('excel')\">\n                  <div\n                    class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">table_chart</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">Excel</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Microsoft Excel format</div>\n                  </div>\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-red-50 hover:tw-text-red-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('pdf')\">\n                  <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">PDF</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Portable document format</div>\n                  </div>\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Side: Custom Actions and Drag Order Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <!-- Custom Action Template -->\n        @if (mergedConfig().actionRenderer && templateRenderers[mergedConfig().actionRenderer!]) {\n        <div class=\"data-grid-custom-actions\">\n          <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[mergedConfig().actionRenderer!])\"\n            [ngTemplateOutletContext]=\"{ config: mergedConfig() }\">\n          </ng-container>\n        </div>\n        }\n\n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n        <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\"\n          (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\n          class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\n          Reset Order\n        </button>\n        <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\"\n          (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\n          class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\n          Save Order\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Content Section (Table or Cards) -->\n  <!-- VIRTUAL SCROLL MODE -->\n  @if (isVirtualScrollerEnabled()) {\n  <cdk-virtual-scroll-viewport [itemSize]=\"virtualRowHeight()\" (scrolledIndexChange)=\"onScrolledIndexChange($event)\"\n    class=\"tw-overflow-x-auto tw-relative custom-scrollbar tw-flex-1 tw-min-h-0\" [ngClass]=\"{\n          'tw-overflow-y-auto': true,\n          'tw-max-h-full': true\n        }\"\n    [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : (mergedConfig().fullHeight ? 'none' : null)\"\n    [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : (mergedConfig().fullHeight ? '0' : null)\">\n\n    <!-- Container for items -->\n    <div class=\"tw-min-w-full\">\n      @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n      <!-- Desktop Table (Virtual) -->\n      <table class=\"tw-w-full tw-border-collapse\">\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n        <tbody class=\"tw-bg-white\">\n          <ng-container *cdkVirtualFor=\"let item of virtualData(); let i = index; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"rowContent; context: {$implicit: item, index: i}\"></ng-container>\n          </ng-container>\n        </tbody>\n      </table>\n      } @else {\n      <!-- Mobile Cards (Virtual) -->\n      <div *cdkVirtualFor=\"let item of virtualData(); let i = index; trackBy: trackByFn\" class=\"tw-mb-4\">\n        <ng-container *ngTemplateOutlet=\"cardContent; context: {$implicit: item, index: i}\"></ng-container>\n      </div>\n      }\n    </div>\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n    }\n\n    <!-- Infinite Scroll Loader -->\n    @if (mergedConfig().pagination.infiniteScroll) {\n    @if ((loading() || pageChangeLoading()) && virtualData().length === 0) {\n    <ng-container *ngTemplateOutlet=\"loadingSpinner\"></ng-container>\n    }\n    }\n  </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- STANDARD SCROLL MODE (Page Scroll) -->\n  @else {\n  <div class=\"tw-w-full tw-flex-1 tw-overflow-auto tw-min-h-0 tw-relative\">\n    @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n    <!-- Desktop Table (Standard) -->\n    <table class=\"tw-w-full tw-border-collapse\">\n      <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      <tbody class=\"tw-bg-white\">\n        @for (item of virtualData(); track trackByFn($index, item); let i = $index) {\n        <ng-container *ngTemplateOutlet=\"rowContent; context: {$implicit: item, index: i}\"></ng-container>\n        }\n      </tbody>\n    </table>\n    } @else {\n    <!-- Mobile Cards (Standard) -->\n    <div class=\"tw-p-4 tw-space-y-4\">\n      @for (item of virtualData(); track trackByFn($index, item); let i = $index) {\n      <ng-container *ngTemplateOutlet=\"cardContent; context: {$implicit: item, index: i}\"></ng-container>\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n    }\n\n    <!-- Standard Loader -->\n    @if (mergedConfig().pagination.infiniteScroll && ((loading() || pageChangeLoading()) &&\n    virtualData().length === 0)) {\n    <ng-container *ngTemplateOutlet=\"loadingSpinner\"></ng-container>\n    }\n  </div>\n  }\n\n\n\n\n  <!-- Pagination Section -->\n  @if (mergedConfig().pagination.enabled) {\n  <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n    [class.tw-hidden]=\"mergedConfig().scroll?.virtualScroll\" [class.tw-opacity-60]=\"isRefreshing()\">\n\n    <!-- Results Info and Pagination Controls -->\n    <div\n      class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-center tw-py-0.5 tw-space-y-3 sm:tw-space-y-0\">\n\n      <!-- Left Side: Results Info and Page Size -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-w-full sm:tw-w-auto tw-gap-4\">\n        @if (paginationConfig.showPageInfo) {\n        <div class=\"tw-flex tw-items-center tw-gap-3\">\n          <p class=\"tw-text-xs tw-text-gray-700 tw-font-medium\">\n            {{ getItemRangeText() }}<span class=\"tw-hidden md:tw-inline\"> results</span>\n          </p>\n\n          <!-- Page Size Selector -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5 tw-text-gray-400\">view_list</cide-ele-icon>\n            <div class=\"tw-w-16 tw-relative\">\n              <cide-ele-select [labelHide]=\"true\" [ngModel]=\"pageSize()\" (ngModelChange)=\"updatePageSize($event)\"\n                [options]=\"getPageSizeOptions()\" [disabled]=\"isRefreshing()\" fill=\"outline\" size=\"xs\" class=\"tw-z-30\">\n              </cide-ele-select>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Right Side: Navigation and Quick Jump -->\n      <div class=\"tw-flex tw-flex-wrap tw-items-center tw-justify-center sm:tw-justify-end tw-gap-x-4 tw-gap-y-2\">\n        <!-- Navigation Buttons -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1\">\n          <!-- First/Previous -->\n          <button type=\"button\" (click)=\"onPageChange(1)\" [disabled]=\"currentPage() === 1 || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"First page\">\n            <cide-ele-icon class=\"tw-w-4 tw-h-4\">first_page</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"previousPage()\" [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Previous page\">\n            <cide-ele-icon class=\"tw-w-4 tw-h-4\">chevron_left</cide-ele-icon>\n          </button>\n\n          <!-- Selected Page Display (Compact for Mobile) -->\n          <div class=\"tw-flex tw-items-center tw-bg-gray-50 tw-rounded-lg tw-px-2 tw-py-1 tw-border tw-border-gray-200\">\n            <span class=\"tw-text-xs tw-font-bold tw-text-blue-600\">Page {{ currentPage() }}</span>\n            <span class=\"tw-text-xs tw-text-gray-400 tw-mx-1\">of</span>\n            <span class=\"tw-text-xs tw-font-medium tw-text-gray-600\">{{ totalPages() }}</span>\n          </div>\n\n          <!-- Next/Last -->\n          <button type=\"button\" (click)=\"nextPage()\" [disabled]=\"!hasNextPage() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Next page\">\n            <cide-ele-icon class=\"tw-w-4 tw-h-4\">chevron_right</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"onPageChange(totalPages())\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Last page\">\n            <cide-ele-icon class=\"tw-w-4 tw-h-4\">last_page</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Quick Jump and Refresh group -->\n        <div class=\"tw-flex tw-items-center tw-gap-2 sm:tw-border-l sm:tw-border-gray-200 sm:tw-pl-4\">\n          @if (paginationConfig.showQuickJump) {\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            <div class=\"tw-w-12\">\n              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\" [disabled]=\"isRefreshing()\" size=\"xs\"\n                (keydown.enter)=\"onJumpToPage()\" placeholder=\"#\">\n              </cide-ele-input>\n            </div>\n            <button type=\"button\" (click)=\"onJumpToPage()\" [disabled]=\"isRefreshing()\"\n              class=\"tw-h-[24px] tw-flex tw-items-center tw-justify-center tw-text-[10px] tw-font-bold tw-px-2.5 tw-rounded-lg tw-bg-blue-50 tw-text-blue-600 hover:tw-bg-blue-100 tw-transition-all\">\n              GO\n            </button>\n          </div>\n          }\n\n          @if (paginationConfig.showRefresh) {\n          <button type=\"button\" (click)=\"onRefresh()\" [disabled]=\"isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-lg tw-text-gray-500 hover:tw-bg-blue-50 hover:tw-text-blue-600 tw-transition-colors\"\n            [class.tw-animate-spin]=\"isRefreshing()\" title=\"Refresh\">\n            <cide-ele-icon class=\"tw-w-4 tw-h-4\">refresh</cide-ele-icon>\n          </button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Manage Columns Modal -->\n  @if (showManageColumnsModal()) {\n  <div class=\"tw-fixed tw-inset-0 tw-z-50 tw-overflow-y-auto\" (click)=\"closeManageColumnsModal()\"\n    style=\"background-color: rgba(0, 0, 0, 0.5);\">\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-min-h-screen tw-p-4\">\n      <div\n        class=\"tw-bg-white tw-rounded-lg tw-shadow-xl tw-max-w-md tw-w-full tw-max-h-[80vh] tw-overflow-hidden tw-flex tw-flex-col\"\n        (click)=\"$event.stopPropagation()\">\n        <!-- Modal Header -->\n        <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n          <h3 class=\"tw-text-lg tw-font-semibold tw-text-gray-900\">Manage Columns</h3>\n          <button type=\"button\" class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\"\n            (click)=\"closeManageColumnsModal()\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">close</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Modal Body -->\n        <div class=\"tw-px-6 tw-py-4 tw-overflow-y-auto tw-flex-1\">\n          <p class=\"tw-text-sm tw-text-gray-600 tw-mb-4\">Select columns to show or hide:</p>\n          <div class=\"tw-space-y-2\">\n            @for (column of mergedConfig().columns; track column.key) {\n            <label\n              class=\"tw-flex tw-items-center tw-px-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n              <input type=\"checkbox\"\n                class=\"tw-mr-3 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                [checked]=\"!isColumnHidden(column.key)\"\n                (change)=\"toggleColumnVisibility(column.key); $event.stopPropagation()\">\n              <span class=\"tw-text-sm tw-text-gray-700 tw-flex-1\">{{ column.header }}</span>\n              @if (isColumnHidden(column.key)) {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility_off</cide-ele-icon>\n              } @else {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility</cide-ele-icon>\n              }\n            </label>\n            }\n          </div>\n        </div>\n\n        <!-- Modal Footer -->\n        <div class=\"tw-px-6 tw-py-4 tw-border-t tw-border-gray-200 tw-flex tw-items-center tw-justify-end tw-gap-3\">\n          <button type=\"button\"\n            class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-50 tw-transition-colors\"\n            (click)=\"closeManageColumnsModal()\">\n            Close\n          </button>\n          <button type=\"button\"\n            class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-white tw-bg-blue-600 tw-border tw-border-transparent tw-rounded-md hover:tw-bg-blue-700 tw-transition-colors\"\n            (click)=\"onColumnReset(); closeManageColumnsModal()\">\n            Reset All\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n\n<!-- REUSABLE TEMPLATES -->\n\n<!-- 1. Header Template -->\n<ng-template #headerContent>\n  <thead class=\"tw-bg-gray-50 !tw-sticky tw-top-0 tw-z-10\" [ngClass]=\"[\n              mergedConfig().headerClass || ''\n            ]\">\n    <tr>\n      @for (column of visibleColumns(); track column.key) {\n      <th\n        class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\n        [ngClass]=\"[\n                getColumnWidthClass(column.width),\n                getColumnMaxWidthClass(column.width),\n                column.align === 'center' ? 'tw-text-center' : '',\n                column.align === 'right' ? 'tw-text-right' : ''\n              ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n        [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\" [title]=\"column.header\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-truncate tw-flex-1\">\n            <span class=\"tw-truncate\">{{ column.header }}</span>\n            @if (getColumnSortDirection(column.key) === 'asc') {\n            <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\"\n              title=\"Sorted Ascending\">arrow_upward</cide-ele-icon>\n            }\n            @if (getColumnSortDirection(column.key) === 'desc') {\n            <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\"\n              title=\"Sorted Descending\">arrow_downward</cide-ele-icon>\n            }\n          </div>\n\n          <!-- Active Filter Indicator -->\n          @if (isColumnFiltered(column.key)) {\n          <div\n            class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\n            <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\n            {{ getActiveFilterCount(column.key) }}\n          </div>\n          }\n\n          <!-- Column Menu Trigger (Three Dots Icon) -->\n          @if (mergedConfig().columnMenu?.enabled) {\n          <button type=\"button\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\n            [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\n            [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\" (click)=\"toggleColumnMenu(column.key, $event)\"\n            title=\"Column options\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\n          </button>\n          }\n        </div>\n\n        <!-- Column Menu Dropdown -->\n        @if (isColumnMenuOpen(column.key)) {\n        <div\n          class=\"column-menu-dropdown tw-absolute tw-z-[9999] tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\n          <div class=\"tw-py-1\">\n            <!-- Sort Options -->\n            @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\n            @let sortDirection = getColumnSortDirection(column.key);\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n              [class.tw-text-blue-700]=\"sortDirection === 'asc'\" [class.tw-bg-blue-50]=\"sortDirection === 'asc'\"\n              [class.tw-text-gray-700]=\"sortDirection !== 'asc'\" [class.hover:tw-bg-gray-50]=\"sortDirection !== 'asc'\"\n              (click)=\"onColumnSort(column, 'asc')\">\n              <div class=\"tw-flex tw-items-center\">\n                <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"sortDirection === 'asc'\"\n                  [class.tw-text-gray-400]=\"sortDirection !== 'asc'\">arrow_upward</cide-ele-icon>\n                Ascending\n              </div>\n              @if (sortDirection === 'asc') {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n              }\n            </button>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n              [class.tw-text-blue-700]=\"sortDirection === 'desc'\" [class.tw-bg-blue-50]=\"sortDirection === 'desc'\"\n              [class.tw-text-gray-700]=\"sortDirection !== 'desc'\" [class.hover:tw-bg-gray-50]=\"sortDirection !== 'desc'\"\n              (click)=\"onColumnSort(column, 'desc')\">\n              <div class=\"tw-flex tw-items-center\">\n                <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"sortDirection === 'desc'\"\n                  [class.tw-text-gray-400]=\"sortDirection !== 'desc'\">arrow_downward</cide-ele-icon>\n                Descending\n              </div>\n              @if (sortDirection === 'desc') {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n              }\n            </button>\n            <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n            }\n\n            <!-- Filter Option -->\n            @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\n            <!-- Check if there's a custom filter renderer template -->\n            @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\n            <div class=\"tw-px-4 tw-py-2\">\n              <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\n                [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\n              </ng-container>\n            </div>\n            } @else {\n            <!-- Excel-style Filter Button -->\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\" (click)=\"toggleFilterPanel(column.key, $event)\">\n              <div class=\"tw-flex tw-items-center\">\n                <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\n                Filter\n              </div>\n              <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\n                {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\n              </cide-ele-icon>\n            </button>\n\n            <!-- Excel-style Filter Panel -->\n            @if (isFilterPanelOpen(column.key)) {\n            <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\n              <!-- Search box -->\n              <div class=\"tw-px-2 tw-mb-2\">\n                <input type=\"text\"\n                  class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\n                  placeholder=\"Search...\" [(ngModel)]=\"filterSearchTerm\" (click)=\"$event.stopPropagation()\">\n              </div>\n\n              <!-- Select All / Deselect All -->\n              <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\n                <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                  (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\n                  Select All\n                </button>\n                <span class=\"tw-text-xs tw-text-gray-400\">|</span>\n                <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                  (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\n                  Clear\n                </button>\n              </div>\n\n              <!-- Filter values list -->\n              <div class=\"tw-max-h-48 tw-overflow-y-auto\">\n                @for (item of getUniqueColumnValues(column); track item.value) {\n                <label\n                  class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\n                  <input type=\"checkbox\"\n                    class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                    [checked]=\"item.checked\"\n                    (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\n                    (click)=\"$event.stopPropagation()\">\n                  <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\n                  <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\n                </label>\n                }\n              </div>\n            </div>\n            }\n            }\n            <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n            }\n\n            <!-- Autosize Option -->\n            @if (mergedConfig().columnMenu?.showAutosize) {\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnAutosize(column)\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\n              Autosize\n            </button>\n            }\n\n            <!-- Group By Column Option -->\n            @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\n            @let isGrouped = groupedColumns().includes(column.key);\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n              [class.tw-text-blue-700]=\"isGrouped\" [class.tw-bg-blue-50]=\"isGrouped\"\n              [class.tw-text-gray-700]=\"!isGrouped\" [class.hover:tw-bg-gray-50]=\"!isGrouped\"\n              (click)=\"onColumnGroupBy(column)\">\n              <div class=\"tw-flex tw-items-center\">\n                <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"isGrouped\"\n                  [class.tw-text-gray-400]=\"!isGrouped\">group_work</cide-ele-icon>\n                Group By Column\n              </div>\n              @if (isGrouped) {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n              }\n            </button>\n            }\n\n            <!-- Manage Columns Option -->\n            @if (mergedConfig().columnMenu?.showManageColumns) {\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onManageColumns()\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\n              Manage Columns\n            </button>\n            }\n\n            <!-- Reset Columns Option -->\n            @if (mergedConfig().columnMenu?.showResetColumns) {\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnReset()\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\n              Reset Columns\n            </button>\n            }\n\n            <!-- Hide Column Option -->\n            @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\n            <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnHide(column)\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\n              Hide Column\n            </button>\n            }\n\n            <!-- Aggregation Select Option -->\n            @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\n            <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n            <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnAggregation(column, 'sum')\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\n              Sum\n            </button>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnAggregation(column, 'avg')\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\n              Average\n            </button>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnAggregation(column, 'count')\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\n              Count\n            </button>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnAggregation(column, 'min')\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n              Min\n            </button>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnAggregation(column, 'max')\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n              Max\n            </button>\n            }\n          </div>\n        </div>\n        }\n      </th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<!-- 2. Row Template -->\n<ng-template #rowContent let-item let-i=\"index\">\n  @if (item) {\n  @if (isGroupHeader(item)) {\n  <!-- Group Header Row -->\n  @let groupKey = getGroupKey(item);\n  @let groupLevel = getGroupLevel(item);\n  <tr class=\"data-grid-group-row tw-border-b-2 tw-border-gray-300 tw-font-semibold\"\n    [class.tw-bg-gray-50]=\"groupLevel === 0\" [class.tw-bg-gray-100]=\"groupLevel === 1\"\n    [class.tw-bg-gray-200]=\"groupLevel > 1\" (click)=\"toggleGroupExpansion(groupKey)\">\n    <td class=\"tw-px-3 tw-py-1 tw-cursor-pointer tw-transition-colors\" [attr.colspan]=\"visibleColumns().length\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\" [style.padding-left.px]=\"groupLevel * 24\">\n        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-600 tw-cursor-pointer\">\n          {{ isGroupExpanded(groupKey) ? 'expand_more' : 'chevron_right' }}\n        </cide-ele-icon>\n        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">group_work</cide-ele-icon>\n        <span class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n          {{ getGroupColumnHeader(item) }}: {{ getGroupValueDisplay(item) }}\n        </span>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-ml-2 tw-bg-gray-200 tw-px-2 tw-py-0.5 tw-rounded-full\">\n          {{ getGroupRowCount(item) }}\n        </span>\n\n        <!-- Group Aggregations -->\n        <div class=\"tw-flex tw-items-center tw-ml-auto tw-gap-4 tw-pr-4\">\n          @for (agg of getGroupAggregations(item); track agg.key) {\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <span class=\"tw-text-[10px] tw-text-gray-500 tw-uppercase tw-leading-none\">{{ agg.label }}</span>\n            <span class=\"tw-text-xs tw-font-bold tw-text-gray-900\">{{ agg.value }}</span>\n          </div>\n          }\n        </div>\n      </div>\n    </td>\n  </tr>\n  } @else {\n  <!-- Regular Data Row -->\n  <tr class=\"tw-group data-grid-row tw-border-b-2 tw-border-gray-200\" [attr.data-index]=\"i\" [ngClass]=\"[\n              mergedConfig().rowClass || '',\n              isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n              isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n              !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n              isTreeEnabled() ? getTreeLevelClass(item) : ''\n            ]\" [style.border-color]=\"isDragOverRow === i ? '#3b82f6' : 'transparent'\"\n    [style.background-color]=\"isDragOverRow === i ? '#eff6ff' : ''\" (click)=\"onRowClick(item)\"\n    (keydown.enter)=\"onRowClick(item)\" (keydown.space)=\"onRowClick(item)\"\n    [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n    [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n    [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n    [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n    [draggable]=\"isDragDropEnabled()\" (dragstart)=\"onDragStart($event, item, i)\" (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event, item, i)\" (dragend)=\"onDragEnd($event)\">\n\n    @for (column of visibleColumns(); track column.key) {\n    <td class=\"tw-pr-3 tw-py-1 tw-relative\" [ngClass]=\"[\n                  getColumnWidthClass(column.width),\n                  getColumnMaxWidthClass(column.width),\n                  mergedConfig().cellClass || '',\n                  column.align === 'center' ? 'tw-text-center' : '',\n                  column.align === 'right' ? 'tw-text-right' : '',\n                  column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n                ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n      [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n      [style.maxWidth]=\"getColumnMaxWidthStyle(column.width) || (getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : null)\"\n      [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : (getColumnWidthStyle(column.width) ? null : '100px')\">\n      <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n      @if (isTreeEnabled() && $index === 0) {\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <!-- Tree Indentation -->\n        <div class=\"tw-flex tw-items-center\">\n          @if (hasChildren(item)) {\n          <button variant=\"outline\" size=\"xs\" type=\"button\"\n            (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n            class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n            [class.tw-transition-colors]=\"!isDragDropEnabled()\" [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n            <cide-ele-icon class=\"tw-w-3 tw-h-3\" [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n              [class.tw-rotate-90]=\"isItemExpanded(item)\" size=\"xs\">\n              chevron_right\n            </cide-ele-icon>\n          </button>\n          } @else {\n          <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n            <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n          </div>\n          }\n        </div>\n\n        <!-- Cell Content -->\n        <div class=\"tw-flex-1 tw-w-full\">\n          @if (column.type === 'text') {\n          <p class=\"tw-text-sm tw-text-gray-900\" [class.tw-truncate]=\"column.truncate\"\n            [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n          </p>\n          } @else if (column.type === 'number') {\n          <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n          </span>\n          } @else if (column.type === 'date') {\n          <span class=\"tw-text-sm tw-text-gray-600\">\n            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n          </span>\n          } @else if (column.type === 'boolean') {\n          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n            [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n            {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n          </span>\n          } @else if (column.type === 'status' && column.statusConfig) {\n          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n            [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n            {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n          </span>\n          } @else if (column.type === 'actions' && column.actions) {\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            @for (action of column.actions; track action.key) {\n            <button cideEleButton [variant]=\"action.variant || 'ghost'\" size=\"xs\" type=\"button\"\n              (click)=\"onActionClick(item, action); $event.stopPropagation()\" [title]=\"action.tooltip || action.label\"\n              [disabled]=\"isRefreshing()\"\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n              [class.tw-transition-colors]=\"!isDragDropEnabled()\" [ngClass]=\"{\n                                      'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                      'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                      'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                      'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                    }\">\n              @if (action.icon) {\n              <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                <path d=\"M10 12l-5-5h10l-5 5z\" />\n              </svg>\n              }\n              {{ action.label }}\n            </button>\n            }\n          </div>\n          } @else if (column.type === 'custom') {\n          <!-- Template Renderer -->\n          @if (column.renderer && isTemplateRenderer(column.renderer)) {\n          <ng-container [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n            [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n          </ng-container>\n          } @else {\n          <!-- Default rendering -->\n          <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n          }\n          }\n        </div>\n      </div>\n      } @else {\n      <!-- Regular cell content (non-tree or non-first column) -->\n      @if (column.type === 'text') {\n      <p class=\"tw-text-sm tw-text-gray-900\" [class.tw-truncate]=\"column.truncate\"\n        [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n      </p>\n      } @else if (column.type === 'number') {\n      <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n      </span>\n      } @else if (column.type === 'date') {\n      <span class=\"tw-text-sm tw-text-gray-600\">\n        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n      </span>\n      } @else if (column.type === 'boolean') {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n        [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n        {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n      </span>\n      } @else if (column.type === 'status' && column.statusConfig) {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n        [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n        {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n      </span>\n      } @else if (column.type === 'actions' && column.actions) {\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        @for (action of column.actions; track action.key) {\n        <button cideEleButton [variant]=\"action.variant || 'ghost'\" size=\"xs\" type=\"button\"\n          (click)=\"onActionClick(item, action); $event.stopPropagation()\" [title]=\"action.tooltip || action.label\"\n          [disabled]=\"isRefreshing()\"\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n          [class.tw-transition-colors]=\"!isDragDropEnabled()\" [ngClass]=\"{\n                                    'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                    'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                    'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                    'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                  }\">\n          @if (action.icon) {\n          <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n            <path d=\"M10 12l-5-5h10l-5 5z\" />\n          </svg>\n          }\n          {{ action.label }}\n        </button>\n        }\n      </div>\n      } @else if (column.type === 'custom') {\n      <!-- Template Renderer -->\n      @if (column.renderer && isTemplateRenderer(column.renderer)) {\n      <ng-container [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n        [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n      </ng-container>\n      } @else {\n      <!-- Default rendering -->\n      <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n      }\n      }\n      }\n    </td>\n    }\n  </tr>\n  }\n  } @else {\n  <!-- Skeleton Row for Virtual Scroll -->\n  <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n    @for (column of visibleColumns(); track column.key) {\n    <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\" [ngClass]=\"[\n              getColumnWidthClass(column.width),\n              getColumnMaxWidthClass(column.width)\n            ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n      [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\">\n      <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n    </td>\n    }\n  </tr>\n  }\n</ng-template>\n\n<!-- 3. Mobile Card Template -->\n<ng-template #cardContent let-item let-i=\"index\">\n  @if (item) {\n  <div\n    class=\"data-grid-card tw-bg-white tw-rounded-xl tw-p-4 tw-shadow-sm tw-border tw-border-gray-100 active:tw-bg-gray-50 tw-transition-colors\"\n    (click)=\"onRowClick(item)\">\n    <div class=\"tw-flex tw-justify-between tw-items-start tw-mb-3\">\n      <div class=\"tw-flex-1 tw-min-w-0\">\n        <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-0.5 tw-truncate\">\n          {{ getMobilePrimaryValue(item) }}\n        </h4>\n        @if (getMobileSecondaryValue(item)) {\n        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate\">\n          {{ getMobileSecondaryValue(item) }}\n        </p>\n        }\n      </div>\n\n      <!-- Card Actions -->\n      @if (getRowActions().length > 0) {\n      <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n        @for (action of getRowActions().slice(0, 2); track action.key) {\n        <button type=\"button\" (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n          class=\"tw-p-1.5 tw-rounded-lg hover:tw-bg-gray-100 tw-text-gray-500 tw-transition-colors\"\n          [class.tw-text-blue-600]=\"action.variant === 'primary'\" [class.tw-text-red-600]=\"action.variant === 'danger'\"\n          [title]=\"action.label\">\n          @if (action.icon) {\n          <cide-ele-icon class=\"tw-w-5 tw-h-5\">{{ action.icon }}</cide-ele-icon>\n          } @else {\n          <span class=\"tw-text-[10px] tw-font-bold\">{{ action.label.substring(0, 1) }}</span>\n          }\n        </button>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- Card Details Grid -->\n    <div class=\"tw-grid tw-grid-cols-2 tw-gap-x-4 tw-gap-y-3\">\n      @for (col of getMobileDetailColumns(); track col.key) {\n      <div class=\"tw-flex tw-flex-col tw-min-w-0\">\n        <span class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-tracking-wider tw-mb-0.5\">\n          {{ col.header }}\n        </span>\n        <span class=\"tw-font-medium tw-truncate\" [ngClass]=\"{\n            'tw-text-xs tw-text-gray-700': col.type !== 'status' && col.type !== 'boolean',\n            'tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-w-fit': col.type === 'status' || col.type === 'boolean'\n          }\"\n          [ngClass]=\"col.type === 'status' ? getStatusClass(getNestedValue(item, col.valueGetter || col.key), col.statusConfig) : \n                     (col.type === 'boolean' ? (getNestedValue(item, col.valueGetter || col.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800') : '')\">\n          {{ col.type === 'status' ? getStatusText(getNestedValue(item, col.valueGetter || col.key),\n          col.statusConfig) :\n          (col.type === 'boolean' ? (getNestedValue(item, col.valueGetter || col.key) ? 'Yes' : 'No') :\n          formatValue(getNestedValue(item, col.valueGetter || col.key), col)) }}\n        </span>\n      </div>\n      }\n    </div>\n  </div>\n  } @else {\n  <!-- Skeleton Card for Virtual Scroll -->\n  <div class=\"tw-bg-white tw-rounded-xl tw-p-4 tw-shadow-sm tw-border tw-border-gray-100 tw-animate-pulse\">\n    <div class=\"tw-flex tw-justify-between tw-items-start tw-mb-4\">\n      <div class=\"tw-flex-1\">\n        <div class=\"tw-h-4 tw-bg-gray-200 tw-rounded tw-w-2/3 tw-mb-2\"></div>\n        <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-1/2\"></div>\n      </div>\n      <div class=\"tw-h-8 tw-w-8 tw-bg-gray-100 tw-rounded-lg\"></div>\n    </div>\n    <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\n      <div class=\"tw-space-y-2\">\n        <div class=\"tw-h-2 tw-bg-gray-50 tw-rounded tw-w-1/2\"></div>\n        <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-3/4\"></div>\n      </div>\n      <div class=\"tw-space-y-2\">\n        <div class=\"tw-h-2 tw-bg-gray-50 tw-rounded tw-w-1/2\"></div>\n        <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-3/4\"></div>\n      </div>\n    </div>\n  </div>\n  }\n</ng-template>\n\n<!-- 4. Empty State Template -->\n<ng-template #emptyState>\n  <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-16 tw-px-4\">\n    <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n        d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\">\n      </path>\n    </svg>\n    <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n    <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n      {{ searchQuery() ? 'No results match your search criteria.' : 'There are no items to display.' }}\n    </p>\n  </div>\n</ng-template>\n\n<!-- 5. Loading Spinner Template -->\n<ng-template #loadingSpinner>\n  <div class=\"tw-flex tw-justify-center tw-py-4\">\n    <div class=\"tw-animate-spin tw-rounded-full tw-h-6 tw-w-6 tw-border-2 tw-border-blue-500 tw-border-t-transparent\">\n    </div>\n  </div>\n</ng-template>", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:var(--cide-ele-text-primary);background-color:var(--cide-ele-grid-bg, var(--cide-ele-bg-primary, #ffffff));border-radius:0;overflow:hidden;box-shadow:var(--cide-ele-shadow-sm);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto,.data-grid-container cdk-virtual-scroll-viewport{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb);display:block;width:100%}.data-grid-container .tw-overflow-x-auto.tw-flex-1,.data-grid-container cdk-virtual-scroll-viewport.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar{height:6px;width:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.data-grid-container .tw-overflow-x-auto .cdk-virtual-scroll-content-wrapper,.data-grid-container cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.data-grid-container cdk-virtual-scroll-viewport table{min-height:auto;table-layout:fixed}.data-grid-container cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper tr{display:table!important;width:100%!important;table-layout:fixed!important}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:var(--cide-ele-grid-bg)}.data-grid-container thead{background-color:var(--cide-ele-grid-bg-header);border-bottom:2px solid var(--cide-ele-grid-border-header);position:relative;z-index:10}.data-grid-container thead th{background:transparent;color:var(--cide-ele-grid-text-header);font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid var(--cide-ele-grid-border);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, var(--cide-ele-bg-hover)))}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:var(--cide-ele-bg-tertiary)}.data-grid-container tbody{background-color:var(--cide-ele-grid-bg, #ffffff)}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid var(--cide-ele-grid-border, #e5e7eb);color:var(--cide-ele-grid-text, #1f2937);font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1);background-color:transparent}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:var(--cide-ele-grid-bg, #ffffff);transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container tbody tr:hover,.data-grid-container tbody tr.data-grid-row:hover,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid transparent}.data-grid-container tbody tr:hover td,.data-grid-container tbody tr.data-grid-row:hover td,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td{background-color:transparent!important;border-bottom-color:var(--cide-ele-grid-border);color:var(--cide-ele-grid-text)!important}.data-grid-container tbody tr:active{background-color:var(--cide-ele-bg-active);transform:scale(.999)}.data-grid-container tbody tr:active td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped);border-left:1px solid transparent}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:var(--cide-ele-grid-bg-hover);border-left:2px solid var(--cide-ele-grid-border-hover)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n) td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row{background-color:var(--cide-ele-grid-bg-group)!important}.data-grid-container tbody tr.data-grid-group-row td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container tbody tr.data-grid-group-row:hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:60;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:2px solid var(--cide-ele-grid-border-header);background-color:var(--cide-ele-grid-bg-header)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05);position:absolute!important;z-index:9999!important}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}.data-grid-container :host .tw-bg-white{background-color:#fff!important}.data-grid-container :host .tw-bg-gray-50{background-color:#fafafa!important}.data-grid-container :host .tw-bg-gray-100{background-color:#f3f4f6!important}.data-grid-container :host thead{background-color:var(--cide-ele-grid-bg-header, #fafafa)!important}.data-grid-container :host thead th{background-color:transparent!important;color:var(--cide-ele-grid-text-header, #6b7280)!important}.data-grid-container :host thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, #f3f4f6))!important}.data-grid-container :host .data-grid-group-row{background-color:#f3f4f6!important}.data-grid-container :host tbody{background-color:#fff!important}.data-grid-container :host tbody tr{background-color:#fff!important}.data-grid-container :host tbody tr td{background-color:transparent}.data-grid-container :host.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}.data-grid-container :host .tw-text-gray-900{color:#1f2937!important}.data-grid-container :host .tw-text-gray-600{color:#4b5563!important}.data-grid-container :host .tw-text-gray-500{color:#6b7280!important}.data-grid-container :host .tw-text-gray-400{color:#9ca3af!important}.data-grid-container :host .tw-text-gray-700{color:#374151!important}.data-grid-container :host .tw-border-gray-200,.data-grid-container :host .tw-divide-gray-200{border-color:#e5e7eb!important}.data-grid-container :host .tw-border-gray-300{border-color:#d1d5db!important}.data-grid-container :host tbody tr:hover,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container :host tbody tr:hover td,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr:hover .tw-text-gray-900,.data-grid-container :host tbody tr:hover .tw-text-gray-700,.data-grid-container :host tbody tr:hover .tw-text-gray-600,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50{background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td{background-color:transparent}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900{color:#1f2937!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600{color:#4b5563!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500{color:#6b7280!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400{color:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700{color:#374151!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200{border-color:#e5e7eb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300{border-color:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}.data-grid-container :host-context(.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark]) .tw-bg-white,.data-grid-container :host-context(body.dark-mode) .tw-bg-white,.data-grid-container :host-context(html.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-white{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-50,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-50{background-color:var(--cide-ele-grid-bg-header, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-100,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-100{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark]) .data-grid-group-row,.data-grid-container :host-context(body.dark-mode) .data-grid-group-row,.data-grid-container :host-context(html.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] body) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] html) .data-grid-group-row{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark]) tbody,.data-grid-container :host-context(body.dark-mode) tbody,.data-grid-container :host-context(html.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark] body) tbody,.data-grid-container :host-context([data-theme=dark] html) tbody{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark]) tbody tr,.data-grid-container :host-context(body.dark-mode) tbody tr,.data-grid-container :host-context(html.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark] body) tbody tr,.data-grid-container :host-context([data-theme=dark] html) tbody tr{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark]) tbody tr td,.data-grid-container :host-context(body.dark-mode) tbody tr td,.data-grid-container :host-context(html.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark] body) tbody tr td,.data-grid-container :host-context([data-theme=dark] html) tbody tr td{background-color:transparent}.data-grid-container :host-context(.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark]).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(body.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(html.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] body).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] html).tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped, #111827)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-900{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-600{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-500,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-500,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-500{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-400,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-400,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-400{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-700{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-divide-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-divide-gray-200{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-300,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-300,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-300{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover,.data-grid-container :host-context(body.dark-mode) tbody tr:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context(html.dark-mode) tbody tr:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important;border-left:2px solid var(--cide-ele-grid-border-hover, #60a5fa)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb)}.data-grid-container.drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed var(--cide-ele-brand-primary, #3b82f6);border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb);box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:51}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:var(--cide-ele-bg-tertiary);border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:var(--cide-ele-border-primary)}.tree-level-0{border-bottom:2px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-grid-bg)}.tree-level-0:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-grid-bg-striped)}.tree-level-1:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-bg-secondary)}.tree-level-2:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-bg-primary)}.tree-level-deep:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideEleDataGridComponent, isStandalone: true, selector: "cide-ele-data-grid", inputs: { config: "config", templateRenderers: "templateRenderers", customFormatters: "customFormatters", actionHandlers: "actionHandlers", serverSidePagination: "serverSidePagination", totalServerItems: "totalServerItems", currentServerPage: "currentServerPage", currentServerPageSize: "currentServerPageSize", dragDropEnabled: "dragDropEnabled" }, outputs: { gridEvent: "gridEvent" }, usesOnChanges: true, ngImport: i0, template: "<!-- Data Grid Component -->\n<div class=\"data-grid-container tw-bg-white tw-shadow tw-overflow-visible tw-flex tw-flex-col\" [ngClass]=\"[\n         mergedConfig().tableClass || '',\n         mergedConfig().fullHeight ? 'tw-h-full' : '',\n         isDragDropEnabled() ? 'drag-drop-enabled' : '',\n         isTreeEnabled() ? 'tree-enabled' : ''\n       ]\">\n\n  <!-- Header Section -->\n  @if (mergedConfig().title || mergedConfig().subtitle) {\n  <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n    @if (mergedConfig().title) {\n    <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\n      {{ mergedConfig().title }}\n    </h3>\n    }\n    @if (mergedConfig().subtitle) {\n    <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\n      {{ mergedConfig().subtitle }}\n    </p>\n    }\n  </div>\n  }\n\n  <!-- Search Section -->\n  @if (searchConfig.enabled) {\n  <div class=\"tw-px-2 tw-py-1.5 sm:tw-px-3 sm:tw-py-2.5 tw-border-b tw-border-gray-200\">\n    <div class=\"tw-flex tw-items-center tw-justify-between\">\n      <!-- Left Side: Search Input and Action Icons -->\n      <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\n        <!-- Search Input - Apple Style -->\n        <div\n          class=\"tw-w-28 focus-within:tw-w-48 sm:tw-w-auto sm:tw-flex-1 sm:tw-max-w-md tw-transition-all tw-duration-300 data-grid-search-input\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\" (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\" [disabled]=\"loading() || isRefreshing()\" leadingIcon=\"search\"\n            fill=\"outline\" size=\"sm\">\n          </cide-ele-input>\n        </div>\n\n        <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\n          <!-- Filter Button with Dropdown -->\n          <div class=\"tw-relative\">\n            <button type=\"button\"\n              class=\"filter-dropdown-trigger tw-hidden sm:tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm:tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200 tw-relative !tw-border-0 sm:!tw-border sm:tw-border-gray-200/60\"\n              [class.tw-text-blue-600]=\"columnFilters().length > 0\" [class.tw-bg-blue-50]=\"columnFilters().length > 0\"\n              title=\"Filter\" (click)=\"toggleFilterDropdown()\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\n              @if (columnFilters().length > 0) {\n              <span\n                class=\"tw-absolute -tw-top-1 -tw-right-1 tw-inline-flex tw-items-center tw-justify-center tw-w-4 tw-h-4 tw-text-xs tw-font-semibold tw-text-white tw-bg-blue-600 tw-rounded-full tw-border tw-border-white\">\n                {{ columnFilters().length }}\n              </span>\n              }\n            </button>\n\n            <!-- Filter Dropdown Menu -->\n            @if (showFilterDropdown()) {\n            <div\n              class=\"filter-dropdown tw-absolute tw-left-0 tw-mt-2 tw-w-80 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tw-py-1.5\">\n                <div\n                  class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n                  <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Active\n                    Filters</span>\n                  @if (columnFilters().length > 0) {\n                  <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-font-medium\"\n                    (click)=\"clearAllFilters()\">\n                    Clear All\n                  </button>\n                  }\n                </div>\n                @if (columnFilters().length === 0) {\n                <div class=\"tw-px-4 tw-py-6 tw-text-center\">\n                  <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-text-gray-300 tw-mx-auto tw-mb-2\">filter_list</cide-ele-icon>\n                  <p class=\"tw-text-sm tw-text-gray-500\">No filters applied</p>\n                  <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Use column filters to narrow down your results</p>\n                </div>\n                } @else {\n                <div class=\"tw-max-h-96 tw-overflow-y-auto\">\n                  @for (filter of columnFilters(); track filter.columnKey) {\n                  <div class=\"tw-px-4 tw-py-3 hover:tw-bg-gray-50 tw-border-b tw-border-gray-100 last:tw-border-b-0\">\n                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n                      <div class=\"tw-flex-1 tw-min-w-0\">\n                        <div class=\"tw-text-xs tw-font-semibold tw-text-gray-600 tw-mb-1\">{{\n                          getColumnHeader(filter.columnKey) }}</div>\n                        <div class=\"tw-text-sm tw-text-gray-700 tw-flex tw-items-center tw-gap-1\">\n                          @if (filter.operator === 'in' && isArray(filter.value)) {\n                          <span class=\"tw-inline-flex tw-items-center tw-gap-1\">\n                            <cide-ele-icon class=\"tw-w-3 tw-h-3\">check_circle</cide-ele-icon>\n                            {{ getArrayLength(filter.value) }} selected\n                          </span>\n                          } @else {\n                          <span>{{ $any(filter.value) }}</span>\n                          }\n                        </div>\n                      </div>\n                      <button type=\"button\"\n                        class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-400 hover:tw-text-red-600 hover:tw-bg-red-50 tw-transition-colors\"\n                        (click)=\"removeFilter(filter.columnKey)\" title=\"Remove filter\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4\">close</cide-ele-icon>\n                      </button>\n                    </div>\n                  </div>\n                  }\n                </div>\n                }\n              </div>\n            </div>\n            }\n          </div>\n\n          <!-- View Toggle Button (Mobile Only) -->\n          @if (mergedConfig().mobileLayout?.enabled) {\n          <button type=\"button\"\n            class=\"tw-hidden sm:tw-hidden tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm:tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200 !tw-border-0\"\n            (click)=\"isMobileView.set(!isMobileView())\" [title]=\"isMobileView() ? 'Table View' : 'Card View'\">\n            <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">{{ isMobileView() ? 'table_chart' : 'view_agenda'\n              }}</cide-ele-icon>\n          </button>\n          }\n\n          <!-- Download/Export Button with Dropdown -->\n          <div class=\"tw-relative\">\n            <button type=\"button\"\n              class=\"tw-hidden sm:tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 sm:tw-w-7 sm:tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 !tw-border-0 sm:!tw-border sm:tw-border-gray-200/60\"\n              title=\"Export\" (click)=\"toggleExportMenu($event)\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\n            </button>\n\n            <!-- Export Dropdown Menu - Improved Design -->\n            @if (showExportMenu()) {\n            <div\n              class=\"tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n              (click)=\"$event.stopPropagation()\">\n              <div class=\"tw-py-1.5\">\n                <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n                  <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Export\n                    Options</span>\n                </div>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-green-50 hover:tw-text-green-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('csv')\">\n                  <div\n                    class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-green-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-green-600\">description</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">CSV</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Comma separated values</div>\n                  </div>\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-blue-50 hover:tw-text-blue-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('excel')\">\n                  <div\n                    class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">table_chart</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">Excel</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Microsoft Excel format</div>\n                  </div>\n                </button>\n                <button type=\"button\"\n                  class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-red-50 hover:tw-text-red-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n                  (click)=\"exportData('pdf')\">\n                  <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\n                  </div>\n                  <div class=\"tw-flex-1\">\n                    <div class=\"tw-font-medium\">PDF</div>\n                    <div class=\"tw-text-xs tw-text-gray-500\">Portable document format</div>\n                  </div>\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Side: Custom Actions and Drag Order Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <!-- Custom Action Template -->\n        @if (mergedConfig().actionRenderer && templateRenderers[mergedConfig().actionRenderer!]) {\n        <div class=\"data-grid-custom-actions\">\n          <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[mergedConfig().actionRenderer!])\"\n            [ngTemplateOutletContext]=\"{ config: mergedConfig() }\">\n          </ng-container>\n        </div>\n        }\n\n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n        <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\"\n          (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\n          class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\n          Reset Order\n        </button>\n        <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\"\n          (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\n          class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\n          Save Order\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Content Section (Table or Cards) -->\n  <!-- VIRTUAL SCROLL MODE -->\n  @if (isVirtualScrollerEnabled()) {\n  <cdk-virtual-scroll-viewport [itemSize]=\"virtualRowHeight()\" (scrolledIndexChange)=\"onScrolledIndexChange($event)\"\n    class=\"tw-overflow-x-auto tw-relative custom-scrollbar tw-flex-1 tw-min-h-0\" [ngClass]=\"{\n          'tw-overflow-y-auto': true,\n          'tw-max-h-full': true\n        }\"\n    [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : (mergedConfig().fullHeight ? 'none' : null)\"\n    [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : (mergedConfig().fullHeight ? '0' : null)\">\n\n    <!-- Container for items -->\n    <div class=\"tw-min-w-full\">\n      @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n      <!-- Desktop Table (Virtual) -->\n      <table class=\"tw-w-full tw-border-collapse\">\n        <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n        <tbody class=\"tw-bg-white\">\n          <ng-container *cdkVirtualFor=\"let item of virtualData(); let i = index; trackBy: trackByFn\">\n            <ng-container *ngTemplateOutlet=\"rowContent; context: {$implicit: item, index: i}\"></ng-container>\n          </ng-container>\n        </tbody>\n      </table>\n      } @else {\n      <!-- Mobile Cards (Virtual) -->\n      <div *cdkVirtualFor=\"let item of virtualData(); let i = index; trackBy: trackByFn\" class=\"tw-mb-4\">\n        <ng-container *ngTemplateOutlet=\"cardContent; context: {$implicit: item, index: i}\"></ng-container>\n      </div>\n      }\n    </div>\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n    }\n\n    <!-- Infinite Scroll Loader -->\n    @if (mergedConfig().pagination.infiniteScroll) {\n    @if ((loading() || pageChangeLoading()) && virtualData().length === 0) {\n    <ng-container *ngTemplateOutlet=\"loadingSpinner\"></ng-container>\n    }\n    }\n  </cdk-virtual-scroll-viewport>\n  }\n\n  <!-- STANDARD SCROLL MODE (Page Scroll) -->\n  @else {\n  <div class=\"tw-w-full tw-flex-1 tw-overflow-auto tw-min-h-0 tw-relative\">\n    @if (!isMobileView() || !mergedConfig().mobileLayout?.enabled) {\n    <!-- Desktop Table (Standard) -->\n    <table class=\"tw-w-full tw-border-collapse\">\n      <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n      <tbody class=\"tw-bg-white\">\n        @for (item of virtualData(); track trackByFn($index, item); let i = $index) {\n        <ng-container *ngTemplateOutlet=\"rowContent; context: {$implicit: item, index: i}\"></ng-container>\n        }\n      </tbody>\n    </table>\n    } @else {\n    <!-- Mobile Cards (Standard) -->\n    <div class=\"tw-p-4 tw-space-y-4\">\n      @for (item of virtualData(); track trackByFn($index, item); let i = $index) {\n      <ng-container *ngTemplateOutlet=\"cardContent; context: {$implicit: item, index: i}\"></ng-container>\n      }\n    </div>\n    }\n\n    <!-- Empty State -->\n    @if (displayedData.length === 0 && !loading() && !isRefreshing() && !pageChangeLoading()) {\n    <ng-container *ngTemplateOutlet=\"emptyState\"></ng-container>\n    }\n\n    <!-- Standard Loader -->\n    @if (mergedConfig().pagination.infiniteScroll && ((loading() || pageChangeLoading()) &&\n    virtualData().length === 0)) {\n    <ng-container *ngTemplateOutlet=\"loadingSpinner\"></ng-container>\n    }\n  </div>\n  }\n\n\n\n\n  <!-- Pagination Section -->\n  @if (mergedConfig().pagination.enabled) {\n  <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n    [class.tw-hidden]=\"mergedConfig().scroll?.virtualScroll\" [class.tw-opacity-60]=\"isRefreshing()\">\n\n    <!-- Results Info and Pagination Controls -->\n    <div\n      class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-center tw-py-0.5 tw-space-y-3 sm:tw-space-y-0\">\n\n      <!-- Left Side: Results Info and Page Size -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-w-full sm:tw-w-auto tw-gap-4\">\n        @if (paginationConfig.showPageInfo) {\n        <div class=\"tw-flex tw-items-center tw-gap-3\">\n          <p class=\"tw-text-xs tw-text-gray-700 tw-font-medium\">\n            {{ getItemRangeText() }}<span class=\"tw-hidden md:tw-inline\"> results</span>\n          </p>\n\n          <!-- Page Size Selector -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5 tw-text-gray-400\">view_list</cide-ele-icon>\n            <div class=\"tw-w-16 tw-relative\">\n              <cide-ele-select [labelHide]=\"true\" [ngModel]=\"pageSize()\" (ngModelChange)=\"updatePageSize($event)\"\n                [options]=\"getPageSizeOptions()\" [disabled]=\"isRefreshing()\" fill=\"outline\" size=\"xs\" class=\"tw-z-30\">\n              </cide-ele-select>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Right Side: Navigation and Quick Jump -->\n      <div class=\"tw-flex tw-flex-wrap tw-items-center tw-justify-center sm:tw-justify-end tw-gap-x-4 tw-gap-y-2\">\n        <!-- Navigation Buttons -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1\">\n          <!-- First/Previous -->\n          <button type=\"button\" (click)=\"onPageChange(1)\" [disabled]=\"currentPage() === 1 || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"First page\">\n            <cide-ele-icon class=\"tw-w-4 tw-h-4\">first_page</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"previousPage()\" [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Previous page\">\n            <cide-ele-icon class=\"tw-w-4 tw-h-4\">chevron_left</cide-ele-icon>\n          </button>\n\n          <!-- Selected Page Display (Compact for Mobile) -->\n          <div class=\"tw-flex tw-items-center tw-bg-gray-50 tw-rounded-lg tw-px-2 tw-py-1 tw-border tw-border-gray-200\">\n            <span class=\"tw-text-xs tw-font-bold tw-text-blue-600\">Page {{ currentPage() }}</span>\n            <span class=\"tw-text-xs tw-text-gray-400 tw-mx-1\">of</span>\n            <span class=\"tw-text-xs tw-font-medium tw-text-gray-600\">{{ totalPages() }}</span>\n          </div>\n\n          <!-- Next/Last -->\n          <button type=\"button\" (click)=\"nextPage()\" [disabled]=\"!hasNextPage() || isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Next page\">\n            <cide-ele-icon class=\"tw-w-4 tw-h-4\">chevron_right</cide-ele-icon>\n          </button>\n          <button type=\"button\" (click)=\"onPageChange(totalPages())\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 disabled:tw-opacity-30\"\n            title=\"Last page\">\n            <cide-ele-icon class=\"tw-w-4 tw-h-4\">last_page</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Quick Jump and Refresh group -->\n        <div class=\"tw-flex tw-items-center tw-gap-2 sm:tw-border-l sm:tw-border-gray-200 sm:tw-pl-4\">\n          @if (paginationConfig.showQuickJump) {\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            <div class=\"tw-w-12\">\n              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\" [disabled]=\"isRefreshing()\" size=\"xs\"\n                (keydown.enter)=\"onJumpToPage()\" placeholder=\"#\">\n              </cide-ele-input>\n            </div>\n            <button type=\"button\" (click)=\"onJumpToPage()\" [disabled]=\"isRefreshing()\"\n              class=\"tw-h-[24px] tw-flex tw-items-center tw-justify-center tw-text-[10px] tw-font-bold tw-px-2.5 tw-rounded-lg tw-bg-blue-50 tw-text-blue-600 hover:tw-bg-blue-100 tw-transition-all\">\n              GO\n            </button>\n          </div>\n          }\n\n          @if (paginationConfig.showRefresh) {\n          <button type=\"button\" (click)=\"onRefresh()\" [disabled]=\"isRefreshing()\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-lg tw-text-gray-500 hover:tw-bg-blue-50 hover:tw-text-blue-600 tw-transition-colors\"\n            [class.tw-animate-spin]=\"isRefreshing()\" title=\"Refresh\">\n            <cide-ele-icon class=\"tw-w-4 tw-h-4\">refresh</cide-ele-icon>\n          </button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n  }\n\n  <!-- Manage Columns Modal -->\n  @if (showManageColumnsModal()) {\n  <div class=\"tw-fixed tw-inset-0 tw-z-50 tw-overflow-y-auto\" (click)=\"closeManageColumnsModal()\"\n    style=\"background-color: rgba(0, 0, 0, 0.5);\">\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-min-h-screen tw-p-4\">\n      <div\n        class=\"tw-bg-white tw-rounded-lg tw-shadow-xl tw-max-w-md tw-w-full tw-max-h-[80vh] tw-overflow-hidden tw-flex tw-flex-col\"\n        (click)=\"$event.stopPropagation()\">\n        <!-- Modal Header -->\n        <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n          <h3 class=\"tw-text-lg tw-font-semibold tw-text-gray-900\">Manage Columns</h3>\n          <button type=\"button\" class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\"\n            (click)=\"closeManageColumnsModal()\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-5\">close</cide-ele-icon>\n          </button>\n        </div>\n\n        <!-- Modal Body -->\n        <div class=\"tw-px-6 tw-py-4 tw-overflow-y-auto tw-flex-1\">\n          <p class=\"tw-text-sm tw-text-gray-600 tw-mb-4\">Select columns to show or hide:</p>\n          <div class=\"tw-space-y-2\">\n            @for (column of mergedConfig().columns; track column.key) {\n            <label\n              class=\"tw-flex tw-items-center tw-px-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n              <input type=\"checkbox\"\n                class=\"tw-mr-3 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                [checked]=\"!isColumnHidden(column.key)\"\n                (change)=\"toggleColumnVisibility(column.key); $event.stopPropagation()\">\n              <span class=\"tw-text-sm tw-text-gray-700 tw-flex-1\">{{ column.header }}</span>\n              @if (isColumnHidden(column.key)) {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility_off</cide-ele-icon>\n              } @else {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility</cide-ele-icon>\n              }\n            </label>\n            }\n          </div>\n        </div>\n\n        <!-- Modal Footer -->\n        <div class=\"tw-px-6 tw-py-4 tw-border-t tw-border-gray-200 tw-flex tw-items-center tw-justify-end tw-gap-3\">\n          <button type=\"button\"\n            class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-50 tw-transition-colors\"\n            (click)=\"closeManageColumnsModal()\">\n            Close\n          </button>\n          <button type=\"button\"\n            class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-white tw-bg-blue-600 tw-border tw-border-transparent tw-rounded-md hover:tw-bg-blue-700 tw-transition-colors\"\n            (click)=\"onColumnReset(); closeManageColumnsModal()\">\n            Reset All\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n\n<!-- REUSABLE TEMPLATES -->\n\n<!-- 1. Header Template -->\n<ng-template #headerContent>\n  <thead class=\"tw-bg-gray-50 !tw-sticky tw-top-0 tw-z-10\" [ngClass]=\"[\n              mergedConfig().headerClass || ''\n            ]\">\n    <tr>\n      @for (column of visibleColumns(); track column.key) {\n      <th\n        class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\n        [ngClass]=\"[\n                getColumnWidthClass(column.width),\n                getColumnMaxWidthClass(column.width),\n                column.align === 'center' ? 'tw-text-center' : '',\n                column.align === 'right' ? 'tw-text-right' : ''\n              ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n        [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\" [title]=\"column.header\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-truncate tw-flex-1\">\n            <span class=\"tw-truncate\">{{ column.header }}</span>\n            @if (getColumnSortDirection(column.key) === 'asc') {\n            <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\"\n              title=\"Sorted Ascending\">arrow_upward</cide-ele-icon>\n            }\n            @if (getColumnSortDirection(column.key) === 'desc') {\n            <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\"\n              title=\"Sorted Descending\">arrow_downward</cide-ele-icon>\n            }\n          </div>\n\n          <!-- Active Filter Indicator -->\n          @if (isColumnFiltered(column.key)) {\n          <div\n            class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\n            <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\n            {{ getActiveFilterCount(column.key) }}\n          </div>\n          }\n\n          <!-- Column Menu Trigger (Three Dots Icon) -->\n          @if (mergedConfig().columnMenu?.enabled) {\n          <button type=\"button\"\n            class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\n            [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\n            [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\" (click)=\"toggleColumnMenu(column.key, $event)\"\n            title=\"Column options\">\n            <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\n          </button>\n          }\n        </div>\n\n        <!-- Column Menu Dropdown -->\n        @if (isColumnMenuOpen(column.key)) {\n        <div\n          class=\"column-menu-dropdown tw-absolute tw-z-[9999] tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\n          <div class=\"tw-py-1\">\n            <!-- Sort Options -->\n            @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\n            @let sortDirection = getColumnSortDirection(column.key);\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n              [class.tw-text-blue-700]=\"sortDirection === 'asc'\" [class.tw-bg-blue-50]=\"sortDirection === 'asc'\"\n              [class.tw-text-gray-700]=\"sortDirection !== 'asc'\" [class.hover:tw-bg-gray-50]=\"sortDirection !== 'asc'\"\n              (click)=\"onColumnSort(column, 'asc')\">\n              <div class=\"tw-flex tw-items-center\">\n                <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"sortDirection === 'asc'\"\n                  [class.tw-text-gray-400]=\"sortDirection !== 'asc'\">arrow_upward</cide-ele-icon>\n                Ascending\n              </div>\n              @if (sortDirection === 'asc') {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n              }\n            </button>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n              [class.tw-text-blue-700]=\"sortDirection === 'desc'\" [class.tw-bg-blue-50]=\"sortDirection === 'desc'\"\n              [class.tw-text-gray-700]=\"sortDirection !== 'desc'\" [class.hover:tw-bg-gray-50]=\"sortDirection !== 'desc'\"\n              (click)=\"onColumnSort(column, 'desc')\">\n              <div class=\"tw-flex tw-items-center\">\n                <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"sortDirection === 'desc'\"\n                  [class.tw-text-gray-400]=\"sortDirection !== 'desc'\">arrow_downward</cide-ele-icon>\n                Descending\n              </div>\n              @if (sortDirection === 'desc') {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n              }\n            </button>\n            <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n            }\n\n            <!-- Filter Option -->\n            @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\n            <!-- Check if there's a custom filter renderer template -->\n            @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\n            <div class=\"tw-px-4 tw-py-2\">\n              <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\n                [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\n              </ng-container>\n            </div>\n            } @else {\n            <!-- Excel-style Filter Button -->\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\" (click)=\"toggleFilterPanel(column.key, $event)\">\n              <div class=\"tw-flex tw-items-center\">\n                <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\n                Filter\n              </div>\n              <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\n                {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\n              </cide-ele-icon>\n            </button>\n\n            <!-- Excel-style Filter Panel -->\n            @if (isFilterPanelOpen(column.key)) {\n            <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\n              <!-- Search box -->\n              <div class=\"tw-px-2 tw-mb-2\">\n                <input type=\"text\"\n                  class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\n                  placeholder=\"Search...\" [(ngModel)]=\"filterSearchTerm\" (click)=\"$event.stopPropagation()\">\n              </div>\n\n              <!-- Select All / Deselect All -->\n              <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\n                <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                  (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\n                  Select All\n                </button>\n                <span class=\"tw-text-xs tw-text-gray-400\">|</span>\n                <button type=\"button\" class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                  (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\n                  Clear\n                </button>\n              </div>\n\n              <!-- Filter values list -->\n              <div class=\"tw-max-h-48 tw-overflow-y-auto\">\n                @for (item of getUniqueColumnValues(column); track item.value) {\n                <label\n                  class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\n                  <input type=\"checkbox\"\n                    class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                    [checked]=\"item.checked\"\n                    (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\n                    (click)=\"$event.stopPropagation()\">\n                  <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\n                  <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\n                </label>\n                }\n              </div>\n            </div>\n            }\n            }\n            <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n            }\n\n            <!-- Autosize Option -->\n            @if (mergedConfig().columnMenu?.showAutosize) {\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnAutosize(column)\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\n              Autosize\n            </button>\n            }\n\n            <!-- Group By Column Option -->\n            @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\n            @let isGrouped = groupedColumns().includes(column.key);\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-transition-colors\"\n              [class.tw-text-blue-700]=\"isGrouped\" [class.tw-bg-blue-50]=\"isGrouped\"\n              [class.tw-text-gray-700]=\"!isGrouped\" [class.hover:tw-bg-gray-50]=\"!isGrouped\"\n              (click)=\"onColumnGroupBy(column)\">\n              <div class=\"tw-flex tw-items-center\">\n                <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" [class.tw-text-blue-600]=\"isGrouped\"\n                  [class.tw-text-gray-400]=\"!isGrouped\">group_work</cide-ele-icon>\n                Group By Column\n              </div>\n              @if (isGrouped) {\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n              }\n            </button>\n            }\n\n            <!-- Manage Columns Option -->\n            @if (mergedConfig().columnMenu?.showManageColumns) {\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onManageColumns()\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\n              Manage Columns\n            </button>\n            }\n\n            <!-- Reset Columns Option -->\n            @if (mergedConfig().columnMenu?.showResetColumns) {\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnReset()\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\n              Reset Columns\n            </button>\n            }\n\n            <!-- Hide Column Option -->\n            @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\n            <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnHide(column)\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\n              Hide Column\n            </button>\n            }\n\n            <!-- Aggregation Select Option -->\n            @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\n            <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n            <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnAggregation(column, 'sum')\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\n              Sum\n            </button>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnAggregation(column, 'avg')\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\n              Average\n            </button>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnAggregation(column, 'count')\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\n              Count\n            </button>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnAggregation(column, 'min')\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n              Min\n            </button>\n            <button type=\"button\"\n              class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n              (click)=\"onColumnAggregation(column, 'max')\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n              Max\n            </button>\n            }\n          </div>\n        </div>\n        }\n      </th>\n      }\n    </tr>\n  </thead>\n</ng-template>\n\n<!-- 2. Row Template -->\n<ng-template #rowContent let-item let-i=\"index\">\n  @if (item) {\n  @if (isGroupHeader(item)) {\n  <!-- Group Header Row -->\n  @let groupKey = getGroupKey(item);\n  @let groupLevel = getGroupLevel(item);\n  <tr class=\"data-grid-group-row tw-border-b-2 tw-border-gray-300 tw-font-semibold\"\n    [class.tw-bg-gray-50]=\"groupLevel === 0\" [class.tw-bg-gray-100]=\"groupLevel === 1\"\n    [class.tw-bg-gray-200]=\"groupLevel > 1\" (click)=\"toggleGroupExpansion(groupKey)\">\n    <td class=\"tw-px-3 tw-py-1 tw-cursor-pointer tw-transition-colors\" [attr.colspan]=\"visibleColumns().length\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\" [style.padding-left.px]=\"groupLevel * 24\">\n        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-600 tw-cursor-pointer\">\n          {{ isGroupExpanded(groupKey) ? 'expand_more' : 'chevron_right' }}\n        </cide-ele-icon>\n        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">group_work</cide-ele-icon>\n        <span class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n          {{ getGroupColumnHeader(item) }}: {{ getGroupValueDisplay(item) }}\n        </span>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-ml-2 tw-bg-gray-200 tw-px-2 tw-py-0.5 tw-rounded-full\">\n          {{ getGroupRowCount(item) }}\n        </span>\n\n        <!-- Group Aggregations -->\n        <div class=\"tw-flex tw-items-center tw-ml-auto tw-gap-4 tw-pr-4\">\n          @for (agg of getGroupAggregations(item); track agg.key) {\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <span class=\"tw-text-[10px] tw-text-gray-500 tw-uppercase tw-leading-none\">{{ agg.label }}</span>\n            <span class=\"tw-text-xs tw-font-bold tw-text-gray-900\">{{ agg.value }}</span>\n          </div>\n          }\n        </div>\n      </div>\n    </td>\n  </tr>\n  } @else {\n  <!-- Regular Data Row -->\n  <tr class=\"tw-group data-grid-row tw-border-b-2 tw-border-gray-200\" [attr.data-index]=\"i\" [ngClass]=\"[\n              mergedConfig().rowClass || '',\n              isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n              isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n              !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n              isTreeEnabled() ? getTreeLevelClass(item) : ''\n            ]\" [style.border-color]=\"isDragOverRow === i ? '#3b82f6' : 'transparent'\"\n    [style.background-color]=\"isDragOverRow === i ? '#eff6ff' : ''\" (click)=\"onRowClick(item)\"\n    (keydown.enter)=\"onRowClick(item)\" (keydown.space)=\"onRowClick(item)\"\n    [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n    [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n    [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n    [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n    [draggable]=\"isDragDropEnabled()\" (dragstart)=\"onDragStart($event, item, i)\" (dragover)=\"onDragOver($event)\"\n    (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event, item, i)\" (dragend)=\"onDragEnd($event)\">\n\n    @for (column of visibleColumns(); track column.key) {\n    <td class=\"tw-pr-3 tw-py-1 tw-relative\" [ngClass]=\"[\n                  getColumnWidthClass(column.width),\n                  getColumnMaxWidthClass(column.width),\n                  mergedConfig().cellClass || '',\n                  column.align === 'center' ? 'tw-text-center' : '',\n                  column.align === 'right' ? 'tw-text-right' : '',\n                  column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n                ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n      [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n      [style.maxWidth]=\"getColumnMaxWidthStyle(column.width) || (getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : null)\"\n      [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : (getColumnWidthStyle(column.width) ? null : '100px')\">\n      <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n      @if (isTreeEnabled() && $index === 0) {\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <!-- Tree Indentation -->\n        <div class=\"tw-flex tw-items-center\">\n          @if (hasChildren(item)) {\n          <button variant=\"outline\" size=\"xs\" type=\"button\"\n            (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n            class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n            [class.tw-transition-colors]=\"!isDragDropEnabled()\" [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n            <cide-ele-icon class=\"tw-w-3 tw-h-3\" [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n              [class.tw-rotate-90]=\"isItemExpanded(item)\" size=\"xs\">\n              chevron_right\n            </cide-ele-icon>\n          </button>\n          } @else {\n          <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n            <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n          </div>\n          }\n        </div>\n\n        <!-- Cell Content -->\n        <div class=\"tw-flex-1 tw-w-full\">\n          @if (column.type === 'text') {\n          <p class=\"tw-text-sm tw-text-gray-900\" [class.tw-truncate]=\"column.truncate\"\n            [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n          </p>\n          } @else if (column.type === 'number') {\n          <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n          </span>\n          } @else if (column.type === 'date') {\n          <span class=\"tw-text-sm tw-text-gray-600\">\n            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n          </span>\n          } @else if (column.type === 'boolean') {\n          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n            [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n            {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n          </span>\n          } @else if (column.type === 'status' && column.statusConfig) {\n          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n            [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n            {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n          </span>\n          } @else if (column.type === 'actions' && column.actions) {\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            @for (action of column.actions; track action.key) {\n            <button cideEleButton [variant]=\"action.variant || 'ghost'\" size=\"xs\" type=\"button\"\n              (click)=\"onActionClick(item, action); $event.stopPropagation()\" [title]=\"action.tooltip || action.label\"\n              [disabled]=\"isRefreshing()\"\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n              [class.tw-transition-colors]=\"!isDragDropEnabled()\" [ngClass]=\"{\n                                      'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                      'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                      'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                      'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                    }\">\n              @if (action.icon) {\n              <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                <path d=\"M10 12l-5-5h10l-5 5z\" />\n              </svg>\n              }\n              {{ action.label }}\n            </button>\n            }\n          </div>\n          } @else if (column.type === 'custom') {\n          <!-- Template Renderer -->\n          @if (column.renderer && isTemplateRenderer(column.renderer)) {\n          <ng-container [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n            [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n          </ng-container>\n          } @else {\n          <!-- Default rendering -->\n          <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n          }\n          }\n        </div>\n      </div>\n      } @else {\n      <!-- Regular cell content (non-tree or non-first column) -->\n      @if (column.type === 'text') {\n      <p class=\"tw-text-sm tw-text-gray-900\" [class.tw-truncate]=\"column.truncate\"\n        [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n      </p>\n      } @else if (column.type === 'number') {\n      <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n      </span>\n      } @else if (column.type === 'date') {\n      <span class=\"tw-text-sm tw-text-gray-600\">\n        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n      </span>\n      } @else if (column.type === 'boolean') {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n        [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n        {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n      </span>\n      } @else if (column.type === 'status' && column.statusConfig) {\n      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n        [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n        {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n      </span>\n      } @else if (column.type === 'actions' && column.actions) {\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        @for (action of column.actions; track action.key) {\n        <button cideEleButton [variant]=\"action.variant || 'ghost'\" size=\"xs\" type=\"button\"\n          (click)=\"onActionClick(item, action); $event.stopPropagation()\" [title]=\"action.tooltip || action.label\"\n          [disabled]=\"isRefreshing()\"\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n          [class.tw-transition-colors]=\"!isDragDropEnabled()\" [ngClass]=\"{\n                                    'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                    'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                    'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                    'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                  }\">\n          @if (action.icon) {\n          <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n            <path d=\"M10 12l-5-5h10l-5 5z\" />\n          </svg>\n          }\n          {{ action.label }}\n        </button>\n        }\n      </div>\n      } @else if (column.type === 'custom') {\n      <!-- Template Renderer -->\n      @if (column.renderer && isTemplateRenderer(column.renderer)) {\n      <ng-container [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n        [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n      </ng-container>\n      } @else {\n      <!-- Default rendering -->\n      <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n      }\n      }\n      }\n    </td>\n    }\n  </tr>\n  }\n  } @else {\n  <!-- Skeleton Row for Virtual Scroll -->\n  <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n    @for (column of visibleColumns(); track column.key) {\n    <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\" [ngClass]=\"[\n              getColumnWidthClass(column.width),\n              getColumnMaxWidthClass(column.width)\n            ]\" [style.width]=\"getColumnWidthStyle(column.width)\"\n      [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\">\n      <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n    </td>\n    }\n  </tr>\n  }\n</ng-template>\n\n<!-- 3. Mobile Card Template -->\n<ng-template #cardContent let-item let-i=\"index\">\n  @if (item) {\n  <div\n    class=\"data-grid-card tw-bg-white tw-rounded-xl tw-p-4 tw-shadow-sm tw-border tw-border-gray-100 active:tw-bg-gray-50 tw-transition-colors\"\n    (click)=\"onRowClick(item)\">\n    <div class=\"tw-flex tw-justify-between tw-items-start tw-mb-3\">\n      <div class=\"tw-flex-1 tw-min-w-0\">\n        <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-0.5 tw-truncate\">\n          {{ getMobilePrimaryValue(item) }}\n        </h4>\n        @if (getMobileSecondaryValue(item)) {\n        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate\">\n          {{ getMobileSecondaryValue(item) }}\n        </p>\n        }\n      </div>\n\n      <!-- Card Actions -->\n      @if (getRowActions().length > 0) {\n      <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n        @for (action of getRowActions().slice(0, 2); track action.key) {\n        <button type=\"button\" (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n          class=\"tw-p-1.5 tw-rounded-lg hover:tw-bg-gray-100 tw-text-gray-500 tw-transition-colors\"\n          [class.tw-text-blue-600]=\"action.variant === 'primary'\" [class.tw-text-red-600]=\"action.variant === 'danger'\"\n          [title]=\"action.label\">\n          @if (action.icon) {\n          <cide-ele-icon class=\"tw-w-5 tw-h-5\">{{ action.icon }}</cide-ele-icon>\n          } @else {\n          <span class=\"tw-text-[10px] tw-font-bold\">{{ action.label.substring(0, 1) }}</span>\n          }\n        </button>\n        }\n      </div>\n      }\n    </div>\n\n    <!-- Card Details Grid -->\n    <div class=\"tw-grid tw-grid-cols-2 tw-gap-x-4 tw-gap-y-3\">\n      @for (col of getMobileDetailColumns(); track col.key) {\n      <div class=\"tw-flex tw-flex-col tw-min-w-0\">\n        <span class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-tracking-wider tw-mb-0.5\">\n          {{ col.header }}\n        </span>\n        <span class=\"tw-font-medium tw-truncate\" [ngClass]=\"{\n            'tw-text-xs tw-text-gray-700': col.type !== 'status' && col.type !== 'boolean',\n            'tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-w-fit': col.type === 'status' || col.type === 'boolean'\n          }\"\n          [ngClass]=\"col.type === 'status' ? getStatusClass(getNestedValue(item, col.valueGetter || col.key), col.statusConfig) : \n                     (col.type === 'boolean' ? (getNestedValue(item, col.valueGetter || col.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800') : '')\">\n          {{ col.type === 'status' ? getStatusText(getNestedValue(item, col.valueGetter || col.key),\n          col.statusConfig) :\n          (col.type === 'boolean' ? (getNestedValue(item, col.valueGetter || col.key) ? 'Yes' : 'No') :\n          formatValue(getNestedValue(item, col.valueGetter || col.key), col)) }}\n        </span>\n      </div>\n      }\n    </div>\n  </div>\n  } @else {\n  <!-- Skeleton Card for Virtual Scroll -->\n  <div class=\"tw-bg-white tw-rounded-xl tw-p-4 tw-shadow-sm tw-border tw-border-gray-100 tw-animate-pulse\">\n    <div class=\"tw-flex tw-justify-between tw-items-start tw-mb-4\">\n      <div class=\"tw-flex-1\">\n        <div class=\"tw-h-4 tw-bg-gray-200 tw-rounded tw-w-2/3 tw-mb-2\"></div>\n        <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-1/2\"></div>\n      </div>\n      <div class=\"tw-h-8 tw-w-8 tw-bg-gray-100 tw-rounded-lg\"></div>\n    </div>\n    <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\n      <div class=\"tw-space-y-2\">\n        <div class=\"tw-h-2 tw-bg-gray-50 tw-rounded tw-w-1/2\"></div>\n        <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-3/4\"></div>\n      </div>\n      <div class=\"tw-space-y-2\">\n        <div class=\"tw-h-2 tw-bg-gray-50 tw-rounded tw-w-1/2\"></div>\n        <div class=\"tw-h-3 tw-bg-gray-100 tw-rounded tw-w-3/4\"></div>\n      </div>\n    </div>\n  </div>\n  }\n</ng-template>\n\n<!-- 4. Empty State Template -->\n<ng-template #emptyState>\n  <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-16 tw-px-4\">\n    <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n        d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\">\n      </path>\n    </svg>\n    <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n    <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n      {{ searchQuery() ? 'No results match your search criteria.' : 'There are no items to display.' }}\n    </p>\n  </div>\n</ng-template>\n\n<!-- 5. Loading Spinner Template -->\n<ng-template #loadingSpinner>\n  <div class=\"tw-flex tw-justify-center tw-py-4\">\n    <div class=\"tw-animate-spin tw-rounded-full tw-h-6 tw-w-6 tw-border-2 tw-border-blue-500 tw-border-t-transparent\">\n    </div>\n  </div>\n</ng-template>", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:var(--cide-ele-text-primary);background-color:var(--cide-ele-grid-bg, var(--cide-ele-bg-primary, #ffffff));border-radius:0;overflow:hidden;box-shadow:var(--cide-ele-shadow-sm);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto,.data-grid-container cdk-virtual-scroll-viewport{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb);display:block;width:100%}.data-grid-container .tw-overflow-x-auto.tw-flex-1,.data-grid-container cdk-virtual-scroll-viewport.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar{height:6px;width:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,.data-grid-container cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.data-grid-container .tw-overflow-x-auto .cdk-virtual-scroll-content-wrapper,.data-grid-container cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.data-grid-container cdk-virtual-scroll-viewport table{min-height:auto;table-layout:fixed}.data-grid-container cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper tr{display:table!important;width:100%!important;table-layout:fixed!important}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:var(--cide-ele-grid-bg)}.data-grid-container thead{background-color:var(--cide-ele-grid-bg-header);border-bottom:2px solid var(--cide-ele-grid-border-header);position:relative;z-index:10}.data-grid-container thead th{background:transparent;color:var(--cide-ele-grid-text-header);font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid var(--cide-ele-grid-border);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, var(--cide-ele-bg-hover)))}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:var(--cide-ele-bg-tertiary)}.data-grid-container tbody{background-color:var(--cide-ele-grid-bg, #ffffff)}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid var(--cide-ele-grid-border, #e5e7eb);color:var(--cide-ele-grid-text, #1f2937);font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1);background-color:transparent}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:var(--cide-ele-grid-bg, #ffffff);transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container tbody tr:hover,.data-grid-container tbody tr.data-grid-row:hover,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid transparent}.data-grid-container tbody tr:hover td,.data-grid-container tbody tr.data-grid-row:hover td,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td{background-color:transparent!important;border-bottom-color:var(--cide-ele-grid-border);color:var(--cide-ele-grid-text)!important}.data-grid-container tbody tr:active{background-color:var(--cide-ele-bg-active);transform:scale(.999)}.data-grid-container tbody tr:active td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped);border-left:1px solid transparent}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:var(--cide-ele-grid-bg-hover);border-left:2px solid var(--cide-ele-grid-border-hover)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n) td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row{background-color:var(--cide-ele-grid-bg-group)!important}.data-grid-container tbody tr.data-grid-group-row td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container tbody tr.data-grid-group-row:hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:60;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:2px solid var(--cide-ele-grid-border-header);background-color:var(--cide-ele-grid-bg-header)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05);position:absolute!important;z-index:9999!important}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}.data-grid-container :host .tw-bg-white{background-color:#fff!important}.data-grid-container :host .tw-bg-gray-50{background-color:#fafafa!important}.data-grid-container :host .tw-bg-gray-100{background-color:#f3f4f6!important}.data-grid-container :host thead{background-color:var(--cide-ele-grid-bg-header, #fafafa)!important}.data-grid-container :host thead th{background-color:transparent!important;color:var(--cide-ele-grid-text-header, #6b7280)!important}.data-grid-container :host thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, #f3f4f6))!important}.data-grid-container :host .data-grid-group-row{background-color:#f3f4f6!important}.data-grid-container :host tbody{background-color:#fff!important}.data-grid-container :host tbody tr{background-color:#fff!important}.data-grid-container :host tbody tr td{background-color:transparent}.data-grid-container :host.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}.data-grid-container :host .tw-text-gray-900{color:#1f2937!important}.data-grid-container :host .tw-text-gray-600{color:#4b5563!important}.data-grid-container :host .tw-text-gray-500{color:#6b7280!important}.data-grid-container :host .tw-text-gray-400{color:#9ca3af!important}.data-grid-container :host .tw-text-gray-700{color:#374151!important}.data-grid-container :host .tw-border-gray-200,.data-grid-container :host .tw-divide-gray-200{border-color:#e5e7eb!important}.data-grid-container :host .tw-border-gray-300{border-color:#d1d5db!important}.data-grid-container :host tbody tr:hover,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container :host tbody tr:hover td,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr:hover .tw-text-gray-900,.data-grid-container :host tbody tr:hover .tw-text-gray-700,.data-grid-container :host tbody tr:hover .tw-text-gray-600,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50{background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td{background-color:transparent}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900{color:#1f2937!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600{color:#4b5563!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500{color:#6b7280!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400{color:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700{color:#374151!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200{border-color:#e5e7eb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300{border-color:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}.data-grid-container :host-context(.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark]) .tw-bg-white,.data-grid-container :host-context(body.dark-mode) .tw-bg-white,.data-grid-container :host-context(html.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-white{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-50,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-50{background-color:var(--cide-ele-grid-bg-header, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-100,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-100{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark]) .data-grid-group-row,.data-grid-container :host-context(body.dark-mode) .data-grid-group-row,.data-grid-container :host-context(html.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] body) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] html) .data-grid-group-row{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark]) tbody,.data-grid-container :host-context(body.dark-mode) tbody,.data-grid-container :host-context(html.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark] body) tbody,.data-grid-container :host-context([data-theme=dark] html) tbody{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark]) tbody tr,.data-grid-container :host-context(body.dark-mode) tbody tr,.data-grid-container :host-context(html.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark] body) tbody tr,.data-grid-container :host-context([data-theme=dark] html) tbody tr{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark]) tbody tr td,.data-grid-container :host-context(body.dark-mode) tbody tr td,.data-grid-container :host-context(html.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark] body) tbody tr td,.data-grid-container :host-context([data-theme=dark] html) tbody tr td{background-color:transparent}.data-grid-container :host-context(.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark]).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(body.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(html.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] body).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] html).tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped, #111827)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-900{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-600{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-500,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-500,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-500{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-400,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-400,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-400{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-700{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-divide-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-divide-gray-200{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-300,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-300,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-300{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover,.data-grid-container :host-context(body.dark-mode) tbody tr:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context(html.dark-mode) tbody tr:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important;border-left:2px solid var(--cide-ele-grid-border-hover, #60a5fa)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb)}.data-grid-container.drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed var(--cide-ele-brand-primary, #3b82f6);border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb);box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:51}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:var(--cide-ele-bg-tertiary);border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:var(--cide-ele-border-primary)}.tree-level-0{border-bottom:2px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-grid-bg)}.tree-level-0:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-grid-bg-striped)}.tree-level-1:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-bg-secondary)}.tree-level-2:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-bg-primary)}.tree-level-deep:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleDataGridComponent, decorators: [{
             type: Component,
@@ -14010,7 +14083,7 @@ class CideEleDropdownComponent {
         </div>
       }
     </ng-template>
-   `, isInline: true, styles: [".dropdown-menu{transform-origin:top right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+   `, isInline: true, styles: [".dropdown-menu{transform-origin:top right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleDropdownComponent, decorators: [{
             type: Component,
@@ -14390,7 +14463,7 @@ class CideEleFloatingContainerComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb);position:relative;flex:1;display:flex;flex-direction:column}.floating-container-content::-webkit-scrollbar{width:8px}.floating-container-content::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb);border-radius:4px;margin:4px}.floating-container-content::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px;transition:background-color .2s ease;border:1px solid var(--cide-ele-border-primary, #e5e7eb)}.floating-container-content::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);border-color:var(--cide-ele-border-secondary, #d1d5db)}.floating-container-content::-webkit-scrollbar-thumb:active{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
+  `, isInline: true, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb);position:relative;flex:1;display:flex;flex-direction:column}.floating-container-content::-webkit-scrollbar{width:8px}.floating-container-content::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb);border-radius:4px;margin:4px}.floating-container-content::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px;transition:background-color .2s ease;border:1px solid var(--cide-ele-border-primary, #e5e7eb)}.floating-container-content::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);border-color:var(--cide-ele-border-secondary, #d1d5db)}.floating-container-content::-webkit-scrollbar-thumb:active{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideEleFloatingContainerComponent, decorators: [{
             type: Component,
@@ -14581,7 +14654,7 @@ class CideEleFloatingContainerManagerComponent {
         }
       </cide-ele-floating-container>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleFloatingContainerComponent, selector: "cide-ele-floating-container", inputs: ["config", "isMinimized", "isMaximized", "isVisible", "zIndex"], outputs: ["closeEvent", "minimizeEvent", "maximizeEvent", "clickEvent"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)]] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleFloatingContainerComponent, selector: "cide-ele-floating-container", inputs: ["config", "isMinimized", "isMaximized", "isVisible", "zIndex"], outputs: ["closeEvent", "minimizeEvent", "maximizeEvent", "clickEvent"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)]] });
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.3.15", ngImport: i0, type: CideEleFloatingContainerManagerComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)], resolveMetadata: CideEleFloatingContainerDynamicDirective => ({ decorators: [{
                 type: Component,
@@ -15757,5 +15830,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AiAssistantTriggerService, CIDE_AI_DRAWER_COMPONENT, CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleCardComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleThemeToggleComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, CideThemeService, ConfirmationService, CoreFileManagerInsertUpdatePayload, CurrencyPipe, CurrencyService, DEFAULT_CURRENCY_CONFIG, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, OPEN_AI_ASSISTANT_ACTION, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, hostManagerRoutesUrl, notificationRoutesUrl };
+export { AiAssistantTriggerService, CIDE_AI_DRAWER_COMPONENT, CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleCardComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleThemeToggleComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, CideThemeService, ConfirmationService, CoreFileManagerInsertUpdatePayload, CurrencyPipe, CurrencyService, DEFAULT_CURRENCY_CONFIG, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, OPEN_AI_ASSISTANT_ACTION, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, fetchCideIcon, getCideIconSvg, hostManagerRoutesUrl, notificationRoutesUrl };
 //# sourceMappingURL=cloud-ide-element.mjs.map