cloud-ide-element 1.0.46 → 1.0.52

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();
             }
         }
@@ -1754,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 = '';
@@ -1777,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');
     }
@@ -1795,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,
@@ -1844,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) {
@@ -1858,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
@@ -1869,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() {
@@ -2077,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);
@@ -2099,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;
@@ -2176,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,
@@ -2191,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]
@@ -2329,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;
@@ -2340,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 = [];
@@ -2373,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;
@@ -2381,6 +2913,86 @@ 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) => {
+                // Clear progress interval
+                if (this.progressInterval) {
+                    clearInterval(this.progressInterval);
+                    this.progressInterval = null;
+                }
+                // Complete the progress
+                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);
+                // Clear progress interval
+                if (this.progressInterval) {
+                    clearInterval(this.progressInterval);
+                    this.progressInterval = null;
+                }
+                // 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);
+            }
+        });
+    }
+    progressInterval = null;
+    simulateProgress() {
+        this.progressInterval = setInterval(() => {
+            if (this.uploadProgress < 95 && this.isUploading) { // Continue until 95% and still uploading
+                this.uploadProgress += Math.random() * 5; // 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 if (this.uploadProgress >= 95) {
+                // Stop at 95% and wait for actual API response
+                clearInterval(this.progressInterval);
+                this.progressInterval = null;
+            }
+        }, 400); // Slightly slower updates
+    }
     generatePreviews() {
         // Clear existing previews
         this.clearPreviews();
@@ -2437,6 +3049,16 @@ class CideEleFileInputComponent {
     ngOnDestroy() {
         // Clean up preview URLs to prevent memory leaks
         this.clearPreviews();
+        // Clean up progress interval
+        if (this.progressInterval) {
+            clearInterval(this.progressInterval);
+            this.progressInterval = null;
+        }
+        // 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);
@@ -2451,23 +3073,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: [{
@@ -2488,12 +3110,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 {
@@ -3878,7 +4512,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
@@ -4815,6 +5461,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
@@ -4822,7 +5481,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();
@@ -4834,14 +5495,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,
@@ -4879,22 +5548,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);
@@ -4914,7 +5598,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);
@@ -4949,7 +5633,7 @@ class CideEleDropdownComponent {
     }
     ngOnDestroy() {
         // Cleanup portal if it exists
-        if (this.config.usePortal) {
+        if (this.getSafeConfig().usePortal) {
             this.destroyPortalDropdown();
         }
         // Close dropdown and unregister
@@ -4985,7 +5669,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"
@@ -4999,15 +5683,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">
@@ -5069,7 +5753,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"
@@ -5083,15 +5767,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">
@@ -5309,199 +5993,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);
@@ -5758,13 +6249,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
         ] });
 }
@@ -5820,15 +6321,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 {
@@ -6382,5 +6893,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