cloud-ide-element 1.0.59 → 1.0.61

package/fesm2022/cloud-ide-element.mjs

@@ -2411,7 +2411,7 @@ class CideSelectComponent {
                 multi: true,
                 useExisting: forwardRef(() => CideSelectComponent),
             }
-        ], queries: [{ propertyName: "optionComponents", predicate: CideSelectOptionComponent }], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-select\" [ngClass]=\"{\n  'cide-element-size-xxs': (size === '2xs'),\n  'cide-element-size-xs': (size === 'xs'),\n  'cide-element-size-sm': (size === 'sm'),\n  'cide-element-size-md': (size === 'md'),\n  'cide-element-size-lg': (size === 'lg'),\n  'cide-element-input-label-floating': (labelPlacement === 'floating'),\n  'cide-element-input-label-start': (labelDir === 'start'),\n  'cide-element-input-label-end': (labelDir === 'end'),\n  'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n  'cide-element-input-label-less': (!label || labelHide),\n  'cide-element-style-outline': (fill === 'outline'),\n  'cide-element-style-solid': (fill === 'solid'),\n  'cide-element-style-standard': (fill === 'standard'),\n}\">\n  @if (label && !labelHide) {\n  <label [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n  }\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    @if (leadingIcon) {\n    <span class=\"cide-input-leading-icon-wrapper\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\n    }\n\n    <!-- Select Button -->\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"[\n        ((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md'),\n        (!leadingIcon ? 'tw-pl-1' : ''),\n        (trailingIcon || clearInput || loading ? 'tw-pr-8' : ''),\n        (!trailingIcon && !clearInput && !loading ? 'tw-pr-1' : ''),\n        ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')),\n        (labelHide ? '!tw-mt-0' : ''),\n        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer'\n      ]\" class=\"cide-select-button\">\n\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n      </span>\n    </button>\n\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n    @if (!clearInput || !ngModel || loading) {\n    <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n      <!-- Loading Spinner -->\n      @if (loading) {\n      <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n        <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"tw-opacity-75\" fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n          </path>\n        </svg>\n      </span>\n      }\n      <!-- Dropdown Arrow -->\n      @if (!loading) {\n      <span\n        class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n        [ngClass]=\"{'tw-rotate-180': isOpen}\">\n        expand_more\n      </span>\n      }\n    </span>\n    }\n\n    <!-- Clear Button -->\n    @if (clearInput && ngModel) {\n    <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n    }\n\n\n  </div>\n\n  <!-- Error/Helper Text -->\n  @if ((errorText || helperText) && !isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  }\n  @if (helperText && isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n  }\n\n  <!-- Portal Container -->\n  <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n  <div\n    class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n    <!-- Search Input (if searchable and showSearchInput is true) -->\n    @if (context?.searchable && showSearchInput) {\n    <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n      <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n        (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n        (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n        class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"tw-py-1\">\n      <!-- Loading State -->\n      @if (context?.loading) {\n      <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n          <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n            viewBox=\"0 0 24 24\">\n            <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"tw-opacity-75\" fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n            </path>\n          </svg>\n          <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n        </div>\n      </div>\n      }\n      <!-- Options -->\n      @if (!context?.loading) {\n      @for (option of context?.options; track $index) {\n      <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n        (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n        [disabled]=\"option.disabled\" [ngClass]=\"{\n              'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n              'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n        {{ context?.getOptionLabel(option) }}\n      </button>\n      }\n      }\n\n      <!-- No options message -->\n      @if (!context?.loading && context?.options.length === 0) {\n      <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n        {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [":root{--cide-ele-devider-border-color: #74AEF6}.cide-element-size-xxs .cide-input-input,.cide-element-size-xxs .cide-select-button{height:var(--cide-element-size-xxs)}.cide-element-size-xxs .cide-input-input,.cide-element-size-xxs .cide-textarea-input,.cide-element-size-xxs .cide-select-button{font-size:var(--cide-input-size-xxs);border-width:var(--cide-input-border-size-xxs)}.cide-element-size-xxs .cide-input-label,.cide-element-size-xxs .cide-textarea-label,.cide-element-size-xxs .cide-select-label{font-size:var(--cide-input-label-size-xxs);line-height:var(--cide-input-label-size-xxs)}.cide-element-size-xxs .cide-input-help-error-text,.cide-element-size-xxs .cide-textarea-help-error-text,.cide-element-size-xxs .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xxs);height:calc(var(--cide-input-error-helper-size-xxs) + 2px);line-height:var(--cide-input-error-helper-size-xxs)}.cide-element-size-xxs .cide-input-clear,.cide-element-size-xxs .cide-textarea-clear,.cide-element-size-xxs .cide-select-clear{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-input-clear .cide-select-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper,.cide-element-size-xxs .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xxs) / 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xxs) / 2 - var(--cide-input-label-size-xxs))}.cide-element-size-xxs.cide-element-leading-icon .cide-input-input,.cide-element-size-xxs.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xxs.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-clear-input .cide-input-input,.cide-element-size-xxs.cide-element-clear-input .cide-textarea-input,.cide-element-size-xxs.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xxs.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xxs.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xxs)}.cide-element-size-xs .cide-input-input,.cide-element-size-xs .cide-select-button{height:var(--cide-element-size-xs)}.cide-element-size-xs .cide-input-input,.cide-element-size-xs .cide-textarea-input,.cide-element-size-xs .cide-select-button{font-size:var(--cide-input-size-xs);border-width:var(--cide-input-border-size-xs)}.cide-element-size-xs .cide-input-label,.cide-element-size-xs .cide-textarea-label,.cide-element-size-xs .cide-select-label{font-size:var(--cide-input-label-size-xs);line-height:var(--cide-input-label-size-xs)}.cide-element-size-xs .cide-input-help-error-text,.cide-element-size-xs .cide-textarea-help-error-text,.cide-element-size-xs .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xs);height:calc(var(--cide-input-error-helper-size-xs) + 2px);line-height:var(--cide-input-error-helper-size-xs)}.cide-element-size-xs .cide-input-clear,.cide-element-size-xs .cide-textarea-clear,.cide-element-size-xs .cide-select-clear{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-clear .cide-input-clear-icon,.cide-element-size-xs .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-input-clear .cide-select-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xs .cide-select-clear .cide-input-clear-icon,.cide-element-size-xs .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper,.cide-element-size-xs .cide-textarea-leading-icon-wrapper,.cide-element-size-xs .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xs) / 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xs) / 2 - var(--cide-input-label-size-xs))}.cide-element-size-xs.cide-element-leading-icon .cide-input-input,.cide-element-size-xs.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xs.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-clear-input .cide-input-input,.cide-element-size-xs.cide-element-clear-input .cide-textarea-input,.cide-element-size-xs.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xs.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xs.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xs)}.cide-element-size-sm .cide-input-input,.cide-element-size-sm .cide-select-button{height:var(--cide-element-size-sm)}.cide-element-size-sm .cide-input-input,.cide-element-size-sm .cide-textarea-input,.cide-element-size-sm .cide-select-button{font-size:var(--cide-input-size-sm);border-width:var(--cide-input-border-size-sm)}.cide-element-size-sm .cide-input-label,.cide-element-size-sm .cide-textarea-label,.cide-element-size-sm .cide-select-label{font-size:var(--cide-input-label-size-sm);line-height:var(--cide-input-label-size-sm)}.cide-element-size-sm .cide-input-help-error-text,.cide-element-size-sm .cide-textarea-help-error-text,.cide-element-size-sm .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-sm);height:calc(var(--cide-input-error-helper-size-sm) + 2px);line-height:var(--cide-input-error-helper-size-sm)}.cide-element-size-sm .cide-input-clear,.cide-element-size-sm .cide-textarea-clear,.cide-element-size-sm .cide-select-clear{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-clear .cide-input-clear-icon,.cide-element-size-sm .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-input-clear .cide-select-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-sm .cide-select-clear .cide-input-clear-icon,.cide-element-size-sm .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper,.cide-element-size-sm .cide-textarea-leading-icon-wrapper,.cide-element-size-sm .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-sm) / 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-sm) / 2 - var(--cide-input-label-size-sm))}.cide-element-size-sm.cide-element-leading-icon .cide-input-input,.cide-element-size-sm.cide-element-leading-icon .cide-textarea-input,.cide-element-size-sm.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-clear-input .cide-input-input,.cide-element-size-sm.cide-element-clear-input .cide-textarea-input,.cide-element-size-sm.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-trailing-icon .cide-input-clear,.cide-element-size-sm.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-sm.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-sm)}.cide-element-size-md .cide-input-input,.cide-element-size-md .cide-select-button{height:var(--cide-element-size-md)}.cide-element-size-md .cide-input-input,.cide-element-size-md .cide-textarea-input,.cide-element-size-md .cide-select-button{font-size:var(--cide-input-size-md);border-width:var(--cide-input-border-size-md)}.cide-element-size-md .cide-input-label,.cide-element-size-md .cide-textarea-label,.cide-element-size-md .cide-select-label{font-size:var(--cide-input-label-size-md);line-height:var(--cide-input-label-size-md)}.cide-element-size-md .cide-input-help-error-text,.cide-element-size-md .cide-textarea-help-error-text,.cide-element-size-md .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-md);height:calc(var(--cide-input-error-helper-size-md) + 2px);line-height:var(--cide-input-error-helper-size-md)}.cide-element-size-md .cide-input-clear,.cide-element-size-md .cide-textarea-clear,.cide-element-size-md .cide-select-clear{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-clear .cide-input-clear-icon,.cide-element-size-md .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-input-clear .cide-select-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-md .cide-select-clear .cide-input-clear-icon,.cide-element-size-md .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper,.cide-element-size-md .cide-textarea-leading-icon-wrapper,.cide-element-size-md .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-md) / 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-md) / 2 - var(--cide-input-label-size-md))}.cide-element-size-md.cide-element-leading-icon .cide-input-input,.cide-element-size-md.cide-element-leading-icon .cide-textarea-input,.cide-element-size-md.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-clear-input .cide-input-input,.cide-element-size-md.cide-element-clear-input .cide-textarea-input,.cide-element-size-md.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-trailing-icon .cide-input-clear,.cide-element-size-md.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-md.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-md)}.cide-element-size-lg .cide-input-input,.cide-element-size-lg .cide-select-button{height:var(--cide-element-size-lg)}.cide-element-size-lg .cide-input-input,.cide-element-size-lg .cide-textarea-input,.cide-element-size-lg .cide-select-button{font-size:var(--cide-input-size-lg);border-width:var(--cide-input-border-size-lg)}.cide-element-size-lg .cide-input-label,.cide-element-size-lg .cide-textarea-label,.cide-element-size-lg .cide-select-label{font-size:var(--cide-input-label-size-lg);line-height:var(--cide-input-label-size-lg)}.cide-element-size-lg .cide-input-help-error-text,.cide-element-size-lg .cide-textarea-help-error-text,.cide-element-size-lg .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-lg);height:calc(var(--cide-input-error-helper-size-lg) + 2px);line-height:var(--cide-input-error-helper-size-lg)}.cide-element-size-lg .cide-input-clear,.cide-element-size-lg .cide-textarea-clear,.cide-element-size-lg .cide-select-clear{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-clear .cide-input-clear-icon,.cide-element-size-lg .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-input-clear .cide-select-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-lg .cide-select-clear .cide-input-clear-icon,.cide-element-size-lg .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper,.cide-element-size-lg .cide-textarea-leading-icon-wrapper,.cide-element-size-lg .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-lg) / 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-lg) / 2 - var(--cide-input-label-size-lg))}.cide-element-size-lg.cide-element-leading-icon .cide-input-input,.cide-element-size-lg.cide-element-leading-icon .cide-textarea-input,.cide-element-size-lg.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-clear-input .cide-input-input,.cide-element-size-lg.cide-element-clear-input .cide-textarea-input,.cide-element-size-lg.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-trailing-icon .cide-input-clear,.cide-element-size-lg.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-lg.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-lg)}.cide-element-size-xl .cide-input-input,.cide-element-size-xl .cide-select-button{height:var(--cide-element-size-xl)}.cide-element-size-xl .cide-input-input,.cide-element-size-xl .cide-textarea-input,.cide-element-size-xl .cide-select-button{font-size:var(--cide-input-size-xl);border-width:var(--cide-input-border-size-xl)}.cide-element-size-xl .cide-input-label,.cide-element-size-xl .cide-textarea-label,.cide-element-size-xl .cide-select-label{font-size:var(--cide-input-label-size-xl);line-height:var(--cide-input-label-size-xl)}.cide-element-size-xl .cide-input-help-error-text,.cide-element-size-xl .cide-textarea-help-error-text,.cide-element-size-xl .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xl);height:calc(var(--cide-input-error-helper-size-xl) + 2px);line-height:var(--cide-input-error-helper-size-xl)}.cide-element-size-xl .cide-input-clear,.cide-element-size-xl .cide-textarea-clear,.cide-element-size-xl .cide-select-clear{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-clear .cide-input-clear-icon,.cide-element-size-xl .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-input-clear .cide-select-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xl .cide-select-clear .cide-input-clear-icon,.cide-element-size-xl .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper,.cide-element-size-xl .cide-textarea-leading-icon-wrapper,.cide-element-size-xl .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xl) / 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xl) / 2 - var(--cide-input-label-size-xl))}.cide-element-size-xl.cide-element-leading-icon .cide-input-input,.cide-element-size-xl.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xl.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-clear-input .cide-input-input,.cide-element-size-xl.cide-element-clear-input .cide-textarea-input,.cide-element-size-xl.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xl.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xl.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xl)}.cide-element-style-standard .cide-input-input,.cide-element-style-standard .cide-textarea-input,.cide-element-style-standard .cide-select-button{border-color:transparent}.cide-element-input-number input{text-align:right!important}.cide-element-input-wrapper,.cide-element-textarea-wrapper,.cide-element-select-wrapper{position:relative}.cide-input-label,.cide-textarea-label,.cide-select-label{color:var(--cide-input-label-color);-webkit-user-select:none;user-select:none;display:block}.cide-input-help-error-text,.cide-textarea-help-error-text,.cide-select-help-error-text{color:var(--cide-input-color-help-error-text);width:100%;display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.125rem;padding-right:.125rem}.cide-input-leading-icon,.cide-textarea-leading-icon,.cide-select-leading-icon{color:var(--cide-input-leading-icon-color)}.cide-input-clear,.cide-textarea-clear,.cide-select-clear{color:var(--cide-input-clear-color);z-index:10;cursor:pointer;position:absolute;outline-width:0px;right:0;top:0}.cide-input-clear:hover,.cide-textarea-clear:hover,.cide-select-clear:hover{color:var(--cide-input-clear-color-hover)}.cide-input-trailing-icon,.cide-textarea-trailing-icon,.cide-select-trailing-icon{color:var(--cide-input-trailing-icon-color)}.cide-input-input,.cide-textarea-input,.cide-select-button{color:var(--cide-input-text-color);border-color:var(--cide-input-border)}.cide-input-input:hover,.cide-textarea-input:hover,.cide-select-button:hover{color:var(--cide-input-text-color-hover);border-color:var(--cide-input-border-hover)}.cide-input-input:focus,.cide-textarea-input:focus,.cide-select-button:focus{color:var(--cide-input-text-color-active);border-color:var(--cide-input-border-active)}.cide-element-input-label-floating .cide-input-label,.cide-element-input-label-floating .cide-textarea-label,.cide-element-input-label-floating .cide-select-label,.cide-element-select-label-floating .cide-input-label,.cide-element-select-label-floating .cide-textarea-label,.cide-element-select-label-floating .cide-select-label{position:absolute;z-index:1;margin-left:8px;margin-right:8px;background-color:#fff;padding:0 2px}.cide-element-input-label-floating .cide-element-input-label-start,.cide-element-input-label-floating .cide-element-textarea-label-start,.cide-element-input-label-floating .cide-element-select-label-start,.cide-element-select-label-floating .cide-element-input-label-start,.cide-element-select-label-floating .cide-element-textarea-label-start,.cide-element-select-label-floating .cide-element-select-label-start{left:0}.cide-element-input-label-floating .cide-element-input-label-end,.cide-element-input-label-floating .cide-element-textarea-label-end,.cide-element-input-label-floating .cide-element-select-label-end,.cide-element-select-label-floating .cide-element-input-label-end,.cide-element-select-label-floating .cide-element-textarea-label-end,.cide-element-select-label-floating .cide-element-select-label-end{right:0}.cide-element-input-label-fixed,.cide-element-textarea-label-fixed,.cide-element-select-label-fixed{margin-bottom:0}.cide-element-input-label-fixed .cide-input-label,.cide-element-input-label-fixed .cide-textarea-label,.cide-element-input-label-fixed .cide-select-label,.cide-element-textarea-label-fixed .cide-input-label,.cide-element-textarea-label-fixed .cide-textarea-label,.cide-element-textarea-label-fixed .cide-select-label,.cide-element-select-label-fixed .cide-input-label,.cide-element-select-label-fixed .cide-textarea-label,.cide-element-select-label-fixed .cide-select-label{margin-bottom:3px}.cide-element-input-label-fixed .cide-element-input-label-start,.cide-element-input-label-fixed .cide-element-textarea-label-start,.cide-element-input-label-fixed .cide-element-select-label-start,.cide-element-textarea-label-fixed .cide-element-input-label-start,.cide-element-textarea-label-fixed .cide-element-textarea-label-start,.cide-element-textarea-label-fixed .cide-element-select-label-start,.cide-element-select-label-fixed .cide-element-input-label-start,.cide-element-select-label-fixed .cide-element-textarea-label-start,.cide-element-select-label-fixed .cide-element-select-label-start{text-align:start}.cide-element-input-label-fixed .cide-element-input-label-end,.cide-element-input-label-fixed .cide-element-textarea-label-end,.cide-element-input-label-fixed .cide-element-select-label-end,.cide-element-textarea-label-fixed .cide-element-input-label-end,.cide-element-textarea-label-fixed .cide-element-textarea-label-end,.cide-element-textarea-label-fixed .cide-element-select-label-end,.cide-element-select-label-fixed .cide-element-input-label-end,.cide-element-select-label-fixed .cide-element-textarea-label-end,.cide-element-select-label-fixed .cide-element-select-label-end{text-align:end}.ng-touched.ng-invalid>.cide-input .cide-input-clear,.ng-touched.ng-invalid>.cide-input .cide-textarea-clear,.ng-touched.ng-invalid>.cide-input .cide-select-clear,.ng-touched.ng-invalid>.cide-textarea .cide-input-clear,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-clear,.ng-touched.ng-invalid>.cide-textarea .cide-select-clear,.ng-touched.ng-invalid>.cide-select .cide-input-clear,.ng-touched.ng-invalid>.cide-select .cide-textarea-clear,.ng-touched.ng-invalid>.cide-select .cide-select-clear{color:var(--cide-input-clear-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-input .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-input .cide-select-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-select-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-select-clear:hover{color:var(--cide-input-clear-color-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-input .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-input .cide-select-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-select-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-select-leading-icon{color:var(--cide-input-leading-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-input .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-input .cide-select-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-select-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-select-help-error-text{color:var(--cide-input-color-help-error-text-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-input .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-input .cide-select-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-select-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-select-trailing-icon{color:var(--cide-input-trailing-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-label,.ng-touched.ng-invalid>.cide-input .cide-textarea-label,.ng-touched.ng-invalid>.cide-input .cide-select-label,.ng-touched.ng-invalid>.cide-textarea .cide-input-label,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-label,.ng-touched.ng-invalid>.cide-textarea .cide-select-label,.ng-touched.ng-invalid>.cide-select .cide-input-label,.ng-touched.ng-invalid>.cide-select .cide-textarea-label,.ng-touched.ng-invalid>.cide-select .cide-select-label{color:var(--cide-input-label-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input,.ng-touched.ng-invalid>.cide-input .cide-textarea-input,.ng-touched.ng-invalid>.cide-input .cide-select-button,.ng-touched.ng-invalid>.cide-textarea .cide-input-input,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input,.ng-touched.ng-invalid>.cide-textarea .cide-select-button,.ng-touched.ng-invalid>.cide-select .cide-input-input,.ng-touched.ng-invalid>.cide-select .cide-textarea-input,.ng-touched.ng-invalid>.cide-select .cide-select-button{color:var(--cide-input-text-color-invalid);border-color:var(--cide-input-border-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:hover,.ng-touched.ng-invalid>.cide-input .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-input .cide-select-button:hover,.ng-touched.ng-invalid>.cide-textarea .cide-input-input:hover,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-textarea .cide-select-button:hover,.ng-touched.ng-invalid>.cide-select .cide-input-input:hover,.ng-touched.ng-invalid>.cide-select .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-select .cide-select-button:hover{color:var(--cide-input-text-color-hover-invalid);border-color:var(--cide-input-border-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:focus,.ng-touched.ng-invalid>.cide-input .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-input .cide-select-button:focus,.ng-touched.ng-invalid>.cide-textarea .cide-input-input:focus,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-textarea .cide-select-button:focus,.ng-touched.ng-invalid>.cide-select .cide-input-input:focus,.ng-touched.ng-invalid>.cide-select .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-select .cide-select-button:focus{color:var(--cide-input-text-color-active-invalid);border-color:var(--cide-input-border-active-invalid)}.cide-input-leading-icon-wrapper,.cide-textarea-leading-icon-wrapper,.cide-select-leading-icon-wrapper{position:absolute;bottom:0;left:0;z-index:0;text-align:center}.cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], queries: [{ propertyName: "optionComponents", predicate: CideSelectOptionComponent }], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-select\" [ngClass]=\"{\n  'cide-element-size-xxs': (size === '2xs'),\n  'cide-element-size-xs': (size === 'xs'),\n  'cide-element-size-sm': (size === 'sm'),\n  'cide-element-size-md': (size === 'md'),\n  'cide-element-size-lg': (size === 'lg'),\n  'cide-element-input-label-floating': (labelPlacement === 'floating'),\n  'cide-element-input-label-start': (labelDir === 'start'),\n  'cide-element-input-label-end': (labelDir === 'end'),\n  'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n  'cide-element-input-label-less': (!label || labelHide),\n  'cide-element-style-outline': (fill === 'outline'),\n  'cide-element-style-solid': (fill === 'solid'),\n  'cide-element-style-standard': (fill === 'standard'),\n}\">\n  @if (label && !labelHide) {\n  <label [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n  }\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    @if (leadingIcon) {\n    <span class=\"cide-input-leading-icon-wrapper\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\n    }\n\n    <!-- Select Button -->\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"[\n        ((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md'),\n        (!leadingIcon ? 'tw-pl-1' : ''),\n        (trailingIcon || clearInput || loading ? 'tw-pr-8' : ''),\n        (!trailingIcon && !clearInput && !loading ? 'tw-pr-1' : ''),\n        ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')),\n        (labelHide ? '!tw-mt-0' : ''),\n        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer'\n      ]\" class=\"cide-select-button\">\n\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n      </span>\n    </button>\n\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n    @if (!clearInput || !ngModel || loading) {\n    <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n      <!-- Loading Spinner -->\n      @if (loading) {\n      <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n        <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"tw-opacity-75\" fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n          </path>\n        </svg>\n      </span>\n      }\n      <!-- Dropdown Arrow -->\n      @if (!loading) {\n      <span\n        class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n        [ngClass]=\"{'tw-rotate-180': isOpen}\">\n        expand_more\n      </span>\n      }\n    </span>\n    }\n\n    <!-- Clear Button -->\n    @if (clearInput && ngModel) {\n    <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n    }\n\n\n  </div>\n\n  <!-- Error/Helper Text -->\n  @if ((errorText || helperText) && !isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  }\n  @if (helperText && isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n  }\n\n  <!-- Portal Container -->\n  <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n  <div\n    class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n    <!-- Search Input (if searchable and showSearchInput is true) -->\n    @if (context?.searchable && showSearchInput) {\n    <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n      <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n        (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n        (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n        class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"tw-py-1\">\n      <!-- Loading State -->\n      @if (context?.loading) {\n      <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n          <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n            viewBox=\"0 0 24 24\">\n            <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"tw-opacity-75\" fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n            </path>\n          </svg>\n          <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n        </div>\n      </div>\n      }\n      <!-- Options -->\n      @if (!context?.loading) {\n      @for (option of context?.options; track $index) {\n      <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n        (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n        [disabled]=\"option.disabled\" [ngClass]=\"{\n              'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n              'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n        {{ context?.getOptionLabel(option) }}\n      </button>\n      }\n      }\n\n      <!-- No options message -->\n      @if (!context?.loading && context?.options.length === 0) {\n      <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n        {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [".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,
@@ -2426,7 +2426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => CideSelectComponent),
                         }
-                    ], template: "<div class=\"cide-select\" [ngClass]=\"{\n  'cide-element-size-xxs': (size === '2xs'),\n  'cide-element-size-xs': (size === 'xs'),\n  'cide-element-size-sm': (size === 'sm'),\n  'cide-element-size-md': (size === 'md'),\n  'cide-element-size-lg': (size === 'lg'),\n  'cide-element-input-label-floating': (labelPlacement === 'floating'),\n  'cide-element-input-label-start': (labelDir === 'start'),\n  'cide-element-input-label-end': (labelDir === 'end'),\n  'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n  'cide-element-input-label-less': (!label || labelHide),\n  'cide-element-style-outline': (fill === 'outline'),\n  'cide-element-style-solid': (fill === 'solid'),\n  'cide-element-style-standard': (fill === 'standard'),\n}\">\n  @if (label && !labelHide) {\n  <label [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n  }\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    @if (leadingIcon) {\n    <span class=\"cide-input-leading-icon-wrapper\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\n    }\n\n    <!-- Select Button -->\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"[\n        ((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md'),\n        (!leadingIcon ? 'tw-pl-1' : ''),\n        (trailingIcon || clearInput || loading ? 'tw-pr-8' : ''),\n        (!trailingIcon && !clearInput && !loading ? 'tw-pr-1' : ''),\n        ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')),\n        (labelHide ? '!tw-mt-0' : ''),\n        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer'\n      ]\" class=\"cide-select-button\">\n\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n      </span>\n    </button>\n\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n    @if (!clearInput || !ngModel || loading) {\n    <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n      <!-- Loading Spinner -->\n      @if (loading) {\n      <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n        <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"tw-opacity-75\" fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n          </path>\n        </svg>\n      </span>\n      }\n      <!-- Dropdown Arrow -->\n      @if (!loading) {\n      <span\n        class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n        [ngClass]=\"{'tw-rotate-180': isOpen}\">\n        expand_more\n      </span>\n      }\n    </span>\n    }\n\n    <!-- Clear Button -->\n    @if (clearInput && ngModel) {\n    <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n    }\n\n\n  </div>\n\n  <!-- Error/Helper Text -->\n  @if ((errorText || helperText) && !isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  }\n  @if (helperText && isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n  }\n\n  <!-- Portal Container -->\n  <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n  <div\n    class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n    <!-- Search Input (if searchable and showSearchInput is true) -->\n    @if (context?.searchable && showSearchInput) {\n    <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n      <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n        (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n        (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n        class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"tw-py-1\">\n      <!-- Loading State -->\n      @if (context?.loading) {\n      <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n          <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n            viewBox=\"0 0 24 24\">\n            <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"tw-opacity-75\" fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n            </path>\n          </svg>\n          <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n        </div>\n      </div>\n      }\n      <!-- Options -->\n      @if (!context?.loading) {\n      @for (option of context?.options; track $index) {\n      <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n        (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n        [disabled]=\"option.disabled\" [ngClass]=\"{\n              'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n              'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n        {{ context?.getOptionLabel(option) }}\n      </button>\n      }\n      }\n\n      <!-- No options message -->\n      @if (!context?.loading && context?.options.length === 0) {\n      <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n        {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [":root{--cide-ele-devider-border-color: #74AEF6}.cide-element-size-xxs .cide-input-input,.cide-element-size-xxs .cide-select-button{height:var(--cide-element-size-xxs)}.cide-element-size-xxs .cide-input-input,.cide-element-size-xxs .cide-textarea-input,.cide-element-size-xxs .cide-select-button{font-size:var(--cide-input-size-xxs);border-width:var(--cide-input-border-size-xxs)}.cide-element-size-xxs .cide-input-label,.cide-element-size-xxs .cide-textarea-label,.cide-element-size-xxs .cide-select-label{font-size:var(--cide-input-label-size-xxs);line-height:var(--cide-input-label-size-xxs)}.cide-element-size-xxs .cide-input-help-error-text,.cide-element-size-xxs .cide-textarea-help-error-text,.cide-element-size-xxs .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xxs);height:calc(var(--cide-input-error-helper-size-xxs) + 2px);line-height:var(--cide-input-error-helper-size-xxs)}.cide-element-size-xxs .cide-input-clear,.cide-element-size-xxs .cide-textarea-clear,.cide-element-size-xxs .cide-select-clear{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-input-clear .cide-select-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-input-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xxs .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper,.cide-element-size-xxs .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xxs);width:var(--cide-element-size-xxs);height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xxs .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xxs) + var(--cide-input-size-xxs) / 2);line-height:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs) * 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xxs) / 2)}.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xxs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xxs) / 2 - var(--cide-input-label-size-xxs))}.cide-element-size-xxs.cide-element-leading-icon .cide-input-input,.cide-element-size-xxs.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xxs.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-clear-input .cide-input-input,.cide-element-size-xxs.cide-element-clear-input .cide-textarea-input,.cide-element-size-xxs.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xxs) - var(--cide-input-border-size-xxs))}.cide-element-size-xxs.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xxs.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xxs.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xxs)}.cide-element-size-xs .cide-input-input,.cide-element-size-xs .cide-select-button{height:var(--cide-element-size-xs)}.cide-element-size-xs .cide-input-input,.cide-element-size-xs .cide-textarea-input,.cide-element-size-xs .cide-select-button{font-size:var(--cide-input-size-xs);border-width:var(--cide-input-border-size-xs)}.cide-element-size-xs .cide-input-label,.cide-element-size-xs .cide-textarea-label,.cide-element-size-xs .cide-select-label{font-size:var(--cide-input-label-size-xs);line-height:var(--cide-input-label-size-xs)}.cide-element-size-xs .cide-input-help-error-text,.cide-element-size-xs .cide-textarea-help-error-text,.cide-element-size-xs .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xs);height:calc(var(--cide-input-error-helper-size-xs) + 2px);line-height:var(--cide-input-error-helper-size-xs)}.cide-element-size-xs .cide-input-clear,.cide-element-size-xs .cide-textarea-clear,.cide-element-size-xs .cide-select-clear{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-clear .cide-input-clear-icon,.cide-element-size-xs .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-input-clear .cide-select-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xs .cide-select-clear .cide-input-clear-icon,.cide-element-size-xs .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xs .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper,.cide-element-size-xs .cide-textarea-leading-icon-wrapper,.cide-element-size-xs .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xs);width:var(--cide-element-size-xs);height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xs .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xs) + var(--cide-input-size-xs) / 2);line-height:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs) * 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xs) / 2)}.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xs.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xs) / 2 - var(--cide-input-label-size-xs))}.cide-element-size-xs.cide-element-leading-icon .cide-input-input,.cide-element-size-xs.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xs.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-clear-input .cide-input-input,.cide-element-size-xs.cide-element-clear-input .cide-textarea-input,.cide-element-size-xs.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xs) - var(--cide-input-border-size-xs))}.cide-element-size-xs.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xs.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xs.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xs)}.cide-element-size-sm .cide-input-input,.cide-element-size-sm .cide-select-button{height:var(--cide-element-size-sm)}.cide-element-size-sm .cide-input-input,.cide-element-size-sm .cide-textarea-input,.cide-element-size-sm .cide-select-button{font-size:var(--cide-input-size-sm);border-width:var(--cide-input-border-size-sm)}.cide-element-size-sm .cide-input-label,.cide-element-size-sm .cide-textarea-label,.cide-element-size-sm .cide-select-label{font-size:var(--cide-input-label-size-sm);line-height:var(--cide-input-label-size-sm)}.cide-element-size-sm .cide-input-help-error-text,.cide-element-size-sm .cide-textarea-help-error-text,.cide-element-size-sm .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-sm);height:calc(var(--cide-input-error-helper-size-sm) + 2px);line-height:var(--cide-input-error-helper-size-sm)}.cide-element-size-sm .cide-input-clear,.cide-element-size-sm .cide-textarea-clear,.cide-element-size-sm .cide-select-clear{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-clear .cide-input-clear-icon,.cide-element-size-sm .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-input-clear .cide-select-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-sm .cide-select-clear .cide-input-clear-icon,.cide-element-size-sm .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-sm .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper,.cide-element-size-sm .cide-textarea-leading-icon-wrapper,.cide-element-size-sm .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-sm);width:var(--cide-element-size-sm);height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-sm .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-sm) + var(--cide-input-size-sm) / 2);line-height:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm) * 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-sm) / 2)}.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-sm.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-sm) / 2 - var(--cide-input-label-size-sm))}.cide-element-size-sm.cide-element-leading-icon .cide-input-input,.cide-element-size-sm.cide-element-leading-icon .cide-textarea-input,.cide-element-size-sm.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-clear-input .cide-input-input,.cide-element-size-sm.cide-element-clear-input .cide-textarea-input,.cide-element-size-sm.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-sm) - var(--cide-input-border-size-sm))}.cide-element-size-sm.cide-element-trailing-icon .cide-input-clear,.cide-element-size-sm.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-sm.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-sm)}.cide-element-size-md .cide-input-input,.cide-element-size-md .cide-select-button{height:var(--cide-element-size-md)}.cide-element-size-md .cide-input-input,.cide-element-size-md .cide-textarea-input,.cide-element-size-md .cide-select-button{font-size:var(--cide-input-size-md);border-width:var(--cide-input-border-size-md)}.cide-element-size-md .cide-input-label,.cide-element-size-md .cide-textarea-label,.cide-element-size-md .cide-select-label{font-size:var(--cide-input-label-size-md);line-height:var(--cide-input-label-size-md)}.cide-element-size-md .cide-input-help-error-text,.cide-element-size-md .cide-textarea-help-error-text,.cide-element-size-md .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-md);height:calc(var(--cide-input-error-helper-size-md) + 2px);line-height:var(--cide-input-error-helper-size-md)}.cide-element-size-md .cide-input-clear,.cide-element-size-md .cide-textarea-clear,.cide-element-size-md .cide-select-clear{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-clear .cide-input-clear-icon,.cide-element-size-md .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-input-clear .cide-select-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-md .cide-select-clear .cide-input-clear-icon,.cide-element-size-md .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-md .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper,.cide-element-size-md .cide-textarea-leading-icon-wrapper,.cide-element-size-md .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-md);width:var(--cide-element-size-md);height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-md .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-md) + var(--cide-input-size-md) / 2);line-height:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md) * 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-md) / 2)}.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-md.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-md) / 2 - var(--cide-input-label-size-md))}.cide-element-size-md.cide-element-leading-icon .cide-input-input,.cide-element-size-md.cide-element-leading-icon .cide-textarea-input,.cide-element-size-md.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-clear-input .cide-input-input,.cide-element-size-md.cide-element-clear-input .cide-textarea-input,.cide-element-size-md.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-md) - var(--cide-input-border-size-md))}.cide-element-size-md.cide-element-trailing-icon .cide-input-clear,.cide-element-size-md.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-md.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-md)}.cide-element-size-lg .cide-input-input,.cide-element-size-lg .cide-select-button{height:var(--cide-element-size-lg)}.cide-element-size-lg .cide-input-input,.cide-element-size-lg .cide-textarea-input,.cide-element-size-lg .cide-select-button{font-size:var(--cide-input-size-lg);border-width:var(--cide-input-border-size-lg)}.cide-element-size-lg .cide-input-label,.cide-element-size-lg .cide-textarea-label,.cide-element-size-lg .cide-select-label{font-size:var(--cide-input-label-size-lg);line-height:var(--cide-input-label-size-lg)}.cide-element-size-lg .cide-input-help-error-text,.cide-element-size-lg .cide-textarea-help-error-text,.cide-element-size-lg .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-lg);height:calc(var(--cide-input-error-helper-size-lg) + 2px);line-height:var(--cide-input-error-helper-size-lg)}.cide-element-size-lg .cide-input-clear,.cide-element-size-lg .cide-textarea-clear,.cide-element-size-lg .cide-select-clear{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-clear .cide-input-clear-icon,.cide-element-size-lg .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-input-clear .cide-select-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-lg .cide-select-clear .cide-input-clear-icon,.cide-element-size-lg .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-lg .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper,.cide-element-size-lg .cide-textarea-leading-icon-wrapper,.cide-element-size-lg .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-lg);width:var(--cide-element-size-lg);height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-lg .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-lg) + var(--cide-input-size-lg) / 2);line-height:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg) * 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-lg) / 2)}.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-lg.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-lg) / 2 - var(--cide-input-label-size-lg))}.cide-element-size-lg.cide-element-leading-icon .cide-input-input,.cide-element-size-lg.cide-element-leading-icon .cide-textarea-input,.cide-element-size-lg.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-clear-input .cide-input-input,.cide-element-size-lg.cide-element-clear-input .cide-textarea-input,.cide-element-size-lg.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-lg) - var(--cide-input-border-size-lg))}.cide-element-size-lg.cide-element-trailing-icon .cide-input-clear,.cide-element-size-lg.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-lg.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-lg)}.cide-element-size-xl .cide-input-input,.cide-element-size-xl .cide-select-button{height:var(--cide-element-size-xl)}.cide-element-size-xl .cide-input-input,.cide-element-size-xl .cide-textarea-input,.cide-element-size-xl .cide-select-button{font-size:var(--cide-input-size-xl);border-width:var(--cide-input-border-size-xl)}.cide-element-size-xl .cide-input-label,.cide-element-size-xl .cide-textarea-label,.cide-element-size-xl .cide-select-label{font-size:var(--cide-input-label-size-xl);line-height:var(--cide-input-label-size-xl)}.cide-element-size-xl .cide-input-help-error-text,.cide-element-size-xl .cide-textarea-help-error-text,.cide-element-size-xl .cide-select-help-error-text{font-size:var(--cide-input-error-helper-size-xl);height:calc(var(--cide-input-error-helper-size-xl) + 2px);line-height:var(--cide-input-error-helper-size-xl)}.cide-element-size-xl .cide-input-clear,.cide-element-size-xl .cide-textarea-clear,.cide-element-size-xl .cide-select-clear{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-clear .cide-input-clear-icon,.cide-element-size-xl .cide-input-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-input-clear .cide-select-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-input-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-textarea-clear .cide-select-clear-icon,.cide-element-size-xl .cide-select-clear .cide-input-clear-icon,.cide-element-size-xl .cide-select-clear .cide-textarea-clear-icon,.cide-element-size-xl .cide-select-clear .cide-select-clear-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper,.cide-element-size-xl .cide-textarea-leading-icon-wrapper,.cide-element-size-xl .cide-select-leading-icon-wrapper{top:var(--cide-input-border-size-xl);width:var(--cide-element-size-xl);height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-input-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-textarea-leading-icon-wrapper .cide-select-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-input-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-textarea-leading-icon,.cide-element-size-xl .cide-select-leading-icon-wrapper .cide-select-leading-icon{font-size:calc(var(--cide-input-size-xl) + var(--cide-input-size-xl) / 2);line-height:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl) * 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-element-select-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-element-select-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-input-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-textarea-wrapper,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-element-select-wrapper{margin-top:calc(var(--cide-input-label-size-xl) / 2)}.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-input-label,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-input-label-floating:not(.cide-element-input-label-less) .cide-select-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-input-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-textarea-label-floating:not(.cide-element-textarea-label-less) .cide-select-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-input-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-textarea-label,.cide-element-size-xl.cide-element-select-label-floating:not(.cide-element-select-label-less) .cide-select-label{top:calc(var(--cide-input-label-size-xl) / 2 - var(--cide-input-label-size-xl))}.cide-element-size-xl.cide-element-leading-icon .cide-input-input,.cide-element-size-xl.cide-element-leading-icon .cide-textarea-input,.cide-element-size-xl.cide-element-leading-icon .cide-select-button{padding-left:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-clear-input .cide-input-input,.cide-element-size-xl.cide-element-clear-input .cide-textarea-input,.cide-element-size-xl.cide-element-clear-input .cide-select-button{padding-right:calc(var(--cide-element-size-xl) - var(--cide-input-border-size-xl))}.cide-element-size-xl.cide-element-trailing-icon .cide-input-clear,.cide-element-size-xl.cide-element-trailing-icon .cide-textarea-clear,.cide-element-size-xl.cide-element-trailing-icon .cide-select-clear{right:var(--cide-element-size-xl)}.cide-element-style-standard .cide-input-input,.cide-element-style-standard .cide-textarea-input,.cide-element-style-standard .cide-select-button{border-color:transparent}.cide-element-input-number input{text-align:right!important}.cide-element-input-wrapper,.cide-element-textarea-wrapper,.cide-element-select-wrapper{position:relative}.cide-input-label,.cide-textarea-label,.cide-select-label{color:var(--cide-input-label-color);-webkit-user-select:none;user-select:none;display:block}.cide-input-help-error-text,.cide-textarea-help-error-text,.cide-select-help-error-text{color:var(--cide-input-color-help-error-text);width:100%;display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:.125rem;padding-right:.125rem}.cide-input-leading-icon,.cide-textarea-leading-icon,.cide-select-leading-icon{color:var(--cide-input-leading-icon-color)}.cide-input-clear,.cide-textarea-clear,.cide-select-clear{color:var(--cide-input-clear-color);z-index:10;cursor:pointer;position:absolute;outline-width:0px;right:0;top:0}.cide-input-clear:hover,.cide-textarea-clear:hover,.cide-select-clear:hover{color:var(--cide-input-clear-color-hover)}.cide-input-trailing-icon,.cide-textarea-trailing-icon,.cide-select-trailing-icon{color:var(--cide-input-trailing-icon-color)}.cide-input-input,.cide-textarea-input,.cide-select-button{color:var(--cide-input-text-color);border-color:var(--cide-input-border)}.cide-input-input:hover,.cide-textarea-input:hover,.cide-select-button:hover{color:var(--cide-input-text-color-hover);border-color:var(--cide-input-border-hover)}.cide-input-input:focus,.cide-textarea-input:focus,.cide-select-button:focus{color:var(--cide-input-text-color-active);border-color:var(--cide-input-border-active)}.cide-element-input-label-floating .cide-input-label,.cide-element-input-label-floating .cide-textarea-label,.cide-element-input-label-floating .cide-select-label,.cide-element-select-label-floating .cide-input-label,.cide-element-select-label-floating .cide-textarea-label,.cide-element-select-label-floating .cide-select-label{position:absolute;z-index:1;margin-left:8px;margin-right:8px;background-color:#fff;padding:0 2px}.cide-element-input-label-floating .cide-element-input-label-start,.cide-element-input-label-floating .cide-element-textarea-label-start,.cide-element-input-label-floating .cide-element-select-label-start,.cide-element-select-label-floating .cide-element-input-label-start,.cide-element-select-label-floating .cide-element-textarea-label-start,.cide-element-select-label-floating .cide-element-select-label-start{left:0}.cide-element-input-label-floating .cide-element-input-label-end,.cide-element-input-label-floating .cide-element-textarea-label-end,.cide-element-input-label-floating .cide-element-select-label-end,.cide-element-select-label-floating .cide-element-input-label-end,.cide-element-select-label-floating .cide-element-textarea-label-end,.cide-element-select-label-floating .cide-element-select-label-end{right:0}.cide-element-input-label-fixed,.cide-element-textarea-label-fixed,.cide-element-select-label-fixed{margin-bottom:0}.cide-element-input-label-fixed .cide-input-label,.cide-element-input-label-fixed .cide-textarea-label,.cide-element-input-label-fixed .cide-select-label,.cide-element-textarea-label-fixed .cide-input-label,.cide-element-textarea-label-fixed .cide-textarea-label,.cide-element-textarea-label-fixed .cide-select-label,.cide-element-select-label-fixed .cide-input-label,.cide-element-select-label-fixed .cide-textarea-label,.cide-element-select-label-fixed .cide-select-label{margin-bottom:3px}.cide-element-input-label-fixed .cide-element-input-label-start,.cide-element-input-label-fixed .cide-element-textarea-label-start,.cide-element-input-label-fixed .cide-element-select-label-start,.cide-element-textarea-label-fixed .cide-element-input-label-start,.cide-element-textarea-label-fixed .cide-element-textarea-label-start,.cide-element-textarea-label-fixed .cide-element-select-label-start,.cide-element-select-label-fixed .cide-element-input-label-start,.cide-element-select-label-fixed .cide-element-textarea-label-start,.cide-element-select-label-fixed .cide-element-select-label-start{text-align:start}.cide-element-input-label-fixed .cide-element-input-label-end,.cide-element-input-label-fixed .cide-element-textarea-label-end,.cide-element-input-label-fixed .cide-element-select-label-end,.cide-element-textarea-label-fixed .cide-element-input-label-end,.cide-element-textarea-label-fixed .cide-element-textarea-label-end,.cide-element-textarea-label-fixed .cide-element-select-label-end,.cide-element-select-label-fixed .cide-element-input-label-end,.cide-element-select-label-fixed .cide-element-textarea-label-end,.cide-element-select-label-fixed .cide-element-select-label-end{text-align:end}.ng-touched.ng-invalid>.cide-input .cide-input-clear,.ng-touched.ng-invalid>.cide-input .cide-textarea-clear,.ng-touched.ng-invalid>.cide-input .cide-select-clear,.ng-touched.ng-invalid>.cide-textarea .cide-input-clear,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-clear,.ng-touched.ng-invalid>.cide-textarea .cide-select-clear,.ng-touched.ng-invalid>.cide-select .cide-input-clear,.ng-touched.ng-invalid>.cide-select .cide-textarea-clear,.ng-touched.ng-invalid>.cide-select .cide-select-clear{color:var(--cide-input-clear-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-input .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-input .cide-select-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-textarea .cide-select-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-input-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-textarea-clear:hover,.ng-touched.ng-invalid>.cide-select .cide-select-clear:hover{color:var(--cide-input-clear-color-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-input .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-input .cide-select-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-textarea .cide-select-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-input-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-textarea-leading-icon,.ng-touched.ng-invalid>.cide-select .cide-select-leading-icon{color:var(--cide-input-leading-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-input .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-input .cide-select-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-textarea .cide-select-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-input-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-textarea-help-error-text,.ng-touched.ng-invalid>.cide-select .cide-select-help-error-text{color:var(--cide-input-color-help-error-text-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-input .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-input .cide-select-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-textarea .cide-select-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-input-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-textarea-trailing-icon,.ng-touched.ng-invalid>.cide-select .cide-select-trailing-icon{color:var(--cide-input-trailing-icon-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-label,.ng-touched.ng-invalid>.cide-input .cide-textarea-label,.ng-touched.ng-invalid>.cide-input .cide-select-label,.ng-touched.ng-invalid>.cide-textarea .cide-input-label,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-label,.ng-touched.ng-invalid>.cide-textarea .cide-select-label,.ng-touched.ng-invalid>.cide-select .cide-input-label,.ng-touched.ng-invalid>.cide-select .cide-textarea-label,.ng-touched.ng-invalid>.cide-select .cide-select-label{color:var(--cide-input-label-color-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input,.ng-touched.ng-invalid>.cide-input .cide-textarea-input,.ng-touched.ng-invalid>.cide-input .cide-select-button,.ng-touched.ng-invalid>.cide-textarea .cide-input-input,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input,.ng-touched.ng-invalid>.cide-textarea .cide-select-button,.ng-touched.ng-invalid>.cide-select .cide-input-input,.ng-touched.ng-invalid>.cide-select .cide-textarea-input,.ng-touched.ng-invalid>.cide-select .cide-select-button{color:var(--cide-input-text-color-invalid);border-color:var(--cide-input-border-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:hover,.ng-touched.ng-invalid>.cide-input .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-input .cide-select-button:hover,.ng-touched.ng-invalid>.cide-textarea .cide-input-input:hover,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-textarea .cide-select-button:hover,.ng-touched.ng-invalid>.cide-select .cide-input-input:hover,.ng-touched.ng-invalid>.cide-select .cide-textarea-input:hover,.ng-touched.ng-invalid>.cide-select .cide-select-button:hover{color:var(--cide-input-text-color-hover-invalid);border-color:var(--cide-input-border-hover-invalid)}.ng-touched.ng-invalid>.cide-input .cide-input-input:focus,.ng-touched.ng-invalid>.cide-input .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-input .cide-select-button:focus,.ng-touched.ng-invalid>.cide-textarea .cide-input-input:focus,.ng-touched.ng-invalid>.cide-textarea .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-textarea .cide-select-button:focus,.ng-touched.ng-invalid>.cide-select .cide-input-input:focus,.ng-touched.ng-invalid>.cide-select .cide-textarea-input:focus,.ng-touched.ng-invalid>.cide-select .cide-select-button:focus{color:var(--cide-input-text-color-active-invalid);border-color:var(--cide-input-border-active-invalid)}.cide-input-leading-icon-wrapper,.cide-textarea-leading-icon-wrapper,.cide-select-leading-icon-wrapper{position:absolute;bottom:0;left:0;z-index:0;text-align:center}.cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"cide-select\" [ngClass]=\"{\n  'cide-element-size-xxs': (size === '2xs'),\n  'cide-element-size-xs': (size === 'xs'),\n  'cide-element-size-sm': (size === 'sm'),\n  'cide-element-size-md': (size === 'md'),\n  'cide-element-size-lg': (size === 'lg'),\n  'cide-element-input-label-floating': (labelPlacement === 'floating'),\n  'cide-element-input-label-start': (labelDir === 'start'),\n  'cide-element-input-label-end': (labelDir === 'end'),\n  'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n  'cide-element-input-label-less': (!label || labelHide),\n  'cide-element-style-outline': (fill === 'outline'),\n  'cide-element-style-solid': (fill === 'solid'),\n  'cide-element-style-standard': (fill === 'standard'),\n}\">\n  @if (label && !labelHide) {\n  <label [for]=\"id\" class=\"cide-select-label\">{{ label }}</label>\n  }\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    @if (leadingIcon) {\n    <span class=\"cide-input-leading-icon-wrapper\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\n    }\n\n    <!-- Select Button -->\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"[\n        ((label && labelPlacement === 'fixed') ? 'tw-rounded-e-md tw-rounded-es-md' : 'tw-rounded-md'),\n        (!leadingIcon ? 'tw-pl-1' : ''),\n        (trailingIcon || clearInput || loading ? 'tw-pr-8' : ''),\n        (!trailingIcon && !clearInput && !loading ? 'tw-pr-1' : ''),\n        ((size === 'md') ? 'tw-h-8 tw-pt-0.5 tw-pb-0' : (size === 'sm' ? 'tw-h-7' : '')),\n        (labelHide ? '!tw-mt-0' : ''),\n        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer'\n      ]\" class=\"cide-select-button\">\n\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n      </span>\n    </button>\n\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n    @if (!clearInput || !ngModel || loading) {\n    <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n      <!-- Loading Spinner -->\n      @if (loading) {\n      <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n        <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"tw-opacity-75\" fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n          </path>\n        </svg>\n      </span>\n      }\n      <!-- Dropdown Arrow -->\n      @if (!loading) {\n      <span\n        class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n        [ngClass]=\"{'tw-rotate-180': isOpen}\">\n        expand_more\n      </span>\n      }\n    </span>\n    }\n\n    <!-- Clear Button -->\n    @if (clearInput && ngModel) {\n    <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n    }\n\n\n  </div>\n\n  <!-- Error/Helper Text -->\n  @if ((errorText || helperText) && !isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  }\n  @if (helperText && isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n  }\n\n  <!-- Portal Container -->\n  <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n  <div\n    class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n    <!-- Search Input (if searchable and showSearchInput is true) -->\n    @if (context?.searchable && showSearchInput) {\n    <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n      <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n        (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n        (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n        class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"tw-py-1\">\n      <!-- Loading State -->\n      @if (context?.loading) {\n      <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n          <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n            viewBox=\"0 0 24 24\">\n            <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"tw-opacity-75\" fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n            </path>\n          </svg>\n          <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n        </div>\n      </div>\n      }\n      <!-- Options -->\n      @if (!context?.loading) {\n      @for (option of context?.options; track $index) {\n      <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n        (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n        [disabled]=\"option.disabled\" [ngClass]=\"{\n              'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n              'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n        {{ context?.getOptionLabel(option) }}\n      </button>\n      }\n      }\n\n      <!-- No options message -->\n      @if (!context?.loading && context?.options.length === 0) {\n      <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n        {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [".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]
@@ -2714,7 +2714,7 @@ class CideEleFileManagerService {
                     });
                     // Angular 20: Enhanced HTTP request with retry logic and better error handling
                     // Use proper API endpoint from cloud-ide-lms-model
-                    this.http.post(`${this._baseUrl()}`, payload, {
+                    this.http.post(`${this._baseUrl()}/upload`, payload, {
                         reportProgress: true,
                         observe: 'events'
                     }).pipe(retry(uploadOptions.retryAttempts || 3), catchError(this.handleError.bind(this)), finalize(() => {
@@ -2837,15 +2837,11 @@ class CideEleFileManagerService {
     }
     /**
      * Get file details by ID
-     * @param fileId The file ID to fetch details for
+     * @param payload The file ID to fetch details for
      * @returns Observable with file details
      */
-    getFileDetails(fileId) {
-        console.log('🔍 [FileManagerService] Fetching file details for ID:', fileId.cyfm_id);
-        // Create a GET request payload similar to the upload structure
-        const payload = {
-            core_file_manager_get: [fileId]
-        };
+    getFileDetails(payload) {
+        console.log('🔍 [FileManagerService] Fetching file details for ID:', payload.cyfm_id);
         return this.http.post(`${this._baseUrl()}`, payload).pipe(retry(2), catchError(this.handleError.bind(this)), takeUntilDestroyed(this.destroyRef));
     }
     /**
@@ -3422,8 +3418,8 @@ class CideEleFileInputComponent {
                     // If it's an image and we have base64 data, set preview
                     if (this.showPreview() && fileData.cyfm_file_base64) {
                         // Check if it's an image file based on file name or type
-                        const isImage = this.isImageFileFromName(fileData.cyfm_name) ||
-                            this.isImageFileFromType(fileData.cyfm_type);
+                        const isImage = this.isImageFileFromName(fileData.cyfm_name || '') ||
+                            this.isImageFileFromType(fileData.cyfm_type || '');
                         if (isImage) {
                             // Add data URL prefix if not already present
                             let base64Data = fileData.cyfm_file_base64;