cloud-ide-element 1.0.44 → 1.0.51

package/fesm2022/cloud-ide-element.mjs

@@ -1,11 +1,12 @@
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, inject, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, HostListener, ContentChildren, signal, Directive, computed, DestroyRef, viewChild, effect } from '@angular/core';
+import { Pipe, Injectable, inject, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, HostListener, ContentChildren, signal, computed, Directive, DestroyRef, viewChild, effect } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import { BehaviorSubject, Subject, debounceTime, takeUntil } from 'rxjs';
+import { BehaviorSubject, Subject, debounceTime, takeUntil, distinctUntilChanged, Observable } from 'rxjs';
 import * as i2$1 from '@angular/router';
+import * as i1$1 from '@angular/common/http';
 
 class CapitalizePipe {
     transform(value, capitalizationMethod) {
@@ -144,9 +145,15 @@ class PortalService {
             maxHeight: config.maxHeight,
             minWidth: config.minWidth
         });
+        console.log("test astrd", config);
         // Create the view from template
         const viewRef = config.viewContainerRef.createEmbeddedView(config.template, { context: config.context });
         viewRef.detectChanges();
+        console.log('🔵 Template view created:', {
+            viewRef,
+            rootNodes: viewRef.rootNodes,
+            rootNodesLength: viewRef.rootNodes.length
+        });
         // Create portal container element
         const portal = document.createElement('div');
         portal.id = `portal-${id}`;
@@ -154,7 +161,10 @@ class PortalService {
         portal.style.position = 'fixed';
         portal.style.top = `${position.top}px`;
         portal.style.left = `${position.left}px`;
-        portal.style.zIndex = '9999';
+        portal.style.zIndex = '99999'; // Increased z-index
+        portal.style.display = 'block';
+        portal.style.visibility = 'visible';
+        portal.style.opacity = '1';
         if (position.maxHeight) {
             portal.style.maxHeight = `${position.maxHeight}px`;
             portal.style.overflowY = 'auto';
@@ -173,6 +183,14 @@ class PortalService {
         document.body.appendChild(portal);
         // Store template portal reference
         this.templatePortals.set(id, { element: portal, viewRef });
+        console.log('🔵 Portal created and appended to body:', {
+            id,
+            portal,
+            position: { top: position.top, left: position.left },
+            zIndex: portal.style.zIndex,
+            className: portal.className,
+            children: portal.children.length
+        });
         // Set up event listeners if needed
         if (config.closeOnClickOutside || config.closeOnEscape) {
             this.setupEventListeners(id, {
@@ -453,7 +471,7 @@ class CideInputComponent {
     /** @description Is Clear Input Cross button is visible or not */
     clearInput = false;
     /** @description Position of Label 'floating' | 'fixed' */
-    labelPlacement = "fixed";
+    labelPlacement = "floating";
     /** @description Lable direction from start of contrl or end of control */
     labelDir = "start";
     /** @description Place holder for control to display if there is no value */
@@ -467,7 +485,7 @@ class CideInputComponent {
     /** @description default true to collapse when there is no help text or error text, if false then element area in DOM will be reserved never detroy  */
     helperTextCollapse = true;
     /** @description show and hide helper text its forecfull */
-    hideHelperAndErrorText = false;
+    hideHelperAndErrorText = true;
     /** @description if found any error in control the error thext will be used to display error message, if there is help text still error text is having higher priority then helptext */
     errorText = "";
     /** @description maxlength for control */
@@ -504,7 +522,7 @@ class CideInputComponent {
      * Component level then setup service then finally default md
      *  Options: "2xs" | ""xs" | "sm" | "md" | "lg" | "xl" | "xxl"
      */
-    size = "sm";
+    size = "md";
     /** @description to set return value using one way binding like: (ngModelChanges) or by two way binding [(ngModel)] */
     ngModelChange = new EventEmitter();
     /*
@@ -775,11 +793,15 @@ class CideInputComponent {
         };
         if (this.required) {
             if (!value) {
+                console.log(value, "value, req");
                 validation_status.status = true;
                 validation_status.validation.required = `required!`;
             }
         }
         if (this.type == 'text') {
+            if (typeof (value) === 'number') {
+                value = value.toString();
+            }
             if (typeof (value) == 'string') {
                 if (this.maxlength > 0) {
                     if (value?.length > this.maxlength) {
@@ -1546,13 +1568,13 @@ class CideIconComponent {
     type = "round";
     toolTip = "";
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", 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-block 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        }\">\r\n    <span class=\"cide-tooltip-content\">{{toolTip}}</span>\r\n\r\n    <span class=\"material-symbols-outlined tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0\"\r\n        [ngClass]=\"{'tw-text-[25px] -tw-ml-[1.5px] -tw-mt-[1px]': (size === 'sm'), 'tw-text-[18px] -tw-ml-[0.5px] tw-mt-[0.5px]' :  (size === 'xs'), 'tw-text-[15px] -tw-ml-[0.5px] tw-mt-[0px] tw-block' :  (size === '2xs'),  'tw-text-[11px] -tw-ml-[0px] tw-mt-[0px] tw-block' :  (size === '3xs')}\"><ng-content></ng-content></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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", 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-block 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-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0\"\r\n        [ngClass]=\"{'tw-text-[25px] -tw-ml-[1.5px] -tw-mt-[1px]': (size === 'sm'), 'tw-text-[18px] -tw-ml-[0.5px] tw-mt-[0.5px]' :  (size === 'xs'), 'tw-text-[15px] -tw-ml-[0.5px] tw-mt-[0px] tw-block' :  (size === '2xs'),  'tw-text-[11px] -tw-ml-[0px] tw-mt-[0px] tw-block' :  (size === '3xs')}\"><ng-content></ng-content></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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", 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-block 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        }\">\r\n    <span class=\"cide-tooltip-content\">{{toolTip}}</span>\r\n\r\n    <span class=\"material-symbols-outlined tw-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0\"\r\n        [ngClass]=\"{'tw-text-[25px] -tw-ml-[1.5px] -tw-mt-[1px]': (size === 'sm'), 'tw-text-[18px] -tw-ml-[0.5px] tw-mt-[0.5px]' :  (size === 'xs'), 'tw-text-[15px] -tw-ml-[0.5px] tw-mt-[0px] tw-block' :  (size === '2xs'),  'tw-text-[11px] -tw-ml-[0px] tw-mt-[0px] tw-block' :  (size === '3xs')}\"><ng-content></ng-content></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"] }]
+                    }, template: "<button class=\"cide-icon tw-m-1 tw-inline-block 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-absolute tw-top-0 tw-left-0 tw-right-0 tw-bottom-0\"\r\n        [ngClass]=\"{'tw-text-[25px] -tw-ml-[1.5px] -tw-mt-[1px]': (size === 'sm'), 'tw-text-[18px] -tw-ml-[0.5px] tw-mt-[0.5px]' :  (size === 'xs'), 'tw-text-[15px] -tw-ml-[0.5px] tw-mt-[0px] tw-block' :  (size === '2xs'),  'tw-text-[11px] -tw-ml-[0px] tw-mt-[0px] tw-block' :  (size === '3xs')}\"><ng-content></ng-content></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: [{
                 type: Input
             }], type: [{
@@ -1599,9 +1621,9 @@ class CideSelectComponent {
     disabled = false;
     id = '';
     ngModel = '';
-    size = 'sm';
+    size = 'md';
     fill = 'outline';
-    labelPlacement = 'fixed';
+    labelPlacement = 'floating';
     labelDir = 'start';
     leadingIcon = '';
     trailingIcon = '';
@@ -1633,6 +1655,9 @@ class CideSelectComponent {
     searchTerm = '';
     filteredOptions = [];
     searchDebounceTimeout = null;
+    searchSubject = new Subject();
+    destroy$ = new Subject();
+    isUpdatingOptions = false;
     // Portal-related properties
     portalService = inject(PortalService);
     dropdownPortalId = '';
@@ -1657,6 +1682,8 @@ class CideSelectComponent {
         this.validateValue(this.ngModel);
         console.log(`🔍 SELECT [${this.debugId}] Initialized with ${this.options.length} options`);
         window.addEventListener('resize', this.onWindowResize.bind(this));
+        // Setup debounced search
+        this.setupDebouncedSearch();
     }
     ngAfterContentInit() {
         if (this.options.length === 0 && this.optionComponents) {
@@ -1681,8 +1708,18 @@ class CideSelectComponent {
         }
         if (changes['options']) {
             this.filterOptions();
+            console.log('🔍 options changed', this.options, this.isOpen, this.dropdownPortalId);
+            // Debug: Check what elements exist in the DOM
+            if (this.dropdownPortalId) {
+                console.log('🔍 Current portal ID:', this.dropdownPortalId);
+                console.log('🔍 All elements with portal ID:', document.querySelectorAll(`[id*="${this.dropdownPortalId}"]`));
+                console.log('🔍 All input elements:', document.querySelectorAll('input[type="text"]'));
+                console.log('🔍 All elements with select-dropdown in ID:', document.querySelectorAll('[id*="select-dropdown"]'));
+                console.log('🔍 All portal elements:', document.querySelectorAll('[id*="portal"]'));
+            }
             // Update portal context if dropdown is open
             if (this.isOpen && this.dropdownPortalId) {
+                // Always use portal recreation since focus preservation is working
                 this.updatePortalContext();
             }
         }
@@ -1711,7 +1748,15 @@ class CideSelectComponent {
     }
     validateValue(value) {
         if (this.required) {
-            const isEmpty = (v) => v === null || v === undefined || v === '' || (typeof v === 'string' && v.trim() === '');
+            const isEmpty = (v) => {
+                if (v === null || v === undefined)
+                    return true;
+                if (typeof v === 'string')
+                    return v.trim() === '';
+                if (Array.isArray(v))
+                    return v.length === 0;
+                return false;
+            };
             if (isEmpty(value)) {
                 this.isValid = false;
                 return { required: 'This field is required' };
@@ -1746,6 +1791,8 @@ class CideSelectComponent {
     openDropdown() {
         this.isOpen = true;
         this.logDebug('Opening dropdown with portal');
+        // Clean up any orphaned portals before creating new one
+        this.cleanupOrphanedPortals();
         this.calculateDropdownPosition();
         this.focusControl();
         this.searchTerm = '';
@@ -1769,8 +1816,23 @@ class CideSelectComponent {
             clearTimeout(this.searchDebounceTimeout);
             this.searchDebounceTimeout = null;
         }
+        // Complete subjects to prevent memory leaks
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.searchSubject.complete();
         // Destroy dropdown portal
         this.destroyDropdownPortal();
+        // Clean up any remaining portals from this component
+        console.log('🔍 Cleaning up all portals on destroy');
+        const allPortals = document.querySelectorAll('[id*="select-dropdown"]');
+        console.log('🔍 Found portals to clean up:', allPortals.length);
+        allPortals.forEach(portal => {
+            const portalId = portal.getAttribute('id');
+            if (portalId) {
+                console.log('🔍 Cleaning up portal:', portalId);
+                this.portalService.destroyPortal(portalId);
+            }
+        });
         window.removeEventListener('resize', this.onWindowResize.bind(this));
         this.logDebug('Component destroyed, timeouts cleared');
     }
@@ -1787,6 +1849,7 @@ class CideSelectComponent {
             }
             // Generate unique portal ID
             this.dropdownPortalId = `select-dropdown-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+            console.log('🔍 Creating new portal with ID:', this.dropdownPortalId);
             const portalConfig = {
                 triggerElement,
                 template: this.dropdownTemplate,
@@ -1836,9 +1899,11 @@ class CideSelectComponent {
     destroyDropdownPortal() {
         try {
             if (this.dropdownPortalId) {
+                console.log('🔍 Destroying portal with ID:', this.dropdownPortalId);
                 this.portalService.destroyPortal(this.dropdownPortalId);
                 this.dropdownPortalId = '';
                 this.logDebug('Dropdown portal destroyed');
+                console.log('🔍 Portal destroyed, remaining portals:', document.querySelectorAll('[id*="select-dropdown"]'));
             }
         }
         catch (error) {
@@ -1850,10 +1915,73 @@ class CideSelectComponent {
             if (!this.dropdownPortalId) {
                 return; // Portal not created yet
             }
+            // Set flag to prevent blur during update
+            this.isUpdatingOptions = true;
+            // Store reference to search input before destroying portal
+            console.log('🔍 Looking for search input with portal ID:', this.dropdownPortalId);
+            const searchInput = document.querySelector(`#${this.dropdownPortalId} input[type="text"]`);
+            console.log('🔍 searchInput found:', searchInput);
+            // Try alternative selectors if the first one fails
+            let searchInputAlt = null;
+            if (!searchInput) {
+                searchInputAlt = document.querySelector(`[id*="${this.dropdownPortalId}"] input[type="text"]`);
+                console.log('🔍 searchInputAlt found:', searchInputAlt);
+            }
+            const finalSearchInput = searchInput || searchInputAlt;
+            const wasSearchInputFocused = finalSearchInput && document.activeElement === finalSearchInput;
+            const searchInputValue = finalSearchInput ? finalSearchInput.value : '';
+            const cursorPosition = finalSearchInput ? finalSearchInput.selectionStart || 0 : 0;
             // Since the portal service doesn't have an update context method,
             // we need to recreate the portal with updated context
             this.destroyDropdownPortal();
             this.createDropdownPortal();
+            // Restore focus and value to search input after recreation
+            if (wasSearchInputFocused && searchInputValue) {
+                // Use multiple timing strategies to ensure focus restoration works
+                const restoreFocus = () => {
+                    let newSearchInput = document.querySelector(`#${this.dropdownPortalId} input[type="text"]`);
+                    console.log('🔍 newSearchInput', newSearchInput);
+                    // Try alternative selectors if the first one fails
+                    if (!newSearchInput) {
+                        newSearchInput = document.querySelector(`[id*="${this.dropdownPortalId}"] input[type="text"]`);
+                        console.log('🔍 newSearchInputAlt', newSearchInput);
+                    }
+                    if (newSearchInput) {
+                        newSearchInput.value = searchInputValue;
+                        newSearchInput.focus();
+                        // Set cursor position to the original position
+                        newSearchInput.setSelectionRange(cursorPosition, cursorPosition);
+                        return true;
+                    }
+                    return false;
+                };
+                // Try immediate restoration
+                if (!restoreFocus()) {
+                    // Try with requestAnimationFrame
+                    requestAnimationFrame(() => {
+                        if (!restoreFocus()) {
+                            // Try with setTimeout as fallback
+                            setTimeout(() => {
+                                restoreFocus();
+                                // Clear the flag after restoration
+                                this.isUpdatingOptions = false;
+                            }, 10);
+                        }
+                        else {
+                            // Clear the flag after successful restoration
+                            this.isUpdatingOptions = false;
+                        }
+                    });
+                }
+                else {
+                    // Clear the flag after successful restoration
+                    this.isUpdatingOptions = false;
+                }
+            }
+            else {
+                // Clear the flag if no focus restoration needed
+                this.isUpdatingOptions = false;
+            }
             this.logDebug('Portal context updated', {
                 filteredOptionsCount: this.filteredOptions.length,
                 searchTerm: this.searchTerm
@@ -1861,6 +1989,117 @@ class CideSelectComponent {
         }
         catch (error) {
             console.error(`💥 SELECT [${this.debugId}] updatePortalContext error:`, error);
+            this.isUpdatingOptions = false;
+        }
+    }
+    updateOptionsInDOM() {
+        try {
+            if (!this.dropdownPortalId) {
+                return false; // Portal not created yet
+            }
+            // Find the options container in the DOM
+            console.log('🔍 Looking for options container with portal ID:', this.dropdownPortalId);
+            let optionsContainer = document.querySelector(`#${this.dropdownPortalId} .tw-py-1`);
+            console.log('🔍 optionsContainer (.tw-py-1):', optionsContainer);
+            // Try alternative selectors if the first one fails
+            if (!optionsContainer) {
+                optionsContainer = document.querySelector(`#${this.dropdownPortalId}`);
+                console.log('🔍 optionsContainer (main):', optionsContainer);
+            }
+            if (!optionsContainer) {
+                optionsContainer = document.querySelector(`[id*="${this.dropdownPortalId}"] .tw-py-1`);
+                console.log('🔍 optionsContainer (alt .tw-py-1):', optionsContainer);
+            }
+            if (!optionsContainer) {
+                optionsContainer = document.querySelector(`[id*="${this.dropdownPortalId}"]`);
+                console.log('🔍 optionsContainer (alt main):', optionsContainer);
+            }
+            if (!optionsContainer) {
+                console.log('🔍 No options container found, returning false');
+                return false;
+            }
+            console.log('🔍 optionsContainer found, clearing and updating with', this.filteredOptions.length, 'options');
+            console.log('🔍 Current optionsContainer HTML before clear:', optionsContainer.innerHTML);
+            // Find and clear only the option buttons and loading states, not the entire container
+            const existingOptions = optionsContainer.querySelectorAll('.cide-select-option, .tw-px-3.tw-py-2, .tw-px-3.tw-py-4');
+            console.log('🔍 Found existing options to remove:', existingOptions.length);
+            existingOptions.forEach(option => option.remove());
+            // Add filtered options directly to DOM
+            this.filteredOptions.forEach((option) => {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = `cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none ${this.isOptionSelected(option) ? 'tw-bg-blue-50 tw-text-blue-700' : ''} ${option.disabled ? 'tw-text-gray-400 tw-cursor-not-allowed' : ''}`;
+                button.textContent = this.getOptionLabel(option);
+                button.disabled = option.disabled || false;
+                // Add event listeners
+                button.addEventListener('mousedown', () => this.onDropdownMouseDown());
+                button.addEventListener('click', () => this.selectOption(option));
+                button.addEventListener('keyup', (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        this.selectOption(option);
+                    }
+                });
+                optionsContainer.appendChild(button);
+            });
+            // Add "No options" message if no options
+            if (this.filteredOptions.length === 0) {
+                const noOptionsDiv = document.createElement('div');
+                noOptionsDiv.className = 'tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic';
+                noOptionsDiv.textContent = this.searchable && this.searchTerm ? 'No options found' : 'No options available';
+                optionsContainer.appendChild(noOptionsDiv);
+            }
+            console.log('🔍 Options added, final optionsContainer HTML:', optionsContainer.innerHTML);
+            console.log('🔍 Number of child elements in optionsContainer:', optionsContainer.children.length);
+            this.logDebug('Options updated directly in DOM', {
+                filteredOptionsCount: this.filteredOptions.length,
+                searchTerm: this.searchTerm
+            });
+            return true; // Success
+        }
+        catch (error) {
+            console.error(`💥 SELECT [${this.debugId}] updateOptionsInDOM error:`, error);
+            return false; // Failed
+        }
+    }
+    setupDebouncedSearch() {
+        this.searchSubject
+            .pipe(debounceTime(300), // 300ms debounce
+        distinctUntilChanged((prev, curr) => {
+            // Custom comparison to ensure empty strings are always emitted
+            return prev === curr;
+        }), takeUntil(this.destroy$))
+            .subscribe(searchTerm => {
+            console.log(`🔍 SELECT [${this.debugId}] Debounced search triggered:`, `"${searchTerm}"`);
+            this.performSearch(searchTerm);
+        });
+    }
+    performSearch(searchTerm) {
+        const queryValue = searchTerm || '';
+        console.log(`🔍 SELECT [${this.debugId}] About to emit search:`, `query="${queryValue}"`);
+        // Emit search change event for external API calls
+        // Note: selectSearchType interface requires both query and value
+        this.searchChange.emit({
+            query: queryValue,
+            value: '' // Empty value since this is just a search, not a selection
+        });
+        console.log(`🔍 SELECT [${this.debugId}] Search emitted successfully:`, `query="${queryValue}"`);
+    }
+    cleanupOrphanedPortals() {
+        try {
+            console.log('🔍 Cleaning up orphaned portals');
+            const allPortals = document.querySelectorAll('[id*="select-dropdown"]');
+            console.log('🔍 Found portals before cleanup:', allPortals.length);
+            allPortals.forEach(portal => {
+                const portalId = portal.getAttribute('id');
+                if (portalId && portalId !== this.dropdownPortalId) {
+                    console.log('🔍 Cleaning up orphaned portal:', portalId);
+                    this.portalService.destroyPortal(portalId);
+                }
+            });
+            console.log('🔍 Orphaned portals cleaned up');
+        }
+        catch (error) {
+            console.error(`💥 SELECT [${this.debugId}] cleanupOrphanedPortals error:`, error);
         }
     }
     onWindowResize() {
@@ -1901,9 +2140,17 @@ class CideSelectComponent {
                 return;
             const optionValue = this.getOptionValue(option);
             if (this.multiple) {
-                // Parse current CSV value to array
-                const currentCsv = this.ngModel || '';
-                const current = currentCsv ? currentCsv.split(',').map(v => v.trim()).filter(Boolean) : [];
+                // Handle both array and CSV formats
+                let current = [];
+                if (Array.isArray(this.ngModel)) {
+                    // Handle array values (new format)
+                    current = this.ngModel.map(v => v?.toString() || '').filter(Boolean);
+                }
+                else {
+                    // Handle string values (legacy CSV format)
+                    const currentCsv = this.ngModel || '';
+                    current = currentCsv ? currentCsv.split(',').map(v => v.trim()).filter(Boolean) : [];
+                }
                 const idx = current.findIndex(v => v.toString() === optionValue.toString());
                 if (idx >= 0) {
                     current.splice(idx, 1);
@@ -1911,13 +2158,20 @@ class CideSelectComponent {
                 else {
                     current.push(optionValue.toString());
                 }
-                // Convert back to CSV
-                const newCsv = current.join(',');
-                this.ngModel = newCsv;
-                this.onChange(newCsv);
-                this.ngModelChange.emit(newCsv);
+                // For array-based form controls, emit array; for CSV-based, emit CSV
+                if (Array.isArray(this.ngModel)) {
+                    this.ngModel = current;
+                    this.onChange(current);
+                    this.ngModelChange.emit(current);
+                }
+                else {
+                    const newCsv = current.join(',');
+                    this.ngModel = newCsv;
+                    this.onChange(newCsv);
+                    this.ngModelChange.emit(newCsv);
+                }
                 this.selectionChange.emit(option);
-                this.validateValue(newCsv);
+                this.validateValue(this.ngModel);
                 this.isTouched = true;
                 this.onTouched();
                 // Do not close dropdown in multi-select mode
@@ -2001,17 +2255,34 @@ class CideSelectComponent {
         }
     }
     clearSelection() {
-        this.ngModel = '';
-        this.onChange('');
-        this.ngModelChange.emit('');
-        this.validateValue('');
+        if (this.multiple && Array.isArray(this.ngModel)) {
+            this.ngModel = [];
+            this.onChange([]);
+            this.ngModelChange.emit([]);
+            this.validateValue([]);
+        }
+        else {
+            this.ngModel = '';
+            this.onChange('');
+            this.ngModelChange.emit('');
+            this.validateValue('');
+        }
     }
     getSelectedOptionLabel() {
         if (this.multiple) {
-            const csvValue = this.ngModel || '';
-            if (!csvValue.trim())
-                return '';
-            const values = csvValue.split(',').map(v => v.trim()).filter(Boolean);
+            // Handle both string (CSV) and array values
+            let values = [];
+            if (Array.isArray(this.ngModel)) {
+                // Handle array values (new format)
+                values = this.ngModel.map(v => v?.toString() || '').filter(Boolean);
+            }
+            else {
+                // Handle string values (legacy CSV format)
+                const csvValue = this.ngModel || '';
+                if (!csvValue.trim())
+                    return '';
+                values = csvValue.split(',').map(v => v.trim()).filter(Boolean);
+            }
             const labels = values
                 .map(v => this.options.find(o => this.getOptionValue(o).toString() === v))
                 .map(option => option ? this.getOptionLabel(option) : '')
@@ -2037,20 +2308,16 @@ class CideSelectComponent {
     onSearchInput(event) {
         try {
             this.searchTerm = event.target.value;
-            this.filterOptions();
-            // Update portal context with filtered options
-            this.updatePortalContext();
-            // Clear existing debounce timeout
-            if (this.searchDebounceTimeout) {
-                clearTimeout(this.searchDebounceTimeout);
-            }
-            // Set new debounce timeout (300ms delay)
-            this.searchDebounceTimeout = setTimeout(() => {
-                this.searchChange.emit({
-                    query: this.searchTerm,
-                    value: ''
-                });
-            }, 400);
+            console.log(`🔍 SELECT [${this.debugId}] Search input changed:`, `"${this.searchTerm}"`);
+            // If search term is empty, emit immediately without debounce
+            if (this.searchTerm === '' || this.searchTerm === null || this.searchTerm === undefined) {
+                console.log(`🔍 SELECT [${this.debugId}] Empty search - emitting immediately`);
+                this.performSearch('');
+            }
+            else {
+                // For non-empty values, use debounced search
+                this.searchSubject.next(this.searchTerm);
+            }
         }
         catch (error) {
             console.error(`💥 SELECT [${this.debugId}] onSearchInput error:`, error);
@@ -2059,6 +2326,13 @@ class CideSelectComponent {
     onDropdownMouseDown() {
         this.isDropdownInteraction = true;
     }
+    onSearchInputBlur(event) {
+        // Prevent blur if we're updating options (to maintain focus during API updates)
+        if (this.isUpdatingOptions) {
+            event.preventDefault();
+            event.target.focus();
+        }
+    }
     onDropdownMouseUp() {
         this.addTimeout(() => {
             this.isDropdownInteraction = false;
@@ -2066,10 +2340,19 @@ class CideSelectComponent {
     }
     isOptionSelected(option) {
         if (this.multiple) {
-            const csvValue = this.ngModel || '';
-            if (!csvValue.trim())
-                return false;
-            const values = csvValue.split(',').map(v => v.trim()).filter(Boolean);
+            // Handle both array and CSV formats
+            let values = [];
+            if (Array.isArray(this.ngModel)) {
+                // Handle array values (new format)
+                values = this.ngModel.map(v => v?.toString() || '').filter(Boolean);
+            }
+            else {
+                // Handle string values (legacy CSV format)
+                const csvValue = this.ngModel || '';
+                if (!csvValue.trim())
+                    return false;
+                values = csvValue.split(',').map(v => v.trim()).filter(Boolean);
+            }
             return values.includes(this.getOptionValue(option).toString());
         }
         return this.getOptionValue(option) === this.ngModel;
@@ -2127,7 +2410,7 @@ class CideSelectComponent {
                 multi: true,
                 useExisting: forwardRef(() => CideSelectComponent),
             }
-        ], queries: [{ propertyName: "optionComponents", predicate: CideSelectOptionComponent }], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-select\" [ngClass]=\"{\n  'cide-element-size-xxs': (size === '2xs'),\n  'cide-element-size-xs': (size === 'xs'),\n  'cide-element-size-sm': (size === 'sm'),\n  'cide-element-size-md': (size === 'md'),\n  'cide-element-size-lg': (size === 'lg'),\n  'cide-element-input-label-floating': (labelPlacement === 'floating'),\n  'cide-element-input-label-start': (labelDir === 'start'),\n  'cide-element-input-label-end': (labelDir === 'end'),\n  'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n  'cide-element-input-label-less': (!label || labelHide),\n  'cide-element-style-outline': (fill === 'outline'),\n  'cide-element-style-solid': (fill === 'solid'),\n  'cide-element-style-standard': (fill === 'standard'),\n}\">\n  @if (label && !labelHide) {\n  <label [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n  }\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    @if (leadingIcon) {\n    <span class=\"cide-input-leading-icon-wrapper\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\n    }\n\n    <!-- Select Button -->\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"[\n        ((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md'),\n        (!leadingIcon ? 'tw-pl-1' : ''),\n        (trailingIcon || clearInput || loading ? 'tw-pr-8' : ''),\n        (!trailingIcon && !clearInput && !loading ? 'tw-pr-1' : ''),\n        ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')),\n        (labelHide ? '!tw-mt-0' : ''),\n        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer'\n      ]\" class=\"cide-select-button\">\n\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n      </span>\n    </button>\n\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n    @if (!clearInput || !ngModel || loading) {\n    <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n      <!-- Loading Spinner -->\n      @if (loading) {\n      <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n        <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"tw-opacity-75\" fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n          </path>\n        </svg>\n      </span>\n      }\n      <!-- Dropdown Arrow -->\n      @if (!loading) {\n      <span\n        class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n        [ngClass]=\"{'tw-rotate-180': isOpen}\">\n        expand_more\n      </span>\n      }\n    </span>\n    }\n\n    <!-- Clear Button -->\n    @if (clearInput && ngModel) {\n    <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n    }\n\n\n  </div>\n\n  <!-- Error/Helper Text -->\n  @if ((errorText || helperText) && !isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  }\n  @if (helperText && isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n  }\n\n  <!-- Portal Container -->\n  <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n  <div\n    class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n    <!-- Search Input (if searchable and showSearchInput is true) -->\n    @if (context?.searchable && showSearchInput) {\n    <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n      <input type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n        (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n        (click)=\"$event.stopPropagation()\"\n        class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"tw-py-1\">\n      <!-- Loading State -->\n      @if (context?.loading) {\n      <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n          <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n            viewBox=\"0 0 24 24\">\n            <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"tw-opacity-75\" fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n            </path>\n          </svg>\n          <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n        </div>\n      </div>\n      }\n      <!-- Options -->\n      @if (!context?.loading) {\n      @for (option of context?.options; track $index) {\n      <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n        (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n        [disabled]=\"option.disabled\" [ngClass]=\"{\n              'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n              'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n        {{ context?.getOptionLabel(option) }}\n      </button>\n      }\n      }\n\n      <!-- No options message -->\n      @if (!context?.loading && context?.options.length === 0) {\n      <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n        {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [":root{--cide-ele-devider-border-color: #74AEF6}.cide-element-size-xxs .cide-input-input,.cide-element-size-xxs .cide-select-button{height:var(--cide-element-size-xxs)}.cide-element-size-xxs .cide-input-input,.cide-element-size-xxs .cide-textarea-input,.cide-element-size-xxs .cide-select-button{font-size:var(--cide-input-size-xxs);border-width:var(--cide-input-border-size-xxs)}.cide-element-size-xxs .cide-input-label,.cide-element-size-xxs .cide-textarea-label,.cide-element-size-xxs .cide-select-label{font-size:var(--cide-input-label-size-xxs);line-height:var(--cide-input-label-size-xxs)}.cide-element-size-xxs .cide-input-help-error-text,.cide-element-size-xxs .cide-textarea-help-error-text,.cide-element-size-xxs .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xxs);height:calc(var(--cide-input-error-helper-size-xxs) + 2px);line-height:var(--cide-input-error-helper-size-xxs)}.cide-element-size-xxs .cide-input-clear,.cide-element-size-xxs .cide-textarea-clear,.cide-element-size-xxs .cide-select-clear{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-input-clear .cide-select-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper,.cide-element-size-xxs .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xxs) / 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xxs) / 2 - var(--cide-input-label-size-xxs))}.cide-element-size-xxs.cide-element-leading-icon .cide-input-input,.cide-element-size-xxs.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xxs.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-clear-input .cide-input-input,.cide-element-size-xxs.cide-element-clear-input .cide-textarea-input,.cide-element-size-xxs.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xxs.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xxs.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xxs)}.cide-element-size-xs .cide-input-input,.cide-element-size-xs .cide-select-button{height:var(--cide-element-size-xs)}.cide-element-size-xs .cide-input-input,.cide-element-size-xs .cide-textarea-input,.cide-element-size-xs .cide-select-button{font-size:var(--cide-input-size-xs);border-width:var(--cide-input-border-size-xs)}.cide-element-size-xs .cide-input-label,.cide-element-size-xs .cide-textarea-label,.cide-element-size-xs .cide-select-label{font-size:var(--cide-input-label-size-xs);line-height:var(--cide-input-label-size-xs)}.cide-element-size-xs .cide-input-help-error-text,.cide-element-size-xs .cide-textarea-help-error-text,.cide-element-size-xs .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xs);height:calc(var(--cide-input-error-helper-size-xs) + 2px);line-height:var(--cide-input-error-helper-size-xs)}.cide-element-size-xs .cide-input-clear,.cide-element-size-xs .cide-textarea-clear,.cide-element-size-xs .cide-select-clear{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-clear .cide-input-clear-icon,.cide-element-size-xs .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-input-clear .cide-select-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xs .cide-select-clear .cide-input-clear-icon,.cide-element-size-xs .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper,.cide-element-size-xs .cide-textarea-leading-icon-wrapper,.cide-element-size-xs .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xs) / 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xs) / 2 - var(--cide-input-label-size-xs))}.cide-element-size-xs.cide-element-leading-icon .cide-input-input,.cide-element-size-xs.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xs.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-clear-input .cide-input-input,.cide-element-size-xs.cide-element-clear-input .cide-textarea-input,.cide-element-size-xs.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xs.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xs.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xs)}.cide-element-size-sm .cide-input-input,.cide-element-size-sm .cide-select-button{height:var(--cide-element-size-sm)}.cide-element-size-sm .cide-input-input,.cide-element-size-sm .cide-textarea-input,.cide-element-size-sm .cide-select-button{font-size:var(--cide-input-size-sm);border-width:var(--cide-input-border-size-sm)}.cide-element-size-sm .cide-input-label,.cide-element-size-sm .cide-textarea-label,.cide-element-size-sm .cide-select-label{font-size:var(--cide-input-label-size-sm);line-height:var(--cide-input-label-size-sm)}.cide-element-size-sm .cide-input-help-error-text,.cide-element-size-sm .cide-textarea-help-error-text,.cide-element-size-sm .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-sm);height:calc(var(--cide-input-error-helper-size-sm) + 2px);line-height:var(--cide-input-error-helper-size-sm)}.cide-element-size-sm .cide-input-clear,.cide-element-size-sm .cide-textarea-clear,.cide-element-size-sm .cide-select-clear{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-clear .cide-input-clear-icon,.cide-element-size-sm .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-input-clear .cide-select-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-sm .cide-select-clear .cide-input-clear-icon,.cide-element-size-sm .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper,.cide-element-size-sm .cide-textarea-leading-icon-wrapper,.cide-element-size-sm .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-sm) / 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-sm) / 2 - var(--cide-input-label-size-sm))}.cide-element-size-sm.cide-element-leading-icon .cide-input-input,.cide-element-size-sm.cide-element-leading-icon .cide-textarea-input,.cide-element-size-sm.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-clear-input .cide-input-input,.cide-element-size-sm.cide-element-clear-input .cide-textarea-input,.cide-element-size-sm.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-trailing-icon .cide-input-clear,.cide-element-size-sm.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-sm.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-sm)}.cide-element-size-md .cide-input-input,.cide-element-size-md .cide-select-button{height:var(--cide-element-size-md)}.cide-element-size-md .cide-input-input,.cide-element-size-md .cide-textarea-input,.cide-element-size-md .cide-select-button{font-size:var(--cide-input-size-md);border-width:var(--cide-input-border-size-md)}.cide-element-size-md .cide-input-label,.cide-element-size-md .cide-textarea-label,.cide-element-size-md .cide-select-label{font-size:var(--cide-input-label-size-md);line-height:var(--cide-input-label-size-md)}.cide-element-size-md .cide-input-help-error-text,.cide-element-size-md .cide-textarea-help-error-text,.cide-element-size-md .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-md);height:calc(var(--cide-input-error-helper-size-md) + 2px);line-height:var(--cide-input-error-helper-size-md)}.cide-element-size-md .cide-input-clear,.cide-element-size-md .cide-textarea-clear,.cide-element-size-md .cide-select-clear{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-clear .cide-input-clear-icon,.cide-element-size-md .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-input-clear .cide-select-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-md .cide-select-clear .cide-input-clear-icon,.cide-element-size-md .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper,.cide-element-size-md .cide-textarea-leading-icon-wrapper,.cide-element-size-md .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-md) / 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-md) / 2 - var(--cide-input-label-size-md))}.cide-element-size-md.cide-element-leading-icon .cide-input-input,.cide-element-size-md.cide-element-leading-icon .cide-textarea-input,.cide-element-size-md.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-clear-input .cide-input-input,.cide-element-size-md.cide-element-clear-input .cide-textarea-input,.cide-element-size-md.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-trailing-icon .cide-input-clear,.cide-element-size-md.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-md.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-md)}.cide-element-size-lg .cide-input-input,.cide-element-size-lg .cide-select-button{height:var(--cide-element-size-lg)}.cide-element-size-lg .cide-input-input,.cide-element-size-lg .cide-textarea-input,.cide-element-size-lg .cide-select-button{font-size:var(--cide-input-size-lg);border-width:var(--cide-input-border-size-lg)}.cide-element-size-lg .cide-input-label,.cide-element-size-lg .cide-textarea-label,.cide-element-size-lg .cide-select-label{font-size:var(--cide-input-label-size-lg);line-height:var(--cide-input-label-size-lg)}.cide-element-size-lg .cide-input-help-error-text,.cide-element-size-lg .cide-textarea-help-error-text,.cide-element-size-lg .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-lg);height:calc(var(--cide-input-error-helper-size-lg) + 2px);line-height:var(--cide-input-error-helper-size-lg)}.cide-element-size-lg .cide-input-clear,.cide-element-size-lg .cide-textarea-clear,.cide-element-size-lg .cide-select-clear{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-clear .cide-input-clear-icon,.cide-element-size-lg .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-input-clear .cide-select-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-lg .cide-select-clear .cide-input-clear-icon,.cide-element-size-lg .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper,.cide-element-size-lg .cide-textarea-leading-icon-wrapper,.cide-element-size-lg .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-lg) / 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-lg) / 2 - var(--cide-input-label-size-lg))}.cide-element-size-lg.cide-element-leading-icon .cide-input-input,.cide-element-size-lg.cide-element-leading-icon .cide-textarea-input,.cide-element-size-lg.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-clear-input .cide-input-input,.cide-element-size-lg.cide-element-clear-input .cide-textarea-input,.cide-element-size-lg.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-trailing-icon .cide-input-clear,.cide-element-size-lg.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-lg.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-lg)}.cide-element-size-xl .cide-input-input,.cide-element-size-xl .cide-select-button{height:var(--cide-element-size-xl)}.cide-element-size-xl .cide-input-input,.cide-element-size-xl .cide-textarea-input,.cide-element-size-xl .cide-select-button{font-size:var(--cide-input-size-xl);border-width:var(--cide-input-border-size-xl)}.cide-element-size-xl .cide-input-label,.cide-element-size-xl .cide-textarea-label,.cide-element-size-xl .cide-select-label{font-size:var(--cide-input-label-size-xl);line-height:var(--cide-input-label-size-xl)}.cide-element-size-xl .cide-input-help-error-text,.cide-element-size-xl .cide-textarea-help-error-text,.cide-element-size-xl .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xl);height:calc(var(--cide-input-error-helper-size-xl) + 2px);line-height:var(--cide-input-error-helper-size-xl)}.cide-element-size-xl .cide-input-clear,.cide-element-size-xl .cide-textarea-clear,.cide-element-size-xl .cide-select-clear{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-clear .cide-input-clear-icon,.cide-element-size-xl .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-input-clear .cide-select-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xl .cide-select-clear .cide-input-clear-icon,.cide-element-size-xl .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper,.cide-element-size-xl .cide-textarea-leading-icon-wrapper,.cide-element-size-xl .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xl) / 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xl) / 2 - var(--cide-input-label-size-xl))}.cide-element-size-xl.cide-element-leading-icon .cide-input-input,.cide-element-size-xl.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xl.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-clear-input .cide-input-input,.cide-element-size-xl.cide-element-clear-input .cide-textarea-input,.cide-element-size-xl.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xl.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xl.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xl)}.cide-element-style-standard .cide-input-input,.cide-element-style-standard .cide-textarea-input,.cide-element-style-standard .cide-select-button{border-color:transparent}.cide-element-input-number input{text-align:right!important}.cide-element-input-wrapper,.cide-element-textarea-wrapper,.cide-element-select-wrapper{position:relative}.cide-input-label,.cide-textarea-label,.cide-select-label{color:var(--cide-input-label-color);-webkit-user-select:none;user-select:none;display:block}.cide-input-help-error-text,.cide-textarea-help-error-text,.cide-select-help-error-text{color:var(--cide-input-color-help-error-text);width:100%;display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.125rem;padding-right:.125rem}.cide-input-leading-icon,.cide-textarea-leading-icon,.cide-select-leading-icon{color:var(--cide-input-leading-icon-color)}.cide-input-clear,.cide-textarea-clear,.cide-select-clear{color:var(--cide-input-clear-color);z-index:10;cursor:pointer;position:absolute;outline-width:0px;right:0;top:0}.cide-input-clear:hover,.cide-textarea-clear:hover,.cide-select-clear:hover{color:var(--cide-input-clear-color-hover)}.cide-input-trailing-icon,.cide-textarea-trailing-icon,.cide-select-trailing-icon{color:var(--cide-input-trailing-icon-color)}.cide-input-input,.cide-textarea-input,.cide-select-button{color:var(--cide-input-text-color);border-color:var(--cide-input-border)}.cide-input-input:hover,.cide-textarea-input:hover,.cide-select-button:hover{color:var(--cide-input-text-color-hover);border-color:var(--cide-input-border-hover)}.cide-input-input:focus,.cide-textarea-input:focus,.cide-select-button:focus{color:var(--cide-input-text-color-active);border-color:var(--cide-input-border-active)}.cide-element-input-label-floating .cide-input-label,.cide-element-input-label-floating .cide-textarea-label,.cide-element-input-label-floating .cide-select-label,.cide-element-select-label-floating .cide-input-label,.cide-element-select-label-floating .cide-textarea-label,.cide-element-select-label-floating .cide-select-label{position:absolute;z-index:1;margin-left:8px;margin-right:8px;background-color:#fff;padding:0 2px}.cide-element-input-label-floating .cide-element-input-label-start,.cide-element-input-label-floating .cide-element-textarea-label-start,.cide-element-input-label-floating .cide-element-select-label-start,.cide-element-select-label-floating .cide-element-input-label-start,.cide-element-select-label-floating .cide-element-textarea-label-start,.cide-element-select-label-floating .cide-element-select-label-start{left:0}.cide-element-input-label-floating .cide-element-input-label-end,.cide-element-input-label-floating .cide-element-textarea-label-end,.cide-element-input-label-floating .cide-element-select-label-end,.cide-element-select-label-floating .cide-element-input-label-end,.cide-element-select-label-floating .cide-element-textarea-label-end,.cide-element-select-label-floating .cide-element-select-label-end{right:0}.cide-element-input-label-fixed,.cide-element-textarea-label-fixed,.cide-element-select-label-fixed{margin-bottom:0}.cide-element-input-label-fixed .cide-input-label,.cide-element-input-label-fixed .cide-textarea-label,.cide-element-input-label-fixed .cide-select-label,.cide-element-textarea-label-fixed .cide-input-label,.cide-element-textarea-label-fixed .cide-textarea-label,.cide-element-textarea-label-fixed .cide-select-label,.cide-element-select-label-fixed .cide-input-label,.cide-element-select-label-fixed .cide-textarea-label,.cide-element-select-label-fixed .cide-select-label{margin-bottom:3px}.cide-element-input-label-fixed .cide-element-input-label-start,.cide-element-input-label-fixed .cide-element-textarea-label-start,.cide-element-input-label-fixed .cide-element-select-label-start,.cide-element-textarea-label-fixed .cide-element-input-label-start,.cide-element-textarea-label-fixed .cide-element-textarea-label-start,.cide-element-textarea-label-fixed .cide-element-select-label-start,.cide-element-select-label-fixed .cide-element-input-label-start,.cide-element-select-label-fixed .cide-element-textarea-label-start,.cide-element-select-label-fixed .cide-element-select-label-start{text-align:start}.cide-element-input-label-fixed .cide-element-input-label-end,.cide-element-input-label-fixed .cide-element-textarea-label-end,.cide-element-input-label-fixed .cide-element-select-label-end,.cide-element-textarea-label-fixed .cide-element-input-label-end,.cide-element-textarea-label-fixed .cide-element-textarea-label-end,.cide-element-textarea-label-fixed .cide-element-select-label-end,.cide-element-select-label-fixed .cide-element-input-label-end,.cide-element-select-label-fixed .cide-element-textarea-label-end,.cide-element-select-label-fixed .cide-element-select-label-end{text-align:end}.ng-touched.ng-invalid>.cide-input .cide-input-clear,.ng-touched.ng-invalid>.cide-input .cide-textarea-clear,.ng-touched.ng-invalid>.cide-input .cide-select-clear,.ng-touched.ng-invalid>.cide-textarea .cide-input-clear,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-clear,.ng-touched.ng-invalid>.cide-textarea .cide-select-clear,.ng-touched.ng-invalid>.cide-select .cide-input-clear,.ng-touched.ng-invalid>.cide-select .cide-textarea-clear,.ng-touched.ng-invalid>.cide-select .cide-select-clear{color:var(--cide-input-clear-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-input .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-input .cide-select-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-select-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-select-clear:hover{color:var(--cide-input-clear-color-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-input .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-input .cide-select-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-select-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-select-leading-icon{color:var(--cide-input-leading-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-input .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-input .cide-select-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-select-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-select-help-error-text{color:var(--cide-input-color-help-error-text-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-input .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-input .cide-select-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-select-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-select-trailing-icon{color:var(--cide-input-trailing-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-label,.ng-touched.ng-invalid>.cide-input .cide-textarea-label,.ng-touched.ng-invalid>.cide-input .cide-select-label,.ng-touched.ng-invalid>.cide-textarea .cide-input-label,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-label,.ng-touched.ng-invalid>.cide-textarea .cide-select-label,.ng-touched.ng-invalid>.cide-select .cide-input-label,.ng-touched.ng-invalid>.cide-select .cide-textarea-label,.ng-touched.ng-invalid>.cide-select .cide-select-label{color:var(--cide-input-label-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input,.ng-touched.ng-invalid>.cide-input .cide-textarea-input,.ng-touched.ng-invalid>.cide-input .cide-select-button,.ng-touched.ng-invalid>.cide-textarea .cide-input-input,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input,.ng-touched.ng-invalid>.cide-textarea .cide-select-button,.ng-touched.ng-invalid>.cide-select .cide-input-input,.ng-touched.ng-invalid>.cide-select .cide-textarea-input,.ng-touched.ng-invalid>.cide-select .cide-select-button{color:var(--cide-input-text-color-invalid);border-color:var(--cide-input-border-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:hover,.ng-touched.ng-invalid>.cide-input .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-input .cide-select-button:hover,.ng-touched.ng-invalid>.cide-textarea .cide-input-input:hover,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-textarea .cide-select-button:hover,.ng-touched.ng-invalid>.cide-select .cide-input-input:hover,.ng-touched.ng-invalid>.cide-select .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-select .cide-select-button:hover{color:var(--cide-input-text-color-hover-invalid);border-color:var(--cide-input-border-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:focus,.ng-touched.ng-invalid>.cide-input .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-input .cide-select-button:focus,.ng-touched.ng-invalid>.cide-textarea .cide-input-input:focus,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-textarea .cide-select-button:focus,.ng-touched.ng-invalid>.cide-select .cide-input-input:focus,.ng-touched.ng-invalid>.cide-select .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-select .cide-select-button:focus{color:var(--cide-input-text-color-active-invalid);border-color:var(--cide-input-border-active-invalid)}.cide-input-leading-icon-wrapper,.cide-textarea-leading-icon-wrapper,.cide-select-leading-icon-wrapper{position:absolute;bottom:0;left:0;z-index:0;text-align:center}.cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], queries: [{ propertyName: "optionComponents", predicate: CideSelectOptionComponent }], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-select\" [ngClass]=\"{\n  'cide-element-size-xxs': (size === '2xs'),\n  'cide-element-size-xs': (size === 'xs'),\n  'cide-element-size-sm': (size === 'sm'),\n  'cide-element-size-md': (size === 'md'),\n  'cide-element-size-lg': (size === 'lg'),\n  'cide-element-input-label-floating': (labelPlacement === 'floating'),\n  'cide-element-input-label-start': (labelDir === 'start'),\n  'cide-element-input-label-end': (labelDir === 'end'),\n  'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n  'cide-element-input-label-less': (!label || labelHide),\n  'cide-element-style-outline': (fill === 'outline'),\n  'cide-element-style-solid': (fill === 'solid'),\n  'cide-element-style-standard': (fill === 'standard'),\n}\">\n  @if (label && !labelHide) {\n  <label [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n  }\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    @if (leadingIcon) {\n    <span class=\"cide-input-leading-icon-wrapper\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\n    }\n\n    <!-- Select Button -->\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"[\n        ((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md'),\n        (!leadingIcon ? 'tw-pl-1' : ''),\n        (trailingIcon || clearInput || loading ? 'tw-pr-8' : ''),\n        (!trailingIcon && !clearInput && !loading ? 'tw-pr-1' : ''),\n        ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')),\n        (labelHide ? '!tw-mt-0' : ''),\n        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer'\n      ]\" class=\"cide-select-button\">\n\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n      </span>\n    </button>\n\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n    @if (!clearInput || !ngModel || loading) {\n    <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n      <!-- Loading Spinner -->\n      @if (loading) {\n      <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n        <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"tw-opacity-75\" fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n          </path>\n        </svg>\n      </span>\n      }\n      <!-- Dropdown Arrow -->\n      @if (!loading) {\n      <span\n        class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n        [ngClass]=\"{'tw-rotate-180': isOpen}\">\n        expand_more\n      </span>\n      }\n    </span>\n    }\n\n    <!-- Clear Button -->\n    @if (clearInput && ngModel) {\n    <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n    }\n\n\n  </div>\n\n  <!-- Error/Helper Text -->\n  @if ((errorText || helperText) && !isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  }\n  @if (helperText && isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n  }\n\n  <!-- Portal Container -->\n  <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n  <div\n    class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n    <!-- Search Input (if searchable and showSearchInput is true) -->\n    @if (context?.searchable && showSearchInput) {\n    <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n      <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n        (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n        (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n        class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"tw-py-1\">\n      <!-- Loading State -->\n      @if (context?.loading) {\n      <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n          <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n            viewBox=\"0 0 24 24\">\n            <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"tw-opacity-75\" fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n            </path>\n          </svg>\n          <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n        </div>\n      </div>\n      }\n      <!-- Options -->\n      @if (!context?.loading) {\n      @for (option of context?.options; track $index) {\n      <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n        (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n        [disabled]=\"option.disabled\" [ngClass]=\"{\n              'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n              'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n        {{ context?.getOptionLabel(option) }}\n      </button>\n      }\n      }\n\n      <!-- No options message -->\n      @if (!context?.loading && context?.options.length === 0) {\n      <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n        {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [":root{--cide-ele-devider-border-color: #74AEF6}.cide-element-size-xxs .cide-input-input,.cide-element-size-xxs .cide-select-button{height:var(--cide-element-size-xxs)}.cide-element-size-xxs .cide-input-input,.cide-element-size-xxs .cide-textarea-input,.cide-element-size-xxs .cide-select-button{font-size:var(--cide-input-size-xxs);border-width:var(--cide-input-border-size-xxs)}.cide-element-size-xxs .cide-input-label,.cide-element-size-xxs .cide-textarea-label,.cide-element-size-xxs .cide-select-label{font-size:var(--cide-input-label-size-xxs);line-height:var(--cide-input-label-size-xxs)}.cide-element-size-xxs .cide-input-help-error-text,.cide-element-size-xxs .cide-textarea-help-error-text,.cide-element-size-xxs .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xxs);height:calc(var(--cide-input-error-helper-size-xxs) + 2px);line-height:var(--cide-input-error-helper-size-xxs)}.cide-element-size-xxs .cide-input-clear,.cide-element-size-xxs .cide-textarea-clear,.cide-element-size-xxs .cide-select-clear{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-input-clear .cide-select-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper,.cide-element-size-xxs .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xxs) / 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xxs) / 2 - var(--cide-input-label-size-xxs))}.cide-element-size-xxs.cide-element-leading-icon .cide-input-input,.cide-element-size-xxs.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xxs.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-clear-input .cide-input-input,.cide-element-size-xxs.cide-element-clear-input .cide-textarea-input,.cide-element-size-xxs.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xxs.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xxs.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xxs)}.cide-element-size-xs .cide-input-input,.cide-element-size-xs .cide-select-button{height:var(--cide-element-size-xs)}.cide-element-size-xs .cide-input-input,.cide-element-size-xs .cide-textarea-input,.cide-element-size-xs .cide-select-button{font-size:var(--cide-input-size-xs);border-width:var(--cide-input-border-size-xs)}.cide-element-size-xs .cide-input-label,.cide-element-size-xs .cide-textarea-label,.cide-element-size-xs .cide-select-label{font-size:var(--cide-input-label-size-xs);line-height:var(--cide-input-label-size-xs)}.cide-element-size-xs .cide-input-help-error-text,.cide-element-size-xs .cide-textarea-help-error-text,.cide-element-size-xs .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xs);height:calc(var(--cide-input-error-helper-size-xs) + 2px);line-height:var(--cide-input-error-helper-size-xs)}.cide-element-size-xs .cide-input-clear,.cide-element-size-xs .cide-textarea-clear,.cide-element-size-xs .cide-select-clear{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-clear .cide-input-clear-icon,.cide-element-size-xs .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-input-clear .cide-select-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xs .cide-select-clear .cide-input-clear-icon,.cide-element-size-xs .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper,.cide-element-size-xs .cide-textarea-leading-icon-wrapper,.cide-element-size-xs .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xs) / 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xs) / 2 - var(--cide-input-label-size-xs))}.cide-element-size-xs.cide-element-leading-icon .cide-input-input,.cide-element-size-xs.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xs.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-clear-input .cide-input-input,.cide-element-size-xs.cide-element-clear-input .cide-textarea-input,.cide-element-size-xs.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xs.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xs.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xs)}.cide-element-size-sm .cide-input-input,.cide-element-size-sm .cide-select-button{height:var(--cide-element-size-sm)}.cide-element-size-sm .cide-input-input,.cide-element-size-sm .cide-textarea-input,.cide-element-size-sm .cide-select-button{font-size:var(--cide-input-size-sm);border-width:var(--cide-input-border-size-sm)}.cide-element-size-sm .cide-input-label,.cide-element-size-sm .cide-textarea-label,.cide-element-size-sm .cide-select-label{font-size:var(--cide-input-label-size-sm);line-height:var(--cide-input-label-size-sm)}.cide-element-size-sm .cide-input-help-error-text,.cide-element-size-sm .cide-textarea-help-error-text,.cide-element-size-sm .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-sm);height:calc(var(--cide-input-error-helper-size-sm) + 2px);line-height:var(--cide-input-error-helper-size-sm)}.cide-element-size-sm .cide-input-clear,.cide-element-size-sm .cide-textarea-clear,.cide-element-size-sm .cide-select-clear{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-clear .cide-input-clear-icon,.cide-element-size-sm .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-input-clear .cide-select-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-sm .cide-select-clear .cide-input-clear-icon,.cide-element-size-sm .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper,.cide-element-size-sm .cide-textarea-leading-icon-wrapper,.cide-element-size-sm .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-sm) / 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-sm) / 2 - var(--cide-input-label-size-sm))}.cide-element-size-sm.cide-element-leading-icon .cide-input-input,.cide-element-size-sm.cide-element-leading-icon .cide-textarea-input,.cide-element-size-sm.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-clear-input .cide-input-input,.cide-element-size-sm.cide-element-clear-input .cide-textarea-input,.cide-element-size-sm.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-trailing-icon .cide-input-clear,.cide-element-size-sm.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-sm.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-sm)}.cide-element-size-md .cide-input-input,.cide-element-size-md .cide-select-button{height:var(--cide-element-size-md)}.cide-element-size-md .cide-input-input,.cide-element-size-md .cide-textarea-input,.cide-element-size-md .cide-select-button{font-size:var(--cide-input-size-md);border-width:var(--cide-input-border-size-md)}.cide-element-size-md .cide-input-label,.cide-element-size-md .cide-textarea-label,.cide-element-size-md .cide-select-label{font-size:var(--cide-input-label-size-md);line-height:var(--cide-input-label-size-md)}.cide-element-size-md .cide-input-help-error-text,.cide-element-size-md .cide-textarea-help-error-text,.cide-element-size-md .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-md);height:calc(var(--cide-input-error-helper-size-md) + 2px);line-height:var(--cide-input-error-helper-size-md)}.cide-element-size-md .cide-input-clear,.cide-element-size-md .cide-textarea-clear,.cide-element-size-md .cide-select-clear{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-clear .cide-input-clear-icon,.cide-element-size-md .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-input-clear .cide-select-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-md .cide-select-clear .cide-input-clear-icon,.cide-element-size-md .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper,.cide-element-size-md .cide-textarea-leading-icon-wrapper,.cide-element-size-md .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-md) / 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-md) / 2 - var(--cide-input-label-size-md))}.cide-element-size-md.cide-element-leading-icon .cide-input-input,.cide-element-size-md.cide-element-leading-icon .cide-textarea-input,.cide-element-size-md.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-clear-input .cide-input-input,.cide-element-size-md.cide-element-clear-input .cide-textarea-input,.cide-element-size-md.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-trailing-icon .cide-input-clear,.cide-element-size-md.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-md.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-md)}.cide-element-size-lg .cide-input-input,.cide-element-size-lg .cide-select-button{height:var(--cide-element-size-lg)}.cide-element-size-lg .cide-input-input,.cide-element-size-lg .cide-textarea-input,.cide-element-size-lg .cide-select-button{font-size:var(--cide-input-size-lg);border-width:var(--cide-input-border-size-lg)}.cide-element-size-lg .cide-input-label,.cide-element-size-lg .cide-textarea-label,.cide-element-size-lg .cide-select-label{font-size:var(--cide-input-label-size-lg);line-height:var(--cide-input-label-size-lg)}.cide-element-size-lg .cide-input-help-error-text,.cide-element-size-lg .cide-textarea-help-error-text,.cide-element-size-lg .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-lg);height:calc(var(--cide-input-error-helper-size-lg) + 2px);line-height:var(--cide-input-error-helper-size-lg)}.cide-element-size-lg .cide-input-clear,.cide-element-size-lg .cide-textarea-clear,.cide-element-size-lg .cide-select-clear{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-clear .cide-input-clear-icon,.cide-element-size-lg .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-input-clear .cide-select-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-lg .cide-select-clear .cide-input-clear-icon,.cide-element-size-lg .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper,.cide-element-size-lg .cide-textarea-leading-icon-wrapper,.cide-element-size-lg .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-lg) / 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-lg) / 2 - var(--cide-input-label-size-lg))}.cide-element-size-lg.cide-element-leading-icon .cide-input-input,.cide-element-size-lg.cide-element-leading-icon .cide-textarea-input,.cide-element-size-lg.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-clear-input .cide-input-input,.cide-element-size-lg.cide-element-clear-input .cide-textarea-input,.cide-element-size-lg.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-trailing-icon .cide-input-clear,.cide-element-size-lg.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-lg.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-lg)}.cide-element-size-xl .cide-input-input,.cide-element-size-xl .cide-select-button{height:var(--cide-element-size-xl)}.cide-element-size-xl .cide-input-input,.cide-element-size-xl .cide-textarea-input,.cide-element-size-xl .cide-select-button{font-size:var(--cide-input-size-xl);border-width:var(--cide-input-border-size-xl)}.cide-element-size-xl .cide-input-label,.cide-element-size-xl .cide-textarea-label,.cide-element-size-xl .cide-select-label{font-size:var(--cide-input-label-size-xl);line-height:var(--cide-input-label-size-xl)}.cide-element-size-xl .cide-input-help-error-text,.cide-element-size-xl .cide-textarea-help-error-text,.cide-element-size-xl .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xl);height:calc(var(--cide-input-error-helper-size-xl) + 2px);line-height:var(--cide-input-error-helper-size-xl)}.cide-element-size-xl .cide-input-clear,.cide-element-size-xl .cide-textarea-clear,.cide-element-size-xl .cide-select-clear{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-clear .cide-input-clear-icon,.cide-element-size-xl .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-input-clear .cide-select-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xl .cide-select-clear .cide-input-clear-icon,.cide-element-size-xl .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper,.cide-element-size-xl .cide-textarea-leading-icon-wrapper,.cide-element-size-xl .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xl) / 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xl) / 2 - var(--cide-input-label-size-xl))}.cide-element-size-xl.cide-element-leading-icon .cide-input-input,.cide-element-size-xl.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xl.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-clear-input .cide-input-input,.cide-element-size-xl.cide-element-clear-input .cide-textarea-input,.cide-element-size-xl.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xl.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xl.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xl)}.cide-element-style-standard .cide-input-input,.cide-element-style-standard .cide-textarea-input,.cide-element-style-standard .cide-select-button{border-color:transparent}.cide-element-input-number input{text-align:right!important}.cide-element-input-wrapper,.cide-element-textarea-wrapper,.cide-element-select-wrapper{position:relative}.cide-input-label,.cide-textarea-label,.cide-select-label{color:var(--cide-input-label-color);-webkit-user-select:none;user-select:none;display:block}.cide-input-help-error-text,.cide-textarea-help-error-text,.cide-select-help-error-text{color:var(--cide-input-color-help-error-text);width:100%;display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.125rem;padding-right:.125rem}.cide-input-leading-icon,.cide-textarea-leading-icon,.cide-select-leading-icon{color:var(--cide-input-leading-icon-color)}.cide-input-clear,.cide-textarea-clear,.cide-select-clear{color:var(--cide-input-clear-color);z-index:10;cursor:pointer;position:absolute;outline-width:0px;right:0;top:0}.cide-input-clear:hover,.cide-textarea-clear:hover,.cide-select-clear:hover{color:var(--cide-input-clear-color-hover)}.cide-input-trailing-icon,.cide-textarea-trailing-icon,.cide-select-trailing-icon{color:var(--cide-input-trailing-icon-color)}.cide-input-input,.cide-textarea-input,.cide-select-button{color:var(--cide-input-text-color);border-color:var(--cide-input-border)}.cide-input-input:hover,.cide-textarea-input:hover,.cide-select-button:hover{color:var(--cide-input-text-color-hover);border-color:var(--cide-input-border-hover)}.cide-input-input:focus,.cide-textarea-input:focus,.cide-select-button:focus{color:var(--cide-input-text-color-active);border-color:var(--cide-input-border-active)}.cide-element-input-label-floating .cide-input-label,.cide-element-input-label-floating .cide-textarea-label,.cide-element-input-label-floating .cide-select-label,.cide-element-select-label-floating .cide-input-label,.cide-element-select-label-floating .cide-textarea-label,.cide-element-select-label-floating .cide-select-label{position:absolute;z-index:1;margin-left:8px;margin-right:8px;background-color:#fff;padding:0 2px}.cide-element-input-label-floating .cide-element-input-label-start,.cide-element-input-label-floating .cide-element-textarea-label-start,.cide-element-input-label-floating .cide-element-select-label-start,.cide-element-select-label-floating .cide-element-input-label-start,.cide-element-select-label-floating .cide-element-textarea-label-start,.cide-element-select-label-floating .cide-element-select-label-start{left:0}.cide-element-input-label-floating .cide-element-input-label-end,.cide-element-input-label-floating .cide-element-textarea-label-end,.cide-element-input-label-floating .cide-element-select-label-end,.cide-element-select-label-floating .cide-element-input-label-end,.cide-element-select-label-floating .cide-element-textarea-label-end,.cide-element-select-label-floating .cide-element-select-label-end{right:0}.cide-element-input-label-fixed,.cide-element-textarea-label-fixed,.cide-element-select-label-fixed{margin-bottom:0}.cide-element-input-label-fixed .cide-input-label,.cide-element-input-label-fixed .cide-textarea-label,.cide-element-input-label-fixed .cide-select-label,.cide-element-textarea-label-fixed .cide-input-label,.cide-element-textarea-label-fixed .cide-textarea-label,.cide-element-textarea-label-fixed .cide-select-label,.cide-element-select-label-fixed .cide-input-label,.cide-element-select-label-fixed .cide-textarea-label,.cide-element-select-label-fixed .cide-select-label{margin-bottom:3px}.cide-element-input-label-fixed .cide-element-input-label-start,.cide-element-input-label-fixed .cide-element-textarea-label-start,.cide-element-input-label-fixed .cide-element-select-label-start,.cide-element-textarea-label-fixed .cide-element-input-label-start,.cide-element-textarea-label-fixed .cide-element-textarea-label-start,.cide-element-textarea-label-fixed .cide-element-select-label-start,.cide-element-select-label-fixed .cide-element-input-label-start,.cide-element-select-label-fixed .cide-element-textarea-label-start,.cide-element-select-label-fixed .cide-element-select-label-start{text-align:start}.cide-element-input-label-fixed .cide-element-input-label-end,.cide-element-input-label-fixed .cide-element-textarea-label-end,.cide-element-input-label-fixed .cide-element-select-label-end,.cide-element-textarea-label-fixed .cide-element-input-label-end,.cide-element-textarea-label-fixed .cide-element-textarea-label-end,.cide-element-textarea-label-fixed .cide-element-select-label-end,.cide-element-select-label-fixed .cide-element-input-label-end,.cide-element-select-label-fixed .cide-element-textarea-label-end,.cide-element-select-label-fixed .cide-element-select-label-end{text-align:end}.ng-touched.ng-invalid>.cide-input .cide-input-clear,.ng-touched.ng-invalid>.cide-input .cide-textarea-clear,.ng-touched.ng-invalid>.cide-input .cide-select-clear,.ng-touched.ng-invalid>.cide-textarea .cide-input-clear,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-clear,.ng-touched.ng-invalid>.cide-textarea .cide-select-clear,.ng-touched.ng-invalid>.cide-select .cide-input-clear,.ng-touched.ng-invalid>.cide-select .cide-textarea-clear,.ng-touched.ng-invalid>.cide-select .cide-select-clear{color:var(--cide-input-clear-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-input .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-input .cide-select-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-select-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-select-clear:hover{color:var(--cide-input-clear-color-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-input .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-input .cide-select-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-select-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-select-leading-icon{color:var(--cide-input-leading-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-input .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-input .cide-select-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-select-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-select-help-error-text{color:var(--cide-input-color-help-error-text-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-input .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-input .cide-select-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-select-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-select-trailing-icon{color:var(--cide-input-trailing-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-label,.ng-touched.ng-invalid>.cide-input .cide-textarea-label,.ng-touched.ng-invalid>.cide-input .cide-select-label,.ng-touched.ng-invalid>.cide-textarea .cide-input-label,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-label,.ng-touched.ng-invalid>.cide-textarea .cide-select-label,.ng-touched.ng-invalid>.cide-select .cide-input-label,.ng-touched.ng-invalid>.cide-select .cide-textarea-label,.ng-touched.ng-invalid>.cide-select .cide-select-label{color:var(--cide-input-label-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input,.ng-touched.ng-invalid>.cide-input .cide-textarea-input,.ng-touched.ng-invalid>.cide-input .cide-select-button,.ng-touched.ng-invalid>.cide-textarea .cide-input-input,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input,.ng-touched.ng-invalid>.cide-textarea .cide-select-button,.ng-touched.ng-invalid>.cide-select .cide-input-input,.ng-touched.ng-invalid>.cide-select .cide-textarea-input,.ng-touched.ng-invalid>.cide-select .cide-select-button{color:var(--cide-input-text-color-invalid);border-color:var(--cide-input-border-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:hover,.ng-touched.ng-invalid>.cide-input .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-input .cide-select-button:hover,.ng-touched.ng-invalid>.cide-textarea .cide-input-input:hover,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-textarea .cide-select-button:hover,.ng-touched.ng-invalid>.cide-select .cide-input-input:hover,.ng-touched.ng-invalid>.cide-select .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-select .cide-select-button:hover{color:var(--cide-input-text-color-hover-invalid);border-color:var(--cide-input-border-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:focus,.ng-touched.ng-invalid>.cide-input .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-input .cide-select-button:focus,.ng-touched.ng-invalid>.cide-textarea .cide-input-input:focus,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-textarea .cide-select-button:focus,.ng-touched.ng-invalid>.cide-select .cide-input-input:focus,.ng-touched.ng-invalid>.cide-select .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-select .cide-select-button:focus{color:var(--cide-input-text-color-active-invalid);border-color:var(--cide-input-border-active-invalid)}.cide-input-leading-icon-wrapper,.cide-textarea-leading-icon-wrapper,.cide-select-leading-icon-wrapper{position:absolute;bottom:0;left:0;z-index:0;text-align:center}.cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideSelectComponent, decorators: [{
             type: Component,
@@ -2142,7 +2425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => CideSelectComponent),
                         }
-                    ], template: "<div class=\"cide-select\" [ngClass]=\"{\n  'cide-element-size-xxs': (size === '2xs'),\n  'cide-element-size-xs': (size === 'xs'),\n  'cide-element-size-sm': (size === 'sm'),\n  'cide-element-size-md': (size === 'md'),\n  'cide-element-size-lg': (size === 'lg'),\n  'cide-element-input-label-floating': (labelPlacement === 'floating'),\n  'cide-element-input-label-start': (labelDir === 'start'),\n  'cide-element-input-label-end': (labelDir === 'end'),\n  'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n  'cide-element-input-label-less': (!label || labelHide),\n  'cide-element-style-outline': (fill === 'outline'),\n  'cide-element-style-solid': (fill === 'solid'),\n  'cide-element-style-standard': (fill === 'standard'),\n}\">\n  @if (label && !labelHide) {\n  <label [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n  }\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    @if (leadingIcon) {\n    <span class=\"cide-input-leading-icon-wrapper\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\n    }\n\n    <!-- Select Button -->\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"[\n        ((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md'),\n        (!leadingIcon ? 'tw-pl-1' : ''),\n        (trailingIcon || clearInput || loading ? 'tw-pr-8' : ''),\n        (!trailingIcon && !clearInput && !loading ? 'tw-pr-1' : ''),\n        ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')),\n        (labelHide ? '!tw-mt-0' : ''),\n        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer'\n      ]\" class=\"cide-select-button\">\n\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n      </span>\n    </button>\n\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n    @if (!clearInput || !ngModel || loading) {\n    <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n      <!-- Loading Spinner -->\n      @if (loading) {\n      <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n        <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"tw-opacity-75\" fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n          </path>\n        </svg>\n      </span>\n      }\n      <!-- Dropdown Arrow -->\n      @if (!loading) {\n      <span\n        class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n        [ngClass]=\"{'tw-rotate-180': isOpen}\">\n        expand_more\n      </span>\n      }\n    </span>\n    }\n\n    <!-- Clear Button -->\n    @if (clearInput && ngModel) {\n    <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n    }\n\n\n  </div>\n\n  <!-- Error/Helper Text -->\n  @if ((errorText || helperText) && !isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  }\n  @if (helperText && isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n  }\n\n  <!-- Portal Container -->\n  <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n  <div\n    class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n    <!-- Search Input (if searchable and showSearchInput is true) -->\n    @if (context?.searchable && showSearchInput) {\n    <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n      <input type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n        (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n        (click)=\"$event.stopPropagation()\"\n        class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"tw-py-1\">\n      <!-- Loading State -->\n      @if (context?.loading) {\n      <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n          <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n            viewBox=\"0 0 24 24\">\n            <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"tw-opacity-75\" fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n            </path>\n          </svg>\n          <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n        </div>\n      </div>\n      }\n      <!-- Options -->\n      @if (!context?.loading) {\n      @for (option of context?.options; track $index) {\n      <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n        (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n        [disabled]=\"option.disabled\" [ngClass]=\"{\n              'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n              'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n        {{ context?.getOptionLabel(option) }}\n      </button>\n      }\n      }\n\n      <!-- No options message -->\n      @if (!context?.loading && context?.options.length === 0) {\n      <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n        {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [":root{--cide-ele-devider-border-color: #74AEF6}.cide-element-size-xxs .cide-input-input,.cide-element-size-xxs .cide-select-button{height:var(--cide-element-size-xxs)}.cide-element-size-xxs .cide-input-input,.cide-element-size-xxs .cide-textarea-input,.cide-element-size-xxs .cide-select-button{font-size:var(--cide-input-size-xxs);border-width:var(--cide-input-border-size-xxs)}.cide-element-size-xxs .cide-input-label,.cide-element-size-xxs .cide-textarea-label,.cide-element-size-xxs .cide-select-label{font-size:var(--cide-input-label-size-xxs);line-height:var(--cide-input-label-size-xxs)}.cide-element-size-xxs .cide-input-help-error-text,.cide-element-size-xxs .cide-textarea-help-error-text,.cide-element-size-xxs .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xxs);height:calc(var(--cide-input-error-helper-size-xxs) + 2px);line-height:var(--cide-input-error-helper-size-xxs)}.cide-element-size-xxs .cide-input-clear,.cide-element-size-xxs .cide-textarea-clear,.cide-element-size-xxs .cide-select-clear{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-input-clear .cide-select-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper,.cide-element-size-xxs .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xxs) / 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xxs) / 2 - var(--cide-input-label-size-xxs))}.cide-element-size-xxs.cide-element-leading-icon .cide-input-input,.cide-element-size-xxs.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xxs.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-clear-input .cide-input-input,.cide-element-size-xxs.cide-element-clear-input .cide-textarea-input,.cide-element-size-xxs.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xxs.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xxs.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xxs)}.cide-element-size-xs .cide-input-input,.cide-element-size-xs .cide-select-button{height:var(--cide-element-size-xs)}.cide-element-size-xs .cide-input-input,.cide-element-size-xs .cide-textarea-input,.cide-element-size-xs .cide-select-button{font-size:var(--cide-input-size-xs);border-width:var(--cide-input-border-size-xs)}.cide-element-size-xs .cide-input-label,.cide-element-size-xs .cide-textarea-label,.cide-element-size-xs .cide-select-label{font-size:var(--cide-input-label-size-xs);line-height:var(--cide-input-label-size-xs)}.cide-element-size-xs .cide-input-help-error-text,.cide-element-size-xs .cide-textarea-help-error-text,.cide-element-size-xs .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xs);height:calc(var(--cide-input-error-helper-size-xs) + 2px);line-height:var(--cide-input-error-helper-size-xs)}.cide-element-size-xs .cide-input-clear,.cide-element-size-xs .cide-textarea-clear,.cide-element-size-xs .cide-select-clear{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-clear .cide-input-clear-icon,.cide-element-size-xs .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-input-clear .cide-select-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xs .cide-select-clear .cide-input-clear-icon,.cide-element-size-xs .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper,.cide-element-size-xs .cide-textarea-leading-icon-wrapper,.cide-element-size-xs .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xs) / 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xs) / 2 - var(--cide-input-label-size-xs))}.cide-element-size-xs.cide-element-leading-icon .cide-input-input,.cide-element-size-xs.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xs.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-clear-input .cide-input-input,.cide-element-size-xs.cide-element-clear-input .cide-textarea-input,.cide-element-size-xs.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xs.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xs.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xs)}.cide-element-size-sm .cide-input-input,.cide-element-size-sm .cide-select-button{height:var(--cide-element-size-sm)}.cide-element-size-sm .cide-input-input,.cide-element-size-sm .cide-textarea-input,.cide-element-size-sm .cide-select-button{font-size:var(--cide-input-size-sm);border-width:var(--cide-input-border-size-sm)}.cide-element-size-sm .cide-input-label,.cide-element-size-sm .cide-textarea-label,.cide-element-size-sm .cide-select-label{font-size:var(--cide-input-label-size-sm);line-height:var(--cide-input-label-size-sm)}.cide-element-size-sm .cide-input-help-error-text,.cide-element-size-sm .cide-textarea-help-error-text,.cide-element-size-sm .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-sm);height:calc(var(--cide-input-error-helper-size-sm) + 2px);line-height:var(--cide-input-error-helper-size-sm)}.cide-element-size-sm .cide-input-clear,.cide-element-size-sm .cide-textarea-clear,.cide-element-size-sm .cide-select-clear{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-clear .cide-input-clear-icon,.cide-element-size-sm .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-input-clear .cide-select-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-sm .cide-select-clear .cide-input-clear-icon,.cide-element-size-sm .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper,.cide-element-size-sm .cide-textarea-leading-icon-wrapper,.cide-element-size-sm .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-sm) / 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-sm) / 2 - var(--cide-input-label-size-sm))}.cide-element-size-sm.cide-element-leading-icon .cide-input-input,.cide-element-size-sm.cide-element-leading-icon .cide-textarea-input,.cide-element-size-sm.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-clear-input .cide-input-input,.cide-element-size-sm.cide-element-clear-input .cide-textarea-input,.cide-element-size-sm.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-trailing-icon .cide-input-clear,.cide-element-size-sm.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-sm.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-sm)}.cide-element-size-md .cide-input-input,.cide-element-size-md .cide-select-button{height:var(--cide-element-size-md)}.cide-element-size-md .cide-input-input,.cide-element-size-md .cide-textarea-input,.cide-element-size-md .cide-select-button{font-size:var(--cide-input-size-md);border-width:var(--cide-input-border-size-md)}.cide-element-size-md .cide-input-label,.cide-element-size-md .cide-textarea-label,.cide-element-size-md .cide-select-label{font-size:var(--cide-input-label-size-md);line-height:var(--cide-input-label-size-md)}.cide-element-size-md .cide-input-help-error-text,.cide-element-size-md .cide-textarea-help-error-text,.cide-element-size-md .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-md);height:calc(var(--cide-input-error-helper-size-md) + 2px);line-height:var(--cide-input-error-helper-size-md)}.cide-element-size-md .cide-input-clear,.cide-element-size-md .cide-textarea-clear,.cide-element-size-md .cide-select-clear{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-clear .cide-input-clear-icon,.cide-element-size-md .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-input-clear .cide-select-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-md .cide-select-clear .cide-input-clear-icon,.cide-element-size-md .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper,.cide-element-size-md .cide-textarea-leading-icon-wrapper,.cide-element-size-md .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-md) / 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-md) / 2 - var(--cide-input-label-size-md))}.cide-element-size-md.cide-element-leading-icon .cide-input-input,.cide-element-size-md.cide-element-leading-icon .cide-textarea-input,.cide-element-size-md.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-clear-input .cide-input-input,.cide-element-size-md.cide-element-clear-input .cide-textarea-input,.cide-element-size-md.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-trailing-icon .cide-input-clear,.cide-element-size-md.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-md.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-md)}.cide-element-size-lg .cide-input-input,.cide-element-size-lg .cide-select-button{height:var(--cide-element-size-lg)}.cide-element-size-lg .cide-input-input,.cide-element-size-lg .cide-textarea-input,.cide-element-size-lg .cide-select-button{font-size:var(--cide-input-size-lg);border-width:var(--cide-input-border-size-lg)}.cide-element-size-lg .cide-input-label,.cide-element-size-lg .cide-textarea-label,.cide-element-size-lg .cide-select-label{font-size:var(--cide-input-label-size-lg);line-height:var(--cide-input-label-size-lg)}.cide-element-size-lg .cide-input-help-error-text,.cide-element-size-lg .cide-textarea-help-error-text,.cide-element-size-lg .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-lg);height:calc(var(--cide-input-error-helper-size-lg) + 2px);line-height:var(--cide-input-error-helper-size-lg)}.cide-element-size-lg .cide-input-clear,.cide-element-size-lg .cide-textarea-clear,.cide-element-size-lg .cide-select-clear{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-clear .cide-input-clear-icon,.cide-element-size-lg .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-input-clear .cide-select-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-lg .cide-select-clear .cide-input-clear-icon,.cide-element-size-lg .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper,.cide-element-size-lg .cide-textarea-leading-icon-wrapper,.cide-element-size-lg .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-lg) / 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-lg) / 2 - var(--cide-input-label-size-lg))}.cide-element-size-lg.cide-element-leading-icon .cide-input-input,.cide-element-size-lg.cide-element-leading-icon .cide-textarea-input,.cide-element-size-lg.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-clear-input .cide-input-input,.cide-element-size-lg.cide-element-clear-input .cide-textarea-input,.cide-element-size-lg.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-trailing-icon .cide-input-clear,.cide-element-size-lg.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-lg.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-lg)}.cide-element-size-xl .cide-input-input,.cide-element-size-xl .cide-select-button{height:var(--cide-element-size-xl)}.cide-element-size-xl .cide-input-input,.cide-element-size-xl .cide-textarea-input,.cide-element-size-xl .cide-select-button{font-size:var(--cide-input-size-xl);border-width:var(--cide-input-border-size-xl)}.cide-element-size-xl .cide-input-label,.cide-element-size-xl .cide-textarea-label,.cide-element-size-xl .cide-select-label{font-size:var(--cide-input-label-size-xl);line-height:var(--cide-input-label-size-xl)}.cide-element-size-xl .cide-input-help-error-text,.cide-element-size-xl .cide-textarea-help-error-text,.cide-element-size-xl .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xl);height:calc(var(--cide-input-error-helper-size-xl) + 2px);line-height:var(--cide-input-error-helper-size-xl)}.cide-element-size-xl .cide-input-clear,.cide-element-size-xl .cide-textarea-clear,.cide-element-size-xl .cide-select-clear{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-clear .cide-input-clear-icon,.cide-element-size-xl .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-input-clear .cide-select-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xl .cide-select-clear .cide-input-clear-icon,.cide-element-size-xl .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper,.cide-element-size-xl .cide-textarea-leading-icon-wrapper,.cide-element-size-xl .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xl) / 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xl) / 2 - var(--cide-input-label-size-xl))}.cide-element-size-xl.cide-element-leading-icon .cide-input-input,.cide-element-size-xl.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xl.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-clear-input .cide-input-input,.cide-element-size-xl.cide-element-clear-input .cide-textarea-input,.cide-element-size-xl.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xl.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xl.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xl)}.cide-element-style-standard .cide-input-input,.cide-element-style-standard .cide-textarea-input,.cide-element-style-standard .cide-select-button{border-color:transparent}.cide-element-input-number input{text-align:right!important}.cide-element-input-wrapper,.cide-element-textarea-wrapper,.cide-element-select-wrapper{position:relative}.cide-input-label,.cide-textarea-label,.cide-select-label{color:var(--cide-input-label-color);-webkit-user-select:none;user-select:none;display:block}.cide-input-help-error-text,.cide-textarea-help-error-text,.cide-select-help-error-text{color:var(--cide-input-color-help-error-text);width:100%;display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.125rem;padding-right:.125rem}.cide-input-leading-icon,.cide-textarea-leading-icon,.cide-select-leading-icon{color:var(--cide-input-leading-icon-color)}.cide-input-clear,.cide-textarea-clear,.cide-select-clear{color:var(--cide-input-clear-color);z-index:10;cursor:pointer;position:absolute;outline-width:0px;right:0;top:0}.cide-input-clear:hover,.cide-textarea-clear:hover,.cide-select-clear:hover{color:var(--cide-input-clear-color-hover)}.cide-input-trailing-icon,.cide-textarea-trailing-icon,.cide-select-trailing-icon{color:var(--cide-input-trailing-icon-color)}.cide-input-input,.cide-textarea-input,.cide-select-button{color:var(--cide-input-text-color);border-color:var(--cide-input-border)}.cide-input-input:hover,.cide-textarea-input:hover,.cide-select-button:hover{color:var(--cide-input-text-color-hover);border-color:var(--cide-input-border-hover)}.cide-input-input:focus,.cide-textarea-input:focus,.cide-select-button:focus{color:var(--cide-input-text-color-active);border-color:var(--cide-input-border-active)}.cide-element-input-label-floating .cide-input-label,.cide-element-input-label-floating .cide-textarea-label,.cide-element-input-label-floating .cide-select-label,.cide-element-select-label-floating .cide-input-label,.cide-element-select-label-floating .cide-textarea-label,.cide-element-select-label-floating .cide-select-label{position:absolute;z-index:1;margin-left:8px;margin-right:8px;background-color:#fff;padding:0 2px}.cide-element-input-label-floating .cide-element-input-label-start,.cide-element-input-label-floating .cide-element-textarea-label-start,.cide-element-input-label-floating .cide-element-select-label-start,.cide-element-select-label-floating .cide-element-input-label-start,.cide-element-select-label-floating .cide-element-textarea-label-start,.cide-element-select-label-floating .cide-element-select-label-start{left:0}.cide-element-input-label-floating .cide-element-input-label-end,.cide-element-input-label-floating .cide-element-textarea-label-end,.cide-element-input-label-floating .cide-element-select-label-end,.cide-element-select-label-floating .cide-element-input-label-end,.cide-element-select-label-floating .cide-element-textarea-label-end,.cide-element-select-label-floating .cide-element-select-label-end{right:0}.cide-element-input-label-fixed,.cide-element-textarea-label-fixed,.cide-element-select-label-fixed{margin-bottom:0}.cide-element-input-label-fixed .cide-input-label,.cide-element-input-label-fixed .cide-textarea-label,.cide-element-input-label-fixed .cide-select-label,.cide-element-textarea-label-fixed .cide-input-label,.cide-element-textarea-label-fixed .cide-textarea-label,.cide-element-textarea-label-fixed .cide-select-label,.cide-element-select-label-fixed .cide-input-label,.cide-element-select-label-fixed .cide-textarea-label,.cide-element-select-label-fixed .cide-select-label{margin-bottom:3px}.cide-element-input-label-fixed .cide-element-input-label-start,.cide-element-input-label-fixed .cide-element-textarea-label-start,.cide-element-input-label-fixed .cide-element-select-label-start,.cide-element-textarea-label-fixed .cide-element-input-label-start,.cide-element-textarea-label-fixed .cide-element-textarea-label-start,.cide-element-textarea-label-fixed .cide-element-select-label-start,.cide-element-select-label-fixed .cide-element-input-label-start,.cide-element-select-label-fixed .cide-element-textarea-label-start,.cide-element-select-label-fixed .cide-element-select-label-start{text-align:start}.cide-element-input-label-fixed .cide-element-input-label-end,.cide-element-input-label-fixed .cide-element-textarea-label-end,.cide-element-input-label-fixed .cide-element-select-label-end,.cide-element-textarea-label-fixed .cide-element-input-label-end,.cide-element-textarea-label-fixed .cide-element-textarea-label-end,.cide-element-textarea-label-fixed .cide-element-select-label-end,.cide-element-select-label-fixed .cide-element-input-label-end,.cide-element-select-label-fixed .cide-element-textarea-label-end,.cide-element-select-label-fixed .cide-element-select-label-end{text-align:end}.ng-touched.ng-invalid>.cide-input .cide-input-clear,.ng-touched.ng-invalid>.cide-input .cide-textarea-clear,.ng-touched.ng-invalid>.cide-input .cide-select-clear,.ng-touched.ng-invalid>.cide-textarea .cide-input-clear,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-clear,.ng-touched.ng-invalid>.cide-textarea .cide-select-clear,.ng-touched.ng-invalid>.cide-select .cide-input-clear,.ng-touched.ng-invalid>.cide-select .cide-textarea-clear,.ng-touched.ng-invalid>.cide-select .cide-select-clear{color:var(--cide-input-clear-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-input .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-input .cide-select-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-select-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-select-clear:hover{color:var(--cide-input-clear-color-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-input .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-input .cide-select-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-select-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-select-leading-icon{color:var(--cide-input-leading-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-input .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-input .cide-select-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-select-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-select-help-error-text{color:var(--cide-input-color-help-error-text-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-input .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-input .cide-select-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-select-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-select-trailing-icon{color:var(--cide-input-trailing-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-label,.ng-touched.ng-invalid>.cide-input .cide-textarea-label,.ng-touched.ng-invalid>.cide-input .cide-select-label,.ng-touched.ng-invalid>.cide-textarea .cide-input-label,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-label,.ng-touched.ng-invalid>.cide-textarea .cide-select-label,.ng-touched.ng-invalid>.cide-select .cide-input-label,.ng-touched.ng-invalid>.cide-select .cide-textarea-label,.ng-touched.ng-invalid>.cide-select .cide-select-label{color:var(--cide-input-label-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input,.ng-touched.ng-invalid>.cide-input .cide-textarea-input,.ng-touched.ng-invalid>.cide-input .cide-select-button,.ng-touched.ng-invalid>.cide-textarea .cide-input-input,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input,.ng-touched.ng-invalid>.cide-textarea .cide-select-button,.ng-touched.ng-invalid>.cide-select .cide-input-input,.ng-touched.ng-invalid>.cide-select .cide-textarea-input,.ng-touched.ng-invalid>.cide-select .cide-select-button{color:var(--cide-input-text-color-invalid);border-color:var(--cide-input-border-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:hover,.ng-touched.ng-invalid>.cide-input .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-input .cide-select-button:hover,.ng-touched.ng-invalid>.cide-textarea .cide-input-input:hover,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-textarea .cide-select-button:hover,.ng-touched.ng-invalid>.cide-select .cide-input-input:hover,.ng-touched.ng-invalid>.cide-select .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-select .cide-select-button:hover{color:var(--cide-input-text-color-hover-invalid);border-color:var(--cide-input-border-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:focus,.ng-touched.ng-invalid>.cide-input .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-input .cide-select-button:focus,.ng-touched.ng-invalid>.cide-textarea .cide-input-input:focus,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-textarea .cide-select-button:focus,.ng-touched.ng-invalid>.cide-select .cide-input-input:focus,.ng-touched.ng-invalid>.cide-select .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-select .cide-select-button:focus{color:var(--cide-input-text-color-active-invalid);border-color:var(--cide-input-border-active-invalid)}.cide-input-leading-icon-wrapper,.cide-textarea-leading-icon-wrapper,.cide-select-leading-icon-wrapper{position:absolute;bottom:0;left:0;z-index:0;text-align:center}.cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"cide-select\" [ngClass]=\"{\n  'cide-element-size-xxs': (size === '2xs'),\n  'cide-element-size-xs': (size === 'xs'),\n  'cide-element-size-sm': (size === 'sm'),\n  'cide-element-size-md': (size === 'md'),\n  'cide-element-size-lg': (size === 'lg'),\n  'cide-element-input-label-floating': (labelPlacement === 'floating'),\n  'cide-element-input-label-start': (labelDir === 'start'),\n  'cide-element-input-label-end': (labelDir === 'end'),\n  'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n  'cide-element-input-label-less': (!label || labelHide),\n  'cide-element-style-outline': (fill === 'outline'),\n  'cide-element-style-solid': (fill === 'solid'),\n  'cide-element-style-standard': (fill === 'standard'),\n}\">\n  @if (label && !labelHide) {\n  <label [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n  }\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    @if (leadingIcon) {\n    <span class=\"cide-input-leading-icon-wrapper\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\n    }\n\n    <!-- Select Button -->\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"[\n        ((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md'),\n        (!leadingIcon ? 'tw-pl-1' : ''),\n        (trailingIcon || clearInput || loading ? 'tw-pr-8' : ''),\n        (!trailingIcon && !clearInput && !loading ? 'tw-pr-1' : ''),\n        ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')),\n        (labelHide ? '!tw-mt-0' : ''),\n        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer'\n      ]\" class=\"cide-select-button\">\n\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n      </span>\n    </button>\n\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n    @if (!clearInput || !ngModel || loading) {\n    <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n      <!-- Loading Spinner -->\n      @if (loading) {\n      <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n        <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"tw-opacity-75\" fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n          </path>\n        </svg>\n      </span>\n      }\n      <!-- Dropdown Arrow -->\n      @if (!loading) {\n      <span\n        class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n        [ngClass]=\"{'tw-rotate-180': isOpen}\">\n        expand_more\n      </span>\n      }\n    </span>\n    }\n\n    <!-- Clear Button -->\n    @if (clearInput && ngModel) {\n    <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n    }\n\n\n  </div>\n\n  <!-- Error/Helper Text -->\n  @if ((errorText || helperText) && !isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  }\n  @if (helperText && isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n  }\n\n  <!-- Portal Container -->\n  <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n  <div\n    class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n    <!-- Search Input (if searchable and showSearchInput is true) -->\n    @if (context?.searchable && showSearchInput) {\n    <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n      <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n        (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n        (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n        class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"tw-py-1\">\n      <!-- Loading State -->\n      @if (context?.loading) {\n      <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n          <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n            viewBox=\"0 0 24 24\">\n            <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"tw-opacity-75\" fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n            </path>\n          </svg>\n          <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n        </div>\n      </div>\n      }\n      <!-- Options -->\n      @if (!context?.loading) {\n      @for (option of context?.options; track $index) {\n      <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n        (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n        [disabled]=\"option.disabled\" [ngClass]=\"{\n              'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n              'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n        {{ context?.getOptionLabel(option) }}\n      </button>\n      }\n      }\n\n      <!-- No options message -->\n      @if (!context?.loading && context?.options.length === 0) {\n      <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n        {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [":root{--cide-ele-devider-border-color: #74AEF6}.cide-element-size-xxs .cide-input-input,.cide-element-size-xxs .cide-select-button{height:var(--cide-element-size-xxs)}.cide-element-size-xxs .cide-input-input,.cide-element-size-xxs .cide-textarea-input,.cide-element-size-xxs .cide-select-button{font-size:var(--cide-input-size-xxs);border-width:var(--cide-input-border-size-xxs)}.cide-element-size-xxs .cide-input-label,.cide-element-size-xxs .cide-textarea-label,.cide-element-size-xxs .cide-select-label{font-size:var(--cide-input-label-size-xxs);line-height:var(--cide-input-label-size-xxs)}.cide-element-size-xxs .cide-input-help-error-text,.cide-element-size-xxs .cide-textarea-help-error-text,.cide-element-size-xxs .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xxs);height:calc(var(--cide-input-error-helper-size-xxs) + 2px);line-height:var(--cide-input-error-helper-size-xxs)}.cide-element-size-xxs .cide-input-clear,.cide-element-size-xxs .cide-textarea-clear,.cide-element-size-xxs .cide-select-clear{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-input-clear .cide-select-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper,.cide-element-size-xxs .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xxs) / 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xxs) / 2 - var(--cide-input-label-size-xxs))}.cide-element-size-xxs.cide-element-leading-icon .cide-input-input,.cide-element-size-xxs.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xxs.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-clear-input .cide-input-input,.cide-element-size-xxs.cide-element-clear-input .cide-textarea-input,.cide-element-size-xxs.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xxs.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xxs.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xxs)}.cide-element-size-xs .cide-input-input,.cide-element-size-xs .cide-select-button{height:var(--cide-element-size-xs)}.cide-element-size-xs .cide-input-input,.cide-element-size-xs .cide-textarea-input,.cide-element-size-xs .cide-select-button{font-size:var(--cide-input-size-xs);border-width:var(--cide-input-border-size-xs)}.cide-element-size-xs .cide-input-label,.cide-element-size-xs .cide-textarea-label,.cide-element-size-xs .cide-select-label{font-size:var(--cide-input-label-size-xs);line-height:var(--cide-input-label-size-xs)}.cide-element-size-xs .cide-input-help-error-text,.cide-element-size-xs .cide-textarea-help-error-text,.cide-element-size-xs .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xs);height:calc(var(--cide-input-error-helper-size-xs) + 2px);line-height:var(--cide-input-error-helper-size-xs)}.cide-element-size-xs .cide-input-clear,.cide-element-size-xs .cide-textarea-clear,.cide-element-size-xs .cide-select-clear{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-clear .cide-input-clear-icon,.cide-element-size-xs .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-input-clear .cide-select-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xs .cide-select-clear .cide-input-clear-icon,.cide-element-size-xs .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper,.cide-element-size-xs .cide-textarea-leading-icon-wrapper,.cide-element-size-xs .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xs) / 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xs) / 2 - var(--cide-input-label-size-xs))}.cide-element-size-xs.cide-element-leading-icon .cide-input-input,.cide-element-size-xs.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xs.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-clear-input .cide-input-input,.cide-element-size-xs.cide-element-clear-input .cide-textarea-input,.cide-element-size-xs.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xs.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xs.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xs)}.cide-element-size-sm .cide-input-input,.cide-element-size-sm .cide-select-button{height:var(--cide-element-size-sm)}.cide-element-size-sm .cide-input-input,.cide-element-size-sm .cide-textarea-input,.cide-element-size-sm .cide-select-button{font-size:var(--cide-input-size-sm);border-width:var(--cide-input-border-size-sm)}.cide-element-size-sm .cide-input-label,.cide-element-size-sm .cide-textarea-label,.cide-element-size-sm .cide-select-label{font-size:var(--cide-input-label-size-sm);line-height:var(--cide-input-label-size-sm)}.cide-element-size-sm .cide-input-help-error-text,.cide-element-size-sm .cide-textarea-help-error-text,.cide-element-size-sm .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-sm);height:calc(var(--cide-input-error-helper-size-sm) + 2px);line-height:var(--cide-input-error-helper-size-sm)}.cide-element-size-sm .cide-input-clear,.cide-element-size-sm .cide-textarea-clear,.cide-element-size-sm .cide-select-clear{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-clear .cide-input-clear-icon,.cide-element-size-sm .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-input-clear .cide-select-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-sm .cide-select-clear .cide-input-clear-icon,.cide-element-size-sm .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper,.cide-element-size-sm .cide-textarea-leading-icon-wrapper,.cide-element-size-sm .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-sm) / 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-sm) / 2 - var(--cide-input-label-size-sm))}.cide-element-size-sm.cide-element-leading-icon .cide-input-input,.cide-element-size-sm.cide-element-leading-icon .cide-textarea-input,.cide-element-size-sm.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-clear-input .cide-input-input,.cide-element-size-sm.cide-element-clear-input .cide-textarea-input,.cide-element-size-sm.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-trailing-icon .cide-input-clear,.cide-element-size-sm.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-sm.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-sm)}.cide-element-size-md .cide-input-input,.cide-element-size-md .cide-select-button{height:var(--cide-element-size-md)}.cide-element-size-md .cide-input-input,.cide-element-size-md .cide-textarea-input,.cide-element-size-md .cide-select-button{font-size:var(--cide-input-size-md);border-width:var(--cide-input-border-size-md)}.cide-element-size-md .cide-input-label,.cide-element-size-md .cide-textarea-label,.cide-element-size-md .cide-select-label{font-size:var(--cide-input-label-size-md);line-height:var(--cide-input-label-size-md)}.cide-element-size-md .cide-input-help-error-text,.cide-element-size-md .cide-textarea-help-error-text,.cide-element-size-md .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-md);height:calc(var(--cide-input-error-helper-size-md) + 2px);line-height:var(--cide-input-error-helper-size-md)}.cide-element-size-md .cide-input-clear,.cide-element-size-md .cide-textarea-clear,.cide-element-size-md .cide-select-clear{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-clear .cide-input-clear-icon,.cide-element-size-md .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-input-clear .cide-select-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-md .cide-select-clear .cide-input-clear-icon,.cide-element-size-md .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper,.cide-element-size-md .cide-textarea-leading-icon-wrapper,.cide-element-size-md .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-md) / 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-md) / 2 - var(--cide-input-label-size-md))}.cide-element-size-md.cide-element-leading-icon .cide-input-input,.cide-element-size-md.cide-element-leading-icon .cide-textarea-input,.cide-element-size-md.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-clear-input .cide-input-input,.cide-element-size-md.cide-element-clear-input .cide-textarea-input,.cide-element-size-md.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-trailing-icon .cide-input-clear,.cide-element-size-md.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-md.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-md)}.cide-element-size-lg .cide-input-input,.cide-element-size-lg .cide-select-button{height:var(--cide-element-size-lg)}.cide-element-size-lg .cide-input-input,.cide-element-size-lg .cide-textarea-input,.cide-element-size-lg .cide-select-button{font-size:var(--cide-input-size-lg);border-width:var(--cide-input-border-size-lg)}.cide-element-size-lg .cide-input-label,.cide-element-size-lg .cide-textarea-label,.cide-element-size-lg .cide-select-label{font-size:var(--cide-input-label-size-lg);line-height:var(--cide-input-label-size-lg)}.cide-element-size-lg .cide-input-help-error-text,.cide-element-size-lg .cide-textarea-help-error-text,.cide-element-size-lg .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-lg);height:calc(var(--cide-input-error-helper-size-lg) + 2px);line-height:var(--cide-input-error-helper-size-lg)}.cide-element-size-lg .cide-input-clear,.cide-element-size-lg .cide-textarea-clear,.cide-element-size-lg .cide-select-clear{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-clear .cide-input-clear-icon,.cide-element-size-lg .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-input-clear .cide-select-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-lg .cide-select-clear .cide-input-clear-icon,.cide-element-size-lg .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper,.cide-element-size-lg .cide-textarea-leading-icon-wrapper,.cide-element-size-lg .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-lg) / 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-lg) / 2 - var(--cide-input-label-size-lg))}.cide-element-size-lg.cide-element-leading-icon .cide-input-input,.cide-element-size-lg.cide-element-leading-icon .cide-textarea-input,.cide-element-size-lg.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-clear-input .cide-input-input,.cide-element-size-lg.cide-element-clear-input .cide-textarea-input,.cide-element-size-lg.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-trailing-icon .cide-input-clear,.cide-element-size-lg.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-lg.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-lg)}.cide-element-size-xl .cide-input-input,.cide-element-size-xl .cide-select-button{height:var(--cide-element-size-xl)}.cide-element-size-xl .cide-input-input,.cide-element-size-xl .cide-textarea-input,.cide-element-size-xl .cide-select-button{font-size:var(--cide-input-size-xl);border-width:var(--cide-input-border-size-xl)}.cide-element-size-xl .cide-input-label,.cide-element-size-xl .cide-textarea-label,.cide-element-size-xl .cide-select-label{font-size:var(--cide-input-label-size-xl);line-height:var(--cide-input-label-size-xl)}.cide-element-size-xl .cide-input-help-error-text,.cide-element-size-xl .cide-textarea-help-error-text,.cide-element-size-xl .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xl);height:calc(var(--cide-input-error-helper-size-xl) + 2px);line-height:var(--cide-input-error-helper-size-xl)}.cide-element-size-xl .cide-input-clear,.cide-element-size-xl .cide-textarea-clear,.cide-element-size-xl .cide-select-clear{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-clear .cide-input-clear-icon,.cide-element-size-xl .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-input-clear .cide-select-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xl .cide-select-clear .cide-input-clear-icon,.cide-element-size-xl .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper,.cide-element-size-xl .cide-textarea-leading-icon-wrapper,.cide-element-size-xl .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xl) / 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xl) / 2 - var(--cide-input-label-size-xl))}.cide-element-size-xl.cide-element-leading-icon .cide-input-input,.cide-element-size-xl.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xl.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-clear-input .cide-input-input,.cide-element-size-xl.cide-element-clear-input .cide-textarea-input,.cide-element-size-xl.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xl.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xl.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xl)}.cide-element-style-standard .cide-input-input,.cide-element-style-standard .cide-textarea-input,.cide-element-style-standard .cide-select-button{border-color:transparent}.cide-element-input-number input{text-align:right!important}.cide-element-input-wrapper,.cide-element-textarea-wrapper,.cide-element-select-wrapper{position:relative}.cide-input-label,.cide-textarea-label,.cide-select-label{color:var(--cide-input-label-color);-webkit-user-select:none;user-select:none;display:block}.cide-input-help-error-text,.cide-textarea-help-error-text,.cide-select-help-error-text{color:var(--cide-input-color-help-error-text);width:100%;display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.125rem;padding-right:.125rem}.cide-input-leading-icon,.cide-textarea-leading-icon,.cide-select-leading-icon{color:var(--cide-input-leading-icon-color)}.cide-input-clear,.cide-textarea-clear,.cide-select-clear{color:var(--cide-input-clear-color);z-index:10;cursor:pointer;position:absolute;outline-width:0px;right:0;top:0}.cide-input-clear:hover,.cide-textarea-clear:hover,.cide-select-clear:hover{color:var(--cide-input-clear-color-hover)}.cide-input-trailing-icon,.cide-textarea-trailing-icon,.cide-select-trailing-icon{color:var(--cide-input-trailing-icon-color)}.cide-input-input,.cide-textarea-input,.cide-select-button{color:var(--cide-input-text-color);border-color:var(--cide-input-border)}.cide-input-input:hover,.cide-textarea-input:hover,.cide-select-button:hover{color:var(--cide-input-text-color-hover);border-color:var(--cide-input-border-hover)}.cide-input-input:focus,.cide-textarea-input:focus,.cide-select-button:focus{color:var(--cide-input-text-color-active);border-color:var(--cide-input-border-active)}.cide-element-input-label-floating .cide-input-label,.cide-element-input-label-floating .cide-textarea-label,.cide-element-input-label-floating .cide-select-label,.cide-element-select-label-floating .cide-input-label,.cide-element-select-label-floating .cide-textarea-label,.cide-element-select-label-floating .cide-select-label{position:absolute;z-index:1;margin-left:8px;margin-right:8px;background-color:#fff;padding:0 2px}.cide-element-input-label-floating .cide-element-input-label-start,.cide-element-input-label-floating .cide-element-textarea-label-start,.cide-element-input-label-floating .cide-element-select-label-start,.cide-element-select-label-floating .cide-element-input-label-start,.cide-element-select-label-floating .cide-element-textarea-label-start,.cide-element-select-label-floating .cide-element-select-label-start{left:0}.cide-element-input-label-floating .cide-element-input-label-end,.cide-element-input-label-floating .cide-element-textarea-label-end,.cide-element-input-label-floating .cide-element-select-label-end,.cide-element-select-label-floating .cide-element-input-label-end,.cide-element-select-label-floating .cide-element-textarea-label-end,.cide-element-select-label-floating .cide-element-select-label-end{right:0}.cide-element-input-label-fixed,.cide-element-textarea-label-fixed,.cide-element-select-label-fixed{margin-bottom:0}.cide-element-input-label-fixed .cide-input-label,.cide-element-input-label-fixed .cide-textarea-label,.cide-element-input-label-fixed .cide-select-label,.cide-element-textarea-label-fixed .cide-input-label,.cide-element-textarea-label-fixed .cide-textarea-label,.cide-element-textarea-label-fixed .cide-select-label,.cide-element-select-label-fixed .cide-input-label,.cide-element-select-label-fixed .cide-textarea-label,.cide-element-select-label-fixed .cide-select-label{margin-bottom:3px}.cide-element-input-label-fixed .cide-element-input-label-start,.cide-element-input-label-fixed .cide-element-textarea-label-start,.cide-element-input-label-fixed .cide-element-select-label-start,.cide-element-textarea-label-fixed .cide-element-input-label-start,.cide-element-textarea-label-fixed .cide-element-textarea-label-start,.cide-element-textarea-label-fixed .cide-element-select-label-start,.cide-element-select-label-fixed .cide-element-input-label-start,.cide-element-select-label-fixed .cide-element-textarea-label-start,.cide-element-select-label-fixed .cide-element-select-label-start{text-align:start}.cide-element-input-label-fixed .cide-element-input-label-end,.cide-element-input-label-fixed .cide-element-textarea-label-end,.cide-element-input-label-fixed .cide-element-select-label-end,.cide-element-textarea-label-fixed .cide-element-input-label-end,.cide-element-textarea-label-fixed .cide-element-textarea-label-end,.cide-element-textarea-label-fixed .cide-element-select-label-end,.cide-element-select-label-fixed .cide-element-input-label-end,.cide-element-select-label-fixed .cide-element-textarea-label-end,.cide-element-select-label-fixed .cide-element-select-label-end{text-align:end}.ng-touched.ng-invalid>.cide-input .cide-input-clear,.ng-touched.ng-invalid>.cide-input .cide-textarea-clear,.ng-touched.ng-invalid>.cide-input .cide-select-clear,.ng-touched.ng-invalid>.cide-textarea .cide-input-clear,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-clear,.ng-touched.ng-invalid>.cide-textarea .cide-select-clear,.ng-touched.ng-invalid>.cide-select .cide-input-clear,.ng-touched.ng-invalid>.cide-select .cide-textarea-clear,.ng-touched.ng-invalid>.cide-select .cide-select-clear{color:var(--cide-input-clear-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-input .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-input .cide-select-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-select-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-select-clear:hover{color:var(--cide-input-clear-color-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-input .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-input .cide-select-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-select-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-select-leading-icon{color:var(--cide-input-leading-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-input .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-input .cide-select-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-select-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-select-help-error-text{color:var(--cide-input-color-help-error-text-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-input .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-input .cide-select-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-select-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-select-trailing-icon{color:var(--cide-input-trailing-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-label,.ng-touched.ng-invalid>.cide-input .cide-textarea-label,.ng-touched.ng-invalid>.cide-input .cide-select-label,.ng-touched.ng-invalid>.cide-textarea .cide-input-label,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-label,.ng-touched.ng-invalid>.cide-textarea .cide-select-label,.ng-touched.ng-invalid>.cide-select .cide-input-label,.ng-touched.ng-invalid>.cide-select .cide-textarea-label,.ng-touched.ng-invalid>.cide-select .cide-select-label{color:var(--cide-input-label-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input,.ng-touched.ng-invalid>.cide-input .cide-textarea-input,.ng-touched.ng-invalid>.cide-input .cide-select-button,.ng-touched.ng-invalid>.cide-textarea .cide-input-input,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input,.ng-touched.ng-invalid>.cide-textarea .cide-select-button,.ng-touched.ng-invalid>.cide-select .cide-input-input,.ng-touched.ng-invalid>.cide-select .cide-textarea-input,.ng-touched.ng-invalid>.cide-select .cide-select-button{color:var(--cide-input-text-color-invalid);border-color:var(--cide-input-border-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:hover,.ng-touched.ng-invalid>.cide-input .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-input .cide-select-button:hover,.ng-touched.ng-invalid>.cide-textarea .cide-input-input:hover,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-textarea .cide-select-button:hover,.ng-touched.ng-invalid>.cide-select .cide-input-input:hover,.ng-touched.ng-invalid>.cide-select .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-select .cide-select-button:hover{color:var(--cide-input-text-color-hover-invalid);border-color:var(--cide-input-border-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:focus,.ng-touched.ng-invalid>.cide-input .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-input .cide-select-button:focus,.ng-touched.ng-invalid>.cide-textarea .cide-input-input:focus,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-textarea .cide-select-button:focus,.ng-touched.ng-invalid>.cide-select .cide-input-input:focus,.ng-touched.ng-invalid>.cide-select .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-select .cide-select-button:focus{color:var(--cide-input-text-color-active-invalid);border-color:var(--cide-input-border-active-invalid)}.cide-input-leading-icon-wrapper,.cide-textarea-leading-icon-wrapper,.cide-select-leading-icon-wrapper{position:absolute;bottom:0;left:0;z-index:0;text-align:center}.cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { optionComponents: [{
                 type: ContentChildren,
                 args: [CideSelectOptionComponent]
@@ -2280,7 +2563,292 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Output
             }] } });
 
+class CideEleFileManagerService {
+    http;
+    baseUrl = '/api'; // This will be configured by the consuming application
+    constructor(http) {
+        this.http = http;
+    }
+    /**
+     * Upload a file with base64 encoding
+     * @param file The file to upload
+     * @param additionalData Additional data to include in the payload
+     * @returns Observable with the upload response
+     */
+    uploadFile(file, additionalData) {
+        // Convert file to base64
+        return new Observable(observer => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const base64String = reader.result;
+                const base64Data = base64String.split(',')[1]; // Remove data:image/jpeg;base64, prefix
+                const payload = {
+                    cyfm_name: file.name,
+                    cyfm_alt_text: additionalData?.altText || file.name,
+                    cyfm_path: '', // Will be set by backend
+                    cyfm_size_in_byte: file.size,
+                    cyfm_type: file.type,
+                    cyfm_creation_dt: new Date().toISOString(),
+                    cyfm_id_user: additionalData?.userId || '',
+                    cyfm_permissions: additionalData?.permissions || [],
+                    cyfm_tags: additionalData?.tags || [],
+                    cyfm_version: 1,
+                    cyfm_file_status_sygmt: additionalData?.fileStatus || 'active',
+                    cyfm_isactive: true,
+                    fileData: base64Data, // Base64 file data
+                    ...additionalData
+                };
+                // Make the HTTP request
+                this.http.post(`${this.baseUrl}/upload`, payload)
+                    .subscribe({
+                    next: (response) => observer.next(response),
+                    error: (error) => observer.error(error)
+                });
+            };
+            reader.onerror = () => observer.error('Failed to read file');
+            reader.readAsDataURL(file);
+        });
+    }
+    /**
+     * Set the base URL for API calls
+     * This should be called by the consuming application during initialization
+     * @param url The base URL for the API
+     */
+    setBaseUrl(url) {
+        this.baseUrl = url;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileManagerService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileManagerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileManagerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+
+class NotificationService {
+    notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
+    maxNotifications = 5; // Maximum notifications to show at once
+    // Computed signals
+    activeNotifications = computed(() => this.notifications().filter(n => n.isVisible), ...(ngDevMode ? [{ debugName: "activeNotifications" }] : []));
+    constructor() { }
+    /**
+     * Show a success notification
+     */
+    success(message, options) {
+        return this.show({
+            message,
+            type: 'success',
+            icon: 'check_circle',
+            duration: 3000,
+            ...options
+        });
+    }
+    /**
+     * Show an error notification
+     */
+    error(message, options) {
+        return this.show({
+            message,
+            type: 'error',
+            icon: 'error',
+            duration: 5000,
+            ...options
+        });
+    }
+    /**
+     * Show a warning notification
+     */
+    warning(message, options) {
+        return this.show({
+            message,
+            type: 'warning',
+            icon: 'warning',
+            duration: 4000,
+            ...options
+        });
+    }
+    /**
+     * Show an info notification
+     */
+    info(message, options) {
+        return this.show({
+            message,
+            type: 'info',
+            icon: 'info',
+            duration: 3000,
+            ...options
+        });
+    }
+    /**
+     * Show a notification with undo functionality
+     */
+    showWithUndo(message, undoAction, options) {
+        return this.show({
+            message,
+            type: 'info',
+            icon: 'info',
+            duration: 8000,
+            showUndo: true,
+            undoAction,
+            undoText: 'Undo',
+            ...options
+        });
+    }
+    /**
+     * Show a notification for reversible destructive actions
+     */
+    showReversibleAction(action, itemName, undoAction, options) {
+        return this.showWithUndo(`${action} "${itemName}"`, undoAction, {
+            type: 'warning',
+            icon: 'delete',
+            title: `${action} completed`,
+            ...options
+        });
+    }
+    /**
+     * Show a notification for background tasks
+     */
+    showBackgroundTask(taskName, isComplete = true, options) {
+        return this.show({
+            message: isComplete ? `${taskName} completed successfully` : `${taskName} in progress...`,
+            type: isComplete ? 'success' : 'info',
+            icon: isComplete ? 'check_circle' : 'sync',
+            duration: isComplete ? 3000 : 0, // Don't auto-dismiss for in-progress tasks
+            ...options
+        });
+    }
+    /**
+     * Show a progress notification
+     */
+    showProgress(message, progress = 0, options) {
+        return this.show({
+            message,
+            type: 'info',
+            icon: 'upload',
+            duration: 0, // Don't auto-dismiss
+            progress,
+            showProgress: true,
+            ...options
+        });
+    }
+    /**
+     * Update progress for an existing notification
+     */
+    updateProgress(id, progress, message) {
+        this.notifications.update(notifications => notifications.map(n => n.id === id ? {
+            ...n,
+            progress: Math.max(0, Math.min(100, progress)),
+            ...(message && { message })
+        } : n));
+    }
+    /**
+     * Core show method
+     */
+    show(options) {
+        const notification = {
+            id: this.generateId(),
+            message: options.message,
+            type: options.type || 'info',
+            duration: options.duration || 3000,
+            showUndo: options.showUndo || false,
+            undoAction: options.undoAction,
+            undoText: options.undoText || 'Undo',
+            icon: options.icon || this.getDefaultIcon(options.type || 'info'),
+            title: options.title,
+            timestamp: Date.now(),
+            isVisible: true,
+            progress: options.progress,
+            showProgress: options.showProgress || false
+        };
+        this.addNotification(notification);
+        return notification.id;
+    }
+    /**
+     * Remove a specific notification
+     */
+    remove(id) {
+        this.notifications.update(notifications => notifications.map(n => n.id === id ? { ...n, isVisible: false } : n));
+        // Remove from array after animation
+        setTimeout(() => {
+            this.notifications.update(notifications => notifications.filter(n => n.id !== id));
+        }, 300);
+    }
+    /**
+     * Remove all notifications
+     */
+    clearAll() {
+        this.notifications.update(notifications => notifications.map(n => ({ ...n, isVisible: false })));
+        setTimeout(() => {
+            this.notifications.set([]);
+        }, 300);
+    }
+    /**
+     * Execute undo action for a notification
+     */
+    executeUndo(id) {
+        const notification = this.notifications().find(n => n.id === id);
+        if (notification && notification.undoAction) {
+            notification.undoAction();
+            this.remove(id);
+        }
+    }
+    // Internal methods
+    addNotification(notification) {
+        this.notifications.update(notifications => {
+            const newNotifications = [...notifications, notification];
+            // Limit the number of visible notifications
+            if (newNotifications.length > this.maxNotifications) {
+                // Remove oldest notifications
+                const toRemove = newNotifications.length - this.maxNotifications;
+                for (let i = 0; i < toRemove; i++) {
+                    if (newNotifications[i]) {
+                        newNotifications[i] = { ...newNotifications[i], isVisible: false };
+                    }
+                }
+            }
+            return newNotifications;
+        });
+        // Auto-remove after duration (if not 0)
+        if (notification.duration > 0) {
+            setTimeout(() => {
+                this.remove(notification.id);
+            }, notification.duration);
+        }
+    }
+    generateId() {
+        return `notification-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    getDefaultIcon(type) {
+        const iconMap = {
+            success: 'check_circle',
+            error: 'error',
+            warning: 'warning',
+            info: 'info'
+        };
+        return iconMap[type];
+    }
+    // Public getters for components
+    getNotifications() {
+        return this.notifications;
+    }
+    getActiveNotifications() {
+        return this.activeNotifications;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class CideEleFileInputComponent {
+    fileManagerService = inject(CideEleFileManagerService);
+    notificationService = inject(NotificationService);
     label = 'Choose file';
     accept = '';
     multiple = false;
@@ -2291,10 +2859,19 @@ class CideEleFileInputComponent {
     previewWidth = '200px';
     previewHeight = '200px';
     previewBoxMode = false;
+    showFileName = true;
     placeholderText = 'Click to select image';
     placeholderIcon = '📷';
+    autoUpload = false;
+    uploadData = {};
     id = Math.random().toString(36).substring(2, 10);
+    isUploading = false;
+    uploadProgress = 0;
+    uploadNotificationId = null;
     fileChange = new EventEmitter();
+    uploadSuccess = new EventEmitter();
+    uploadError = new EventEmitter();
+    uploadProgressChange = new EventEmitter();
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     files = null;
     fileNames = [];
@@ -2324,6 +2901,10 @@ class CideEleFileInputComponent {
         this.onChange(this.files);
         this.fileChange.emit(this.files);
         this.onTouched();
+        // Auto upload if enabled
+        if (this.autoUpload && this.files && this.files.length > 0) {
+            this.uploadFile(this.files[0]);
+        }
     }
     clearFiles() {
         this.files = null;
@@ -2332,6 +2913,72 @@ class CideEleFileInputComponent {
         this.onChange(null);
         this.fileChange.emit(null);
     }
+    uploadFile(file) {
+        this.isUploading = true;
+        this.uploadProgress = 0;
+        this.uploadProgressChange.emit(0);
+        // Make form control invalid during upload
+        this.onChange(null);
+        // Configure file manager service with base URL
+        // this.fileManagerService.setBaseUrl(this.baseUrl);
+        // Show initial progress notification
+        this.uploadNotificationId = this.notificationService.showProgress('Starting file upload...', 0);
+        // Simulate progress for base64 conversion
+        this.simulateProgress();
+        this.fileManagerService.uploadFile(file, this.uploadData).subscribe({
+            next: (response) => {
+                this.uploadProgress = 100;
+                this.uploadProgressChange.emit(100);
+                // Update progress notification to complete
+                if (this.uploadNotificationId) {
+                    this.notificationService.remove(this.uploadNotificationId);
+                }
+                this.notificationService.success('File upload completed!');
+                this.uploadNotificationId = null;
+                // Extract ID from response - the file manager returns the _id of the created record
+                const uploadedId = response?._id || response?.data?._id || response?.id || response?.fileId;
+                if (uploadedId) {
+                    console.log('✅ File uploaded successfully with ID:', uploadedId);
+                    this.uploadSuccess.emit(uploadedId);
+                    // Update the form control value with the uploaded file ID
+                    this.onChange(uploadedId);
+                }
+                else {
+                    console.error('❌ Upload successful but no ID returned:', response);
+                    this.uploadError.emit('Upload successful but no ID returned');
+                }
+                this.isUploading = false;
+            },
+            error: (error) => {
+                console.error('❌ Upload failed:', error);
+                // Remove progress notification and show error
+                if (this.uploadNotificationId) {
+                    this.notificationService.remove(this.uploadNotificationId);
+                }
+                this.notificationService.error(`Upload failed: ${error.message || error.error?.message || 'Upload failed'}`);
+                this.uploadNotificationId = null;
+                this.uploadError.emit(error.message || error.error?.message || 'Upload failed');
+                this.isUploading = false;
+                this.uploadProgress = 0;
+                this.uploadProgressChange.emit(0);
+            }
+        });
+    }
+    simulateProgress() {
+        const interval = setInterval(() => {
+            if (this.uploadProgress < 90) {
+                this.uploadProgress += Math.random() * 8; // Smaller increments for smoother progress
+                this.uploadProgressChange.emit(this.uploadProgress);
+                // Update progress notification
+                if (this.uploadNotificationId) {
+                    this.notificationService.updateProgress(this.uploadNotificationId, this.uploadProgress, `Uploading file... ${Math.round(this.uploadProgress)}%`);
+                }
+            }
+            else {
+                clearInterval(interval);
+            }
+        }, 300); // More frequent updates for smoother progress bar
+    }
     generatePreviews() {
         // Clear existing previews
         this.clearPreviews();
@@ -2388,6 +3035,11 @@ class CideEleFileInputComponent {
     ngOnDestroy() {
         // Clean up preview URLs to prevent memory leaks
         this.clearPreviews();
+        // Clean up any active upload notification
+        if (this.uploadNotificationId) {
+            this.notificationService.remove(this.uploadNotificationId);
+            this.uploadNotificationId = null;
+        }
     }
     triggerFileSelect() {
         const fileInput = document.getElementById('cide-file-input-' + this.id);
@@ -2402,23 +3054,23 @@ class CideEleFileInputComponent {
         return this.previewUrls.length > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideEleFileInputComponent, isStandalone: true, selector: "cide-ele-file-input", inputs: { label: "label", accept: "accept", multiple: "multiple", disabled: "disabled", helperText: "helperText", errorText: "errorText", showPreview: "showPreview", previewWidth: "previewWidth", previewHeight: "previewHeight", previewBoxMode: "previewBoxMode", placeholderText: "placeholderText", placeholderIcon: "placeholderIcon" }, outputs: { fileChange: "fileChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideEleFileInputComponent, isStandalone: true, selector: "cide-ele-file-input", inputs: { label: "label", accept: "accept", multiple: "multiple", disabled: "disabled", helperText: "helperText", errorText: "errorText", showPreview: "showPreview", previewWidth: "previewWidth", previewHeight: "previewHeight", previewBoxMode: "previewBoxMode", showFileName: "showFileName", placeholderText: "placeholderText", placeholderIcon: "placeholderIcon", autoUpload: "autoUpload", uploadData: "uploadData" }, outputs: { fileChange: "fileChange", uploadSuccess: "uploadSuccess", uploadError: "uploadError", uploadProgressChange: "uploadProgressChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CideEleFileInputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  <label *ngIf=\"label && !isPreviewBoxMode()\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id\">{{ label }}</label>\n  \n  <!-- Preview Box Mode -->\n  <div *ngIf=\"isPreviewBoxMode()\" class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      [disabled]=\"disabled\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabled\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [style.width]=\"previewWidth\"\n      [style.height]=\"previewHeight\"\n      (click)=\"triggerFileSelect()\"\n      [attr.title]=\"disabled ? 'File selection disabled' : placeholderText\">\n      \n      <!-- No Image State -->\n      <div *ngIf=\"!hasImages()\" class=\"cide-file-input-preview-box-placeholder\">\n        <div class=\"cide-file-input-preview-box-icon\">{{ placeholderIcon }}</div>\n        <div class=\"cide-file-input-preview-box-text\">{{ placeholderText }}</div>\n      </div>\n      \n      <!-- Image Preview State -->\n      <div *ngIf=\"hasImages()\" class=\"cide-file-input-preview-box-content\">\n        <img \n          [src]=\"previewUrls[0]\" \n          [alt]=\"fileNames[0] || 'Preview image'\"\n          class=\"cide-file-input-preview-box-image\">\n        <div class=\"cide-file-input-preview-box-overlay\">\n          <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n        </div>\n        <button \n          *ngIf=\"!disabled\"\n          type=\"button\" \n          class=\"cide-file-input-preview-box-remove\"\n          (click)=\"clearFiles(); $event.stopPropagation()\"\n          title=\"Remove image\">\n          \u00D7\n        </button>\n      </div>\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    <div *ngIf=\"hasImages() && fileNames.length\" class=\"cide-file-input-preview-box-filename\">\n      {{ fileNames[0] }}\n    </div>\n  </div>\n\n  <!-- Standard Mode -->\n  <div *ngIf=\"!isPreviewBoxMode()\" class=\"cide-file-input-wrapper\">\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      [disabled]=\"disabled\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-element\"\n    />\n    <button *ngIf=\"fileNames.length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n      Clear\n    </button>\n  </div>\n  <div *ngIf=\"fileNames.length && !isPreviewBoxMode()\" class=\"cide-file-input-files\">\n    <span *ngFor=\"let name of fileNames\">{{ name }}</span>\n  </div>\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  <div *ngIf=\"isImagePreviewAvailable() && !isPreviewBoxMode()\" class=\"cide-file-input-preview\">\n    <div class=\"cide-file-input-preview-label\">Preview:</div>\n    <div class=\"cide-file-input-preview-container\">\n      <div \n        *ngFor=\"let previewUrl of previewUrls; let i = index\" \n        class=\"cide-file-input-preview-item\"\n        [style.width]=\"previewWidth\"\n        [style.height]=\"previewHeight\">\n        <button \n          type=\"button\" \n          class=\"cide-file-input-preview-remove\"\n          (click)=\"removePreview(i)\"\n          title=\"Remove image\">\n          \u00D7\n        </button>\n        <img \n          [src]=\"previewUrl\" \n          [alt]=\"fileNames[i] || 'Preview image'\"\n          class=\"cide-file-input-preview-image\"\n          loading=\"lazy\">\n        <div class=\"cide-file-input-preview-filename\">{{ fileNames[i] }}</div>\n      </div>\n    </div>\n  </div>\n  \n  <div *ngIf=\"errorText\" class=\"cide-file-input-error\">{{ errorText }}</div>\n  <div *ngIf=\"helperText && !errorText\" class=\"cide-file-input-helper\">{{ helperText }}</div>\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\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: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  <label *ngIf=\"label && !isPreviewBoxMode()\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id\">{{ label }}</label>\n  \n  <!-- Preview Box Mode -->\n  <div *ngIf=\"isPreviewBoxMode()\" class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      [disabled]=\"disabled\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabled\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [style.width]=\"previewWidth\"\n      [style.height]=\"previewHeight\"\n      (click)=\"triggerFileSelect()\"\n      [attr.title]=\"disabled ? 'File selection disabled' : placeholderText\">\n      \n      <!-- No Image State -->\n      <div *ngIf=\"!hasImages()\" class=\"cide-file-input-preview-box-placeholder\">\n        <div class=\"cide-file-input-preview-box-icon\">\n          <cide-ele-icon>{{ placeholderIcon }}</cide-ele-icon>\n        </div>\n        <div class=\"cide-file-input-preview-box-text\">{{ placeholderText }}</div>\n      </div>\n      \n      <!-- Image Preview State -->\n      <div *ngIf=\"hasImages()\" class=\"cide-file-input-preview-box-content\">\n        <img \n          [src]=\"previewUrls[0]\" \n          [alt]=\"fileNames[0] || 'Preview image'\"\n          class=\"cide-file-input-preview-box-image\">\n        <div class=\"cide-file-input-preview-box-overlay\">\n          <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n        </div>\n        <button \n          *ngIf=\"!disabled\"\n          type=\"button\" \n          class=\"cide-file-input-preview-box-remove\"\n          (click)=\"clearFiles(); $event.stopPropagation()\"\n          title=\"Remove image\">\n          \u00D7\n        </button>\n      </div>\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    <div *ngIf=\"hasImages() && fileNames.length && showFileName\" class=\"cide-file-input-preview-box-filename\">\n      {{ fileNames[0] }}\n    </div>\n  </div>\n\n  <!-- Standard Mode -->\n  <div *ngIf=\"!isPreviewBoxMode()\" class=\"cide-file-input-wrapper\">\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      [disabled]=\"disabled\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-element\"\n    />\n    <button *ngIf=\"fileNames.length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n      Clear\n    </button>\n  </div>\n  <div *ngIf=\"fileNames.length && !isPreviewBoxMode()\" class=\"cide-file-input-files\">\n    <span *ngFor=\"let name of fileNames\">{{ name }}</span>\n  </div>\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  <div *ngIf=\"isImagePreviewAvailable() && !isPreviewBoxMode()\" class=\"cide-file-input-preview\">\n    <div class=\"cide-file-input-preview-label\">Preview:</div>\n    <div class=\"cide-file-input-preview-container\">\n      <div \n        *ngFor=\"let previewUrl of previewUrls; let i = index\" \n        class=\"cide-file-input-preview-item\"\n        [style.width]=\"previewWidth\"\n        [style.height]=\"previewHeight\">\n        <button \n          type=\"button\" \n          class=\"cide-file-input-preview-remove\"\n          (click)=\"removePreview(i)\"\n          title=\"Remove image\">\n          \u00D7\n        </button>\n        <img \n          [src]=\"previewUrl\" \n          [alt]=\"fileNames[i] || 'Preview image'\"\n          class=\"cide-file-input-preview-image\"\n          loading=\"lazy\">\n        <div class=\"cide-file-input-preview-filename\">{{ fileNames[i] }}</div>\n      </div>\n    </div>\n  </div>\n  \n  <div *ngIf=\"errorText\" class=\"cide-file-input-error\">{{ errorText }}</div>\n  <div *ngIf=\"helperText && !errorText\" class=\"cide-file-input-helper\">{{ helperText }}</div>\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\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: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-ele-file-input', standalone: true, imports: [CommonModule, FormsModule], providers: [
+            args: [{ selector: 'cide-ele-file-input', standalone: true, imports: [CommonModule, FormsModule, CideIconComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CideEleFileInputComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  <label *ngIf=\"label && !isPreviewBoxMode()\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id\">{{ label }}</label>\n  \n  <!-- Preview Box Mode -->\n  <div *ngIf=\"isPreviewBoxMode()\" class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      [disabled]=\"disabled\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabled\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [style.width]=\"previewWidth\"\n      [style.height]=\"previewHeight\"\n      (click)=\"triggerFileSelect()\"\n      [attr.title]=\"disabled ? 'File selection disabled' : placeholderText\">\n      \n      <!-- No Image State -->\n      <div *ngIf=\"!hasImages()\" class=\"cide-file-input-preview-box-placeholder\">\n        <div class=\"cide-file-input-preview-box-icon\">{{ placeholderIcon }}</div>\n        <div class=\"cide-file-input-preview-box-text\">{{ placeholderText }}</div>\n      </div>\n      \n      <!-- Image Preview State -->\n      <div *ngIf=\"hasImages()\" class=\"cide-file-input-preview-box-content\">\n        <img \n          [src]=\"previewUrls[0]\" \n          [alt]=\"fileNames[0] || 'Preview image'\"\n          class=\"cide-file-input-preview-box-image\">\n        <div class=\"cide-file-input-preview-box-overlay\">\n          <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n        </div>\n        <button \n          *ngIf=\"!disabled\"\n          type=\"button\" \n          class=\"cide-file-input-preview-box-remove\"\n          (click)=\"clearFiles(); $event.stopPropagation()\"\n          title=\"Remove image\">\n          \u00D7\n        </button>\n      </div>\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    <div *ngIf=\"hasImages() && fileNames.length\" class=\"cide-file-input-preview-box-filename\">\n      {{ fileNames[0] }}\n    </div>\n  </div>\n\n  <!-- Standard Mode -->\n  <div *ngIf=\"!isPreviewBoxMode()\" class=\"cide-file-input-wrapper\">\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      [disabled]=\"disabled\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-element\"\n    />\n    <button *ngIf=\"fileNames.length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n      Clear\n    </button>\n  </div>\n  <div *ngIf=\"fileNames.length && !isPreviewBoxMode()\" class=\"cide-file-input-files\">\n    <span *ngFor=\"let name of fileNames\">{{ name }}</span>\n  </div>\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  <div *ngIf=\"isImagePreviewAvailable() && !isPreviewBoxMode()\" class=\"cide-file-input-preview\">\n    <div class=\"cide-file-input-preview-label\">Preview:</div>\n    <div class=\"cide-file-input-preview-container\">\n      <div \n        *ngFor=\"let previewUrl of previewUrls; let i = index\" \n        class=\"cide-file-input-preview-item\"\n        [style.width]=\"previewWidth\"\n        [style.height]=\"previewHeight\">\n        <button \n          type=\"button\" \n          class=\"cide-file-input-preview-remove\"\n          (click)=\"removePreview(i)\"\n          title=\"Remove image\">\n          \u00D7\n        </button>\n        <img \n          [src]=\"previewUrl\" \n          [alt]=\"fileNames[i] || 'Preview image'\"\n          class=\"cide-file-input-preview-image\"\n          loading=\"lazy\">\n        <div class=\"cide-file-input-preview-filename\">{{ fileNames[i] }}</div>\n      </div>\n    </div>\n  </div>\n  \n  <div *ngIf=\"errorText\" class=\"cide-file-input-error\">{{ errorText }}</div>\n  <div *ngIf=\"helperText && !errorText\" class=\"cide-file-input-helper\">{{ helperText }}</div>\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\n"] }]
+                    ], template: "<div class=\"cide-file-input\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  <label *ngIf=\"label && !isPreviewBoxMode()\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id\">{{ label }}</label>\n  \n  <!-- Preview Box Mode -->\n  <div *ngIf=\"isPreviewBoxMode()\" class=\"cide-file-input-preview-box-container\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      [disabled]=\"disabled\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"cide-file-input-preview-box\"\n      [class.cide-file-input-preview-box-disabled]=\"disabled\"\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\n      [style.width]=\"previewWidth\"\n      [style.height]=\"previewHeight\"\n      (click)=\"triggerFileSelect()\"\n      [attr.title]=\"disabled ? 'File selection disabled' : placeholderText\">\n      \n      <!-- No Image State -->\n      <div *ngIf=\"!hasImages()\" class=\"cide-file-input-preview-box-placeholder\">\n        <div class=\"cide-file-input-preview-box-icon\">\n          <cide-ele-icon>{{ placeholderIcon }}</cide-ele-icon>\n        </div>\n        <div class=\"cide-file-input-preview-box-text\">{{ placeholderText }}</div>\n      </div>\n      \n      <!-- Image Preview State -->\n      <div *ngIf=\"hasImages()\" class=\"cide-file-input-preview-box-content\">\n        <img \n          [src]=\"previewUrls[0]\" \n          [alt]=\"fileNames[0] || 'Preview image'\"\n          class=\"cide-file-input-preview-box-image\">\n        <div class=\"cide-file-input-preview-box-overlay\">\n          <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\n        </div>\n        <button \n          *ngIf=\"!disabled\"\n          type=\"button\" \n          class=\"cide-file-input-preview-box-remove\"\n          (click)=\"clearFiles(); $event.stopPropagation()\"\n          title=\"Remove image\">\n          \u00D7\n        </button>\n      </div>\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    <div *ngIf=\"hasImages() && fileNames.length && showFileName\" class=\"cide-file-input-preview-box-filename\">\n      {{ fileNames[0] }}\n    </div>\n  </div>\n\n  <!-- Standard Mode -->\n  <div *ngIf=\"!isPreviewBoxMode()\" class=\"cide-file-input-wrapper\">\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      [disabled]=\"disabled\"\n      (change)=\"onFileSelected($event)\"\n      class=\"cide-file-input-element\"\n    />\n    <button *ngIf=\"fileNames.length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\n      Clear\n    </button>\n  </div>\n  <div *ngIf=\"fileNames.length && !isPreviewBoxMode()\" class=\"cide-file-input-files\">\n    <span *ngFor=\"let name of fileNames\">{{ name }}</span>\n  </div>\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  <div *ngIf=\"isImagePreviewAvailable() && !isPreviewBoxMode()\" class=\"cide-file-input-preview\">\n    <div class=\"cide-file-input-preview-label\">Preview:</div>\n    <div class=\"cide-file-input-preview-container\">\n      <div \n        *ngFor=\"let previewUrl of previewUrls; let i = index\" \n        class=\"cide-file-input-preview-item\"\n        [style.width]=\"previewWidth\"\n        [style.height]=\"previewHeight\">\n        <button \n          type=\"button\" \n          class=\"cide-file-input-preview-remove\"\n          (click)=\"removePreview(i)\"\n          title=\"Remove image\">\n          \u00D7\n        </button>\n        <img \n          [src]=\"previewUrl\" \n          [alt]=\"fileNames[i] || 'Preview image'\"\n          class=\"cide-file-input-preview-image\"\n          loading=\"lazy\">\n        <div class=\"cide-file-input-preview-filename\">{{ fileNames[i] }}</div>\n      </div>\n    </div>\n  </div>\n  \n  <div *ngIf=\"errorText\" class=\"cide-file-input-error\">{{ errorText }}</div>\n  <div *ngIf=\"helperText && !errorText\" class=\"cide-file-input-helper\">{{ helperText }}</div>\n</div> ", styles: [".cide-file-input{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-label{font-weight:500;margin-bottom:.25rem}.cide-file-input-wrapper{display:flex;align-items:center;gap:.5rem}.cide-file-input-element{flex:1}.cide-file-input-clear{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:.9rem}.cide-file-input-files{font-size:.95rem;color:#333;margin-top:.25rem}.cide-file-input-error{color:#d32f2f;font-size:.9rem}.cide-file-input-helper{color:#666;font-size:.9rem}.cide-file-input-preview{margin-top:.75rem;padding:.75rem;background-color:#f8f9fa;border:1px solid #e1e5e9;border-radius:.375rem}.cide-file-input-preview-label{font-weight:500;margin-bottom:.5rem;color:#374151;font-size:.875rem}.cide-file-input-preview-container{display:flex;flex-wrap:wrap;gap:.75rem}.cide-file-input-preview-item{position:relative;display:flex;flex-direction:column;border:1px solid #d1d5db;border-radius:.5rem;overflow:hidden;background-color:#fff;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease-in-out}.cide-file-input-preview-item:hover{box-shadow:0 4px 6px -1px #0000001a}.cide-file-input-preview-image{width:100%;height:calc(100% - 2rem);object-fit:cover;object-position:center;background-color:#f3f4f6}.cide-file-input-preview-filename{padding:.375rem .5rem;background-color:#f9fafbf2;border-top:1px solid #e5e7eb;font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:2rem;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-remove{position:absolute;top:.25rem;right:.25rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .2s ease-in-out}.cide-file-input-preview-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-hidden{display:none}.cide-file-input-preview-box-container{display:flex;flex-direction:column;gap:.5rem}.cide-file-input-preview-box{position:relative;border:2px dashed #d1d5db;border-radius:.5rem;cursor:pointer;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all .2s ease-in-out}.cide-file-input-preview-box:hover{border-color:#3b82f6;background-color:#eff6ff}.cide-file-input-preview-box.cide-file-input-preview-box-disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-disabled:hover{border-color:#d1d5db;background-color:#f3f4f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image{border-style:solid;border-color:#e5e7eb;padding:0}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover{border-color:#3b82f6}.cide-file-input-preview-box.cide-file-input-preview-box-has-image:hover .cide-file-input-preview-box-overlay{opacity:1}.cide-file-input-preview-box-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center}.cide-file-input-preview-box-icon{font-size:2rem;color:#6b7280}.cide-file-input-preview-box-text{font-size:.875rem;color:#6b7280;font-weight:500}.cide-file-input-preview-box-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.cide-file-input-preview-box-image{width:100%;height:100%;object-fit:cover;object-position:center}.cide-file-input-preview-box-overlay{position:absolute;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out}.cide-file-input-preview-box-overlay-text{color:#fff;font-size:.875rem;font-weight:500;text-align:center}.cide-file-input-preview-box-remove{position:absolute;top:.375rem;right:.375rem;width:1.5rem;height:1.5rem;background-color:#ef4444e6;color:#fff;border:none;border-radius:50%;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:all .2s ease-in-out}.cide-file-input-preview-box-remove:hover{background-color:#dc2626f2;transform:scale(1.1)}.cide-file-input-preview-box-remove:focus{outline:2px solid #3b82f6;outline-offset:2px}.cide-file-input-preview-box-filename{font-size:.75rem;color:#374151;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.25rem .5rem;background-color:#f3f4f6;border-radius:.25rem;margin-top:.25rem}@media (max-width: 640px){.cide-file-input-preview-container{justify-content:center}.cide-file-input-preview-item{min-width:120px;max-width:150px}.cide-file-input-preview-box-icon{font-size:1.5rem}.cide-file-input-preview-box-text{font-size:.75rem}}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], accept: [{
@@ -2439,12 +3091,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Input
             }], previewBoxMode: [{
                 type: Input
+            }], showFileName: [{
+                type: Input
             }], placeholderText: [{
                 type: Input
             }], placeholderIcon: [{
                 type: Input
+            }], autoUpload: [{
+                type: Input
+            }], uploadData: [{
+                type: Input
             }], fileChange: [{
                 type: Output
+            }], uploadSuccess: [{
+                type: Output
+            }], uploadError: [{
+                type: Output
+            }], uploadProgressChange: [{
+                type: Output
             }] } });
 
 class CideTextareaComponent {
@@ -3765,7 +4429,9 @@ class CideEleDataGridComponent {
         }
     }
     updatePageSize(value) {
-        this.pageSize.set(+value);
+        // Handle array case (shouldn't happen for page size, but just in case)
+        const pageSizeValue = Array.isArray(value) ? value[0] : value;
+        this.pageSize.set(+pageSizeValue);
         this.onPageSizeChange();
     }
     previousPage() {
@@ -3827,7 +4493,19 @@ class CideEleDataGridComponent {
         if (this.searchDebounceTimer) {
             clearTimeout(this.searchDebounceTimer);
         }
-        // Apply debounce for search
+        // If search is cleared (empty), trigger search immediately without debounce
+        if (!searchValue || searchValue.trim() === '') {
+            console.log('Search cleared, triggering immediate search event');
+            this.currentPage.set(1);
+            if (this.serverSidePagination) {
+                this.emitEvent('search', searchValue);
+            }
+            else {
+                this.onSearch();
+            }
+            return;
+        }
+        // Apply debounce for non-empty search queries
         const debounceMs = this.mergedConfig().search.debounceMs || 300;
         this.searchDebounceTimer = setTimeout(() => {
             // Only emit search event for server-side pagination
@@ -4493,7 +5171,7 @@ class CideEleDataGridComponent {
         return this.mergedConfig().scroll;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \n       [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-3 tw-py-2 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Search Input -->\n        <div class=\"tw-max-w-md\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\"\n            (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\"\n            [disabled]=\"loading() || isRefreshing()\"\n            leadingIcon=\"search\"\n            fill=\"outline\">\n          </cide-ele-input>\n        </div>\n        \n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <button cideEleButton \n                    variant=\"outline\" \n                    size=\"sm\" \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 \n                    variant=\"primary\" \n                    size=\"sm\" \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          </div>\n        }\n      </div>\n    </div>\n  }\n\n     <!-- Table Section -->\n   <div class=\"tw-overflow-x-auto tw-relative\"\n        [ngClass]=\"{\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n          'tw-overflow-y-auto': scrollConfig?.enabled,\n          'tw-max-h-full': scrollConfig?.enabled\n        }\"\n        [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n        [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n           [class.empty-table]=\"displayedData.length === 0\"\n           [ngClass]=\"{\n             'tw-table-striped': mergedConfig().striped,\n             'tw-border': mergedConfig().bordered,\n             'tw-table-sm': mergedConfig().compact\n           }\"\n           style=\"table-layout: fixed;\">\n      \n      <!-- Table Header -->\n      <thead class=\"tw-bg-gray-50\" \n            [ngClass]=\"[\n              mergedConfig().headerClass || '',\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\n            ]\">\n        <tr>\n          @for (column of columns; 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-truncate\"\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              ]\"\n              [title]=\"column.header\">\n              {{ column.header }}\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n          <!-- Skeleton Loading Rows -->\n          @for (skeletonItem of getSkeletonArray(); track $index) {\n            <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n              @for (column of columns; track column.key) {\n                <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\">\n                  <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n                </td>\n              }\n            </tr>\n          }\n        } @else {\n          @for (item of displayedData; track trackByFn($index, item)) {\n            <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\n                [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                ]\"\n                [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n                [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\n                (click)=\"onRowClick(item)\"\n                (keydown.enter)=\"onRowClick(item)\"\n                (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()\"\n                (dragstart)=\"onDragStart($event, item, $index)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, item, $index)\"\n                (dragend)=\"onDragEnd($event)\">\n              \n              @for (column of columns; track column.key) {\n                <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n                    [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                    ]\"\n                    [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n                    [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\n                    [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '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 \n                            variant=\"outline\"\n                            size=\"xs\"\n                            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()\"\n                            [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                            <cide-ele-icon \n                              class=\"tw-w-3 tw-h-3\"\n                              [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                              [class.tw-rotate-90]=\"isItemExpanded(item)\"\n                              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\"\n                             [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\n                                cideEleButton\n                                [variant]=\"action.variant || 'ghost'\"\n                                size=\"xs\"\n                                type=\"button\"\n                                (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                                [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()\"\n                                [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 \n                              [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                              [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                            </ng-container>\n                          }\n                          <!-- Default rendering -->\n                          @else {\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\"\n                         [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\n                            cideEleButton\n                            [variant]=\"action.variant || 'ghost'\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                            [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()\"\n                            [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 \n                          [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                          [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                        </ng-container>\n                      }\n                      <!-- Default rendering -->\n                      @else {\n                        <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n          }\n          \n          <!-- Empty State -->\n          @if (displayedData.length === 0) {\n            <tr class=\"tw-h-full\">\n              <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n                <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n                  <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" 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\"></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                    @if (searchQuery()) {\n                      No results match your search criteria.\n                    } @else {\n                      There are no items to display.\n                    }\n                  </p>\n                </div>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n     <!-- Pagination Section -->\n   @if (paginationConfig.enabled && totalItems() > 0) {\n     <div class=\"tw-px-3 tw-py-2 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n          [class.tw-opacity-60]=\"isRefreshing()\">\n      \n      <!-- Results Info and Page Size -->\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-4\">\n            <p class=\"tw-text-sm tw-text-gray-700\">\n              Showing {{ getItemRangeText() }} results\n            </p>\n            \n                         <!-- Page Size Selector -->\n             <div class=\"tw-flex tw-items-center tw-space-x-2\">\n               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-20 tw-relative\">\n                 <cide-ele-select\n                   [labelHide]=\"true\"\n                   [ngModel]=\"pageSize()\"\n                   (ngModelChange)=\"updatePageSize($event)\"\n                   [options]=\"getPageSizeOptions()\"\n                   [disabled]=\"isRefreshing()\"\n                   fill=\"outline\"\n                   size=\"sm\"\n                   class=\"tw-z-30\">\n                 </cide-ele-select>\n               </div>\n             </div>\n          </div>\n        }\n\n        <!-- Pagination Controls -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          \n          <!-- Previous/Next and Page Numbers -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            \n            <!-- First Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00AB\u00AB\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u2039\n            </button>\n            \n            <!-- Page Numbers -->\n            @for (page of getEnhancedPageNumbers(); track page) {\n              @if (page === '...') {\n                <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n              } @else {\n                <button\n                  cideEleButton\n                  [variant]=\"currentPage() === page ? 'primary' : 'outline'\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-px-3 tw-py-2 tw-text-sm tw-border tw-rounded-md tw-transition-colors\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white tw-border-blue-600': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u203A\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00BB\u00BB\n            </button>\n            \n          </div>\n\n          <!-- Quick Jump and Refresh -->\n          @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2 tw-border-l tw-border-gray-200 tw-pl-3\">\n              \n              <!-- Quick Jump -->\n              @if (paginationConfig.showQuickJump) {\n                                  <div class=\"tw-flex tw-items-center tw-space-x-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n                    <div class=\"tw-w-20\">\n                                              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                          [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n                          [disabled]=\"isRefreshing()\"\n                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    cideEleButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-px-3 tw-py-2 tw-text-sm tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  cideEleButton\n                  variant=\"outline\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"!tw-w-10 !tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-600 tw-bg-gray-100 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                  @if (isRefreshing()) {\n                    <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                      <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n                  } @else {\n                    <svg class=\"tw-h-4 tw-w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"></path>\n                    </svg>\n                  }\n                </button>\n              }\n            </div>\n          }\n          \n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px}.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:#f9fafb}.data-grid-container.tw-table-sm th,.data-grid-container.tw-table-sm td{padding:.5rem 1rem}.data-grid-container tbody tr:hover{background-color:#f3f4f6}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#fffc;z-index:10}.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 .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 button{transition:all .15s ease-in-out}.data-grid-container .pagination-controls button:hover:not(:disabled){transform:translateY(-1px)}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed}.data-grid-container .pagination-controls button.active{box-shadow:0 2px 4px #3b82f64d}.data-grid-container .pagination-controls input[type=number]{transition:border-color .15s ease-in-out}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .status-badge{font-weight:500;letter-spacing:.025em}.data-grid-container .status-badge.active{background-color:#d1fae5;color:#065f46}.data-grid-container .status-badge.inactive{background-color:#fee2e2;color:#991b1b}.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 .empty-state{padding:3rem 1.5rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1rem;opacity:.4}.data-grid-container .empty-state h3{margin-bottom:.5rem}.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}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #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:#f8fafc;box-shadow:0 1px 3px #0000001a}.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:10}.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:#f3f4f6;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:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!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.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", "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"], 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]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \n       [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-3 tw-py-2 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Search Input -->\n        <div class=\"tw-max-w-md\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\"\n            (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\"\n            [disabled]=\"loading() || isRefreshing()\"\n            leadingIcon=\"search\"\n            fill=\"outline\">\n          </cide-ele-input>\n        </div>\n        \n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <button cideEleButton \n                    variant=\"outline\" \n                    size=\"sm\" \n                    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 \n                    variant=\"primary\" \n                    size=\"sm\" \n                    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          </div>\n        }\n      </div>\n    </div>\n  }\n\n     <!-- Table Section -->\n   <div class=\"tw-overflow-x-auto tw-relative\"\n        [ngClass]=\"{\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n          'tw-overflow-y-auto': scrollConfig?.enabled,\n          'tw-max-h-full': scrollConfig?.enabled\n        }\"\n        [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n        [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n           [class.empty-table]=\"displayedData.length === 0\"\n           [ngClass]=\"{\n             'tw-table-striped': mergedConfig().striped,\n             'tw-border': mergedConfig().bordered,\n             'tw-table-sm': mergedConfig().compact\n           }\"\n           style=\"table-layout: fixed;\">\n      \n      <!-- Table Header -->\n      <thead class=\"tw-bg-gray-50\" \n            [ngClass]=\"[\n              mergedConfig().headerClass || '',\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\n            ]\">\n        <tr>\n          @for (column of columns; 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-truncate\"\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              ]\"\n              [title]=\"column.header\">\n              {{ column.header }}\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n          <!-- Skeleton Loading Rows -->\n          @for (skeletonItem of getSkeletonArray(); track $index) {\n            <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n              @for (column of columns; track column.key) {\n                <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\">\n                  <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n                </td>\n              }\n            </tr>\n          }\n        } @else {\n          @for (item of displayedData; track trackByFn($index, item)) {\n            <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\n                [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                ]\"\n                [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n                [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\n                (click)=\"onRowClick(item)\"\n                (keydown.enter)=\"onRowClick(item)\"\n                (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()\"\n                (dragstart)=\"onDragStart($event, item, $index)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, item, $index)\"\n                (dragend)=\"onDragEnd($event)\">\n              \n              @for (column of columns; track column.key) {\n                <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n                    [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                    ]\"\n                    [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n                    [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\n                    [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '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 \n                            variant=\"outline\"\n                            size=\"xs\"\n                            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()\"\n                            [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                            <cide-ele-icon \n                              class=\"tw-w-3 tw-h-3\"\n                              [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                              [class.tw-rotate-90]=\"isItemExpanded(item)\"\n                              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\"\n                             [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\n                                cideEleButton\n                                [variant]=\"action.variant || 'ghost'\"\n                                size=\"xs\"\n                                type=\"button\"\n                                (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                                [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()\"\n                                [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 \n                              [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                              [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                            </ng-container>\n                          }\n                          <!-- Default rendering -->\n                          @else {\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\"\n                         [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\n                            cideEleButton\n                            [variant]=\"action.variant || 'ghost'\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                            [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()\"\n                            [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 \n                          [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                          [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                        </ng-container>\n                      }\n                      <!-- Default rendering -->\n                      @else {\n                        <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n          }\n          \n          <!-- Empty State -->\n          @if (displayedData.length === 0) {\n            <tr class=\"tw-h-full\">\n              <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n                <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n                  <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" 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\"></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                    @if (searchQuery()) {\n                      No results match your search criteria.\n                    } @else {\n                      There are no items to display.\n                    }\n                  </p>\n                </div>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n     <!-- Pagination Section -->\n   @if (paginationConfig.enabled && totalItems() > 0) {\n     <div class=\"tw-px-3 tw-py-2 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n          [class.tw-opacity-60]=\"isRefreshing()\">\n      \n      <!-- Results Info and Page Size -->\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-4\">\n            <p class=\"tw-text-sm tw-text-gray-700\">\n              Showing {{ getItemRangeText() }} results\n            </p>\n            \n                         <!-- Page Size Selector -->\n             <div class=\"tw-flex tw-items-center tw-space-x-2\">\n               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-20 tw-relative\">\n                 <cide-ele-select\n                   [labelHide]=\"true\"\n                   [ngModel]=\"pageSize()\"\n                   (ngModelChange)=\"updatePageSize($event)\"\n                   [options]=\"getPageSizeOptions()\"\n                   [disabled]=\"isRefreshing()\"\n                   fill=\"outline\"\n                   size=\"sm\"\n                   class=\"tw-z-30\">\n                 </cide-ele-select>\n               </div>\n             </div>\n          </div>\n        }\n\n        <!-- Pagination Controls -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          \n          <!-- Previous/Next and Page Numbers -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            \n            <!-- First Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00AB\u00AB\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u2039\n            </button>\n            \n            <!-- Page Numbers -->\n            @for (page of getEnhancedPageNumbers(); track page) {\n              @if (page === '...') {\n                <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n              } @else {\n                <button\n                  cideEleButton\n                  [variant]=\"currentPage() === page ? 'primary' : 'outline'\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-px-3 tw-py-2 tw-text-sm tw-border tw-rounded-md tw-transition-colors\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white tw-border-blue-600': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u203A\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00BB\u00BB\n            </button>\n            \n          </div>\n\n          <!-- Quick Jump and Refresh -->\n          @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2 tw-border-l tw-border-gray-200 tw-pl-3\">\n              \n              <!-- Quick Jump -->\n              @if (paginationConfig.showQuickJump) {\n                                  <div class=\"tw-flex tw-items-center tw-space-x-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n                    <div class=\"tw-w-20\">\n                                              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                          [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n                          [disabled]=\"isRefreshing()\"\n                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    cideEleButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-px-3 tw-py-2 tw-text-sm tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  cideEleButton\n                  variant=\"outline\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"!tw-w-10 !tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-600 tw-bg-gray-100 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                  @if (isRefreshing()) {\n                    <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                      <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n                  } @else {\n                    <svg class=\"tw-h-4 tw-w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"></path>\n                    </svg>\n                  }\n                </button>\n              }\n            </div>\n          }\n          \n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px}.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:#f9fafb}.data-grid-container.tw-table-sm th,.data-grid-container.tw-table-sm td{padding:.5rem 1rem}.data-grid-container tbody tr:hover{background-color:#f3f4f6}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#fffc;z-index:10}.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 .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 button{transition:all .15s ease-in-out}.data-grid-container .pagination-controls button:hover:not(:disabled){transform:translateY(-1px)}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed}.data-grid-container .pagination-controls button.active{box-shadow:0 2px 4px #3b82f64d}.data-grid-container .pagination-controls input[type=number]{transition:border-color .15s ease-in-out}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .status-badge{font-weight:500;letter-spacing:.025em}.data-grid-container .status-badge.active{background-color:#d1fae5;color:#065f46}.data-grid-container .status-badge.inactive{background-color:#fee2e2;color:#991b1b}.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 .empty-state{padding:3rem 1.5rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1rem;opacity:.4}.data-grid-container .empty-state h3{margin-bottom:.5rem}.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}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #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:#f8fafc;box-shadow:0 1px 3px #0000001a}.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:10}.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:#f3f4f6;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:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!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.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", "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"], 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]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, decorators: [{
             type: Component,
@@ -4505,7 +5183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideSelectComponent,
                         CideIconComponent,
                         CideEleButtonComponent
-                    ], template: "  <!-- Data Grid Component -->\n  <div class=\"data-grid-container tw-bg-white tw-shadow tw-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \n       [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-3 tw-py-2 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Search Input -->\n        <div class=\"tw-max-w-md\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\"\n            (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\"\n            [disabled]=\"loading() || isRefreshing()\"\n            leadingIcon=\"search\"\n            fill=\"outline\">\n          </cide-ele-input>\n        </div>\n        \n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <button cideEleButton \n                    variant=\"outline\" \n                    size=\"sm\" \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 \n                    variant=\"primary\" \n                    size=\"sm\" \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          </div>\n        }\n      </div>\n    </div>\n  }\n\n     <!-- Table Section -->\n   <div class=\"tw-overflow-x-auto tw-relative\"\n        [ngClass]=\"{\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n          'tw-overflow-y-auto': scrollConfig?.enabled,\n          'tw-max-h-full': scrollConfig?.enabled\n        }\"\n        [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n        [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n           [class.empty-table]=\"displayedData.length === 0\"\n           [ngClass]=\"{\n             'tw-table-striped': mergedConfig().striped,\n             'tw-border': mergedConfig().bordered,\n             'tw-table-sm': mergedConfig().compact\n           }\"\n           style=\"table-layout: fixed;\">\n      \n      <!-- Table Header -->\n      <thead class=\"tw-bg-gray-50\" \n            [ngClass]=\"[\n              mergedConfig().headerClass || '',\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\n            ]\">\n        <tr>\n          @for (column of columns; 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-truncate\"\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              ]\"\n              [title]=\"column.header\">\n              {{ column.header }}\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n          <!-- Skeleton Loading Rows -->\n          @for (skeletonItem of getSkeletonArray(); track $index) {\n            <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n              @for (column of columns; track column.key) {\n                <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\">\n                  <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n                </td>\n              }\n            </tr>\n          }\n        } @else {\n          @for (item of displayedData; track trackByFn($index, item)) {\n            <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\n                [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                ]\"\n                [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n                [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\n                (click)=\"onRowClick(item)\"\n                (keydown.enter)=\"onRowClick(item)\"\n                (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()\"\n                (dragstart)=\"onDragStart($event, item, $index)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, item, $index)\"\n                (dragend)=\"onDragEnd($event)\">\n              \n              @for (column of columns; track column.key) {\n                <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n                    [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                    ]\"\n                    [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n                    [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\n                    [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '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 \n                            variant=\"outline\"\n                            size=\"xs\"\n                            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()\"\n                            [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                            <cide-ele-icon \n                              class=\"tw-w-3 tw-h-3\"\n                              [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                              [class.tw-rotate-90]=\"isItemExpanded(item)\"\n                              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\"\n                             [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\n                                cideEleButton\n                                [variant]=\"action.variant || 'ghost'\"\n                                size=\"xs\"\n                                type=\"button\"\n                                (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                                [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()\"\n                                [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 \n                              [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                              [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                            </ng-container>\n                          }\n                          <!-- Default rendering -->\n                          @else {\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\"\n                         [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\n                            cideEleButton\n                            [variant]=\"action.variant || 'ghost'\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                            [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()\"\n                            [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 \n                          [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                          [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                        </ng-container>\n                      }\n                      <!-- Default rendering -->\n                      @else {\n                        <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n          }\n          \n          <!-- Empty State -->\n          @if (displayedData.length === 0) {\n            <tr class=\"tw-h-full\">\n              <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n                <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n                  <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" 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\"></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                    @if (searchQuery()) {\n                      No results match your search criteria.\n                    } @else {\n                      There are no items to display.\n                    }\n                  </p>\n                </div>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n     <!-- Pagination Section -->\n   @if (paginationConfig.enabled && totalItems() > 0) {\n     <div class=\"tw-px-3 tw-py-2 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n          [class.tw-opacity-60]=\"isRefreshing()\">\n      \n      <!-- Results Info and Page Size -->\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-4\">\n            <p class=\"tw-text-sm tw-text-gray-700\">\n              Showing {{ getItemRangeText() }} results\n            </p>\n            \n                         <!-- Page Size Selector -->\n             <div class=\"tw-flex tw-items-center tw-space-x-2\">\n               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-20 tw-relative\">\n                 <cide-ele-select\n                   [labelHide]=\"true\"\n                   [ngModel]=\"pageSize()\"\n                   (ngModelChange)=\"updatePageSize($event)\"\n                   [options]=\"getPageSizeOptions()\"\n                   [disabled]=\"isRefreshing()\"\n                   fill=\"outline\"\n                   size=\"sm\"\n                   class=\"tw-z-30\">\n                 </cide-ele-select>\n               </div>\n             </div>\n          </div>\n        }\n\n        <!-- Pagination Controls -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          \n          <!-- Previous/Next and Page Numbers -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            \n            <!-- First Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00AB\u00AB\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u2039\n            </button>\n            \n            <!-- Page Numbers -->\n            @for (page of getEnhancedPageNumbers(); track page) {\n              @if (page === '...') {\n                <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n              } @else {\n                <button\n                  cideEleButton\n                  [variant]=\"currentPage() === page ? 'primary' : 'outline'\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-px-3 tw-py-2 tw-text-sm tw-border tw-rounded-md tw-transition-colors\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white tw-border-blue-600': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u203A\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00BB\u00BB\n            </button>\n            \n          </div>\n\n          <!-- Quick Jump and Refresh -->\n          @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2 tw-border-l tw-border-gray-200 tw-pl-3\">\n              \n              <!-- Quick Jump -->\n              @if (paginationConfig.showQuickJump) {\n                                  <div class=\"tw-flex tw-items-center tw-space-x-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n                    <div class=\"tw-w-20\">\n                                              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                          [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n                          [disabled]=\"isRefreshing()\"\n                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    cideEleButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-px-3 tw-py-2 tw-text-sm tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  cideEleButton\n                  variant=\"outline\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"!tw-w-10 !tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-600 tw-bg-gray-100 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                  @if (isRefreshing()) {\n                    <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                      <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n                  } @else {\n                    <svg class=\"tw-h-4 tw-w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"></path>\n                    </svg>\n                  }\n                </button>\n              }\n            </div>\n          }\n          \n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px}.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:#f9fafb}.data-grid-container.tw-table-sm th,.data-grid-container.tw-table-sm td{padding:.5rem 1rem}.data-grid-container tbody tr:hover{background-color:#f3f4f6}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#fffc;z-index:10}.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 .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 button{transition:all .15s ease-in-out}.data-grid-container .pagination-controls button:hover:not(:disabled){transform:translateY(-1px)}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed}.data-grid-container .pagination-controls button.active{box-shadow:0 2px 4px #3b82f64d}.data-grid-container .pagination-controls input[type=number]{transition:border-color .15s ease-in-out}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .status-badge{font-weight:500;letter-spacing:.025em}.data-grid-container .status-badge.active{background-color:#d1fae5;color:#065f46}.data-grid-container .status-badge.inactive{background-color:#fee2e2;color:#991b1b}.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 .empty-state{padding:3rem 1.5rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1rem;opacity:.4}.data-grid-container .empty-state h3{margin-bottom:.5rem}.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}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #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:#f8fafc;box-shadow:0 1px 3px #0000001a}.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:10}.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:#f3f4f6;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:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!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"] }]
+                    ], template: "  <!-- Data Grid Component -->\n  <div class=\"data-grid-container tw-bg-white tw-shadow tw-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \n       [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-3 tw-py-2 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Search Input -->\n        <div class=\"tw-max-w-md\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\"\n            (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\"\n            [disabled]=\"loading() || isRefreshing()\"\n            leadingIcon=\"search\"\n            fill=\"outline\">\n          </cide-ele-input>\n        </div>\n        \n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <button cideEleButton \n                    variant=\"outline\" \n                    size=\"sm\" \n                    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 \n                    variant=\"primary\" \n                    size=\"sm\" \n                    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          </div>\n        }\n      </div>\n    </div>\n  }\n\n     <!-- Table Section -->\n   <div class=\"tw-overflow-x-auto tw-relative\"\n        [ngClass]=\"{\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n          'tw-overflow-y-auto': scrollConfig?.enabled,\n          'tw-max-h-full': scrollConfig?.enabled\n        }\"\n        [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n        [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n           [class.empty-table]=\"displayedData.length === 0\"\n           [ngClass]=\"{\n             'tw-table-striped': mergedConfig().striped,\n             'tw-border': mergedConfig().bordered,\n             'tw-table-sm': mergedConfig().compact\n           }\"\n           style=\"table-layout: fixed;\">\n      \n      <!-- Table Header -->\n      <thead class=\"tw-bg-gray-50\" \n            [ngClass]=\"[\n              mergedConfig().headerClass || '',\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\n            ]\">\n        <tr>\n          @for (column of columns; 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-truncate\"\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              ]\"\n              [title]=\"column.header\">\n              {{ column.header }}\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n          <!-- Skeleton Loading Rows -->\n          @for (skeletonItem of getSkeletonArray(); track $index) {\n            <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n              @for (column of columns; track column.key) {\n                <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\">\n                  <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n                </td>\n              }\n            </tr>\n          }\n        } @else {\n          @for (item of displayedData; track trackByFn($index, item)) {\n            <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\n                [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                ]\"\n                [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n                [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\n                (click)=\"onRowClick(item)\"\n                (keydown.enter)=\"onRowClick(item)\"\n                (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()\"\n                (dragstart)=\"onDragStart($event, item, $index)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, item, $index)\"\n                (dragend)=\"onDragEnd($event)\">\n              \n              @for (column of columns; track column.key) {\n                <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n                    [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                    ]\"\n                    [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n                    [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\n                    [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '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 \n                            variant=\"outline\"\n                            size=\"xs\"\n                            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()\"\n                            [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                            <cide-ele-icon \n                              class=\"tw-w-3 tw-h-3\"\n                              [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                              [class.tw-rotate-90]=\"isItemExpanded(item)\"\n                              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\"\n                             [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\n                                cideEleButton\n                                [variant]=\"action.variant || 'ghost'\"\n                                size=\"xs\"\n                                type=\"button\"\n                                (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                                [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()\"\n                                [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 \n                              [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                              [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                            </ng-container>\n                          }\n                          <!-- Default rendering -->\n                          @else {\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\"\n                         [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\n                            cideEleButton\n                            [variant]=\"action.variant || 'ghost'\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                            [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()\"\n                            [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 \n                          [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                          [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                        </ng-container>\n                      }\n                      <!-- Default rendering -->\n                      @else {\n                        <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n          }\n          \n          <!-- Empty State -->\n          @if (displayedData.length === 0) {\n            <tr class=\"tw-h-full\">\n              <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n                <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n                  <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" 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\"></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                    @if (searchQuery()) {\n                      No results match your search criteria.\n                    } @else {\n                      There are no items to display.\n                    }\n                  </p>\n                </div>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n     <!-- Pagination Section -->\n   @if (paginationConfig.enabled && totalItems() > 0) {\n     <div class=\"tw-px-3 tw-py-2 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n          [class.tw-opacity-60]=\"isRefreshing()\">\n      \n      <!-- Results Info and Page Size -->\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-4\">\n            <p class=\"tw-text-sm tw-text-gray-700\">\n              Showing {{ getItemRangeText() }} results\n            </p>\n            \n                         <!-- Page Size Selector -->\n             <div class=\"tw-flex tw-items-center tw-space-x-2\">\n               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-20 tw-relative\">\n                 <cide-ele-select\n                   [labelHide]=\"true\"\n                   [ngModel]=\"pageSize()\"\n                   (ngModelChange)=\"updatePageSize($event)\"\n                   [options]=\"getPageSizeOptions()\"\n                   [disabled]=\"isRefreshing()\"\n                   fill=\"outline\"\n                   size=\"sm\"\n                   class=\"tw-z-30\">\n                 </cide-ele-select>\n               </div>\n             </div>\n          </div>\n        }\n\n        <!-- Pagination Controls -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          \n          <!-- Previous/Next and Page Numbers -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            \n            <!-- First Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00AB\u00AB\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u2039\n            </button>\n            \n            <!-- Page Numbers -->\n            @for (page of getEnhancedPageNumbers(); track page) {\n              @if (page === '...') {\n                <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n              } @else {\n                <button\n                  cideEleButton\n                  [variant]=\"currentPage() === page ? 'primary' : 'outline'\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-px-3 tw-py-2 tw-text-sm tw-border tw-rounded-md tw-transition-colors\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white tw-border-blue-600': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u203A\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00BB\u00BB\n            </button>\n            \n          </div>\n\n          <!-- Quick Jump and Refresh -->\n          @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2 tw-border-l tw-border-gray-200 tw-pl-3\">\n              \n              <!-- Quick Jump -->\n              @if (paginationConfig.showQuickJump) {\n                                  <div class=\"tw-flex tw-items-center tw-space-x-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n                    <div class=\"tw-w-20\">\n                                              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                          [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n                          [disabled]=\"isRefreshing()\"\n                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    cideEleButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-px-3 tw-py-2 tw-text-sm tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  cideEleButton\n                  variant=\"outline\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"!tw-w-10 !tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-600 tw-bg-gray-100 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                  @if (isRefreshing()) {\n                    <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                      <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n                  } @else {\n                    <svg class=\"tw-h-4 tw-w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"></path>\n                    </svg>\n                  }\n                </button>\n              }\n            </div>\n          }\n          \n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px}.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:#f9fafb}.data-grid-container.tw-table-sm th,.data-grid-container.tw-table-sm td{padding:.5rem 1rem}.data-grid-container tbody tr:hover{background-color:#f3f4f6}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#fffc;z-index:10}.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 .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 button{transition:all .15s ease-in-out}.data-grid-container .pagination-controls button:hover:not(:disabled){transform:translateY(-1px)}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed}.data-grid-container .pagination-controls button.active{box-shadow:0 2px 4px #3b82f64d}.data-grid-container .pagination-controls input[type=number]{transition:border-color .15s ease-in-out}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .status-badge{font-weight:500;letter-spacing:.025em}.data-grid-container .status-badge.active{background-color:#d1fae5;color:#065f46}.data-grid-container .status-badge.inactive{background-color:#fee2e2;color:#991b1b}.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 .empty-state{padding:3rem 1.5rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1rem;opacity:.4}.data-grid-container .empty-state h3{margin-bottom:.5rem}.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}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #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:#f8fafc;box-shadow:0 1px 3px #0000001a}.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:10}.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:#f3f4f6;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:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!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"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], templateRenderers: [{
@@ -4764,6 +5442,19 @@ class CideEleDropdownComponent {
         }
         return 176; // Default width
     }
+    getSafeConfig() {
+        return {
+            triggerIcon: 'more_vert',
+            triggerSize: 'sm',
+            menuWidth: 'tw-w-44',
+            menuPosition: 'auto',
+            showArrow: false,
+            offsetX: 0,
+            offsetY: 4,
+            usePortal: true, // Default to portal mode
+            ...this.config // Override with provided config
+        };
+    }
     getEstimatedMenuHeight() {
         // Estimate height based on number of items
         const itemHeight = 40; // Approximate height per item
@@ -4771,7 +5462,9 @@ class CideEleDropdownComponent {
         return (this.items.length * itemHeight) + padding;
     }
     toggleDropdown(event) {
-        console.log('🔵 toggleDropdown called');
+        console.log('🔵 toggleDropdown called, current state:', this.isOpen());
+        console.log('🔵 Items:', this.items);
+        console.log('🔵 Config:', this.getSafeConfig());
         event.stopPropagation();
         if (!this.isOpen()) {
             this.openDropdown();
@@ -4783,14 +5476,22 @@ class CideEleDropdownComponent {
         }
     }
     openDropdown() {
+        console.log('🔵 openDropdown called');
+        console.log('🔵 Items:', this.items);
+        console.log('🔵 Config:', this.getSafeConfig());
+        console.log('🔵 Template available:', !!this.dropdownMenuTemplate());
         // Calculate position before opening
         const newPosition = this.calculatePosition();
         this.currentPosition.set(newPosition);
         this.isOpen.set(true);
         // Create portal if usePortal is enabled
-        if (this.config.usePortal && this.dropdownMenuTemplate()) {
+        if (this.getSafeConfig().usePortal && this.dropdownMenuTemplate()) {
+            console.log('🔵 Creating portal dropdown...');
             this.createPortalDropdown();
         }
+        else {
+            console.log('🔵 Not creating portal - usePortal:', this.getSafeConfig().usePortal, 'template:', !!this.dropdownMenuTemplate());
+        }
         // Register with dropdown manager
         const dropdownInstance = {
             id: this.dropdownId,
@@ -4828,22 +5529,37 @@ class CideEleDropdownComponent {
             console.warn('🔵 Dropdown menu template not found for portal creation');
             return;
         }
+        console.log('🔵 Creating portal dropdown with items:', this.items);
+        console.log('🔵 Trigger element:', triggerElement);
+        console.log('🔵 Template:', template);
+        console.log('🔵 Config:', this.config);
         try {
-            this.portalService.createTemplatePortal(this.portalId, {
+            const safeConfig = this.getSafeConfig();
+            const portalElement = this.portalService.createTemplatePortal(this.portalId, {
                 triggerElement,
                 template,
                 viewContainerRef: this.viewContainerRef,
-                context: { $implicit: this.items },
+                context: { items: this.items },
                 className: `dropdown-menu tw-bg-white tw-shadow-lg tw-border tw-border-gray-200 tw-rounded-md tw-text-black ${this.getMenuClasses()}`,
                 position: this.currentPosition().vertical === 'top' ? 'top' : 'bottom',
                 align: this.currentPosition().horizontal === 'left' ? 'left' : 'right',
-                offsetX: this.config.offsetX || 0,
-                offsetY: this.config.offsetY || 0,
-                minWidth: this.getMenuWidth(),
+                offsetX: safeConfig.offsetX || 0,
+                offsetY: safeConfig.offsetY || 4,
+                minWidth: safeConfig.minWidth || this.getMenuWidth(),
+                maxHeight: 300,
                 closeOnClickOutside: true,
                 closeOnEscape: true
             });
             console.log('🔵 Portal dropdown created:', this.portalId);
+            console.log('🔵 Portal element:', portalElement);
+            console.log('🔵 Portal element styles:', {
+                position: portalElement.style.position,
+                top: portalElement.style.top,
+                left: portalElement.style.left,
+                zIndex: portalElement.style.zIndex,
+                display: portalElement.style.display,
+                visibility: portalElement.style.visibility
+            });
         }
         catch (error) {
             console.error('🔵 Failed to create portal dropdown:', error);
@@ -4863,7 +5579,7 @@ class CideEleDropdownComponent {
         setTimeout(() => {
             this.isOpen.set(false);
             // Destroy portal if it exists
-            if (this.config.usePortal) {
+            if (this.getSafeConfig().usePortal) {
                 this.destroyPortalDropdown();
             }
             this.dropdownManager.unregisterDropdown(this.dropdownId);
@@ -4898,7 +5614,7 @@ class CideEleDropdownComponent {
     }
     ngOnDestroy() {
         // Cleanup portal if it exists
-        if (this.config.usePortal) {
+        if (this.getSafeConfig().usePortal) {
             this.destroyPortalDropdown();
         }
         // Close dropdown and unregister
@@ -4934,7 +5650,7 @@ class CideEleDropdownComponent {
       </button>
       
       <!-- Dropdown Menu (Non-Portal) -->
-      @if (isOpen() && !config.usePortal) {
+      @if (isOpen() && !getSafeConfig().usePortal) {
         <div 
           #dropdownMenu
           class="dropdown-menu tw-absolute tw-z-50 tw-bg-white tw-shadow-lg tw-border tw-border-gray-200 tw-rounded-md tw-text-black"
@@ -4948,15 +5664,15 @@ class CideEleDropdownComponent {
     </div>
    
     <!-- Dropdown Menu Template (for both portal and non-portal) -->
-    <ng-template #dropdownMenuTemplate let-items>
+    <ng-template #dropdownMenuTemplate let-context="context">
       <!-- Custom Menu Template -->
       @if (menuTemplate) {
-        <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: items }">
+        <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: context?.items }">
         </ng-container>
       } @else {
         <!-- Default Menu -->
         <div class="tw-py-1" role="none">
-          @for (item of items; track item.id) {
+          @for (item of context?.items; track item.id) {
             @if (item.divider) {
               <!-- Divider Item -->
               <hr class="tw-border-t tw-border-gray-200 tw-my-1" role="separator">
@@ -5018,7 +5734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
       </button>
       
       <!-- Dropdown Menu (Non-Portal) -->
-      @if (isOpen() && !config.usePortal) {
+      @if (isOpen() && !getSafeConfig().usePortal) {
         <div 
           #dropdownMenu
           class="dropdown-menu tw-absolute tw-z-50 tw-bg-white tw-shadow-lg tw-border tw-border-gray-200 tw-rounded-md tw-text-black"
@@ -5032,15 +5748,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
     </div>
    
     <!-- Dropdown Menu Template (for both portal and non-portal) -->
-    <ng-template #dropdownMenuTemplate let-items>
+    <ng-template #dropdownMenuTemplate let-context="context">
       <!-- Custom Menu Template -->
       @if (menuTemplate) {
-        <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: items }">
+        <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: context?.items }">
         </ng-container>
       } @else {
         <!-- Default Menu -->
         <div class="tw-py-1" role="none">
-          @for (item of items; track item.id) {
+          @for (item of context?.items; track item.id) {
             @if (item.divider) {
               <!-- Divider Item -->
               <hr class="tw-border-t tw-border-gray-200 tw-my-1" role="separator">
@@ -5258,199 +5974,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class NotificationService {
-    notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
-    maxNotifications = 5; // Maximum notifications to show at once
-    // Computed signals
-    activeNotifications = computed(() => this.notifications().filter(n => n.isVisible), ...(ngDevMode ? [{ debugName: "activeNotifications" }] : []));
-    constructor() { }
-    /**
-     * Show a success notification
-     */
-    success(message, options) {
-        return this.show({
-            message,
-            type: 'success',
-            icon: 'check_circle',
-            duration: 3000,
-            ...options
-        });
-    }
-    /**
-     * Show an error notification
-     */
-    error(message, options) {
-        return this.show({
-            message,
-            type: 'error',
-            icon: 'error',
-            duration: 5000,
-            ...options
-        });
-    }
-    /**
-     * Show a warning notification
-     */
-    warning(message, options) {
-        return this.show({
-            message,
-            type: 'warning',
-            icon: 'warning',
-            duration: 4000,
-            ...options
-        });
-    }
-    /**
-     * Show an info notification
-     */
-    info(message, options) {
-        return this.show({
-            message,
-            type: 'info',
-            icon: 'info',
-            duration: 3000,
-            ...options
-        });
-    }
-    /**
-     * Show a notification with undo functionality
-     */
-    showWithUndo(message, undoAction, options) {
-        return this.show({
-            message,
-            type: 'info',
-            icon: 'info',
-            duration: 8000,
-            showUndo: true,
-            undoAction,
-            undoText: 'Undo',
-            ...options
-        });
-    }
-    /**
-     * Show a notification for reversible destructive actions
-     */
-    showReversibleAction(action, itemName, undoAction, options) {
-        return this.showWithUndo(`${action} "${itemName}"`, undoAction, {
-            type: 'warning',
-            icon: 'delete',
-            title: `${action} completed`,
-            ...options
-        });
-    }
-    /**
-     * Show a notification for background tasks
-     */
-    showBackgroundTask(taskName, isComplete = true, options) {
-        return this.show({
-            message: isComplete ? `${taskName} completed successfully` : `${taskName} in progress...`,
-            type: isComplete ? 'success' : 'info',
-            icon: isComplete ? 'check_circle' : 'sync',
-            duration: isComplete ? 3000 : 0, // Don't auto-dismiss for in-progress tasks
-            ...options
-        });
-    }
-    /**
-     * Core show method
-     */
-    show(options) {
-        const notification = {
-            id: this.generateId(),
-            message: options.message,
-            type: options.type || 'info',
-            duration: options.duration || 3000,
-            showUndo: options.showUndo || false,
-            undoAction: options.undoAction,
-            undoText: options.undoText || 'Undo',
-            icon: options.icon || this.getDefaultIcon(options.type || 'info'),
-            title: options.title,
-            timestamp: Date.now(),
-            isVisible: true
-        };
-        this.addNotification(notification);
-        return notification.id;
-    }
-    /**
-     * Remove a specific notification
-     */
-    remove(id) {
-        this.notifications.update(notifications => notifications.map(n => n.id === id ? { ...n, isVisible: false } : n));
-        // Remove from array after animation
-        setTimeout(() => {
-            this.notifications.update(notifications => notifications.filter(n => n.id !== id));
-        }, 300);
-    }
-    /**
-     * Remove all notifications
-     */
-    clearAll() {
-        this.notifications.update(notifications => notifications.map(n => ({ ...n, isVisible: false })));
-        setTimeout(() => {
-            this.notifications.set([]);
-        }, 300);
-    }
-    /**
-     * Execute undo action for a notification
-     */
-    executeUndo(id) {
-        const notification = this.notifications().find(n => n.id === id);
-        if (notification && notification.undoAction) {
-            notification.undoAction();
-            this.remove(id);
-        }
-    }
-    // Internal methods
-    addNotification(notification) {
-        this.notifications.update(notifications => {
-            const newNotifications = [...notifications, notification];
-            // Limit the number of visible notifications
-            if (newNotifications.length > this.maxNotifications) {
-                // Remove oldest notifications
-                const toRemove = newNotifications.length - this.maxNotifications;
-                for (let i = 0; i < toRemove; i++) {
-                    if (newNotifications[i]) {
-                        newNotifications[i] = { ...newNotifications[i], isVisible: false };
-                    }
-                }
-            }
-            return newNotifications;
-        });
-        // Auto-remove after duration (if not 0)
-        if (notification.duration > 0) {
-            setTimeout(() => {
-                this.remove(notification.id);
-            }, notification.duration);
-        }
-    }
-    generateId() {
-        return `notification-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    getDefaultIcon(type) {
-        const iconMap = {
-            success: 'check_circle',
-            error: 'error',
-            warning: 'warning',
-            info: 'info'
-        };
-        return iconMap[type];
-    }
-    // Public getters for components
-    getNotifications() {
-        return this.notifications;
-    }
-    getActiveNotifications() {
-        return this.activeNotifications;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
 class CideEleConfirmationModalComponent {
     // Modern Angular 20+ dependency injection
     confirmationService = inject(ConfirmationService);
@@ -5707,13 +6230,23 @@ class CideEleToastNotificationComponent {
         
         <!-- Progress Bar -->
         <div 
-          *ngIf="notification.duration > 0"
+          *ngIf="notification.duration > 0 && !notification.showProgress"
           class="toast-progress"
           [style.animation-duration]="notification.duration + 'ms'">
         </div>
+        
+        <!-- Custom Progress Bar -->
+        <div 
+          *ngIf="notification.showProgress"
+          class="toast-custom-progress">
+          <div 
+            class="toast-custom-progress-bar"
+            [style.width.%]="notification.progress || 0">
+          </div>
+        </div>
       </div>
     </div>
-  `, isInline: true, styles: [".toast-container{position:fixed;top:80px;right:20px;z-index:9990;display:flex;flex-direction:column;gap:12px;max-width:400px;width:100%}.toast-notification{background:#fff;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid #e5e7eb;overflow:hidden;position:relative;animation:slideInRight .3s ease-out}.toast-notification.success{border-left:4px solid #16a34a}.toast-notification.error{border-left:4px solid #dc2626}.toast-notification.warning{border-left:4px solid #d97706}.toast-notification.info{border-left:4px solid #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:#f0fdf4;color:#16a34a}.toast-icon.error{background-color:#fef2f2;color:#dc2626}.toast-icon.warning{background-color:#fffbeb;color:#d97706}.toast-icon.info{background-color:#eff6ff;color:#2563eb}.toast-text{flex:1;min-width:0}.toast-title{font-size:14px;font-weight:600;color:#111827;margin-bottom:4px;line-height:1.4}.toast-message{font-size:14px;color:#6b7280;line-height:1.4}.toast-close{background:none;border:none;color:#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:#f3f4f6;color:#6b7280}.toast-actions{padding:0 16px 16px;display:flex;justify-content:flex-end}.toast-undo-btn{background:none;border:none;color:#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:#eff6ff}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background-color:#e5e7eb;animation:progressShrink linear forwards}.toast-notification.success .toast-progress{background-color:#16a34a}.toast-notification.error .toast-progress{background-color:#dc2626}.toast-notification.warning .toast-progress{background-color:#d97706}.toast-notification.info .toast-progress{background-color:#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{top:80px;right:10px;left:10px;max-width:none}.toast-notification{border-radius:6px}.toast-content{padding:12px}.toast-actions{padding:0 12px 12px}}.toast-close:focus,.toast-undo-btn:focus{outline:2px solid #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:80px;right:20px;z-index:9990;display:flex;flex-direction:column;gap:12px;max-width:400px;width:100%}.toast-notification{background:#fff;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid #e5e7eb;overflow:hidden;position:relative;animation:slideInRight .3s ease-out}.toast-notification.success{border-left:4px solid #16a34a}.toast-notification.error{border-left:4px solid #dc2626}.toast-notification.warning{border-left:4px solid #d97706}.toast-notification.info{border-left:4px solid #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:#f0fdf4;color:#16a34a}.toast-icon.error{background-color:#fef2f2;color:#dc2626}.toast-icon.warning{background-color:#fffbeb;color:#d97706}.toast-icon.info{background-color:#eff6ff;color:#2563eb}.toast-text{flex:1;min-width:0}.toast-title{font-size:14px;font-weight:600;color:#111827;margin-bottom:4px;line-height:1.4}.toast-message{font-size:14px;color:#6b7280;line-height:1.4}.toast-close{background:none;border:none;color:#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:#f3f4f6;color:#6b7280}.toast-actions{padding:0 16px 16px;display:flex;justify-content:flex-end}.toast-undo-btn{background:none;border:none;color:#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:#eff6ff}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background-color:#e5e7eb;animation:progressShrink linear forwards}.toast-notification.success .toast-progress{background-color:#16a34a}.toast-notification.error .toast-progress{background-color:#dc2626}.toast-notification.warning .toast-progress{background-color:#d97706}.toast-notification.info .toast-progress{background-color:#2563eb}.toast-custom-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background-color:#e5e7eb;overflow:hidden}.toast-custom-progress-bar{height:100%;background-color:#2563eb;transition:width .3s ease;border-radius:0 3px 0 0}.toast-notification.success .toast-custom-progress-bar{background-color:#16a34a}.toast-notification.error .toast-custom-progress-bar{background-color:#dc2626}.toast-notification.warning .toast-custom-progress-bar{background-color:#d97706}.toast-notification.info .toast-custom-progress-bar{background-color:#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{top:80px;right:10px;left:10px;max-width:none}.toast-notification{border-radius:6px}.toast-content{padding:12px}.toast-actions{padding:0 12px 12px}}.toast-close:focus,.toast-undo-btn:focus{outline:2px solid #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: [
         // Add animations here if needed
         ] });
 }
@@ -5769,15 +6302,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
         
         <!-- Progress Bar -->
         <div 
-          *ngIf="notification.duration > 0"
+          *ngIf="notification.duration > 0 && !notification.showProgress"
           class="toast-progress"
           [style.animation-duration]="notification.duration + 'ms'">
         </div>
+        
+        <!-- Custom Progress Bar -->
+        <div 
+          *ngIf="notification.showProgress"
+          class="toast-custom-progress">
+          <div 
+            class="toast-custom-progress-bar"
+            [style.width.%]="notification.progress || 0">
+          </div>
+        </div>
       </div>
     </div>
   `, animations: [
                     // Add animations here if needed
-                    ], styles: [".toast-container{position:fixed;top:80px;right:20px;z-index:9990;display:flex;flex-direction:column;gap:12px;max-width:400px;width:100%}.toast-notification{background:#fff;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid #e5e7eb;overflow:hidden;position:relative;animation:slideInRight .3s ease-out}.toast-notification.success{border-left:4px solid #16a34a}.toast-notification.error{border-left:4px solid #dc2626}.toast-notification.warning{border-left:4px solid #d97706}.toast-notification.info{border-left:4px solid #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:#f0fdf4;color:#16a34a}.toast-icon.error{background-color:#fef2f2;color:#dc2626}.toast-icon.warning{background-color:#fffbeb;color:#d97706}.toast-icon.info{background-color:#eff6ff;color:#2563eb}.toast-text{flex:1;min-width:0}.toast-title{font-size:14px;font-weight:600;color:#111827;margin-bottom:4px;line-height:1.4}.toast-message{font-size:14px;color:#6b7280;line-height:1.4}.toast-close{background:none;border:none;color:#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:#f3f4f6;color:#6b7280}.toast-actions{padding:0 16px 16px;display:flex;justify-content:flex-end}.toast-undo-btn{background:none;border:none;color:#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:#eff6ff}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background-color:#e5e7eb;animation:progressShrink linear forwards}.toast-notification.success .toast-progress{background-color:#16a34a}.toast-notification.error .toast-progress{background-color:#dc2626}.toast-notification.warning .toast-progress{background-color:#d97706}.toast-notification.info .toast-progress{background-color:#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{top:80px;right:10px;left:10px;max-width:none}.toast-notification{border-radius:6px}.toast-content{padding:12px}.toast-actions{padding:0 12px 12px}}.toast-close:focus,.toast-undo-btn:focus{outline:2px solid #2563eb;outline-offset:2px}\n"] }]
+                    ], styles: [".toast-container{position:fixed;top:80px;right:20px;z-index:9990;display:flex;flex-direction:column;gap:12px;max-width:400px;width:100%}.toast-notification{background:#fff;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid #e5e7eb;overflow:hidden;position:relative;animation:slideInRight .3s ease-out}.toast-notification.success{border-left:4px solid #16a34a}.toast-notification.error{border-left:4px solid #dc2626}.toast-notification.warning{border-left:4px solid #d97706}.toast-notification.info{border-left:4px solid #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:#f0fdf4;color:#16a34a}.toast-icon.error{background-color:#fef2f2;color:#dc2626}.toast-icon.warning{background-color:#fffbeb;color:#d97706}.toast-icon.info{background-color:#eff6ff;color:#2563eb}.toast-text{flex:1;min-width:0}.toast-title{font-size:14px;font-weight:600;color:#111827;margin-bottom:4px;line-height:1.4}.toast-message{font-size:14px;color:#6b7280;line-height:1.4}.toast-close{background:none;border:none;color:#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:#f3f4f6;color:#6b7280}.toast-actions{padding:0 16px 16px;display:flex;justify-content:flex-end}.toast-undo-btn{background:none;border:none;color:#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:#eff6ff}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background-color:#e5e7eb;animation:progressShrink linear forwards}.toast-notification.success .toast-progress{background-color:#16a34a}.toast-notification.error .toast-progress{background-color:#dc2626}.toast-notification.warning .toast-progress{background-color:#d97706}.toast-notification.info .toast-progress{background-color:#2563eb}.toast-custom-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background-color:#e5e7eb;overflow:hidden}.toast-custom-progress-bar{height:100%;background-color:#2563eb;transition:width .3s ease;border-radius:0 3px 0 0}.toast-notification.success .toast-custom-progress-bar{background-color:#16a34a}.toast-notification.error .toast-custom-progress-bar{background-color:#dc2626}.toast-notification.warning .toast-custom-progress-bar{background-color:#d97706}.toast-notification.info .toast-custom-progress-bar{background-color:#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{top:80px;right:10px;left:10px;max-width:none}.toast-notification{border-radius:6px}.toast-content{padding:12px}.toast-actions{padding:0 12px 12px}}.toast-close:focus,.toast-undo-btn:focus{outline:2px solid #2563eb;outline-offset:2px}\n"] }]
         }] });
 
 class CideEleGlobalNotificationsComponent {
@@ -6331,5 +6874,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileInputComponent, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, DEFAULT_GRID_CONFIG, DropdownManagerService, NotificationService, TooltipDirective };
+export { CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileInputComponent, CideEleFileManagerService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, DEFAULT_GRID_CONFIG, DropdownManagerService, NotificationService, TooltipDirective };
 //# sourceMappingURL=cloud-ide-element.mjs.map