cloud-ide-element 1.0.6 → 1.0.8

package/fesm2022/cloud-ide-element.mjs

@@ -451,7 +451,7 @@ class CideInputComponent {
                 useExisting: forwardRef(() => CideInputComponent),
             },
             CapitalizePipe
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-input\">\r\n    <!------------------------------------------TEXT | PASSWORD------------------------------------------>\r\n    <div *ngIf=\"type === 'text' || type === 'number' || type === 'password'\">\r\n        <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n                'cide-element-size-xxs': (size === '2xs'),\r\n                'cide-element-size-xs': (size === 'xs'),\r\n                'cide-element-size-sm': (size === 'sm'),\r\n                'cide-element-size-md': (size === 'md'),\r\n                'cide-element-size-lg': (size === 'lg'),\r\n                'cide-element-leading-icon': leadingIcon,\r\n                'cide-element-trailing-icon': trailingIconInternal,\r\n                'cide-element-clear-input': clearInput,\r\n                'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n                'cide-element-input-label-start': (labelDir === 'start'),\r\n                'cide-element-input-label-end': (labelDir === 'end'),\r\n                'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n                'cide-element-input-label-less': (!label || labelHide),\r\n                'cide-element-style-outline': (fill === 'outline'),\r\n                'cide-element-style-solid': (fill === 'solid'),\r\n                'cide-element-style-standard': (fill === 'standard'),\r\n                'cide-element-input-number': (type === 'number')\r\n            }\">\r\n            <!-- label -->\r\n            <label [for]=\"id\" class=\"cide-input-label\" *ngIf=\"label && !labelHide\">{{label}}</label>\r\n\r\n            <!-- all one line elemets which dose not affect with label and error text -->\r\n            <div class=\"cide-element-input-wrapper\">\r\n                <!-- Leading Icon -->\r\n                <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\r\n                    <span\r\n                        class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n                </span>\r\n\r\n                <!-- Traling icon -->\r\n                <span class=\"tw-absolute cide-input-trailing-icon -tw-bottom-1 tw-select-none tw-right-0\"\r\n                    *ngIf=\"trailingIconInternal\">\r\n                    <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n                        [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n                        (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n                </span>\r\n\r\n                <!-- Clear -->\r\n                <button class=\"cide-input-clear\"\r\n                    *ngIf=\"clearInput && ngModel\" (click)=\"ClearInputValue()\">\r\n                    <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n                </button>\r\n\r\n                <!-- Input -->\r\n                <input [placeholder]=\"placeholder\" [id]=\"id\"\r\n                    [ngClass]=\"[((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md '), (!leadingIcon ? 'tw-pl-1' : ''), (trailingIconInternal ? 'tw-pr-8': ''), (!trailingIconInternal ? 'tw-pr-1' : ''), ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')), (labelHide ? '!tw-mt-0' : '')]\"\r\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n                    [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\"\r\n                    class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n            </div>\r\n            <!-- error text / helper text -->\r\n            <span *ngIf=\"(errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText\"\r\n                class=\"cide-input-help-error-text\">{{\r\n                isValid\r\n                ? helperText : (errorText ?\r\n                (isTouched ? errorText : helperText)\r\n                : helperText)}}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Input with tralling icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!-- Input with leading icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!------------------------------------------CHECKBOX------------------------------------------>\r\n    <div *ngIf=\"type === 'checkbox'\" class=\"tw-flex\">\r\n        <div class=\"cide-checkbox tw-relative\">\r\n            <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\"\r\n                class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n                [autocomplete]=\"autocomplete\" />\r\n            <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n                <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n                    <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n                        <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n                    </svg>\r\n                </span>\r\n                <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\"\r\n                    *ngIf=\"!labelHide\">{{label}}</span>\r\n            </label>\r\n            <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n                <!-- Element hidden and its xpath is used to display inside SVG -->\r\n                <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n                    <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n                </symbol>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n\r\n    <!-------------------------------------------SELECT------------------------------------------->\r\n    <div *ngIf=\"type === 'select'\">sas\r\n        <div class=\"tw-relative\">\r\n            <div class=\"tw-absolute\">\r\n                @for (item of option; track $index) {\r\n                <div class=\"tw-w-full\">\r\n                    {{item}}\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: 
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-input\">\r\n    <!------------------------------------------TEXT | PASSWORD------------------------------------------>\r\n    <div *ngIf=\"type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel'\">\r\n        <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n                'cide-element-size-xxs': (size === '2xs'),\r\n                'cide-element-size-xs': (size === 'xs'),\r\n                'cide-element-size-sm': (size === 'sm'),\r\n                'cide-element-size-md': (size === 'md'),\r\n                'cide-element-size-lg': (size === 'lg'),\r\n                'cide-element-leading-icon': leadingIcon,\r\n                'cide-element-trailing-icon': trailingIconInternal,\r\n                'cide-element-clear-input': clearInput,\r\n                'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n                'cide-element-input-label-start': (labelDir === 'start'),\r\n                'cide-element-input-label-end': (labelDir === 'end'),\r\n                'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n                'cide-element-input-label-less': (!label || labelHide),\r\n                'cide-element-style-outline': (fill === 'outline'),\r\n                'cide-element-style-solid': (fill === 'solid'),\r\n                'cide-element-style-standard': (fill === 'standard'),\r\n                'cide-element-input-number': (type === 'number')\r\n            }\">\r\n            <!-- label -->\r\n            <label [for]=\"id\" class=\"cide-input-label\" *ngIf=\"label && !labelHide\">{{label}}</label>\r\n\r\n            <!-- all one line elemets which dose not affect with label and error text -->\r\n            <div class=\"cide-element-input-wrapper\">\r\n                <!-- Leading Icon -->\r\n                <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\r\n                    <span\r\n                        class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n                </span>\r\n\r\n                <!-- Traling icon -->\r\n                <span class=\"tw-absolute cide-input-trailing-icon -tw-bottom-1 tw-select-none tw-right-0\"\r\n                    *ngIf=\"trailingIconInternal\">\r\n                    <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n                        [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n                        (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n                </span>\r\n\r\n                <!-- Clear -->\r\n                <button class=\"cide-input-clear\"\r\n                    *ngIf=\"clearInput && ngModel\" (click)=\"ClearInputValue()\">\r\n                    <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n                </button>\r\n\r\n                <!-- Input -->\r\n                <input [placeholder]=\"placeholder\" [id]=\"id\"\r\n                    [ngClass]=\"[((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md '), (!leadingIcon ? 'tw-pl-1' : ''), (trailingIconInternal ? 'tw-pr-8': ''), (!trailingIconInternal ? 'tw-pr-1' : ''), ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')), (labelHide ? '!tw-mt-0' : '')]\"\r\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n                    [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\"\r\n                    class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n            </div>\r\n            <!-- error text / helper text -->\r\n            <span *ngIf=\"(errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText\"\r\n                class=\"cide-input-help-error-text\">{{\r\n                isValid\r\n                ? helperText : (errorText ?\r\n                (isTouched ? errorText : helperText)\r\n                : helperText)}}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Input with tralling icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!-- Input with leading icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!------------------------------------------CHECKBOX------------------------------------------>\r\n    <div *ngIf=\"type === 'checkbox'\" class=\"tw-flex\">\r\n        <div class=\"cide-checkbox tw-relative\">\r\n            <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\"\r\n                class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n                [autocomplete]=\"autocomplete\" />\r\n            <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n                <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n                    <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n                        <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n                    </svg>\r\n                </span>\r\n                <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\"\r\n                    *ngIf=\"!labelHide\">{{label}}</span>\r\n            </label>\r\n            <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n                <!-- Element hidden and its xpath is used to display inside SVG -->\r\n                <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n                    <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n                </symbol>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n\r\n    <!-------------------------------------------SELECT------------------------------------------->\r\n    <div *ngIf=\"type === 'select'\">sas\r\n        <div class=\"tw-relative\">\r\n            <div class=\"tw-absolute\">\r\n                @for (item of option; track $index) {\r\n                <div class=\"tw-w-full\">\r\n                    {{item}}\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: 
                 // directives
                 CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: 
                 // for ngModel
@@ -477,7 +477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             useExisting: forwardRef(() => CideInputComponent),
                         },
                         CapitalizePipe
-                    ], template: "<div class=\"cide-input\">\r\n    <!------------------------------------------TEXT | PASSWORD------------------------------------------>\r\n    <div *ngIf=\"type === 'text' || type === 'number' || type === 'password'\">\r\n        <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n                'cide-element-size-xxs': (size === '2xs'),\r\n                'cide-element-size-xs': (size === 'xs'),\r\n                'cide-element-size-sm': (size === 'sm'),\r\n                'cide-element-size-md': (size === 'md'),\r\n                'cide-element-size-lg': (size === 'lg'),\r\n                'cide-element-leading-icon': leadingIcon,\r\n                'cide-element-trailing-icon': trailingIconInternal,\r\n                'cide-element-clear-input': clearInput,\r\n                'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n                'cide-element-input-label-start': (labelDir === 'start'),\r\n                'cide-element-input-label-end': (labelDir === 'end'),\r\n                'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n                'cide-element-input-label-less': (!label || labelHide),\r\n                'cide-element-style-outline': (fill === 'outline'),\r\n                'cide-element-style-solid': (fill === 'solid'),\r\n                'cide-element-style-standard': (fill === 'standard'),\r\n                'cide-element-input-number': (type === 'number')\r\n            }\">\r\n            <!-- label -->\r\n            <label [for]=\"id\" class=\"cide-input-label\" *ngIf=\"label && !labelHide\">{{label}}</label>\r\n\r\n            <!-- all one line elemets which dose not affect with label and error text -->\r\n            <div class=\"cide-element-input-wrapper\">\r\n                <!-- Leading Icon -->\r\n                <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\r\n                    <span\r\n                        class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n                </span>\r\n\r\n                <!-- Traling icon -->\r\n                <span class=\"tw-absolute cide-input-trailing-icon -tw-bottom-1 tw-select-none tw-right-0\"\r\n                    *ngIf=\"trailingIconInternal\">\r\n                    <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n                        [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n                        (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n                </span>\r\n\r\n                <!-- Clear -->\r\n                <button class=\"cide-input-clear\"\r\n                    *ngIf=\"clearInput && ngModel\" (click)=\"ClearInputValue()\">\r\n                    <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n                </button>\r\n\r\n                <!-- Input -->\r\n                <input [placeholder]=\"placeholder\" [id]=\"id\"\r\n                    [ngClass]=\"[((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md '), (!leadingIcon ? 'tw-pl-1' : ''), (trailingIconInternal ? 'tw-pr-8': ''), (!trailingIconInternal ? 'tw-pr-1' : ''), ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')), (labelHide ? '!tw-mt-0' : '')]\"\r\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n                    [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\"\r\n                    class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n            </div>\r\n            <!-- error text / helper text -->\r\n            <span *ngIf=\"(errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText\"\r\n                class=\"cide-input-help-error-text\">{{\r\n                isValid\r\n                ? helperText : (errorText ?\r\n                (isTouched ? errorText : helperText)\r\n                : helperText)}}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Input with tralling icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!-- Input with leading icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!------------------------------------------CHECKBOX------------------------------------------>\r\n    <div *ngIf=\"type === 'checkbox'\" class=\"tw-flex\">\r\n        <div class=\"cide-checkbox tw-relative\">\r\n            <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\"\r\n                class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n                [autocomplete]=\"autocomplete\" />\r\n            <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n                <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n                    <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n                        <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n                    </svg>\r\n                </span>\r\n                <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\"\r\n                    *ngIf=\"!labelHide\">{{label}}</span>\r\n            </label>\r\n            <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n                <!-- Element hidden and its xpath is used to display inside SVG -->\r\n                <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n                    <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n                </symbol>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n\r\n    <!-------------------------------------------SELECT------------------------------------------->\r\n    <div *ngIf=\"type === 'select'\">sas\r\n        <div class=\"tw-relative\">\r\n            <div class=\"tw-absolute\">\r\n                @for (item of option; track $index) {\r\n                <div class=\"tw-w-full\">\r\n                    {{item}}\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
+                    ], template: "<div class=\"cide-input\">\r\n    <!------------------------------------------TEXT | PASSWORD------------------------------------------>\r\n    <div *ngIf=\"type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel'\">\r\n        <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n                'cide-element-size-xxs': (size === '2xs'),\r\n                'cide-element-size-xs': (size === 'xs'),\r\n                'cide-element-size-sm': (size === 'sm'),\r\n                'cide-element-size-md': (size === 'md'),\r\n                'cide-element-size-lg': (size === 'lg'),\r\n                'cide-element-leading-icon': leadingIcon,\r\n                'cide-element-trailing-icon': trailingIconInternal,\r\n                'cide-element-clear-input': clearInput,\r\n                'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n                'cide-element-input-label-start': (labelDir === 'start'),\r\n                'cide-element-input-label-end': (labelDir === 'end'),\r\n                'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n                'cide-element-input-label-less': (!label || labelHide),\r\n                'cide-element-style-outline': (fill === 'outline'),\r\n                'cide-element-style-solid': (fill === 'solid'),\r\n                'cide-element-style-standard': (fill === 'standard'),\r\n                'cide-element-input-number': (type === 'number')\r\n            }\">\r\n            <!-- label -->\r\n            <label [for]=\"id\" class=\"cide-input-label\" *ngIf=\"label && !labelHide\">{{label}}</label>\r\n\r\n            <!-- all one line elemets which dose not affect with label and error text -->\r\n            <div class=\"cide-element-input-wrapper\">\r\n                <!-- Leading Icon -->\r\n                <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\r\n                    <span\r\n                        class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n                </span>\r\n\r\n                <!-- Traling icon -->\r\n                <span class=\"tw-absolute cide-input-trailing-icon -tw-bottom-1 tw-select-none tw-right-0\"\r\n                    *ngIf=\"trailingIconInternal\">\r\n                    <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n                        [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n                        (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n                </span>\r\n\r\n                <!-- Clear -->\r\n                <button class=\"cide-input-clear\"\r\n                    *ngIf=\"clearInput && ngModel\" (click)=\"ClearInputValue()\">\r\n                    <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n                </button>\r\n\r\n                <!-- Input -->\r\n                <input [placeholder]=\"placeholder\" [id]=\"id\"\r\n                    [ngClass]=\"[((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md '), (!leadingIcon ? 'tw-pl-1' : ''), (trailingIconInternal ? 'tw-pr-8': ''), (!trailingIconInternal ? 'tw-pr-1' : ''), ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')), (labelHide ? '!tw-mt-0' : '')]\"\r\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n                    [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\"\r\n                    class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n            </div>\r\n            <!-- error text / helper text -->\r\n            <span *ngIf=\"(errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText\"\r\n                class=\"cide-input-help-error-text\">{{\r\n                isValid\r\n                ? helperText : (errorText ?\r\n                (isTouched ? errorText : helperText)\r\n                : helperText)}}</span>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Input with tralling icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!-- Input with leading icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!------------------------------------------CHECKBOX------------------------------------------>\r\n    <div *ngIf=\"type === 'checkbox'\" class=\"tw-flex\">\r\n        <div class=\"cide-checkbox tw-relative\">\r\n            <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\"\r\n                class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n                [autocomplete]=\"autocomplete\" />\r\n            <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n                <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n                    <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n                        <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n                    </svg>\r\n                </span>\r\n                <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\"\r\n                    *ngIf=\"!labelHide\">{{label}}</span>\r\n            </label>\r\n            <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n                <!-- Element hidden and its xpath is used to display inside SVG -->\r\n                <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n                    <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n                </symbol>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n\r\n    <!-------------------------------------------SELECT------------------------------------------->\r\n    <div *ngIf=\"type === 'select'\">sas\r\n        <div class=\"tw-relative\">\r\n            <div class=\"tw-absolute\">\r\n                @for (item of option; track $index) {\r\n                <div class=\"tw-w-full\">\r\n                    {{item}}\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { fill: [{
                 type: Input
             }], label: [{
@@ -812,13 +812,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-[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        }\">\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-[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        }\">\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: [{
@@ -1224,7 +1224,7 @@ class CideSelectComponent {
                 multi: true,
                 useExisting: forwardRef(() => CideSelectComponent),
             }
-        ], queries: [{ propertyName: "optionComponents", predicate: CideSelectOptionComponent }], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], 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  <label *ngIf=\"label && !labelHide\" [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\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\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\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      *ngIf=\"!clearInput || !ngModel || loading\">\n      <!-- Loading Spinner -->\n      <span *ngIf=\"loading\" 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\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n      </span>\n      <!-- Dropdown Arrow -->\n      <span *ngIf=\"!loading\" 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    </span>\n\n    <!-- Clear Button -->\n    <button class=\"cide-input-clear\" *ngIf=\"clearInput && ngModel\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n\n    <!-- Dropdown Options -->\n    <div\n      class=\"cide-select-dropdown tw-absolute tw-left-0 tw-right-0 tw-z-50 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto\"\n      *ngIf=\"isOpen\" [ngClass]=\"{\n        'tw-top-full tw-mt-1': dropdownPosition === 'bottom',\n        'tw-bottom-full tw-mb-1': dropdownPosition === 'top'\n      }\">\n\n      <!-- Search Input (if searchable and showSearchInput is true) -->\n      <div *ngIf=\"searchable && showSearchInput\" class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n        <input type=\"text\" placeholder=\"Search options...\" [value]=\"searchTerm\" (input)=\"onSearchInput($event)\"\n          (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\" (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      <!-- Options List -->\n      <div class=\"tw-py-1\">\n        <!-- Loading State -->\n        <div *ngIf=\"loading\" 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\" viewBox=\"0 0 24 24\">\n              <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n              <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n            <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n          </div>\n        </div>\n\n        <!-- Options -->\n        <ng-container *ngIf=\"!loading\">\n          <button type=\"button\" *ngFor=\"let option of filteredOptions; trackBy: trackByValue\"\n            (mousedown)=\"onDropdownMouseDown()\" (click)=\"selectOption(option)\" (keyup.enter)=\"selectOption(option)\"\n            (keyup.space)=\"selectOption(option)\" [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': isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n            {{ option.label }}\n          </button>\n        </ng-container>\n\n        <!-- No options message -->\n        <div *ngIf=\"!loading && filteredOptions.length === 0\" class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n          {{ searchable && searchTerm ? 'No options found' : 'No options available' }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error/Helper Text -->\n  <span *ngIf=\"(errorText || helperText) && !isValid\" class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  <span *ngIf=\"helperText && isValid\" class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n</div>", 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:50;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: "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 }] });
+        ], queries: [{ propertyName: "optionComponents", predicate: CideSelectOptionComponent }], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], 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  <label *ngIf=\"label && !labelHide\" [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\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\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\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      *ngIf=\"!clearInput || !ngModel || loading\">\n      <!-- Loading Spinner -->\n      <span *ngIf=\"loading\" 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\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n      </span>\n      <!-- Dropdown Arrow -->\n      <span *ngIf=\"!loading\" 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    </span>\n\n    <!-- Clear Button -->\n    <button class=\"cide-input-clear\" *ngIf=\"clearInput && ngModel\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n\n    <!-- Dropdown Options -->\n    <div\n      class=\"cide-select-dropdown tw-absolute tw-left-0 tw-right-0 tw-z-50 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto\"\n      *ngIf=\"isOpen\" [ngClass]=\"{\n        'tw-top-full tw-mt-1': dropdownPosition === 'bottom',\n        'tw-bottom-full tw-mb-1': dropdownPosition === 'top'\n      }\">\n\n      <!-- Search Input (if searchable and showSearchInput is true) -->\n      <div *ngIf=\"searchable && showSearchInput\" class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n        <input type=\"text\" placeholder=\"Search options...\" [value]=\"searchTerm\" (input)=\"onSearchInput($event)\"\n          (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\" (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      <!-- Options List -->\n      <div class=\"tw-py-1\">\n        <!-- Loading State -->\n        <div *ngIf=\"loading\" 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\" viewBox=\"0 0 24 24\">\n              <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n              <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n            <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n          </div>\n        </div>\n\n        <!-- Options -->\n        <ng-container *ngIf=\"!loading\">\n          <button type=\"button\" *ngFor=\"let option of filteredOptions; trackBy: trackByValue\"\n            (mousedown)=\"onDropdownMouseDown()\" (click)=\"selectOption(option)\" (keyup.enter)=\"selectOption(option)\"\n            (keyup.space)=\"selectOption(option)\" [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': isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n            {{ option.label }}\n          </button>\n        </ng-container>\n\n        <!-- No options message -->\n        <div *ngIf=\"!loading && filteredOptions.length === 0\" class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n          {{ searchable && searchTerm ? 'No options found' : 'No options available' }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error/Helper Text -->\n  <span *ngIf=\"(errorText || helperText) && !isValid\" class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  <span *ngIf=\"helperText && isValid\" class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n</div>", 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: "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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideSelectComponent, decorators: [{
             type: Component,
@@ -1239,7 +1239,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  <label *ngIf=\"label && !labelHide\" [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\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\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\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      *ngIf=\"!clearInput || !ngModel || loading\">\n      <!-- Loading Spinner -->\n      <span *ngIf=\"loading\" 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\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n      </span>\n      <!-- Dropdown Arrow -->\n      <span *ngIf=\"!loading\" 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    </span>\n\n    <!-- Clear Button -->\n    <button class=\"cide-input-clear\" *ngIf=\"clearInput && ngModel\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n\n    <!-- Dropdown Options -->\n    <div\n      class=\"cide-select-dropdown tw-absolute tw-left-0 tw-right-0 tw-z-50 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto\"\n      *ngIf=\"isOpen\" [ngClass]=\"{\n        'tw-top-full tw-mt-1': dropdownPosition === 'bottom',\n        'tw-bottom-full tw-mb-1': dropdownPosition === 'top'\n      }\">\n\n      <!-- Search Input (if searchable and showSearchInput is true) -->\n      <div *ngIf=\"searchable && showSearchInput\" class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n        <input type=\"text\" placeholder=\"Search options...\" [value]=\"searchTerm\" (input)=\"onSearchInput($event)\"\n          (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\" (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      <!-- Options List -->\n      <div class=\"tw-py-1\">\n        <!-- Loading State -->\n        <div *ngIf=\"loading\" 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\" viewBox=\"0 0 24 24\">\n              <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n              <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n            <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n          </div>\n        </div>\n\n        <!-- Options -->\n        <ng-container *ngIf=\"!loading\">\n          <button type=\"button\" *ngFor=\"let option of filteredOptions; trackBy: trackByValue\"\n            (mousedown)=\"onDropdownMouseDown()\" (click)=\"selectOption(option)\" (keyup.enter)=\"selectOption(option)\"\n            (keyup.space)=\"selectOption(option)\" [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': isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n            {{ option.label }}\n          </button>\n        </ng-container>\n\n        <!-- No options message -->\n        <div *ngIf=\"!loading && filteredOptions.length === 0\" class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n          {{ searchable && searchTerm ? 'No options found' : 'No options available' }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error/Helper Text -->\n  <span *ngIf=\"(errorText || helperText) && !isValid\" class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  <span *ngIf=\"helperText && isValid\" class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n</div>", 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:50;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  <label *ngIf=\"label && !labelHide\" [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\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\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\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      *ngIf=\"!clearInput || !ngModel || loading\">\n      <!-- Loading Spinner -->\n      <span *ngIf=\"loading\" 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\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n      </span>\n      <!-- Dropdown Arrow -->\n      <span *ngIf=\"!loading\" 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    </span>\n\n    <!-- Clear Button -->\n    <button class=\"cide-input-clear\" *ngIf=\"clearInput && ngModel\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n\n    <!-- Dropdown Options -->\n    <div\n      class=\"cide-select-dropdown tw-absolute tw-left-0 tw-right-0 tw-z-50 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto\"\n      *ngIf=\"isOpen\" [ngClass]=\"{\n        'tw-top-full tw-mt-1': dropdownPosition === 'bottom',\n        'tw-bottom-full tw-mb-1': dropdownPosition === 'top'\n      }\">\n\n      <!-- Search Input (if searchable and showSearchInput is true) -->\n      <div *ngIf=\"searchable && showSearchInput\" class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n        <input type=\"text\" placeholder=\"Search options...\" [value]=\"searchTerm\" (input)=\"onSearchInput($event)\"\n          (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\" (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      <!-- Options List -->\n      <div class=\"tw-py-1\">\n        <!-- Loading State -->\n        <div *ngIf=\"loading\" 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\" viewBox=\"0 0 24 24\">\n              <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n              <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n            </svg>\n            <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n          </div>\n        </div>\n\n        <!-- Options -->\n        <ng-container *ngIf=\"!loading\">\n          <button type=\"button\" *ngFor=\"let option of filteredOptions; trackBy: trackByValue\"\n            (mousedown)=\"onDropdownMouseDown()\" (click)=\"selectOption(option)\" (keyup.enter)=\"selectOption(option)\"\n            (keyup.space)=\"selectOption(option)\" [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': isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n            {{ option.label }}\n          </button>\n        </ng-container>\n\n        <!-- No options message -->\n        <div *ngIf=\"!loading && filteredOptions.length === 0\" class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n          {{ searchable && searchTerm ? 'No options found' : 'No options available' }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error/Helper Text -->\n  <span *ngIf=\"(errorText || helperText) && !isValid\" class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  <span *ngIf=\"helperText && isValid\" class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n</div>", 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]
@@ -1346,11 +1346,11 @@ class CideEleTabComponent {
             .join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleTabComponent, isStandalone: true, selector: "cide-ele-tab", inputs: { tabs: "tabs", activeTabId: "activeTabId", size: "size", variant: "variant", fullWidth: "fullWidth", disabled: "disabled" }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: "<div [class]=\"getContainerClasses()\">\r\n  @for (tab of tabs; track tab.id) {\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"getTabClasses(tab)\"\r\n      [disabled]=\"tab.disabled || disabled\"\r\n      (click)=\"onTabClick(tab)\"\r\n      [attr.aria-selected]=\"isActive(tab.id)\"\r\n      [attr.aria-controls]=\"'panel-' + tab.id\"\r\n      role=\"tab\">\r\n      \r\n      @if (tab.icon) {\r\n        <span class=\"cide-tab-icon\">{{ tab.icon }}</span>\r\n      }\r\n      \r\n      <span class=\"cide-tab-label\">{{ tab.label }}</span>\r\n      \r\n      @if (tab.badge) {\r\n        <span class=\"cide-tab-badge\">{{ tab.badge }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</div> ", styles: [".cide-tab-container{display:flex;border-bottom:1px solid #e5e7eb;overflow-x:auto;scrollbar-width:none}.cide-tab-container::-webkit-scrollbar{display:none}.cide-tab-container.cide-tab-full-width .cide-tab-item{flex:1}.cide-tab-container.cide-tab-container-pills{border-bottom:none;gap:.25rem;padding:.25rem;background:#f9fafb;border-radius:.375rem}.cide-tab-container.cide-tab-container-underline{border-bottom:2px solid #e5e7eb}.cide-tab-item{display:inline-flex;align-items:center;gap:.375rem;border:none;background:none;cursor:pointer;transition:all .15s ease;font-weight:500;color:#6b7280;white-space:nowrap;outline:none}.cide-tab-item:hover:not(.cide-tab-disabled){color:#374151}.cide-tab-item:focus-visible{outline:2px solid var(--cide-theme-primary-color);outline-offset:2px}.cide-tab-item.cide-tab-active{color:var(--cide-theme-primary-color)}.cide-tab-item.cide-tab-disabled{opacity:.5;cursor:not-allowed}.cide-tab-sm{padding:.375rem .75rem;font-size:.875rem}.cide-tab-sm .cide-tab-icon{font-size:.75rem}.cide-tab-sm .cide-tab-badge{font-size:.625rem;padding:.125rem .375rem}.cide-tab-md{padding:.5rem 1rem;font-size:.875rem}.cide-tab-md .cide-tab-icon{font-size:.875rem}.cide-tab-md .cide-tab-badge{font-size:.75rem;padding:.125rem .5rem}.cide-tab-lg{padding:.75rem 1.25rem;font-size:1rem}.cide-tab-lg .cide-tab-icon{font-size:1rem}.cide-tab-lg .cide-tab-badge{font-size:.75rem;padding:.25rem .5rem}.cide-tab-default{border-bottom:2px solid transparent}.cide-tab-default.cide-tab-active{border-bottom-color:var(--cide-theme-primary-color)}.cide-tab-pills{border-radius:.25rem}.cide-tab-pills:hover:not(.cide-tab-disabled){background:#f3f4f6}.cide-tab-pills.cide-tab-active{background:#fff;color:#374151;box-shadow:0 1px 2px #0000000d}.cide-tab-underline{border-bottom:2px solid transparent;position:relative}.cide-tab-underline.cide-tab-active:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--cide-theme-primary-color);border-radius:1px 1px 0 0}.cide-tab-icon{display:inline-flex;align-items:center;flex-shrink:0}.cide-tab-label{display:inline-flex;align-items:center}.cide-tab-badge{display:inline-flex;align-items:center;justify-content:center;background:#dc2626;color:#fff;border-radius:9999px;font-weight:600;min-width:1.25rem;height:1.25rem;line-height:1}.cide-tab-active .cide-tab-badge{background:var(--cide-theme-primary-color)}@media (max-width: 640px){.cide-tab-container{gap:0}.cide-tab-item .cide-tab-label{display:none}.cide-tab-item:not(:has(.cide-tab-icon)) .cide-tab-label{display:inline-flex}.cide-tab-sm{padding:.25rem .5rem}.cide-tab-md{padding:.375rem .75rem}.cide-tab-lg{padding:.5rem 1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleTabComponent, isStandalone: true, selector: "cide-ele-tab", inputs: { tabs: "tabs", activeTabId: "activeTabId", size: "size", variant: "variant", fullWidth: "fullWidth", disabled: "disabled" }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: "<div [class]=\"getContainerClasses()\">\r\n  @for (tab of tabs; track tab.id) {\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"getTabClasses(tab)\"\r\n      [disabled]=\"tab.disabled || disabled\"\r\n      (click)=\"onTabClick(tab)\"\r\n      [attr.aria-selected]=\"isActive(tab.id)\"\r\n      [attr.aria-controls]=\"'panel-' + tab.id\"\r\n      role=\"tab\">\r\n      \r\n      @if (tab.icon) {\r\n        <cide-ele-icon class=\"cide-tab-icon\">{{ tab.icon }}</cide-ele-icon>\r\n      }\r\n      \r\n      <span class=\"cide-tab-label\">{{ tab.label }}</span>\r\n      \r\n      @if (tab.badge) {\r\n        <span class=\"cide-tab-badge\">{{ tab.badge }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</div> ", styles: [".cide-tab-container{display:flex;border-bottom:1px solid #e5e7eb;overflow-x:auto;scrollbar-width:none}.cide-tab-container::-webkit-scrollbar{display:none}.cide-tab-container.cide-tab-full-width .cide-tab-item{flex:1}.cide-tab-container.cide-tab-container-pills{border-bottom:none;gap:.25rem;padding:.25rem;background:#f9fafb;border-radius:.375rem}.cide-tab-container.cide-tab-container-underline{border-bottom:2px solid #e5e7eb}.cide-tab-item{display:inline-flex;align-items:center;gap:.375rem;border:none;background:none;cursor:pointer;transition:all .15s ease;font-weight:500;color:#6b7280;white-space:nowrap;outline:none}.cide-tab-item:hover:not(.cide-tab-disabled){color:#374151}.cide-tab-item:focus-visible{outline:2px solid var(--cide-theme-primary-color);outline-offset:2px}.cide-tab-item.cide-tab-active{color:var(--cide-theme-primary-color)}.cide-tab-item.cide-tab-disabled{opacity:.5;cursor:not-allowed}.cide-tab-sm{padding:.375rem .75rem;font-size:.875rem}.cide-tab-sm .cide-tab-icon{font-size:.75rem}.cide-tab-sm .cide-tab-badge{font-size:.625rem;padding:.125rem .375rem}.cide-tab-md{padding:.5rem 1rem;font-size:.875rem}.cide-tab-md .cide-tab-icon{font-size:.875rem}.cide-tab-md .cide-tab-badge{font-size:.75rem;padding:.125rem .5rem}.cide-tab-lg{padding:.75rem 1.25rem;font-size:1rem}.cide-tab-lg .cide-tab-icon{font-size:1rem}.cide-tab-lg .cide-tab-badge{font-size:.75rem;padding:.25rem .5rem}.cide-tab-default{border-bottom:2px solid transparent}.cide-tab-default.cide-tab-active{border-bottom-color:var(--cide-theme-primary-color)}.cide-tab-pills{border-radius:.25rem}.cide-tab-pills:hover:not(.cide-tab-disabled){background:#f3f4f6}.cide-tab-pills.cide-tab-active{background:#fff;color:#374151;box-shadow:0 1px 2px #0000000d}.cide-tab-underline{border-bottom:2px solid transparent;position:relative}.cide-tab-underline.cide-tab-active:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--cide-theme-primary-color);border-radius:1px 1px 0 0}.cide-tab-icon{display:inline-flex;align-items:center;flex-shrink:0}.cide-tab-label{display:inline-flex;align-items:center}.cide-tab-badge{display:inline-flex;align-items:center;justify-content:center;background:#dc2626;color:#fff;border-radius:9999px;font-weight:600;min-width:1.25rem;height:1.25rem;line-height:1}.cide-tab-active .cide-tab-badge{background:var(--cide-theme-primary-color)}@media (max-width: 640px){.cide-tab-container{gap:0}.cide-tab-item .cide-tab-label{display:none}.cide-tab-item:not(:has(.cide-tab-icon)) .cide-tab-label{display:inline-flex}.cide-tab-sm{padding:.25rem .5rem}.cide-tab-md{padding:.375rem .75rem}.cide-tab-lg{padding:.5rem 1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-ele-tab', standalone: true, imports: [CommonModule], template: "<div [class]=\"getContainerClasses()\">\r\n  @for (tab of tabs; track tab.id) {\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"getTabClasses(tab)\"\r\n      [disabled]=\"tab.disabled || disabled\"\r\n      (click)=\"onTabClick(tab)\"\r\n      [attr.aria-selected]=\"isActive(tab.id)\"\r\n      [attr.aria-controls]=\"'panel-' + tab.id\"\r\n      role=\"tab\">\r\n      \r\n      @if (tab.icon) {\r\n        <span class=\"cide-tab-icon\">{{ tab.icon }}</span>\r\n      }\r\n      \r\n      <span class=\"cide-tab-label\">{{ tab.label }}</span>\r\n      \r\n      @if (tab.badge) {\r\n        <span class=\"cide-tab-badge\">{{ tab.badge }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</div> ", styles: [".cide-tab-container{display:flex;border-bottom:1px solid #e5e7eb;overflow-x:auto;scrollbar-width:none}.cide-tab-container::-webkit-scrollbar{display:none}.cide-tab-container.cide-tab-full-width .cide-tab-item{flex:1}.cide-tab-container.cide-tab-container-pills{border-bottom:none;gap:.25rem;padding:.25rem;background:#f9fafb;border-radius:.375rem}.cide-tab-container.cide-tab-container-underline{border-bottom:2px solid #e5e7eb}.cide-tab-item{display:inline-flex;align-items:center;gap:.375rem;border:none;background:none;cursor:pointer;transition:all .15s ease;font-weight:500;color:#6b7280;white-space:nowrap;outline:none}.cide-tab-item:hover:not(.cide-tab-disabled){color:#374151}.cide-tab-item:focus-visible{outline:2px solid var(--cide-theme-primary-color);outline-offset:2px}.cide-tab-item.cide-tab-active{color:var(--cide-theme-primary-color)}.cide-tab-item.cide-tab-disabled{opacity:.5;cursor:not-allowed}.cide-tab-sm{padding:.375rem .75rem;font-size:.875rem}.cide-tab-sm .cide-tab-icon{font-size:.75rem}.cide-tab-sm .cide-tab-badge{font-size:.625rem;padding:.125rem .375rem}.cide-tab-md{padding:.5rem 1rem;font-size:.875rem}.cide-tab-md .cide-tab-icon{font-size:.875rem}.cide-tab-md .cide-tab-badge{font-size:.75rem;padding:.125rem .5rem}.cide-tab-lg{padding:.75rem 1.25rem;font-size:1rem}.cide-tab-lg .cide-tab-icon{font-size:1rem}.cide-tab-lg .cide-tab-badge{font-size:.75rem;padding:.25rem .5rem}.cide-tab-default{border-bottom:2px solid transparent}.cide-tab-default.cide-tab-active{border-bottom-color:var(--cide-theme-primary-color)}.cide-tab-pills{border-radius:.25rem}.cide-tab-pills:hover:not(.cide-tab-disabled){background:#f3f4f6}.cide-tab-pills.cide-tab-active{background:#fff;color:#374151;box-shadow:0 1px 2px #0000000d}.cide-tab-underline{border-bottom:2px solid transparent;position:relative}.cide-tab-underline.cide-tab-active:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--cide-theme-primary-color);border-radius:1px 1px 0 0}.cide-tab-icon{display:inline-flex;align-items:center;flex-shrink:0}.cide-tab-label{display:inline-flex;align-items:center}.cide-tab-badge{display:inline-flex;align-items:center;justify-content:center;background:#dc2626;color:#fff;border-radius:9999px;font-weight:600;min-width:1.25rem;height:1.25rem;line-height:1}.cide-tab-active .cide-tab-badge{background:var(--cide-theme-primary-color)}@media (max-width: 640px){.cide-tab-container{gap:0}.cide-tab-item .cide-tab-label{display:none}.cide-tab-item:not(:has(.cide-tab-icon)) .cide-tab-label{display:inline-flex}.cide-tab-sm{padding:.25rem .5rem}.cide-tab-md{padding:.375rem .75rem}.cide-tab-lg{padding:.5rem 1rem}}\n"] }]
+            args: [{ selector: 'cide-ele-tab', standalone: true, imports: [CommonModule, CideIconComponent], template: "<div [class]=\"getContainerClasses()\">\r\n  @for (tab of tabs; track tab.id) {\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"getTabClasses(tab)\"\r\n      [disabled]=\"tab.disabled || disabled\"\r\n      (click)=\"onTabClick(tab)\"\r\n      [attr.aria-selected]=\"isActive(tab.id)\"\r\n      [attr.aria-controls]=\"'panel-' + tab.id\"\r\n      role=\"tab\">\r\n      \r\n      @if (tab.icon) {\r\n        <cide-ele-icon class=\"cide-tab-icon\">{{ tab.icon }}</cide-ele-icon>\r\n      }\r\n      \r\n      <span class=\"cide-tab-label\">{{ tab.label }}</span>\r\n      \r\n      @if (tab.badge) {\r\n        <span class=\"cide-tab-badge\">{{ tab.badge }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</div> ", styles: [".cide-tab-container{display:flex;border-bottom:1px solid #e5e7eb;overflow-x:auto;scrollbar-width:none}.cide-tab-container::-webkit-scrollbar{display:none}.cide-tab-container.cide-tab-full-width .cide-tab-item{flex:1}.cide-tab-container.cide-tab-container-pills{border-bottom:none;gap:.25rem;padding:.25rem;background:#f9fafb;border-radius:.375rem}.cide-tab-container.cide-tab-container-underline{border-bottom:2px solid #e5e7eb}.cide-tab-item{display:inline-flex;align-items:center;gap:.375rem;border:none;background:none;cursor:pointer;transition:all .15s ease;font-weight:500;color:#6b7280;white-space:nowrap;outline:none}.cide-tab-item:hover:not(.cide-tab-disabled){color:#374151}.cide-tab-item:focus-visible{outline:2px solid var(--cide-theme-primary-color);outline-offset:2px}.cide-tab-item.cide-tab-active{color:var(--cide-theme-primary-color)}.cide-tab-item.cide-tab-disabled{opacity:.5;cursor:not-allowed}.cide-tab-sm{padding:.375rem .75rem;font-size:.875rem}.cide-tab-sm .cide-tab-icon{font-size:.75rem}.cide-tab-sm .cide-tab-badge{font-size:.625rem;padding:.125rem .375rem}.cide-tab-md{padding:.5rem 1rem;font-size:.875rem}.cide-tab-md .cide-tab-icon{font-size:.875rem}.cide-tab-md .cide-tab-badge{font-size:.75rem;padding:.125rem .5rem}.cide-tab-lg{padding:.75rem 1.25rem;font-size:1rem}.cide-tab-lg .cide-tab-icon{font-size:1rem}.cide-tab-lg .cide-tab-badge{font-size:.75rem;padding:.25rem .5rem}.cide-tab-default{border-bottom:2px solid transparent}.cide-tab-default.cide-tab-active{border-bottom-color:var(--cide-theme-primary-color)}.cide-tab-pills{border-radius:.25rem}.cide-tab-pills:hover:not(.cide-tab-disabled){background:#f3f4f6}.cide-tab-pills.cide-tab-active{background:#fff;color:#374151;box-shadow:0 1px 2px #0000000d}.cide-tab-underline{border-bottom:2px solid transparent;position:relative}.cide-tab-underline.cide-tab-active:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--cide-theme-primary-color);border-radius:1px 1px 0 0}.cide-tab-icon{display:inline-flex;align-items:center;flex-shrink:0}.cide-tab-label{display:inline-flex;align-items:center}.cide-tab-badge{display:inline-flex;align-items:center;justify-content:center;background:#dc2626;color:#fff;border-radius:9999px;font-weight:600;min-width:1.25rem;height:1.25rem;line-height:1}.cide-tab-active .cide-tab-badge{background:var(--cide-theme-primary-color)}@media (max-width: 640px){.cide-tab-container{gap:0}.cide-tab-item .cide-tab-label{display:none}.cide-tab-item:not(:has(.cide-tab-icon)) .cide-tab-label{display:inline-flex}.cide-tab-sm{padding:.25rem .5rem}.cide-tab-md{padding:.375rem .75rem}.cide-tab-lg{padding:.5rem 1rem}}\n"] }]
         }], propDecorators: { tabs: [{
                 type: Input
             }], activeTabId: [{
@@ -1374,17 +1374,25 @@ class CideEleFileInputComponent {
     disabled = false;
     helperText = '';
     errorText = '';
+    showPreview = false;
+    previewWidth = '200px';
+    previewHeight = '200px';
+    previewBoxMode = false;
+    placeholderText = 'Click to select image';
+    placeholderIcon = '📷';
     id = Math.random().toString(36).substring(2, 10);
     fileChange = new EventEmitter();
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     files = null;
     fileNames = [];
+    previewUrls = [];
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onChange = (files) => { };
     onTouched = () => { };
     writeValue(files) {
         this.files = files;
         this.fileNames = files ? Array.from(files).map(f => f.name) : [];
+        this.generatePreviews();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1399,6 +1407,7 @@ class CideEleFileInputComponent {
         const input = event.target;
         this.files = input.files;
         this.fileNames = this.files ? Array.from(this.files).map(f => f.name) : [];
+        this.generatePreviews();
         this.onChange(this.files);
         this.fileChange.emit(this.files);
         this.onTouched();
@@ -1406,17 +1415,87 @@ class CideEleFileInputComponent {
     clearFiles() {
         this.files = null;
         this.fileNames = [];
+        this.clearPreviews();
         this.onChange(null);
         this.fileChange.emit(null);
     }
+    generatePreviews() {
+        // Clear existing previews
+        this.clearPreviews();
+        if (!this.showPreview || !this.files) {
+            return;
+        }
+        Array.from(this.files).forEach(file => {
+            if (this.isImageFile(file)) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    if (e.target?.result) {
+                        this.previewUrls.push(e.target.result);
+                    }
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+    }
+    clearPreviews() {
+        // Revoke object URLs to prevent memory leaks
+        this.previewUrls.forEach(url => {
+            if (url.startsWith('blob:')) {
+                URL.revokeObjectURL(url);
+            }
+        });
+        this.previewUrls = [];
+    }
+    isImageFile(file) {
+        return file.type.startsWith('image/');
+    }
+    isImagePreviewAvailable() {
+        return this.showPreview && this.previewUrls.length > 0;
+    }
+    removePreview(index) {
+        if (this.files && this.files.length > index) {
+            // Create new FileList without the removed file
+            const dt = new DataTransfer();
+            Array.from(this.files).forEach((file, i) => {
+                if (i !== index) {
+                    dt.items.add(file);
+                }
+            });
+            this.files = dt.files;
+            this.fileNames = Array.from(this.files).map(f => f.name);
+            // Remove the preview URL
+            if (this.previewUrls[index] && this.previewUrls[index].startsWith('blob:')) {
+                URL.revokeObjectURL(this.previewUrls[index]);
+            }
+            this.previewUrls.splice(index, 1);
+            this.onChange(this.files);
+            this.fileChange.emit(this.files);
+        }
+    }
+    ngOnDestroy() {
+        // Clean up preview URLs to prevent memory leaks
+        this.clearPreviews();
+    }
+    triggerFileSelect() {
+        const fileInput = document.getElementById('cide-file-input-' + this.id);
+        if (fileInput && !this.disabled) {
+            fileInput.click();
+        }
+    }
+    isPreviewBoxMode() {
+        return this.previewBoxMode && this.showPreview;
+    }
+    hasImages() {
+        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" }, 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", placeholderText: "placeholderText", placeholderIcon: "placeholderIcon" }, outputs: { fileChange: "fileChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CideEleFileInputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"cide-file-input\">\r\n  <label *ngIf=\"label\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id\">{{ label }}</label>\r\n  <div class=\"cide-file-input-wrapper\">\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id\"\r\n      [attr.accept]=\"accept\"\r\n      [attr.multiple]=\"multiple ? true : null\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"cide-file-input-element\"\r\n    />\r\n    <button *ngIf=\"fileNames.length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\r\n      Clear\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"fileNames.length\" class=\"cide-file-input-files\">\r\n    <span *ngFor=\"let name of fileNames\">{{ name }}</span>\r\n  </div>\r\n  <div *ngIf=\"errorText\" class=\"cide-file-input-error\">{{ errorText }}</div>\r\n  <div *ngIf=\"helperText && !errorText\" class=\"cide-file-input-helper\">{{ helperText }}</div>\r\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}\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\">\r\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\r\n  <label *ngIf=\"label && !isPreviewBoxMode()\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id\">{{ label }}</label>\r\n  \r\n  <!-- Preview Box Mode -->\r\n  <div *ngIf=\"isPreviewBoxMode()\" class=\"cide-file-input-preview-box-container\">\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id\"\r\n      [attr.accept]=\"accept\"\r\n      [attr.multiple]=\"multiple ? true : null\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"cide-file-input-hidden\"\r\n    />\r\n    \r\n    <!-- Preview Box -->\r\n    <div \r\n      class=\"cide-file-input-preview-box\"\r\n      [class.cide-file-input-preview-box-disabled]=\"disabled\"\r\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\r\n      [style.width]=\"previewWidth\"\r\n      [style.height]=\"previewHeight\"\r\n      (click)=\"triggerFileSelect()\"\r\n      [attr.title]=\"disabled ? 'File selection disabled' : placeholderText\">\r\n      \r\n      <!-- No Image State -->\r\n      <div *ngIf=\"!hasImages()\" class=\"cide-file-input-preview-box-placeholder\">\r\n        <div class=\"cide-file-input-preview-box-icon\">{{ placeholderIcon }}</div>\r\n        <div class=\"cide-file-input-preview-box-text\">{{ placeholderText }}</div>\r\n      </div>\r\n      \r\n      <!-- Image Preview State -->\r\n      <div *ngIf=\"hasImages()\" class=\"cide-file-input-preview-box-content\">\r\n        <img \r\n          [src]=\"previewUrls[0]\" \r\n          [alt]=\"fileNames[0] || 'Preview image'\"\r\n          class=\"cide-file-input-preview-box-image\">\r\n        <div class=\"cide-file-input-preview-box-overlay\">\r\n          <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\r\n        </div>\r\n        <button \r\n          *ngIf=\"!disabled\"\r\n          type=\"button\" \r\n          class=\"cide-file-input-preview-box-remove\"\r\n          (click)=\"clearFiles(); $event.stopPropagation()\"\r\n          title=\"Remove image\">\r\n          \u00D7\r\n        </button>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- File name display for preview box mode -->\r\n    <div *ngIf=\"hasImages() && fileNames.length\" class=\"cide-file-input-preview-box-filename\">\r\n      {{ fileNames[0] }}\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Standard Mode -->\r\n  <div *ngIf=\"!isPreviewBoxMode()\" class=\"cide-file-input-wrapper\">\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id\"\r\n      [attr.accept]=\"accept\"\r\n      [attr.multiple]=\"multiple ? true : null\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"cide-file-input-element\"\r\n    />\r\n    <button *ngIf=\"fileNames.length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\r\n      Clear\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"fileNames.length && !isPreviewBoxMode()\" class=\"cide-file-input-files\">\r\n    <span *ngFor=\"let name of fileNames\">{{ name }}</span>\r\n  </div>\r\n  \r\n  <!-- Image Preview Section (only for standard mode) -->\r\n  <div *ngIf=\"isImagePreviewAvailable() && !isPreviewBoxMode()\" class=\"cide-file-input-preview\">\r\n    <div class=\"cide-file-input-preview-label\">Preview:</div>\r\n    <div class=\"cide-file-input-preview-container\">\r\n      <div \r\n        *ngFor=\"let previewUrl of previewUrls; let i = index\" \r\n        class=\"cide-file-input-preview-item\"\r\n        [style.width]=\"previewWidth\"\r\n        [style.height]=\"previewHeight\">\r\n        <button \r\n          type=\"button\" \r\n          class=\"cide-file-input-preview-remove\"\r\n          (click)=\"removePreview(i)\"\r\n          title=\"Remove image\">\r\n          \u00D7\r\n        </button>\r\n        <img \r\n          [src]=\"previewUrl\" \r\n          [alt]=\"fileNames[i] || 'Preview image'\"\r\n          class=\"cide-file-input-preview-image\"\r\n          loading=\"lazy\">\r\n        <div class=\"cide-file-input-preview-filename\">{{ fileNames[i] }}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <div *ngIf=\"errorText\" class=\"cide-file-input-error\">{{ errorText }}</div>\r\n  <div *ngIf=\"helperText && !errorText\" class=\"cide-file-input-helper\">{{ helperText }}</div>\r\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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, decorators: [{
             type: Component,
@@ -1426,7 +1505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             useExisting: forwardRef(() => CideEleFileInputComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"cide-file-input\">\r\n  <label *ngIf=\"label\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id\">{{ label }}</label>\r\n  <div class=\"cide-file-input-wrapper\">\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id\"\r\n      [attr.accept]=\"accept\"\r\n      [attr.multiple]=\"multiple ? true : null\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"cide-file-input-element\"\r\n    />\r\n    <button *ngIf=\"fileNames.length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\r\n      Clear\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"fileNames.length\" class=\"cide-file-input-files\">\r\n    <span *ngFor=\"let name of fileNames\">{{ name }}</span>\r\n  </div>\r\n  <div *ngIf=\"errorText\" class=\"cide-file-input-error\">{{ errorText }}</div>\r\n  <div *ngIf=\"helperText && !errorText\" class=\"cide-file-input-helper\">{{ helperText }}</div>\r\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}\n"] }]
+                    ], template: "<div class=\"cide-file-input\">\r\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\r\n  <label *ngIf=\"label && !isPreviewBoxMode()\" class=\"cide-file-input-label\" [attr.for]=\"'cide-file-input-' + id\">{{ label }}</label>\r\n  \r\n  <!-- Preview Box Mode -->\r\n  <div *ngIf=\"isPreviewBoxMode()\" class=\"cide-file-input-preview-box-container\">\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id\"\r\n      [attr.accept]=\"accept\"\r\n      [attr.multiple]=\"multiple ? true : null\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"cide-file-input-hidden\"\r\n    />\r\n    \r\n    <!-- Preview Box -->\r\n    <div \r\n      class=\"cide-file-input-preview-box\"\r\n      [class.cide-file-input-preview-box-disabled]=\"disabled\"\r\n      [class.cide-file-input-preview-box-has-image]=\"hasImages()\"\r\n      [style.width]=\"previewWidth\"\r\n      [style.height]=\"previewHeight\"\r\n      (click)=\"triggerFileSelect()\"\r\n      [attr.title]=\"disabled ? 'File selection disabled' : placeholderText\">\r\n      \r\n      <!-- No Image State -->\r\n      <div *ngIf=\"!hasImages()\" class=\"cide-file-input-preview-box-placeholder\">\r\n        <div class=\"cide-file-input-preview-box-icon\">{{ placeholderIcon }}</div>\r\n        <div class=\"cide-file-input-preview-box-text\">{{ placeholderText }}</div>\r\n      </div>\r\n      \r\n      <!-- Image Preview State -->\r\n      <div *ngIf=\"hasImages()\" class=\"cide-file-input-preview-box-content\">\r\n        <img \r\n          [src]=\"previewUrls[0]\" \r\n          [alt]=\"fileNames[0] || 'Preview image'\"\r\n          class=\"cide-file-input-preview-box-image\">\r\n        <div class=\"cide-file-input-preview-box-overlay\">\r\n          <div class=\"cide-file-input-preview-box-overlay-text\">Click to change</div>\r\n        </div>\r\n        <button \r\n          *ngIf=\"!disabled\"\r\n          type=\"button\" \r\n          class=\"cide-file-input-preview-box-remove\"\r\n          (click)=\"clearFiles(); $event.stopPropagation()\"\r\n          title=\"Remove image\">\r\n          \u00D7\r\n        </button>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- File name display for preview box mode -->\r\n    <div *ngIf=\"hasImages() && fileNames.length\" class=\"cide-file-input-preview-box-filename\">\r\n      {{ fileNames[0] }}\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Standard Mode -->\r\n  <div *ngIf=\"!isPreviewBoxMode()\" class=\"cide-file-input-wrapper\">\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id\"\r\n      [attr.accept]=\"accept\"\r\n      [attr.multiple]=\"multiple ? true : null\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"cide-file-input-element\"\r\n    />\r\n    <button *ngIf=\"fileNames.length\" type=\"button\" class=\"cide-file-input-clear\" (click)=\"clearFiles()\">\r\n      Clear\r\n    </button>\r\n  </div>\r\n  <div *ngIf=\"fileNames.length && !isPreviewBoxMode()\" class=\"cide-file-input-files\">\r\n    <span *ngFor=\"let name of fileNames\">{{ name }}</span>\r\n  </div>\r\n  \r\n  <!-- Image Preview Section (only for standard mode) -->\r\n  <div *ngIf=\"isImagePreviewAvailable() && !isPreviewBoxMode()\" class=\"cide-file-input-preview\">\r\n    <div class=\"cide-file-input-preview-label\">Preview:</div>\r\n    <div class=\"cide-file-input-preview-container\">\r\n      <div \r\n        *ngFor=\"let previewUrl of previewUrls; let i = index\" \r\n        class=\"cide-file-input-preview-item\"\r\n        [style.width]=\"previewWidth\"\r\n        [style.height]=\"previewHeight\">\r\n        <button \r\n          type=\"button\" \r\n          class=\"cide-file-input-preview-remove\"\r\n          (click)=\"removePreview(i)\"\r\n          title=\"Remove image\">\r\n          \u00D7\r\n        </button>\r\n        <img \r\n          [src]=\"previewUrl\" \r\n          [alt]=\"fileNames[i] || 'Preview image'\"\r\n          class=\"cide-file-input-preview-image\"\r\n          loading=\"lazy\">\r\n        <div class=\"cide-file-input-preview-filename\">{{ fileNames[i] }}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <div *ngIf=\"errorText\" class=\"cide-file-input-error\">{{ errorText }}</div>\r\n  <div *ngIf=\"helperText && !errorText\" class=\"cide-file-input-helper\">{{ helperText }}</div>\r\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: [{
@@ -1439,6 +1518,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Input
             }], errorText: [{
                 type: Input
+            }], showPreview: [{
+                type: Input
+            }], previewWidth: [{
+                type: Input
+            }], previewHeight: [{
+                type: Input
+            }], previewBoxMode: [{
+                type: Input
+            }], placeholderText: [{
+                type: Input
+            }], placeholderIcon: [{
+                type: Input
             }], fileChange: [{
                 type: Output
             }] } });