cloud-ide-element 1.0.22 → 1.0.24

package/fesm2022/cloud-ide-element.mjs

@@ -1131,7 +1131,7 @@ class CideInputComponent {
                 useExisting: forwardRef(() => CideInputComponent),
             },
             CapitalizePipe
-        ], viewQueries: [{ propertyName: "datePickerTemplate", first: true, predicate: ["datePickerTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-input\">\r\n    <!------------------------------------------TEXT | PASSWORD | DATE------------------------------------------>\r\n    @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date') {\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            @if (label && !labelHide) {\r\n            <label [for]=\"id\" class=\"cide-input-label\">{{label}}</label>\r\n            }\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                @if (leadingIcon) {\r\n                <span class=\"cide-input-leading-icon-wrapper\">\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\r\n                <!-- Trailing icon -->\r\n                @if (trailingIconInternal) {\r\n                <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\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\r\n                <!-- Clear -->\r\n                @if (clearInput && ngModel) {\r\n                <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\r\n                    <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n                </button>\r\n                }\r\n\r\n                <!-- Date Input Wrapper -->\r\n                @if (type === 'date') {\r\n                <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n                    <!-- Date Input (read-only to prevent manual 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                        [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n                        [autocomplete]=\"autocomplete\"\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 tw-cursor-pointer\" />\r\n                    \r\n                    <!-- Placeholder overlay for empty date -->\r\n                    @if (!ngModel && placeholder) {\r\n                    <div class=\"cide-input-date-overlay\">\r\n                        {{placeholder}}\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- Date picker is now rendered as a portal appended to body -->\r\n                </div>\r\n                }\r\n\r\n                <!-- Regular Input (non-date) -->\r\n                @if (type !== 'date') {\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                }\r\n            </div>\r\n            <!-- error text / helper text -->\r\n            @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\r\n            <span class=\"cide-input-help-error-text\">{{\r\n                isValid\r\n                ? helperText : (errorText ?\r\n                (isTouched ? errorText : helperText)\r\n                : helperText)}}\r\n            </span>\r\n            }\r\n        </div>\r\n    }\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    @if (type === 'checkbox') {\r\n    <div 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                @if (!labelHide) {\r\n                <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\r\n                }\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\r\n    <!-------------------------------------------SELECT------------------------------------------->\r\n    @if (type === 'select') {\r\n    <div>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    }\r\n</div>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTemplate>\r\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n    <!-- Date Picker Header -->\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"previousMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-lg\">chevron_left</span>\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-text-lg tw-font-semibold tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n        (click)=\"toggleMonthYearSelector()\">\r\n        {{ monthNames[currentMonth] }} {{ currentYear }}\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"nextMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-lg\">chevron_right</span>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Month/Year Selector -->\r\n    @if (showMonthYearSelector) {\r\n      <div class=\"tw-mb-4\">\r\n        <!-- Year Navigation -->\r\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n            (click)=\"previousYear()\">\r\n            <span class=\"material-symbols-outlined tw-text-lg\">keyboard_double_arrow_left</span>\r\n          </button>\r\n          <span class=\"tw-text-lg tw-font-semibold tw-text-gray-800\">{{ currentYear }}</span>\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n            (click)=\"nextYear()\">\r\n            <span class=\"material-symbols-outlined tw-text-lg\">keyboard_double_arrow_right</span>\r\n          </button>\r\n        </div>\r\n        \r\n        <!-- Month Grid -->\r\n        <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n          @for (monthName of shortMonthNames; track $index) {\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\r\n              [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n              [class.tw-text-white]=\"$index === currentMonth\"\r\n              [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n              [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n              (click)=\"selectMonth($index)\">\r\n              {{ monthName }}\r\n            </button>\r\n          }\r\n        </div>\r\n        \r\n        <!-- Back to Calendar Button -->\r\n        <div class=\"tw-text-center\">\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n            (click)=\"toggleMonthYearSelector()\">\r\n            Back to Calendar\r\n          </button>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <!-- Calendar View -->\r\n      <div>\r\n        <!-- Days of Week Header -->\r\n        <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n          @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n            <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\r\n              {{ dayName }}\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- Calendar Days -->\r\n        <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n          @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n              [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n              [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n              [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n              [class.tw-text-white]=\"dayInfo.isSelected\"\r\n              [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n              [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n              [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n              (click)=\"selectDate(dayInfo)\">\r\n              {{ dayInfo.day }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Date Picker Footer -->\r\n    <div class=\"tw-flex tw-justify-between tw-mt-4 tw-pt-3 tw-border-t tw-border-gray-200\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\"\r\n        (click)=\"closeDatePicker()\">\r\n        Cancel\r\n      </button>\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-px-3 tw-py-1 tw-text-sm tw-bg-blue-500 tw-text-white hover:tw-bg-blue-600 tw-rounded-md tw-transition-colors\"\r\n        (click)=\"closeDatePicker()\">\r\n        Done\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:#6b7280}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:#f3f4f6;transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid rgb(229,231,235);margin-bottom:.5rem;padding-bottom:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: 
+        ], viewQueries: [{ propertyName: "datePickerTemplate", first: true, predicate: ["datePickerTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-input\">\r\n    <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\r\n    @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === 'url') {\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            @if (label && !labelHide) {\r\n            <label [for]=\"id\" class=\"cide-input-label\">{{label}}</label>\r\n            }\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                @if (leadingIcon) {\r\n                <span class=\"cide-input-leading-icon-wrapper\">\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\r\n                <!-- Trailing icon -->\r\n                @if (trailingIconInternal) {\r\n                <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\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\r\n                <!-- Clear -->\r\n                @if (clearInput && ngModel) {\r\n                <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\r\n                    <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n                </button>\r\n                }\r\n\r\n                <!-- Date Input Wrapper -->\r\n                @if (type === 'date') {\r\n                <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n                    <!-- Date Input (read-only to prevent manual 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                        [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n                        [autocomplete]=\"autocomplete\"\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 tw-cursor-pointer\" />\r\n                    \r\n                    <!-- Placeholder overlay for empty date -->\r\n                    @if (!ngModel && placeholder) {\r\n                    <div class=\"cide-input-date-overlay\">\r\n                        {{placeholder}}\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- Date picker is now rendered as a portal appended to body -->\r\n                </div>\r\n                }\r\n\r\n                <!-- Regular Input (non-date, non-url) -->\r\n                @if (type !== 'date' && type !== 'url') {\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                }\r\n\r\n                <!-- URL Input -->\r\n                @if (type === 'url') {\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\"\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                }\r\n            </div>\r\n            <!-- error text / helper text -->\r\n            @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\r\n            <span class=\"cide-input-help-error-text\">{{\r\n                isValid\r\n                ? helperText : (errorText ?\r\n                (isTouched ? errorText : helperText)\r\n                : helperText)}}\r\n            </span>\r\n            }\r\n        </div>\r\n    }\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    @if (type === 'checkbox') {\r\n    <div 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                @if (!labelHide) {\r\n                <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\r\n                }\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\r\n    <!-------------------------------------------SELECT------------------------------------------->\r\n    @if (type === 'select') {\r\n    <div>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    }\r\n</div>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTemplate>\r\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n    <!-- Date Picker Header -->\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"previousMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-lg\">chevron_left</span>\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-text-lg tw-font-semibold tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n        (click)=\"toggleMonthYearSelector()\">\r\n        {{ monthNames[currentMonth] }} {{ currentYear }}\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"nextMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-lg\">chevron_right</span>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Month/Year Selector -->\r\n    @if (showMonthYearSelector) {\r\n      <div class=\"tw-mb-4\">\r\n        <!-- Year Navigation -->\r\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n            (click)=\"previousYear()\">\r\n            <span class=\"material-symbols-outlined tw-text-lg\">keyboard_double_arrow_left</span>\r\n          </button>\r\n          <span class=\"tw-text-lg tw-font-semibold tw-text-gray-800\">{{ currentYear }}</span>\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n            (click)=\"nextYear()\">\r\n            <span class=\"material-symbols-outlined tw-text-lg\">keyboard_double_arrow_right</span>\r\n          </button>\r\n        </div>\r\n        \r\n        <!-- Month Grid -->\r\n        <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n          @for (monthName of shortMonthNames; track $index) {\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\r\n              [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n              [class.tw-text-white]=\"$index === currentMonth\"\r\n              [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n              [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n              (click)=\"selectMonth($index)\">\r\n              {{ monthName }}\r\n            </button>\r\n          }\r\n        </div>\r\n        \r\n        <!-- Back to Calendar Button -->\r\n        <div class=\"tw-text-center\">\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n            (click)=\"toggleMonthYearSelector()\">\r\n            Back to Calendar\r\n          </button>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <!-- Calendar View -->\r\n      <div>\r\n        <!-- Days of Week Header -->\r\n        <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n          @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n            <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\r\n              {{ dayName }}\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- Calendar Days -->\r\n        <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n          @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n              [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n              [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n              [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n              [class.tw-text-white]=\"dayInfo.isSelected\"\r\n              [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n              [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n              [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n              (click)=\"selectDate(dayInfo)\">\r\n              {{ dayInfo.day }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Date Picker Footer -->\r\n    <div class=\"tw-flex tw-justify-between tw-mt-4 tw-pt-3 tw-border-t tw-border-gray-200\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\"\r\n        (click)=\"closeDatePicker()\">\r\n        Cancel\r\n      </button>\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-px-3 tw-py-1 tw-text-sm tw-bg-blue-500 tw-text-white hover:tw-bg-blue-600 tw-rounded-md tw-transition-colors\"\r\n        (click)=\"closeDatePicker()\">\r\n        Done\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:#6b7280}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:#f3f4f6;transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid rgb(229,231,235);margin-bottom:.5rem;padding-bottom:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // directives
                 CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: 
                 // for ngModel
@@ -1157,7 +1157,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 | DATE------------------------------------------>\r\n    @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date') {\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            @if (label && !labelHide) {\r\n            <label [for]=\"id\" class=\"cide-input-label\">{{label}}</label>\r\n            }\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                @if (leadingIcon) {\r\n                <span class=\"cide-input-leading-icon-wrapper\">\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\r\n                <!-- Trailing icon -->\r\n                @if (trailingIconInternal) {\r\n                <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\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\r\n                <!-- Clear -->\r\n                @if (clearInput && ngModel) {\r\n                <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\r\n                    <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n                </button>\r\n                }\r\n\r\n                <!-- Date Input Wrapper -->\r\n                @if (type === 'date') {\r\n                <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n                    <!-- Date Input (read-only to prevent manual 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                        [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n                        [autocomplete]=\"autocomplete\"\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 tw-cursor-pointer\" />\r\n                    \r\n                    <!-- Placeholder overlay for empty date -->\r\n                    @if (!ngModel && placeholder) {\r\n                    <div class=\"cide-input-date-overlay\">\r\n                        {{placeholder}}\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- Date picker is now rendered as a portal appended to body -->\r\n                </div>\r\n                }\r\n\r\n                <!-- Regular Input (non-date) -->\r\n                @if (type !== 'date') {\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                }\r\n            </div>\r\n            <!-- error text / helper text -->\r\n            @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\r\n            <span class=\"cide-input-help-error-text\">{{\r\n                isValid\r\n                ? helperText : (errorText ?\r\n                (isTouched ? errorText : helperText)\r\n                : helperText)}}\r\n            </span>\r\n            }\r\n        </div>\r\n    }\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    @if (type === 'checkbox') {\r\n    <div 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                @if (!labelHide) {\r\n                <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\r\n                }\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\r\n    <!-------------------------------------------SELECT------------------------------------------->\r\n    @if (type === 'select') {\r\n    <div>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    }\r\n</div>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTemplate>\r\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n    <!-- Date Picker Header -->\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"previousMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-lg\">chevron_left</span>\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-text-lg tw-font-semibold tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n        (click)=\"toggleMonthYearSelector()\">\r\n        {{ monthNames[currentMonth] }} {{ currentYear }}\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"nextMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-lg\">chevron_right</span>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Month/Year Selector -->\r\n    @if (showMonthYearSelector) {\r\n      <div class=\"tw-mb-4\">\r\n        <!-- Year Navigation -->\r\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n            (click)=\"previousYear()\">\r\n            <span class=\"material-symbols-outlined tw-text-lg\">keyboard_double_arrow_left</span>\r\n          </button>\r\n          <span class=\"tw-text-lg tw-font-semibold tw-text-gray-800\">{{ currentYear }}</span>\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n            (click)=\"nextYear()\">\r\n            <span class=\"material-symbols-outlined tw-text-lg\">keyboard_double_arrow_right</span>\r\n          </button>\r\n        </div>\r\n        \r\n        <!-- Month Grid -->\r\n        <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n          @for (monthName of shortMonthNames; track $index) {\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\r\n              [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n              [class.tw-text-white]=\"$index === currentMonth\"\r\n              [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n              [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n              (click)=\"selectMonth($index)\">\r\n              {{ monthName }}\r\n            </button>\r\n          }\r\n        </div>\r\n        \r\n        <!-- Back to Calendar Button -->\r\n        <div class=\"tw-text-center\">\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n            (click)=\"toggleMonthYearSelector()\">\r\n            Back to Calendar\r\n          </button>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <!-- Calendar View -->\r\n      <div>\r\n        <!-- Days of Week Header -->\r\n        <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n          @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n            <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\r\n              {{ dayName }}\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- Calendar Days -->\r\n        <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n          @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n              [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n              [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n              [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n              [class.tw-text-white]=\"dayInfo.isSelected\"\r\n              [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n              [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n              [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n              (click)=\"selectDate(dayInfo)\">\r\n              {{ dayInfo.day }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Date Picker Footer -->\r\n    <div class=\"tw-flex tw-justify-between tw-mt-4 tw-pt-3 tw-border-t tw-border-gray-200\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\"\r\n        (click)=\"closeDatePicker()\">\r\n        Cancel\r\n      </button>\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-px-3 tw-py-1 tw-text-sm tw-bg-blue-500 tw-text-white hover:tw-bg-blue-600 tw-rounded-md tw-transition-colors\"\r\n        (click)=\"closeDatePicker()\">\r\n        Done\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:#6b7280}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:#f3f4f6;transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid rgb(229,231,235);margin-bottom:.5rem;padding-bottom:.5rem}\n"] }]
+                    ], template: "<div class=\"cide-input\">\r\n    <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\r\n    @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === 'url') {\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            @if (label && !labelHide) {\r\n            <label [for]=\"id\" class=\"cide-input-label\">{{label}}</label>\r\n            }\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                @if (leadingIcon) {\r\n                <span class=\"cide-input-leading-icon-wrapper\">\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\r\n                <!-- Trailing icon -->\r\n                @if (trailingIconInternal) {\r\n                <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\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\r\n                <!-- Clear -->\r\n                @if (clearInput && ngModel) {\r\n                <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\r\n                    <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n                </button>\r\n                }\r\n\r\n                <!-- Date Input Wrapper -->\r\n                @if (type === 'date') {\r\n                <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n                    <!-- Date Input (read-only to prevent manual 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                        [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n                        [autocomplete]=\"autocomplete\"\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 tw-cursor-pointer\" />\r\n                    \r\n                    <!-- Placeholder overlay for empty date -->\r\n                    @if (!ngModel && placeholder) {\r\n                    <div class=\"cide-input-date-overlay\">\r\n                        {{placeholder}}\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- Date picker is now rendered as a portal appended to body -->\r\n                </div>\r\n                }\r\n\r\n                <!-- Regular Input (non-date, non-url) -->\r\n                @if (type !== 'date' && type !== 'url') {\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                }\r\n\r\n                <!-- URL Input -->\r\n                @if (type === 'url') {\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\"\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                }\r\n            </div>\r\n            <!-- error text / helper text -->\r\n            @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\r\n            <span class=\"cide-input-help-error-text\">{{\r\n                isValid\r\n                ? helperText : (errorText ?\r\n                (isTouched ? errorText : helperText)\r\n                : helperText)}}\r\n            </span>\r\n            }\r\n        </div>\r\n    }\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    @if (type === 'checkbox') {\r\n    <div 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                @if (!labelHide) {\r\n                <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\r\n                }\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\r\n    <!-------------------------------------------SELECT------------------------------------------->\r\n    @if (type === 'select') {\r\n    <div>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    }\r\n</div>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTemplate>\r\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n    <!-- Date Picker Header -->\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"previousMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-lg\">chevron_left</span>\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-text-lg tw-font-semibold tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n        (click)=\"toggleMonthYearSelector()\">\r\n        {{ monthNames[currentMonth] }} {{ currentYear }}\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"nextMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-lg\">chevron_right</span>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Month/Year Selector -->\r\n    @if (showMonthYearSelector) {\r\n      <div class=\"tw-mb-4\">\r\n        <!-- Year Navigation -->\r\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n            (click)=\"previousYear()\">\r\n            <span class=\"material-symbols-outlined tw-text-lg\">keyboard_double_arrow_left</span>\r\n          </button>\r\n          <span class=\"tw-text-lg tw-font-semibold tw-text-gray-800\">{{ currentYear }}</span>\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n            (click)=\"nextYear()\">\r\n            <span class=\"material-symbols-outlined tw-text-lg\">keyboard_double_arrow_right</span>\r\n          </button>\r\n        </div>\r\n        \r\n        <!-- Month Grid -->\r\n        <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n          @for (monthName of shortMonthNames; track $index) {\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\r\n              [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n              [class.tw-text-white]=\"$index === currentMonth\"\r\n              [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n              [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n              (click)=\"selectMonth($index)\">\r\n              {{ monthName }}\r\n            </button>\r\n          }\r\n        </div>\r\n        \r\n        <!-- Back to Calendar Button -->\r\n        <div class=\"tw-text-center\">\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n            (click)=\"toggleMonthYearSelector()\">\r\n            Back to Calendar\r\n          </button>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <!-- Calendar View -->\r\n      <div>\r\n        <!-- Days of Week Header -->\r\n        <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n          @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n            <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\r\n              {{ dayName }}\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- Calendar Days -->\r\n        <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n          @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n              [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n              [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n              [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n              [class.tw-text-white]=\"dayInfo.isSelected\"\r\n              [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n              [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n              [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n              (click)=\"selectDate(dayInfo)\">\r\n              {{ dayInfo.day }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Date Picker Footer -->\r\n    <div class=\"tw-flex tw-justify-between tw-mt-4 tw-pt-3 tw-border-t tw-border-gray-200\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\"\r\n        (click)=\"closeDatePicker()\">\r\n        Cancel\r\n      </button>\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-px-3 tw-py-1 tw-text-sm tw-bg-blue-500 tw-text-white hover:tw-bg-blue-600 tw-rounded-md tw-transition-colors\"\r\n        (click)=\"closeDatePicker()\">\r\n        Done\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:#6b7280}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:#f3f4f6;transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid rgb(229,231,235);margin-bottom:.5rem;padding-bottom:.5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fill: [{
                 type: Input
             }], label: [{
@@ -1560,6 +1560,18 @@ class CideSelectComponent {
     searchable = false;
     showSearchInput = true;
     loading = false;
+    /**
+     * Key to extract the value from option objects.
+     * Default: 'value'. Use when options are objects with custom property names.
+     * Example: if options = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}], set valueKey = 'id'
+     */
+    valueKey = 'value';
+    /**
+     * Key to extract the label from option objects.
+     * Default: 'label'. Use when options are objects with custom property names.
+     * Example: if options = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}], set labelKey = 'name'
+     */
+    labelKey = 'label';
     ngModelChange = new EventEmitter();
     // eslint-disable-next-line @angular-eslint/no-output-native, @angular-eslint/no-output-rename
     selectionChange = new EventEmitter();
@@ -1603,7 +1615,7 @@ class CideSelectComponent {
     ngOnChanges(changes) {
         if (changes['ngModel']) {
             this.validateValue(this.ngModel);
-            if (!this.options.find(option => option?.value === this.ngModel)) {
+            if (!this.options.find(option => this.getOptionValue(option) === this.ngModel)) {
                 this.searchChange.emit({
                     query: "",
                     value: this.ngModel // emit raw value for external handlers
@@ -1719,16 +1731,17 @@ class CideSelectComponent {
             this.logDebug('selectOption called', { option, disabled: option.disabled, multiple: this.multiple });
             if (option.disabled)
                 return;
+            const optionValue = this.getOptionValue(option);
             if (this.multiple) {
                 // Parse current CSV value to array
                 const currentCsv = this.ngModel || '';
                 const current = currentCsv ? currentCsv.split(',').map(v => v.trim()).filter(Boolean) : [];
-                const idx = current.findIndex(v => v.toString() === option.value.toString());
+                const idx = current.findIndex(v => v.toString() === optionValue.toString());
                 if (idx >= 0) {
                     current.splice(idx, 1);
                 }
                 else {
-                    current.push(option.value.toString());
+                    current.push(optionValue.toString());
                 }
                 // Convert back to CSV
                 const newCsv = current.join(',');
@@ -1742,11 +1755,11 @@ class CideSelectComponent {
                 // Do not close dropdown in multi-select mode
             }
             else {
-                this.ngModel = option.value;
-                this.onChange(option.value);
-                this.ngModelChange.emit(option.value);
+                this.ngModel = optionValue;
+                this.onChange(optionValue);
+                this.ngModelChange.emit(optionValue);
                 this.selectionChange.emit(option);
-                this.validateValue(option.value);
+                this.validateValue(optionValue);
                 this.isOpen = false;
                 this.isTouched = true;
                 this.onTouched();
@@ -1825,12 +1838,13 @@ class CideSelectComponent {
                 return '';
             const values = csvValue.split(',').map(v => v.trim()).filter(Boolean);
             const labels = values
-                .map(v => this.options.find(o => o.value.toString() === v)?.label)
+                .map(v => this.options.find(o => this.getOptionValue(o).toString() === v))
+                .map(option => option ? this.getOptionLabel(option) : '')
                 .filter((l) => typeof l === 'string');
             return labels.join(', ');
         }
-        const selectedOption = this.options.find(option => option.value === this.ngModel);
-        return selectedOption ? selectedOption.label : '';
+        const selectedOption = this.options.find(option => this.getOptionValue(option) === this.ngModel);
+        return selectedOption ? this.getOptionLabel(selectedOption) : '';
     }
     filterOptions() {
         try {
@@ -1838,7 +1852,7 @@ class CideSelectComponent {
                 this.filteredOptions = [...this.options];
             }
             else {
-                this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchTerm.toLowerCase()));
+                this.filteredOptions = this.options.filter(option => this.getOptionLabel(option).toLowerCase().includes(this.searchTerm.toLowerCase()));
             }
         }
         catch {
@@ -1872,12 +1886,28 @@ class CideSelectComponent {
             if (!csvValue.trim())
                 return false;
             const values = csvValue.split(',').map(v => v.trim()).filter(Boolean);
-            return values.includes(option.value.toString());
+            return values.includes(this.getOptionValue(option).toString());
+        }
+        return this.getOptionValue(option) === this.ngModel;
+    }
+    // Helper methods to extract values and labels from options
+    getOptionValue(option) {
+        if (this.isSelectOption(option)) {
+            return option.value;
         }
-        return option.value === this.ngModel;
+        return option[this.valueKey] || '';
+    }
+    getOptionLabel(option) {
+        if (this.isSelectOption(option)) {
+            return option.label;
+        }
+        return option[this.labelKey] || '';
+    }
+    isSelectOption(option) {
+        return 'value' in option && 'label' in option;
     }
     trackByValue(index, option) {
-        return option.value;
+        return this.getOptionValue(option);
     }
     // Debug helpers
     logDebug(message, data) {
@@ -1902,7 +1932,7 @@ class CideSelectComponent {
         return timeoutId;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideSelectComponent, isStandalone: true, selector: "cide-ele-select", inputs: { label: "label", labelHide: "labelHide", placeholder: "placeholder", helperText: "helperText", errorText: "errorText", required: "required", disabled: "disabled", id: "id", ngModel: "ngModel", size: "size", fill: "fill", labelPlacement: "labelPlacement", labelDir: "labelDir", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", clearInput: "clearInput", options: "options", multiple: "multiple", searchable: "searchable", showSearchInput: "showSearchInput", loading: "loading" }, outputs: { ngModelChange: "ngModelChange", selectionChange: "change", searchChange: "searchChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideSelectComponent, isStandalone: true, selector: "cide-ele-select", inputs: { label: "label", labelHide: "labelHide", placeholder: "placeholder", helperText: "helperText", errorText: "errorText", required: "required", disabled: "disabled", id: "id", ngModel: "ngModel", size: "size", fill: "fill", labelPlacement: "labelPlacement", labelDir: "labelDir", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", clearInput: "clearInput", options: "options", multiple: "multiple", searchable: "searchable", showSearchInput: "showSearchInput", loading: "loading", valueKey: "valueKey", labelKey: "labelKey" }, outputs: { ngModelChange: "ngModelChange", selectionChange: "change", searchChange: "searchChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CideSelectComponent),
@@ -1913,7 +1943,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: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 }] });
+        ], 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  @if (label && !labelHide) {\n    <label [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n  }\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    @if (leadingIcon) {\n      <span class=\"cide-input-leading-icon-wrapper\">\n        <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n      </span>\n    }\n\n    <!-- Select Button -->\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"[\n        ((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md'),\n        (!leadingIcon ? 'tw-pl-1' : ''),\n        (trailingIcon || clearInput || loading ? 'tw-pr-8' : ''),\n        (!trailingIcon && !clearInput && !loading ? 'tw-pr-1' : ''),\n        ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')),\n        (labelHide ? '!tw-mt-0' : ''),\n        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer'\n      ]\" class=\"cide-select-button\">\n\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n      </span>\n    </button>\n\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n    @if (!clearInput || !ngModel || loading) {\n      <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n        <!-- Loading Spinner -->\n        @if (loading) {\n          <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n            <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n              <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n              <path class=\"tw-opacity-75\" fill=\"currentColor\" 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        }\n        <!-- Dropdown Arrow -->\n        @if (!loading) {\n          <span class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n            [ngClass]=\"{'tw-rotate-180': isOpen}\">\n            expand_more\n          </span>\n        }\n      </span>\n    }\n\n    <!-- Clear Button -->\n    @if (clearInput && ngModel) {\n      <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n        <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n      </button>\n    }\n\n    <!-- Dropdown Options -->\n    @if (isOpen) {\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        [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        @if (searchable && showSearchInput) {\n          <div 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\n        <!-- Options List -->\n        <div class=\"tw-py-1\">\n          <!-- Loading State -->\n          @if (loading) {\n            <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n              <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n                <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" 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\n          <!-- Options -->\n          @if (!loading) {\n            @for (option of filteredOptions; track trackByValue($index, option)) {\n              <button type=\"button\"\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                {{ getOptionLabel(option) }}\n              </button>\n            }\n          }\n\n          <!-- No options message -->\n          @if (!loading && filteredOptions.length === 0) {\n            <div 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          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Error/Helper Text -->\n  @if ((errorText || helperText) && !isValid) {\n    <span class=\"cide-select-help-error-text\">\n      {{ errorText || helperText }}\n    </span>\n  }\n  @if (helperText && isValid) {\n    <span class=\"cide-select-help-error-text\">\n      {{ helperText }}\n    </span>\n  }\n</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: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideSelectComponent, decorators: [{
             type: Component,
@@ -1928,7 +1958,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:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"cide-select\" [ngClass]=\"{\n  'cide-element-size-xxs': (size === '2xs'),\n  'cide-element-size-xs': (size === 'xs'),\n  'cide-element-size-sm': (size === 'sm'),\n  'cide-element-size-md': (size === 'md'),\n  'cide-element-size-lg': (size === 'lg'),\n  'cide-element-input-label-floating': (labelPlacement === 'floating'),\n  'cide-element-input-label-start': (labelDir === 'start'),\n  'cide-element-input-label-end': (labelDir === 'end'),\n  'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n  'cide-element-input-label-less': (!label || labelHide),\n  'cide-element-style-outline': (fill === 'outline'),\n  'cide-element-style-solid': (fill === 'solid'),\n  'cide-element-style-standard': (fill === 'standard'),\n}\">\n  @if (label && !labelHide) {\n    <label [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n  }\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    @if (leadingIcon) {\n      <span class=\"cide-input-leading-icon-wrapper\">\n        <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n      </span>\n    }\n\n    <!-- Select Button -->\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"[\n        ((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md'),\n        (!leadingIcon ? 'tw-pl-1' : ''),\n        (trailingIcon || clearInput || loading ? 'tw-pr-8' : ''),\n        (!trailingIcon && !clearInput && !loading ? 'tw-pr-1' : ''),\n        ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')),\n        (labelHide ? '!tw-mt-0' : ''),\n        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer'\n      ]\" class=\"cide-select-button\">\n\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n      </span>\n    </button>\n\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n    @if (!clearInput || !ngModel || loading) {\n      <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n        <!-- Loading Spinner -->\n        @if (loading) {\n          <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n            <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n              <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n              <path class=\"tw-opacity-75\" fill=\"currentColor\" 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        }\n        <!-- Dropdown Arrow -->\n        @if (!loading) {\n          <span class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n            [ngClass]=\"{'tw-rotate-180': isOpen}\">\n            expand_more\n          </span>\n        }\n      </span>\n    }\n\n    <!-- Clear Button -->\n    @if (clearInput && ngModel) {\n      <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n        <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n      </button>\n    }\n\n    <!-- Dropdown Options -->\n    @if (isOpen) {\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        [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        @if (searchable && showSearchInput) {\n          <div 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\n        <!-- Options List -->\n        <div class=\"tw-py-1\">\n          <!-- Loading State -->\n          @if (loading) {\n            <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n              <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n                <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" 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\n          <!-- Options -->\n          @if (!loading) {\n            @for (option of filteredOptions; track trackByValue($index, option)) {\n              <button type=\"button\"\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                {{ getOptionLabel(option) }}\n              </button>\n            }\n          }\n\n          <!-- No options message -->\n          @if (!loading && filteredOptions.length === 0) {\n            <div 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          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Error/Helper Text -->\n  @if ((errorText || helperText) && !isValid) {\n    <span class=\"cide-select-help-error-text\">\n      {{ errorText || helperText }}\n    </span>\n  }\n  @if (helperText && isValid) {\n    <span class=\"cide-select-help-error-text\">\n      {{ helperText }}\n    </span>\n  }\n</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]
@@ -1977,6 +2007,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Input
             }], loading: [{
                 type: Input
+            }], valueKey: [{
+                type: Input
+            }], labelKey: [{
+                type: Input
             }], ngModelChange: [{
                 type: Output
             }], selectionChange: [{
@@ -4264,7 +4298,7 @@ class CideEleDataGridComponent {
         return this.mergedConfig().scroll;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleDataGridComponent, isStandalone: true, selector: "cide-ele-data-grid", inputs: { config: "config", templateRenderers: "templateRenderers", customFormatters: "customFormatters", actionHandlers: "actionHandlers", serverSidePagination: "serverSidePagination", totalServerItems: "totalServerItems", currentServerPage: "currentServerPage", currentServerPageSize: "currentServerPageSize", dragDropEnabled: "dragDropEnabled" }, outputs: { gridEvent: "gridEvent" }, usesOnChanges: true, ngImport: i0, template: "  <!-- Data Grid Component -->\n  <div class=\"data-grid-container tw-bg-white tw-shadow tw-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \n       [ngClass]=\"[\n         mergedConfig().tableClass || '',\n         mergedConfig().fullHeight ? 'tw-h-full' : '',\n         isDragDropEnabled() ? 'drag-drop-enabled' : '',\n         isTreeEnabled() ? 'tree-enabled' : ''\n       ]\">\n  \n  <!-- Header Section -->\n  @if (mergedConfig().title || mergedConfig().subtitle) {\n    <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n      @if (mergedConfig().title) {\n        <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\n          {{ mergedConfig().title }}\n        </h3>\n      }\n      @if (mergedConfig().subtitle) {\n        <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\n          {{ mergedConfig().subtitle }}\n        </p>\n      }\n    </div>\n  }\n\n  <!-- Search Section -->\n  @if (searchConfig.enabled) {\n    <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Search Input -->\n        <div class=\"tw-max-w-md\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\"\n            (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\"\n            [disabled]=\"loading() || isRefreshing()\"\n            leadingIcon=\"search\"\n            fill=\"outline\">\n          </cide-ele-input>\n        </div>\n        \n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <button cideEleButton \n                    variant=\"outline\" \n                    size=\"sm\" \n                    (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\n                    class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\n              <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\n              Reset Order\n            </button>\n            <button cideEleButton \n                    variant=\"primary\" \n                    size=\"sm\" \n                    (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\n                    class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\n              <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\n              Save Order\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n     <!-- Table Section -->\n   <div class=\"tw-overflow-x-auto tw-relative\"\n        [ngClass]=\"{\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n          'tw-overflow-y-auto': scrollConfig?.enabled,\n          'tw-max-h-full': scrollConfig?.enabled\n        }\"\n        [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n        [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n           [class.empty-table]=\"displayedData.length === 0\"\n           [ngClass]=\"{\n             'tw-table-striped': mergedConfig().striped,\n             'tw-border': mergedConfig().bordered,\n             'tw-table-sm': mergedConfig().compact\n           }\"\n           style=\"table-layout: fixed;\">\n      \n      <!-- Table Header -->\n      <thead class=\"tw-bg-gray-50\" \n            [ngClass]=\"[\n              mergedConfig().headerClass || '',\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\n            ]\">\n        <tr>\n          @for (column of columns; track column.key) {\n            <th\n              class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-truncate\"\n              [ngClass]=\"[\n                getColumnWidthClass(column.width),\n                getColumnMaxWidthClass(column.width),\n                column.align === 'center' ? 'tw-text-center' : '',\n                column.align === 'right' ? 'tw-text-right' : ''\n              ]\"\n              [title]=\"column.header\">\n              {{ column.header }}\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n          <!-- Skeleton Loading Rows -->\n          @for (skeletonItem of getSkeletonArray(); track $index) {\n            <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n              @for (column of columns; track column.key) {\n                <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\">\n                  <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n                </td>\n              }\n            </tr>\n          }\n        } @else {\n          @for (item of displayedData; track trackByFn($index, item)) {\n            <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\n                [ngClass]=\"[\n                  mergedConfig().rowClass || '',\n                  isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n                  isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n                  !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n                  isTreeEnabled() ? getTreeLevelClass(item) : ''\n                ]\"\n                [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n                [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\n                (click)=\"onRowClick(item)\"\n                (keydown.enter)=\"onRowClick(item)\"\n                (keydown.space)=\"onRowClick(item)\"\n                [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n                [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n                [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n                [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n                [draggable]=\"isDragDropEnabled()\"\n                (dragstart)=\"onDragStart($event, item, $index)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, item, $index)\"\n                (dragend)=\"onDragEnd($event)\">\n              \n              @for (column of columns; track column.key) {\n                <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width),\n                      mergedConfig().cellClass || '',\n                      column.align === 'center' ? 'tw-text-center' : '',\n                      column.align === 'right' ? 'tw-text-right' : '',\n                      column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n                    ]\"\n                    [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n                    [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\n                    [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '100px'\">\n                  <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n                  @if (isTreeEnabled() && $index === 0) {\n                    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                      <!-- Tree Indentation -->\n                      <div class=\"tw-flex tw-items-center\">\n                        @if (hasChildren(item)) {\n                          <button \n                            variant=\"outline\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n                            class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                            [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                            <cide-ele-icon \n                              class=\"tw-w-3 tw-h-3\"\n                              [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                              [class.tw-rotate-90]=\"isItemExpanded(item)\"\n                              size=\"xs\">\n                              chevron_right\n                            </cide-ele-icon>\n                          </button>\n                        } @else {\n                          <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n                            <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n                          </div>\n                        }\n                      </div>\n                      \n                      <!-- Cell Content -->\n                      <div class=\"tw-flex-1 tw-w-full\">\n                        @if (column.type === 'text') {\n                          <p class=\"tw-text-sm tw-text-gray-900\"\n                             [class.tw-truncate]=\"column.truncate\"\n                             [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </p>\n                        } @else if (column.type === 'number') {\n                          <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </span>\n                        } @else if (column.type === 'date') {\n                          <span class=\"tw-text-sm tw-text-gray-600\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </span>\n                        } @else if (column.type === 'boolean') {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                                [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                            {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                          </span>\n                        } @else if (column.type === 'status' && column.statusConfig) {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                                [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                            {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                          </span>\n                        } @else if (column.type === 'actions' && column.actions) {\n                          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                            @for (action of column.actions; track action.key) {\n                              <button\n                                cideEleButton\n                                [variant]=\"action.variant || 'ghost'\"\n                                size=\"xs\"\n                                type=\"button\"\n                                (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                                [title]=\"action.tooltip || action.label\"\n                                [disabled]=\"isRefreshing()\"\n                                class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                                [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                                [ngClass]=\"{\n                                  'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                  'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                  'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                  'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                }\">\n                                @if (action.icon) {\n                                  <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                                    <path d=\"M10 12l-5-5h10l-5 5z\"/>\n                                  </svg>\n                                }\n                                {{ action.label }}\n                              </button>\n                            }\n                          </div>\n                        } @else if (column.type === 'custom') {\n                          <!-- Template Renderer -->\n                          @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                            <ng-container \n                              *ngTemplateOutlet=\"getTemplateRenderer(column.renderer)!; \n                                                context: getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                            </ng-container>\n                          }\n                          <!-- Default rendering -->\n                          @else {\n                            <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                          }\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    <!-- Regular cell content (non-tree or non-first column) -->\n                    @if (column.type === 'text') {\n                      <p class=\"tw-text-sm tw-text-gray-900\"\n                         [class.tw-truncate]=\"column.truncate\"\n                         [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                      </p>\n                    } @else if (column.type === 'number') {\n                      <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                      </span>\n                    } @else if (column.type === 'date') {\n                      <span class=\"tw-text-sm tw-text-gray-600\">\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                      </span>\n                    } @else if (column.type === 'boolean') {\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                            [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                        {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                      </span>\n                    } @else if (column.type === 'status' && column.statusConfig) {\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                            [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                        {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                      </span>\n                    } @else if (column.type === 'actions' && column.actions) {\n                      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                        @for (action of column.actions; track action.key) {\n                          <button\n                            cideEleButton\n                            [variant]=\"action.variant || 'ghost'\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                            [title]=\"action.tooltip || action.label\"\n                            [disabled]=\"isRefreshing()\"\n                            class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                            [ngClass]=\"{\n                              'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                              'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                              'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                              'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                            }\">\n                            @if (action.icon) {\n                              <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                                <path d=\"M10 12l-5-5h10l-5 5z\"/>\n                              </svg>\n                            }\n                            {{ action.label }}\n                          </button>\n                        }\n                      </div>\n                    } @else if (column.type === 'custom') {\n                      <!-- Template Renderer -->\n                      @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                        <ng-container \n                          *ngTemplateOutlet=\"getTemplateRenderer(column.renderer)!; \n                                            context: getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                        </ng-container>\n                      }\n                      <!-- Default rendering -->\n                      @else {\n                        <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n          }\n          \n          <!-- Empty State -->\n          @if (displayedData.length === 0) {\n            <tr class=\"tw-h-full\">\n              <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n                <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n                  <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"></path>\n                  </svg>\n                  <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n                  <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n                    @if (searchQuery()) {\n                      No results match your search criteria.\n                    } @else {\n                      There are no items to display.\n                    }\n                  </p>\n                </div>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n     <!-- Pagination Section -->\n   @if (paginationConfig.enabled && totalItems() > 0) {\n     <div class=\"tw-px-3 tw-py-2 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n          [class.tw-opacity-60]=\"isRefreshing()\">\n      \n      <!-- Results Info and Page Size -->\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-4\">\n            <p class=\"tw-text-sm tw-text-gray-700\">\n              Showing {{ getItemRangeText() }} results\n            </p>\n            \n                         <!-- Page Size Selector -->\n             <div class=\"tw-flex tw-items-center tw-space-x-2\">\n               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-20 tw-relative\">\n                 <cide-ele-select\n                   [labelHide]=\"true\"\n                   [ngModel]=\"pageSize()\"\n                   (ngModelChange)=\"updatePageSize($event)\"\n                   [options]=\"getPageSizeOptions()\"\n                   [disabled]=\"isRefreshing()\"\n                   fill=\"outline\"\n                   size=\"sm\"\n                   class=\"tw-z-30\">\n                 </cide-ele-select>\n               </div>\n             </div>\n          </div>\n        }\n\n        <!-- Pagination Controls -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          \n          <!-- Previous/Next and Page Numbers -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            \n            <!-- First Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00AB\u00AB\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u2039\n            </button>\n            \n            <!-- Page Numbers -->\n            @for (page of getEnhancedPageNumbers(); track page) {\n              @if (page === '...') {\n                <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n              } @else {\n                <button\n                  cideEleButton\n                  [variant]=\"currentPage() === page ? 'primary' : 'outline'\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-px-3 tw-py-2 tw-text-sm tw-border tw-rounded-md tw-transition-colors\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white tw-border-blue-600': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u203A\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00BB\u00BB\n            </button>\n            \n          </div>\n\n          <!-- Quick Jump and Refresh -->\n          @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2 tw-border-l tw-border-gray-200 tw-pl-3\">\n              \n              <!-- Quick Jump -->\n              @if (paginationConfig.showQuickJump) {\n                                  <div class=\"tw-flex tw-items-center tw-space-x-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n                    <div class=\"tw-w-20\">\n                                              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                          [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n                          [disabled]=\"isRefreshing()\"\n                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    cideEleButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-px-3 tw-py-2 tw-text-sm tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  cideEleButton\n                  variant=\"outline\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"!tw-w-10 !tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-600 tw-bg-gray-100 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                  @if (isRefreshing()) {\n                    <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                      <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n                  } @else {\n                    <svg class=\"tw-h-4 tw-w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"></path>\n                    </svg>\n                  }\n                </button>\n              }\n            </div>\n          }\n          \n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#f9fafb}.data-grid-container.tw-table-sm th,.data-grid-container.tw-table-sm td{padding:.5rem 1rem}.data-grid-container tbody tr:hover{background-color:#f3f4f6}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#fffc;z-index:10}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls button{transition:all .15s ease-in-out}.data-grid-container .pagination-controls button:hover:not(:disabled){transform:translateY(-1px)}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed}.data-grid-container .pagination-controls button.active{box-shadow:0 2px 4px #3b82f64d}.data-grid-container .pagination-controls input[type=number]{transition:border-color .15s ease-in-out}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .status-badge{font-weight:500;letter-spacing:.025em}.data-grid-container .status-badge.active{background-color:#d1fae5;color:#065f46}.data-grid-container .status-badge.inactive{background-color:#fee2e2;color:#991b1b}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .empty-state{padding:3rem 1.5rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1rem;opacity:.4}.data-grid-container .empty-state h3{margin-bottom:.5rem}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #3b82f6;border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:#f8fafc;box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:10}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:#f3f4f6;border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleDataGridComponent, isStandalone: true, selector: "cide-ele-data-grid", inputs: { config: "config", templateRenderers: "templateRenderers", customFormatters: "customFormatters", actionHandlers: "actionHandlers", serverSidePagination: "serverSidePagination", totalServerItems: "totalServerItems", currentServerPage: "currentServerPage", currentServerPageSize: "currentServerPageSize", dragDropEnabled: "dragDropEnabled" }, outputs: { gridEvent: "gridEvent" }, usesOnChanges: true, ngImport: i0, template: "  <!-- Data Grid Component -->\n  <div class=\"data-grid-container tw-bg-white tw-shadow tw-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \n       [ngClass]=\"[\n         mergedConfig().tableClass || '',\n         mergedConfig().fullHeight ? 'tw-h-full' : '',\n         isDragDropEnabled() ? 'drag-drop-enabled' : '',\n         isTreeEnabled() ? 'tree-enabled' : ''\n       ]\">\n  \n  <!-- Header Section -->\n  @if (mergedConfig().title || mergedConfig().subtitle) {\n    <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n      @if (mergedConfig().title) {\n        <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\n          {{ mergedConfig().title }}\n        </h3>\n      }\n      @if (mergedConfig().subtitle) {\n        <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\n          {{ mergedConfig().subtitle }}\n        </p>\n      }\n    </div>\n  }\n\n  <!-- Search Section -->\n  @if (searchConfig.enabled) {\n    <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Search Input -->\n        <div class=\"tw-max-w-md\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\"\n            (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\"\n            [disabled]=\"loading() || isRefreshing()\"\n            leadingIcon=\"search\"\n            fill=\"outline\">\n          </cide-ele-input>\n        </div>\n        \n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <button cideEleButton \n                    variant=\"outline\" \n                    size=\"sm\" \n                    (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\n                    class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\n              <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\n              Reset Order\n            </button>\n            <button cideEleButton \n                    variant=\"primary\" \n                    size=\"sm\" \n                    (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\n                    class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\n              <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\n              Save Order\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n     <!-- Table Section -->\n   <div class=\"tw-overflow-x-auto tw-relative\"\n        [ngClass]=\"{\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n          'tw-overflow-y-auto': scrollConfig?.enabled,\n          'tw-max-h-full': scrollConfig?.enabled\n        }\"\n        [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n        [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n           [class.empty-table]=\"displayedData.length === 0\"\n           [ngClass]=\"{\n             'tw-table-striped': mergedConfig().striped,\n             'tw-border': mergedConfig().bordered,\n             'tw-table-sm': mergedConfig().compact\n           }\"\n           style=\"table-layout: fixed;\">\n      \n      <!-- Table Header -->\n      <thead class=\"tw-bg-gray-50\" \n            [ngClass]=\"[\n              mergedConfig().headerClass || '',\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\n            ]\">\n        <tr>\n          @for (column of columns; track column.key) {\n            <th\n              class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-truncate\"\n              [ngClass]=\"[\n                getColumnWidthClass(column.width),\n                getColumnMaxWidthClass(column.width),\n                column.align === 'center' ? 'tw-text-center' : '',\n                column.align === 'right' ? 'tw-text-right' : ''\n              ]\"\n              [title]=\"column.header\">\n              {{ column.header }}\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n          <!-- Skeleton Loading Rows -->\n          @for (skeletonItem of getSkeletonArray(); track $index) {\n            <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n              @for (column of columns; track column.key) {\n                <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\">\n                  <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n                </td>\n              }\n            </tr>\n          }\n        } @else {\n          @for (item of displayedData; track trackByFn($index, item)) {\n            <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\n                [ngClass]=\"[\n                  mergedConfig().rowClass || '',\n                  isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n                  isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n                  !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n                  isTreeEnabled() ? getTreeLevelClass(item) : ''\n                ]\"\n                [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n                [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\n                (click)=\"onRowClick(item)\"\n                (keydown.enter)=\"onRowClick(item)\"\n                (keydown.space)=\"onRowClick(item)\"\n                [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n                [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n                [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n                [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n                [draggable]=\"isDragDropEnabled()\"\n                (dragstart)=\"onDragStart($event, item, $index)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, item, $index)\"\n                (dragend)=\"onDragEnd($event)\">\n              \n              @for (column of columns; track column.key) {\n                <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width),\n                      mergedConfig().cellClass || '',\n                      column.align === 'center' ? 'tw-text-center' : '',\n                      column.align === 'right' ? 'tw-text-right' : '',\n                      column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n                    ]\"\n                    [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n                    [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\n                    [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '100px'\">\n                  <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n                  @if (isTreeEnabled() && $index === 0) {\n                    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                      <!-- Tree Indentation -->\n                      <div class=\"tw-flex tw-items-center\">\n                        @if (hasChildren(item)) {\n                          <button \n                            variant=\"outline\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n                            class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                            [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                            <cide-ele-icon \n                              class=\"tw-w-3 tw-h-3\"\n                              [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                              [class.tw-rotate-90]=\"isItemExpanded(item)\"\n                              size=\"xs\">\n                              chevron_right\n                            </cide-ele-icon>\n                          </button>\n                        } @else {\n                          <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n                            <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n                          </div>\n                        }\n                      </div>\n                      \n                      <!-- Cell Content -->\n                      <div class=\"tw-flex-1 tw-w-full\">\n                        @if (column.type === 'text') {\n                          <p class=\"tw-text-sm tw-text-gray-900\"\n                             [class.tw-truncate]=\"column.truncate\"\n                             [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </p>\n                        } @else if (column.type === 'number') {\n                          <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </span>\n                        } @else if (column.type === 'date') {\n                          <span class=\"tw-text-sm tw-text-gray-600\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </span>\n                        } @else if (column.type === 'boolean') {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                                [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                            {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                          </span>\n                        } @else if (column.type === 'status' && column.statusConfig) {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                                [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                            {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                          </span>\n                        } @else if (column.type === 'actions' && column.actions) {\n                          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                            @for (action of column.actions; track action.key) {\n                              <button\n                                cideEleButton\n                                [variant]=\"action.variant || 'ghost'\"\n                                size=\"xs\"\n                                type=\"button\"\n                                (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                                [title]=\"action.tooltip || action.label\"\n                                [disabled]=\"isRefreshing()\"\n                                class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                                [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                                [ngClass]=\"{\n                                  'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                  'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                  'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                  'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                }\">\n                                @if (action.icon) {\n                                  <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                                    <path d=\"M10 12l-5-5h10l-5 5z\"/>\n                                  </svg>\n                                }\n                                {{ action.label }}\n                              </button>\n                            }\n                          </div>\n                        } @else if (column.type === 'custom') {\n                          <!-- Template Renderer -->\n                          @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                            <ng-container \n                              *ngTemplateOutlet=\"getTemplateRenderer(column.renderer)!; \n                                                context: getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                            </ng-container>\n                          }\n                          <!-- Default rendering -->\n                          @else {\n                            <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                          }\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    <!-- Regular cell content (non-tree or non-first column) -->\n                    @if (column.type === 'text') {\n                      <p class=\"tw-text-sm tw-text-gray-900\"\n                         [class.tw-truncate]=\"column.truncate\"\n                         [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                      </p>\n                    } @else if (column.type === 'number') {\n                      <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                      </span>\n                    } @else if (column.type === 'date') {\n                      <span class=\"tw-text-sm tw-text-gray-600\">\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                      </span>\n                    } @else if (column.type === 'boolean') {\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                            [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                        {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                      </span>\n                    } @else if (column.type === 'status' && column.statusConfig) {\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                            [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                        {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                      </span>\n                    } @else if (column.type === 'actions' && column.actions) {\n                      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                        @for (action of column.actions; track action.key) {\n                          <button\n                            cideEleButton\n                            [variant]=\"action.variant || 'ghost'\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                            [title]=\"action.tooltip || action.label\"\n                            [disabled]=\"isRefreshing()\"\n                            class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                            [ngClass]=\"{\n                              'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                              'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                              'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                              'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                            }\">\n                            @if (action.icon) {\n                              <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                                <path d=\"M10 12l-5-5h10l-5 5z\"/>\n                              </svg>\n                            }\n                            {{ action.label }}\n                          </button>\n                        }\n                      </div>\n                    } @else if (column.type === 'custom') {\n                      <!-- Template Renderer -->\n                      @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                        <ng-container \n                          *ngTemplateOutlet=\"getTemplateRenderer(column.renderer)!; \n                                            context: getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                        </ng-container>\n                      }\n                      <!-- Default rendering -->\n                      @else {\n                        <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n          }\n          \n          <!-- Empty State -->\n          @if (displayedData.length === 0) {\n            <tr class=\"tw-h-full\">\n              <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n                <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n                  <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"></path>\n                  </svg>\n                  <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n                  <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n                    @if (searchQuery()) {\n                      No results match your search criteria.\n                    } @else {\n                      There are no items to display.\n                    }\n                  </p>\n                </div>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n     <!-- Pagination Section -->\n   @if (paginationConfig.enabled && totalItems() > 0) {\n     <div class=\"tw-px-3 tw-py-2 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n          [class.tw-opacity-60]=\"isRefreshing()\">\n      \n      <!-- Results Info and Page Size -->\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-4\">\n            <p class=\"tw-text-sm tw-text-gray-700\">\n              Showing {{ getItemRangeText() }} results\n            </p>\n            \n                         <!-- Page Size Selector -->\n             <div class=\"tw-flex tw-items-center tw-space-x-2\">\n               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-20 tw-relative\">\n                 <cide-ele-select\n                   [labelHide]=\"true\"\n                   [ngModel]=\"pageSize()\"\n                   (ngModelChange)=\"updatePageSize($event)\"\n                   [options]=\"getPageSizeOptions()\"\n                   [disabled]=\"isRefreshing()\"\n                   fill=\"outline\"\n                   size=\"sm\"\n                   class=\"tw-z-30\">\n                 </cide-ele-select>\n               </div>\n             </div>\n          </div>\n        }\n\n        <!-- Pagination Controls -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          \n          <!-- Previous/Next and Page Numbers -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            \n            <!-- First Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00AB\u00AB\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u2039\n            </button>\n            \n            <!-- Page Numbers -->\n            @for (page of getEnhancedPageNumbers(); track page) {\n              @if (page === '...') {\n                <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n              } @else {\n                <button\n                  cideEleButton\n                  [variant]=\"currentPage() === page ? 'primary' : 'outline'\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-px-3 tw-py-2 tw-text-sm tw-border tw-rounded-md tw-transition-colors\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white tw-border-blue-600': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u203A\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00BB\u00BB\n            </button>\n            \n          </div>\n\n          <!-- Quick Jump and Refresh -->\n          @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2 tw-border-l tw-border-gray-200 tw-pl-3\">\n              \n              <!-- Quick Jump -->\n              @if (paginationConfig.showQuickJump) {\n                                  <div class=\"tw-flex tw-items-center tw-space-x-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n                    <div class=\"tw-w-20\">\n                                              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                          [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n                          [disabled]=\"isRefreshing()\"\n                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    cideEleButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-px-3 tw-py-2 tw-text-sm tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  cideEleButton\n                  variant=\"outline\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"!tw-w-10 !tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-600 tw-bg-gray-100 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                  @if (isRefreshing()) {\n                    <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                      <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n                  } @else {\n                    <svg class=\"tw-h-4 tw-w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"></path>\n                    </svg>\n                  }\n                </button>\n              }\n            </div>\n          }\n          \n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#f9fafb}.data-grid-container.tw-table-sm th,.data-grid-container.tw-table-sm td{padding:.5rem 1rem}.data-grid-container tbody tr:hover{background-color:#f3f4f6}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#fffc;z-index:10}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls button{transition:all .15s ease-in-out}.data-grid-container .pagination-controls button:hover:not(:disabled){transform:translateY(-1px)}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed}.data-grid-container .pagination-controls button.active{box-shadow:0 2px 4px #3b82f64d}.data-grid-container .pagination-controls input[type=number]{transition:border-color .15s ease-in-out}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .status-badge{font-weight:500;letter-spacing:.025em}.data-grid-container .status-badge.active{background-color:#d1fae5;color:#065f46}.data-grid-container .status-badge.inactive{background-color:#fee2e2;color:#991b1b}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .empty-state{padding:3rem 1.5rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1rem;opacity:.4}.data-grid-container .empty-state h3{margin-bottom:.5rem}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #3b82f6;border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:#f8fafc;box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:10}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:#f3f4f6;border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, decorators: [{
             type: Component,