cloud-ide-element 1.1.159 → 1.1.161

package/fesm2022/cloud-ide-element.mjs

@@ -1,9 +1,9 @@
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, inject, ChangeDetectorRef, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, input, ElementRef, effect, ContentChildren, signal, DestroyRef, computed, HostListener, ChangeDetectionStrategy, Directive, PLATFORM_ID, viewChild } from '@angular/core';
+import { Pipe, Injectable, inject, ChangeDetectorRef, EventEmitter, ViewContainerRef, forwardRef, ViewChild, Output, Input, Component, input, effect, ContentChildren, signal, DestroyRef, computed, HostListener, ChangeDetectionStrategy, Directive, PLATFORM_ID, ElementRef, viewChild } from '@angular/core';
 import * as i2 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, takeUntil, Observable, retry, catchError, finalize, throwError, map, of } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpEventType, HttpParams, HttpRequest } from '@angular/common/http';
@@ -1770,7 +1770,7 @@ class CideInputComponent {
                 useExisting: forwardRef(() => CideInputComponent),
             },
             CapitalizePipe
-        ], viewQueries: [{ propertyName: "datePickerTemplate", first: true, predicate: ["datePickerTemplate"], descendants: true, static: true }, { propertyName: "timePickerTemplate", first: true, predicate: ["timePickerTemplate"], descendants: true, static: true }, { propertyName: "dateTimePickerTemplate", first: true, predicate: ["dateTimePickerTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-input\">\n  <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\n  @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type ===\n  'date' || type === 'datetime-local' || type === 'url') {\n  <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [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-leading-icon': leadingIcon,\n                'cide-element-trailing-icon': trailingIconInternal,\n                'cide-element-clear-input': clearInput,\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                'cide-element-input-number': (type === 'number')\n            }\">\n    <!-- label -->\n    @if (label && !labelHide) {\n    <label [for]=\"id\" class=\"cide-input-label\">\n      {{label}}\n      @if (required) {\n      <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n      }\n    </label>\n    }\n\n    <!-- all one line elemets which dose not affect with label and error text -->\n    <div class=\"cide-element-input-wrapper\">\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      <!-- Trailing icon -->\n      @if (trailingIconInternal) {\n      <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\n        <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\n          [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\n          (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\n      </span>\n      }\n\n      <!-- Clear -->\n      @if (clearInput && ngModel) {\n      <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\n        <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n      </button>\n      }\n\n      <!-- Date Input Wrapper -->\n      @if (type === 'date') {\n      <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n        <!-- Date Input (read-only to prevent manual input) -->\n        <input [placeholder]=\"placeholder || 'DD/MM/YYYY'\" [id]=\"id || idRandom\" [disabled]=\"disabled\" [ngClass]=\"{\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                            'tw-pl-1': !leadingIcon,\n                            'tw-pr-8': trailingIconInternal,\n                            'tw-pr-1': !trailingIconInternal,\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                            'tw-h-7': size === 'sm',\n                            '!tw-mt-0': labelHide,\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\n                        }\" [value]=\"getDateDisplayValue()\" type=\"text\" (focus)=\"focusControl()\"\n          (input)=\"onDateInput($event)\" [autocomplete]=\"autocomplete\"\n          class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n\n        <!-- Placeholder overlay for empty date -->\n        @if (!ngModel && placeholder) {\n        <div class=\"cide-input-date-overlay\">\n          {{placeholder}}\n        </div>\n        }\n\n        <!-- Date picker is now rendered as a portal appended to body -->\n      </div>\n      }\n\n      <!-- Time Input Wrapper -->\n      @if (isTimeType()) {\n      <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n        <!-- Time Input (read-only to prevent manual input) -->\n        <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\" [ngClass]=\"{\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                            'tw-pl-1': !leadingIcon,\n                            'tw-pr-8': trailingIconInternal,\n                            'tw-pr-1': !trailingIconInternal,\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                            'tw-h-7': size === 'sm',\n                            '!tw-mt-0': labelHide,\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\n                        }\" [value]=\"getTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\"\n          (click)=\"trailingIconClick()\" [autocomplete]=\"autocomplete\"\n          class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\n\n        <!-- Placeholder overlay for empty time -->\n        @if (!ngModel && placeholder) {\n        <div class=\"cide-input-date-overlay\">\n          {{placeholder}}\n        </div>\n        }\n\n        <!-- Time picker is now rendered as a portal appended to body -->\n      </div>\n      }\n\n      <!-- DateTime Local Input -->\n      @if (type === 'datetime-local') {\n      <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n        <!-- DateTime Input (read-only to prevent manual input) -->\n        <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\" [ngClass]=\"{\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                            'tw-pl-1': !leadingIcon,\n                            'tw-pr-8': trailingIconInternal,\n                            'tw-pr-1': !trailingIconInternal,\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                            'tw-h-7': size === 'sm',\n                            '!tw-mt-0': labelHide,\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\n                        }\" [value]=\"getDateTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\"\n          (click)=\"trailingIconClick()\" [autocomplete]=\"autocomplete\"\n          class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\n\n        <!-- Placeholder overlay for empty datetime -->\n        @if (!ngModel && placeholder) {\n        <div class=\"cide-input-date-overlay\">\n          {{placeholder}}\n        </div>\n        }\n\n        <!-- DateTime picker is now rendered as a portal appended to body -->\n      </div>\n      }\n\n      <!-- Regular Input (non-date, non-time, non-datetime-local, non-url) -->\n      @if (type !== 'date' && !isTimeType() && type !== 'datetime-local' && type !== 'url') {\n      <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\" [ngClass]=\"{\n                        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                        'tw-pl-1': !leadingIcon,\n                        'tw-pr-8': trailingIconInternal,\n                        'tw-pr-1': !trailingIconInternal,\n                        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                        'tw-h-7': size === 'sm',\n                        '!tw-mt-0': labelHide,\n                        'tw-opacity-50 tw-cursor-not-allowed': disabled\n                    }\" [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\"\n        (focus)=\"focusControl()\" [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\" [step]=\"step\"\n        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n      }\n\n      <!-- URL Input -->\n      @if (type === 'url') {\n      <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\" [ngClass]=\"{\n                        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                        'tw-pl-1': !leadingIcon,\n                        'tw-pr-8': trailingIconInternal,\n                        'tw-pr-1': !trailingIconInternal,\n                        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                        'tw-h-7': size === 'sm',\n                        '!tw-mt-0': labelHide,\n                        'tw-opacity-50 tw-cursor-not-allowed': disabled\n                    }\" [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\"\n        (focus)=\"focusControl()\" [autocomplete]=\"autocomplete\"\n        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n      }\n    </div>\n    <!-- error text / helper text -->\n    @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\n    <span class=\"cide-input-help-error-text\">{{\n      isValid\n      ? helperText : (errorText ?\n      (isTouched ? errorText : helperText)\n      : helperText)}}\n    </span>\n    }\n  </div>\n  }\n\n  <!-- Input with tralling icon -->\n  <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\n        <div class=\"tw-w-fullh-full tw-relative\">\n            <label\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\n            <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\n            </span>\n            <input\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\n                value=\"Ankush Bhure\" />\n        </div>\n    </div> -->\n\n  <!-- Input with leading icon -->\n  <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\n        <div class=\"tw-w-fullh-full tw-relative\">\n            <label\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\n            <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\n            </span>\n            <input\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\n                value=\"Ankush Bhure\" />\n        </div>\n    </div> -->\n\n  <!------------------------------------------CHECKBOX------------------------------------------>\n  @if (type === 'checkbox') {\n  <div class=\"tw-flex\">\n    <div class=\"cide-checkbox tw-relative\">\n      <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\" [disabled]=\"disabled\"\n        class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\n        [autocomplete]=\"autocomplete\" />\n      <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\n        <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\n          <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\n            <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\n          </svg>\n        </span>\n        @if (!labelHide) {\n        <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\n        }\n      </label>\n      <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\n        <!-- Element hidden and its xpath is used to display inside SVG -->\n        <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\n          <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n        </symbol>\n      </svg>\n    </div>\n  </div>\n  }\n\n  <!-------------------------------------------SELECT------------------------------------------->\n  @if (type === 'select') {\n  <div>sas\n    <div class=\"tw-relative\">\n      <div class=\"tw-absolute\">\n        @for (item of option; track $index) {\n        <div class=\"tw-w-full\">\n          {{item}}\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Date Picker Template -->\n<ng-template #datePickerTemplate>\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\n    <!-- Date Picker Header -->\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"previousMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\n      </button>\n\n      <button type=\"button\"\n        class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\n        (click)=\"toggleMonthYearSelector()\">\n        {{ monthNames[currentMonth] }} {{ currentYear }}\n      </button>\n\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"nextMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\n      </button>\n    </div>\n\n    <!-- Month/Year Selector -->\n    @if (showMonthYearSelector) {\n    <div class=\"tw-mb-4\">\n      <!-- Year Navigation -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n        <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n          (click)=\"previousYear()\">\n          <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\n        </button>\n        <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\n        <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n          (click)=\"nextYear()\">\n          <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\n        </button>\n      </div>\n\n      <!-- Month Grid -->\n      <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\n        @for (monthName of shortMonthNames; track $index) {\n        <button type=\"button\" class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\n          [class.tw-bg-blue-500]=\"$index === currentMonth\" [class.tw-text-white]=\"$index === currentMonth\"\n          [class.tw-text-gray-700]=\"$index !== currentMonth\" [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\n          (click)=\"selectMonth($index)\">\n          {{ monthName }}\n        </button>\n        }\n      </div>\n\n      <!-- Back to Calendar Button -->\n      <div class=\"tw-text-center\">\n        <button type=\"button\"\n          class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\n          (click)=\"toggleMonthYearSelector()\">\n          Back to Calendar\n        </button>\n      </div>\n    </div>\n    } @else {\n    <!-- Calendar View -->\n    <div>\n      <!-- Days of Week Header -->\n      <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\n        @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\n        <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\n          {{ dayName }}\n        </div>\n        }\n      </div>\n\n      <!-- Calendar Days -->\n      <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\n        @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\n          [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\" [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n          [class.tw-bg-blue-500]=\"dayInfo.isSelected\" [class.tw-text-white]=\"dayInfo.isSelected\"\n          [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\n          [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\n          [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\n          (click)=\"showDateTimePicker ? selectDateTimeDate(dayInfo) : selectDate(dayInfo)\">\n          {{ dayInfo.day }}\n        </button>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Date Picker Footer -->\n    <div class=\"tw-flex tw-justify-between tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\n      <button type=\"button\"\n        class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded tw-transition-colors\"\n        (click)=\"closeDatePicker()\">\n        Cancel\n      </button>\n      <button type=\"button\"\n        class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700 tw-rounded tw-transition-colors\"\n        (click)=\"closeDatePicker()\">\n        Done\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Time Picker Template -->\n<ng-template #timePickerTemplate>\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4 tw-w-72\">\n    <!-- Time Picker Header -->\n    <div class=\"tw-text-center tw-mb-3\">\n      <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h3>\n    </div>\n\n    <!-- Time Spinners Container -->\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-3 tw-mb-4\">\n      <!-- Hours -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('hours', 'up')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\n        </button>\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\n          {{ timeHours }}\n        </div>\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('hours', 'down')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\n        </button>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">hour</span>\n      </div>\n\n      <!-- Colon Separator -->\n      <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\n\n      <!-- Minutes -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('minutes', 'up')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\n        </button>\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\n          {{ timeMinutes.toString().padStart(2, '0') }}\n        </div>\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('minutes', 'down')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\n        </button>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">min</span>\n      </div>\n\n      <!-- Colon Separator -->\n      <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\n\n      <!-- Seconds -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('seconds', 'up')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\n        </button>\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\n          {{ timeSeconds.toString().padStart(2, '0') }}\n        </div>\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('seconds', 'down')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\n        </button>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">sec</span>\n      </div>\n    </div>\n\n    <!-- AM/PM Toggle -->\n    <div class=\"tw-flex tw-justify-center tw-mb-3\">\n      <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\n        <button type=\"button\"\n          class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n          [class.tw-bg-white]=\"timeFormat === 'AM'\" [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\n          [class.tw-shadow]=\"timeFormat === 'AM'\" [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\n          (click)=\"timeFormat = 'AM'\">\n          AM\n        </button>\n        <button type=\"button\"\n          class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n          [class.tw-bg-white]=\"timeFormat === 'PM'\" [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\n          [class.tw-shadow]=\"timeFormat === 'PM'\" [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\n          (click)=\"timeFormat = 'PM'\">\n          PM\n        </button>\n      </div>\n    </div>\n\n    <!-- Current Time Display -->\n    <div class=\"tw-text-center tw-mb-3\">\n      <span class=\"tw-text-sm tw-text-gray-600\">\n        {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{\n        timeFormat }}\n      </span>\n    </div>\n\n    <!-- Time Picker Footer -->\n    <div class=\"tw-flex tw-gap-2\">\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\n        (click)=\"showDateTimePicker ? closeDateTimePicker() : closeTimePicker()\">\n        Cancel\n      </button>\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\n        (click)=\"showDateTimePicker ? applyDateTime() : applyTime()\">\n        OK\n      </button>\n    </div>\n\n  </div>\n</ng-template>\n\n<!-- DateTime Picker Template (Combined Date + Time) -->\n<ng-template #dateTimePickerTemplate>\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\n    <!-- DateTime Picker Header -->\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"previousMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\n      </button>\n\n      <button type=\"button\"\n        class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\n        (click)=\"toggleMonthYearSelector()\">\n        {{ monthNames[currentMonth] }} {{ currentYear }}\n      </button>\n\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"nextMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\n      </button>\n    </div>\n\n    <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\n      <!-- Left Side: Calendar -->\n      <div>\n        <!-- Month/Year Selector -->\n        @if (showMonthYearSelector) {\n        <div class=\"tw-mb-4\">\n          <!-- Year Navigation -->\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <button type=\"button\"\n              class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n              (click)=\"previousYear()\">\n              <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\n            </button>\n            <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\n            <button type=\"button\"\n              class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n              (click)=\"nextYear()\">\n              <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\n            </button>\n          </div>\n\n          <!-- Month Grid -->\n          <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\n            @for (monthName of shortMonthNames; track $index) {\n            <button type=\"button\" class=\"tw-px-2 tw-py-1.5 tw-text-xs tw-rounded-md tw-transition-colors tw-text-center\"\n              [class.tw-bg-blue-500]=\"$index === currentMonth\" [class.tw-text-white]=\"$index === currentMonth\"\n              [class.tw-text-gray-700]=\"$index !== currentMonth\" [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\n              (click)=\"selectMonth($index)\">\n              {{ monthName }}\n            </button>\n            }\n          </div>\n\n          <!-- Back to Calendar Button -->\n          <div class=\"tw-text-center\">\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\n              (click)=\"toggleMonthYearSelector()\">\n              Back to Calendar\n            </button>\n          </div>\n        </div>\n        } @else {\n        <!-- Calendar View -->\n        <div>\n          <!-- Days of Week Header -->\n          <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\n            @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\n            <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-1\">\n              {{ dayName }}\n            </div>\n            }\n          </div>\n\n          <!-- Calendar Days -->\n          <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\n            @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-text-xs tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\n              [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\" [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n              [class.tw-bg-blue-500]=\"dayInfo.isSelected\" [class.tw-text-white]=\"dayInfo.isSelected\"\n              [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\n              [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\n              [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\n              (click)=\"selectDateTimeDate(dayInfo)\">\n              {{ dayInfo.day }}\n            </button>\n            }\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Right Side: Time Picker -->\n      <div class=\"tw-border-l tw-border-gray-200 tw-pl-4\">\n        <div class=\"tw-text-center tw-mb-2\">\n          <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h4>\n        </div>\n\n        <!-- Time Spinners -->\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-3\">\n          <!-- Hours -->\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('hours', 'up')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\n            </button>\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\n              {{ timeHours }}\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('hours', 'down')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\n            </button>\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">hour</span>\n          </div>\n\n          <!-- Colon -->\n          <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\n\n          <!-- Minutes -->\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('minutes', 'up')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\n            </button>\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\n              {{ timeMinutes.toString().padStart(2, '0') }}\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('minutes', 'down')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\n            </button>\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">min</span>\n          </div>\n\n          <!-- Colon -->\n          <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\n\n          <!-- Seconds -->\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('seconds', 'up')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\n            </button>\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\n              {{ timeSeconds.toString().padStart(2, '0') }}\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('seconds', 'down')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\n            </button>\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">sec</span>\n          </div>\n        </div>\n\n        <!-- AM/PM Toggle -->\n        <div class=\"tw-flex tw-justify-center tw-mb-2\">\n          <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n              [class.tw-bg-white]=\"timeFormat === 'AM'\" [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\n              [class.tw-shadow-sm]=\"timeFormat === 'AM'\" [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\n              (click)=\"timeFormat = 'AM'\">\n              AM\n            </button>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n              [class.tw-bg-white]=\"timeFormat === 'PM'\" [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\n              [class.tw-shadow-sm]=\"timeFormat === 'PM'\" [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\n              (click)=\"timeFormat = 'PM'\">\n              PM\n            </button>\n          </div>\n        </div>\n\n        <!-- Current Time Display -->\n        <div class=\"tw-text-center tw-text-xs tw-text-gray-600\">\n          {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{\n          timeFormat }}\n        </div>\n      </div>\n    </div>\n\n    <!-- DateTime Picker Footer -->\n    <div class=\"tw-flex tw-gap-2 tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\n      <button type=\"button\"\n        class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-blue-600 tw-bg-white tw-border tw-border-blue-300 hover:tw-bg-blue-50 tw-rounded tw-transition-colors\"\n        (click)=\"setCurrentDateTime()\">\n        Now\n      </button>\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\n        (click)=\"closeDateTimePicker()\">\n        Cancel\n      </button>\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\n        (click)=\"applyDateTime()\">\n        OK\n      </button>\n    </div>\n  </div>\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:var(--tw-gray-500)}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:var(--tw-gray-200);transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid var(--tw-gray-200);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:var(--cide-ele-bg-primary, #ffffff);border:1px solid var(--cide-ele-border-primary, #e5e7eb);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--cide-ele-text-primary, #1f2937)}.cide-date-picker-portal{animation:portalFadeIn .2s ease-out}@keyframes portalFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.cide-date-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=time]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=time]{-moz-appearance:textfield}input[type=time]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=time]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=time]{background:transparent!important;border:none!important;outline:none!important}.cide-time-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-time-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=datetime-local]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=datetime-local]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=datetime-local]{-moz-appearance:textfield}input[type=datetime-local]::-webkit-datetime-edit,input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=datetime-local]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=datetime-local]{background:transparent!important;border:none!important;outline:none!important}.cide-datetime-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-datetime-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"], dependencies: [{ kind: "ngmodule", type: 
+        ], viewQueries: [{ propertyName: "datePickerTemplate", first: true, predicate: ["datePickerTemplate"], descendants: true, static: true }, { propertyName: "timePickerTemplate", first: true, predicate: ["timePickerTemplate"], descendants: true, static: true }, { propertyName: "dateTimePickerTemplate", first: true, predicate: ["dateTimePickerTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-input\">\n  <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\n  @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type ===\n  'date' || type === 'datetime-local' || type === 'url') {\n  <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [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-leading-icon': leadingIcon,\n                'cide-element-trailing-icon': trailingIconInternal,\n                'cide-element-clear-input': clearInput,\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                'cide-element-input-number': (type === 'number')\n            }\">\n    <!-- label -->\n    @if (label && !labelHide) {\n    <label [for]=\"id\" class=\"cide-input-label\">\n      {{label}}\n      @if (required) {\n      <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n      }\n    </label>\n    }\n\n    <!-- all one line elemets which dose not affect with label and error text -->\n    <div class=\"cide-element-input-wrapper\">\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      <!-- Trailing icon -->\n      @if (trailingIconInternal) {\n      <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0 tw-z-10\">\n        <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\n          [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\n          (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\n      </span>\n      }\n\n      <!-- Clear -->\n      @if (clearInput && ngModel) {\n      <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\n        <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n      </button>\n      }\n\n      <!-- Date Input Wrapper -->\n      @if (type === 'date') {\n      <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n        <!-- Date Input (read-only to prevent manual input) -->\n        <input [placeholder]=\"placeholder || 'DD/MM/YYYY'\" [id]=\"id || idRandom\" [disabled]=\"disabled\" [ngClass]=\"{\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                            'tw-pl-1': !leadingIcon,\n                            'tw-pr-8': trailingIconInternal,\n                            'tw-pr-1': !trailingIconInternal,\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                            'tw-h-7': size === 'sm',\n                            '!tw-mt-0': labelHide,\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\n                        }\" [value]=\"getDateDisplayValue()\" type=\"text\" (focus)=\"focusControl()\"\n          (input)=\"onDateInput($event)\" [autocomplete]=\"autocomplete\"\n          class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n\n        <!-- Placeholder overlay for empty date -->\n        @if (!ngModel && placeholder) {\n        <div class=\"cide-input-date-overlay\">\n          {{placeholder}}\n        </div>\n        }\n\n        <!-- Date picker is now rendered as a portal appended to body -->\n      </div>\n      }\n\n      <!-- Time Input Wrapper -->\n      @if (isTimeType()) {\n      <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n        <!-- Time Input (read-only to prevent manual input) -->\n        <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\" [ngClass]=\"{\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                            'tw-pl-1': !leadingIcon,\n                            'tw-pr-8': trailingIconInternal,\n                            'tw-pr-1': !trailingIconInternal,\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                            'tw-h-7': size === 'sm',\n                            '!tw-mt-0': labelHide,\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\n                        }\" [value]=\"getTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\"\n          (click)=\"trailingIconClick()\" [autocomplete]=\"autocomplete\"\n          class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\n\n        <!-- Placeholder overlay for empty time -->\n        @if (!ngModel && placeholder) {\n        <div class=\"cide-input-date-overlay\">\n          {{placeholder}}\n        </div>\n        }\n\n        <!-- Time picker is now rendered as a portal appended to body -->\n      </div>\n      }\n\n      <!-- DateTime Local Input -->\n      @if (type === 'datetime-local') {\n      <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n        <!-- DateTime Input (read-only to prevent manual input) -->\n        <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\" [ngClass]=\"{\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                            'tw-pl-1': !leadingIcon,\n                            'tw-pr-8': trailingIconInternal,\n                            'tw-pr-1': !trailingIconInternal,\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                            'tw-h-7': size === 'sm',\n                            '!tw-mt-0': labelHide,\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\n                        }\" [value]=\"getDateTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\"\n          (click)=\"trailingIconClick()\" [autocomplete]=\"autocomplete\"\n          class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\n\n        <!-- Placeholder overlay for empty datetime -->\n        @if (!ngModel && placeholder) {\n        <div class=\"cide-input-date-overlay\">\n          {{placeholder}}\n        </div>\n        }\n\n        <!-- DateTime picker is now rendered as a portal appended to body -->\n      </div>\n      }\n\n      <!-- Regular Input (non-date, non-time, non-datetime-local, non-url) -->\n      @if (type !== 'date' && !isTimeType() && type !== 'datetime-local' && type !== 'url') {\n      <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\" [ngClass]=\"{\n                        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                        'tw-pl-1': !leadingIcon,\n                        'tw-pr-8': trailingIconInternal,\n                        'tw-pr-1': !trailingIconInternal,\n                        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                        'tw-h-7': size === 'sm',\n                        '!tw-mt-0': labelHide,\n                        'tw-opacity-50 tw-cursor-not-allowed': disabled\n                    }\" [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\"\n        (focus)=\"focusControl()\" [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\" [step]=\"step\"\n        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n      }\n\n      <!-- URL Input -->\n      @if (type === 'url') {\n      <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\" [ngClass]=\"{\n                        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                        'tw-pl-1': !leadingIcon,\n                        'tw-pr-8': trailingIconInternal,\n                        'tw-pr-1': !trailingIconInternal,\n                        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                        'tw-h-7': size === 'sm',\n                        '!tw-mt-0': labelHide,\n                        'tw-opacity-50 tw-cursor-not-allowed': disabled\n                    }\" [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\"\n        (focus)=\"focusControl()\" [autocomplete]=\"autocomplete\"\n        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n      }\n    </div>\n    <!-- error text / helper text -->\n    @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\n    <span class=\"cide-input-help-error-text\">{{\n      isValid\n      ? helperText : (errorText ?\n      (isTouched ? errorText : helperText)\n      : helperText)}}\n    </span>\n    }\n  </div>\n  }\n\n  <!-- Input with tralling icon -->\n  <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\n        <div class=\"tw-w-fullh-full tw-relative\">\n            <label\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\n            <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\n            </span>\n            <input\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\n                value=\"Ankush Bhure\" />\n        </div>\n    </div> -->\n\n  <!-- Input with leading icon -->\n  <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\n        <div class=\"tw-w-fullh-full tw-relative\">\n            <label\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\n            <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\n            </span>\n            <input\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\n                value=\"Ankush Bhure\" />\n        </div>\n    </div> -->\n\n  <!------------------------------------------CHECKBOX------------------------------------------>\n  @if (type === 'checkbox') {\n  <div class=\"tw-flex\">\n    <div class=\"cide-checkbox tw-relative\">\n      <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\" [disabled]=\"disabled\"\n        class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\n        [autocomplete]=\"autocomplete\" />\n      <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\n        <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\n          <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\n            <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\n          </svg>\n        </span>\n        @if (!labelHide) {\n        <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\n        }\n      </label>\n      <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\n        <!-- Element hidden and its xpath is used to display inside SVG -->\n        <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\n          <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n        </symbol>\n      </svg>\n    </div>\n  </div>\n  }\n\n  <!-------------------------------------------SELECT------------------------------------------->\n  @if (type === 'select') {\n  <div>sas\n    <div class=\"tw-relative\">\n      <div class=\"tw-absolute\">\n        @for (item of option; track $index) {\n        <div class=\"tw-w-full\">\n          {{item}}\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Date Picker Template -->\n<ng-template #datePickerTemplate>\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\n    <!-- Date Picker Header -->\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"previousMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\n      </button>\n\n      <button type=\"button\"\n        class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\n        (click)=\"toggleMonthYearSelector()\">\n        {{ monthNames[currentMonth] }} {{ currentYear }}\n      </button>\n\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"nextMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\n      </button>\n    </div>\n\n    <!-- Month/Year Selector -->\n    @if (showMonthYearSelector) {\n    <div class=\"tw-mb-4\">\n      <!-- Year Navigation -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n        <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n          (click)=\"previousYear()\">\n          <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\n        </button>\n        <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\n        <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n          (click)=\"nextYear()\">\n          <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\n        </button>\n      </div>\n\n      <!-- Month Grid -->\n      <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\n        @for (monthName of shortMonthNames; track $index) {\n        <button type=\"button\" class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\n          [class.tw-bg-blue-500]=\"$index === currentMonth\" [class.tw-text-white]=\"$index === currentMonth\"\n          [class.tw-text-gray-700]=\"$index !== currentMonth\" [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\n          (click)=\"selectMonth($index)\">\n          {{ monthName }}\n        </button>\n        }\n      </div>\n\n      <!-- Back to Calendar Button -->\n      <div class=\"tw-text-center\">\n        <button type=\"button\"\n          class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\n          (click)=\"toggleMonthYearSelector()\">\n          Back to Calendar\n        </button>\n      </div>\n    </div>\n    } @else {\n    <!-- Calendar View -->\n    <div>\n      <!-- Days of Week Header -->\n      <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\n        @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\n        <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\n          {{ dayName }}\n        </div>\n        }\n      </div>\n\n      <!-- Calendar Days -->\n      <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\n        @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\n          [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\" [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n          [class.tw-bg-blue-500]=\"dayInfo.isSelected\" [class.tw-text-white]=\"dayInfo.isSelected\"\n          [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\n          [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\n          [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\n          (click)=\"showDateTimePicker ? selectDateTimeDate(dayInfo) : selectDate(dayInfo)\">\n          {{ dayInfo.day }}\n        </button>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Date Picker Footer -->\n    <div class=\"tw-flex tw-justify-between tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\n      <button type=\"button\"\n        class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded tw-transition-colors\"\n        (click)=\"closeDatePicker()\">\n        Cancel\n      </button>\n      <button type=\"button\"\n        class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700 tw-rounded tw-transition-colors\"\n        (click)=\"closeDatePicker()\">\n        Done\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Time Picker Template -->\n<ng-template #timePickerTemplate>\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4 tw-w-72\">\n    <!-- Time Picker Header -->\n    <div class=\"tw-text-center tw-mb-3\">\n      <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h3>\n    </div>\n\n    <!-- Time Spinners Container -->\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-3 tw-mb-4\">\n      <!-- Hours -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('hours', 'up')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\n        </button>\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\n          {{ timeHours }}\n        </div>\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('hours', 'down')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\n        </button>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">hour</span>\n      </div>\n\n      <!-- Colon Separator -->\n      <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\n\n      <!-- Minutes -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('minutes', 'up')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\n        </button>\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\n          {{ timeMinutes.toString().padStart(2, '0') }}\n        </div>\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('minutes', 'down')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\n        </button>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">min</span>\n      </div>\n\n      <!-- Colon Separator -->\n      <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\n\n      <!-- Seconds -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('seconds', 'up')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\n        </button>\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\n          {{ timeSeconds.toString().padStart(2, '0') }}\n        </div>\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('seconds', 'down')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\n        </button>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">sec</span>\n      </div>\n    </div>\n\n    <!-- AM/PM Toggle -->\n    <div class=\"tw-flex tw-justify-center tw-mb-3\">\n      <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\n        <button type=\"button\"\n          class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n          [class.tw-bg-white]=\"timeFormat === 'AM'\" [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\n          [class.tw-shadow]=\"timeFormat === 'AM'\" [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\n          (click)=\"timeFormat = 'AM'\">\n          AM\n        </button>\n        <button type=\"button\"\n          class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n          [class.tw-bg-white]=\"timeFormat === 'PM'\" [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\n          [class.tw-shadow]=\"timeFormat === 'PM'\" [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\n          (click)=\"timeFormat = 'PM'\">\n          PM\n        </button>\n      </div>\n    </div>\n\n    <!-- Current Time Display -->\n    <div class=\"tw-text-center tw-mb-3\">\n      <span class=\"tw-text-sm tw-text-gray-600\">\n        {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{\n        timeFormat }}\n      </span>\n    </div>\n\n    <!-- Time Picker Footer -->\n    <div class=\"tw-flex tw-gap-2\">\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\n        (click)=\"showDateTimePicker ? closeDateTimePicker() : closeTimePicker()\">\n        Cancel\n      </button>\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\n        (click)=\"showDateTimePicker ? applyDateTime() : applyTime()\">\n        OK\n      </button>\n    </div>\n\n  </div>\n</ng-template>\n\n<!-- DateTime Picker Template (Combined Date + Time) -->\n<ng-template #dateTimePickerTemplate>\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\n    <!-- DateTime Picker Header -->\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"previousMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\n      </button>\n\n      <button type=\"button\"\n        class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\n        (click)=\"toggleMonthYearSelector()\">\n        {{ monthNames[currentMonth] }} {{ currentYear }}\n      </button>\n\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"nextMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\n      </button>\n    </div>\n\n    <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\n      <!-- Left Side: Calendar -->\n      <div>\n        <!-- Month/Year Selector -->\n        @if (showMonthYearSelector) {\n        <div class=\"tw-mb-4\">\n          <!-- Year Navigation -->\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <button type=\"button\"\n              class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n              (click)=\"previousYear()\">\n              <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\n            </button>\n            <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\n            <button type=\"button\"\n              class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n              (click)=\"nextYear()\">\n              <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\n            </button>\n          </div>\n\n          <!-- Month Grid -->\n          <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\n            @for (monthName of shortMonthNames; track $index) {\n            <button type=\"button\" class=\"tw-px-2 tw-py-1.5 tw-text-xs tw-rounded-md tw-transition-colors tw-text-center\"\n              [class.tw-bg-blue-500]=\"$index === currentMonth\" [class.tw-text-white]=\"$index === currentMonth\"\n              [class.tw-text-gray-700]=\"$index !== currentMonth\" [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\n              (click)=\"selectMonth($index)\">\n              {{ monthName }}\n            </button>\n            }\n          </div>\n\n          <!-- Back to Calendar Button -->\n          <div class=\"tw-text-center\">\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\n              (click)=\"toggleMonthYearSelector()\">\n              Back to Calendar\n            </button>\n          </div>\n        </div>\n        } @else {\n        <!-- Calendar View -->\n        <div>\n          <!-- Days of Week Header -->\n          <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\n            @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\n            <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-1\">\n              {{ dayName }}\n            </div>\n            }\n          </div>\n\n          <!-- Calendar Days -->\n          <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\n            @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-text-xs tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\n              [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\" [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n              [class.tw-bg-blue-500]=\"dayInfo.isSelected\" [class.tw-text-white]=\"dayInfo.isSelected\"\n              [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\n              [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\n              [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\n              (click)=\"selectDateTimeDate(dayInfo)\">\n              {{ dayInfo.day }}\n            </button>\n            }\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Right Side: Time Picker -->\n      <div class=\"tw-border-l tw-border-gray-200 tw-pl-4\">\n        <div class=\"tw-text-center tw-mb-2\">\n          <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h4>\n        </div>\n\n        <!-- Time Spinners -->\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-3\">\n          <!-- Hours -->\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('hours', 'up')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\n            </button>\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\n              {{ timeHours }}\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('hours', 'down')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\n            </button>\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">hour</span>\n          </div>\n\n          <!-- Colon -->\n          <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\n\n          <!-- Minutes -->\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('minutes', 'up')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\n            </button>\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\n              {{ timeMinutes.toString().padStart(2, '0') }}\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('minutes', 'down')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\n            </button>\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">min</span>\n          </div>\n\n          <!-- Colon -->\n          <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\n\n          <!-- Seconds -->\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('seconds', 'up')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\n            </button>\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\n              {{ timeSeconds.toString().padStart(2, '0') }}\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('seconds', 'down')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\n            </button>\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">sec</span>\n          </div>\n        </div>\n\n        <!-- AM/PM Toggle -->\n        <div class=\"tw-flex tw-justify-center tw-mb-2\">\n          <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n              [class.tw-bg-white]=\"timeFormat === 'AM'\" [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\n              [class.tw-shadow-sm]=\"timeFormat === 'AM'\" [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\n              (click)=\"timeFormat = 'AM'\">\n              AM\n            </button>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n              [class.tw-bg-white]=\"timeFormat === 'PM'\" [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\n              [class.tw-shadow-sm]=\"timeFormat === 'PM'\" [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\n              (click)=\"timeFormat = 'PM'\">\n              PM\n            </button>\n          </div>\n        </div>\n\n        <!-- Current Time Display -->\n        <div class=\"tw-text-center tw-text-xs tw-text-gray-600\">\n          {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{\n          timeFormat }}\n        </div>\n      </div>\n    </div>\n\n    <!-- DateTime Picker Footer -->\n    <div class=\"tw-flex tw-gap-2 tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\n      <button type=\"button\"\n        class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-blue-600 tw-bg-white tw-border tw-border-blue-300 hover:tw-bg-blue-50 tw-rounded tw-transition-colors\"\n        (click)=\"setCurrentDateTime()\">\n        Now\n      </button>\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\n        (click)=\"closeDateTimePicker()\">\n        Cancel\n      </button>\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\n        (click)=\"applyDateTime()\">\n        OK\n      </button>\n    </div>\n  </div>\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:var(--tw-gray-500)}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:var(--tw-gray-200);transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid var(--tw-gray-200);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:var(--cide-ele-bg-primary, #ffffff);border:1px solid var(--cide-ele-border-primary, #e5e7eb);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--cide-ele-text-primary, #1f2937)}.cide-date-picker-portal{animation:portalFadeIn .2s ease-out}@keyframes portalFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.cide-date-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=time]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=time]{-moz-appearance:textfield}input[type=time]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=time]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=time]{background:transparent!important;border:none!important;outline:none!important}.cide-time-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-time-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=datetime-local]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=datetime-local]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=datetime-local]{-moz-appearance:textfield}input[type=datetime-local]::-webkit-datetime-edit,input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=datetime-local]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=datetime-local]{background:transparent!important;border:none!important;outline:none!important}.cide-datetime-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-datetime-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"], dependencies: [{ kind: "ngmodule", type: 
                 // directives
                 CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: 
                 // for ngModel
@@ -1796,7 +1796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => CideInputComponent),
                         },
                         CapitalizePipe
-                    ], template: "<div class=\"cide-input\">\n  <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\n  @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type ===\n  'date' || type === 'datetime-local' || type === 'url') {\n  <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [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-leading-icon': leadingIcon,\n                'cide-element-trailing-icon': trailingIconInternal,\n                'cide-element-clear-input': clearInput,\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                'cide-element-input-number': (type === 'number')\n            }\">\n    <!-- label -->\n    @if (label && !labelHide) {\n    <label [for]=\"id\" class=\"cide-input-label\">\n      {{label}}\n      @if (required) {\n      <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n      }\n    </label>\n    }\n\n    <!-- all one line elemets which dose not affect with label and error text -->\n    <div class=\"cide-element-input-wrapper\">\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      <!-- Trailing icon -->\n      @if (trailingIconInternal) {\n      <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\n        <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\n          [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\n          (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\n      </span>\n      }\n\n      <!-- Clear -->\n      @if (clearInput && ngModel) {\n      <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\n        <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n      </button>\n      }\n\n      <!-- Date Input Wrapper -->\n      @if (type === 'date') {\n      <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n        <!-- Date Input (read-only to prevent manual input) -->\n        <input [placeholder]=\"placeholder || 'DD/MM/YYYY'\" [id]=\"id || idRandom\" [disabled]=\"disabled\" [ngClass]=\"{\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                            'tw-pl-1': !leadingIcon,\n                            'tw-pr-8': trailingIconInternal,\n                            'tw-pr-1': !trailingIconInternal,\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                            'tw-h-7': size === 'sm',\n                            '!tw-mt-0': labelHide,\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\n                        }\" [value]=\"getDateDisplayValue()\" type=\"text\" (focus)=\"focusControl()\"\n          (input)=\"onDateInput($event)\" [autocomplete]=\"autocomplete\"\n          class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n\n        <!-- Placeholder overlay for empty date -->\n        @if (!ngModel && placeholder) {\n        <div class=\"cide-input-date-overlay\">\n          {{placeholder}}\n        </div>\n        }\n\n        <!-- Date picker is now rendered as a portal appended to body -->\n      </div>\n      }\n\n      <!-- Time Input Wrapper -->\n      @if (isTimeType()) {\n      <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n        <!-- Time Input (read-only to prevent manual input) -->\n        <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\" [ngClass]=\"{\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                            'tw-pl-1': !leadingIcon,\n                            'tw-pr-8': trailingIconInternal,\n                            'tw-pr-1': !trailingIconInternal,\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                            'tw-h-7': size === 'sm',\n                            '!tw-mt-0': labelHide,\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\n                        }\" [value]=\"getTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\"\n          (click)=\"trailingIconClick()\" [autocomplete]=\"autocomplete\"\n          class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\n\n        <!-- Placeholder overlay for empty time -->\n        @if (!ngModel && placeholder) {\n        <div class=\"cide-input-date-overlay\">\n          {{placeholder}}\n        </div>\n        }\n\n        <!-- Time picker is now rendered as a portal appended to body -->\n      </div>\n      }\n\n      <!-- DateTime Local Input -->\n      @if (type === 'datetime-local') {\n      <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n        <!-- DateTime Input (read-only to prevent manual input) -->\n        <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\" [ngClass]=\"{\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                            'tw-pl-1': !leadingIcon,\n                            'tw-pr-8': trailingIconInternal,\n                            'tw-pr-1': !trailingIconInternal,\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                            'tw-h-7': size === 'sm',\n                            '!tw-mt-0': labelHide,\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\n                        }\" [value]=\"getDateTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\"\n          (click)=\"trailingIconClick()\" [autocomplete]=\"autocomplete\"\n          class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\n\n        <!-- Placeholder overlay for empty datetime -->\n        @if (!ngModel && placeholder) {\n        <div class=\"cide-input-date-overlay\">\n          {{placeholder}}\n        </div>\n        }\n\n        <!-- DateTime picker is now rendered as a portal appended to body -->\n      </div>\n      }\n\n      <!-- Regular Input (non-date, non-time, non-datetime-local, non-url) -->\n      @if (type !== 'date' && !isTimeType() && type !== 'datetime-local' && type !== 'url') {\n      <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\" [ngClass]=\"{\n                        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                        'tw-pl-1': !leadingIcon,\n                        'tw-pr-8': trailingIconInternal,\n                        'tw-pr-1': !trailingIconInternal,\n                        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                        'tw-h-7': size === 'sm',\n                        '!tw-mt-0': labelHide,\n                        'tw-opacity-50 tw-cursor-not-allowed': disabled\n                    }\" [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\"\n        (focus)=\"focusControl()\" [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\" [step]=\"step\"\n        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n      }\n\n      <!-- URL Input -->\n      @if (type === 'url') {\n      <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\" [ngClass]=\"{\n                        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                        'tw-pl-1': !leadingIcon,\n                        'tw-pr-8': trailingIconInternal,\n                        'tw-pr-1': !trailingIconInternal,\n                        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                        'tw-h-7': size === 'sm',\n                        '!tw-mt-0': labelHide,\n                        'tw-opacity-50 tw-cursor-not-allowed': disabled\n                    }\" [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\"\n        (focus)=\"focusControl()\" [autocomplete]=\"autocomplete\"\n        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n      }\n    </div>\n    <!-- error text / helper text -->\n    @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\n    <span class=\"cide-input-help-error-text\">{{\n      isValid\n      ? helperText : (errorText ?\n      (isTouched ? errorText : helperText)\n      : helperText)}}\n    </span>\n    }\n  </div>\n  }\n\n  <!-- Input with tralling icon -->\n  <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\n        <div class=\"tw-w-fullh-full tw-relative\">\n            <label\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\n            <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\n            </span>\n            <input\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\n                value=\"Ankush Bhure\" />\n        </div>\n    </div> -->\n\n  <!-- Input with leading icon -->\n  <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\n        <div class=\"tw-w-fullh-full tw-relative\">\n            <label\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\n            <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\n            </span>\n            <input\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\n                value=\"Ankush Bhure\" />\n        </div>\n    </div> -->\n\n  <!------------------------------------------CHECKBOX------------------------------------------>\n  @if (type === 'checkbox') {\n  <div class=\"tw-flex\">\n    <div class=\"cide-checkbox tw-relative\">\n      <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\" [disabled]=\"disabled\"\n        class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\n        [autocomplete]=\"autocomplete\" />\n      <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\n        <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\n          <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\n            <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\n          </svg>\n        </span>\n        @if (!labelHide) {\n        <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\n        }\n      </label>\n      <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\n        <!-- Element hidden and its xpath is used to display inside SVG -->\n        <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\n          <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n        </symbol>\n      </svg>\n    </div>\n  </div>\n  }\n\n  <!-------------------------------------------SELECT------------------------------------------->\n  @if (type === 'select') {\n  <div>sas\n    <div class=\"tw-relative\">\n      <div class=\"tw-absolute\">\n        @for (item of option; track $index) {\n        <div class=\"tw-w-full\">\n          {{item}}\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Date Picker Template -->\n<ng-template #datePickerTemplate>\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\n    <!-- Date Picker Header -->\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"previousMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\n      </button>\n\n      <button type=\"button\"\n        class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\n        (click)=\"toggleMonthYearSelector()\">\n        {{ monthNames[currentMonth] }} {{ currentYear }}\n      </button>\n\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"nextMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\n      </button>\n    </div>\n\n    <!-- Month/Year Selector -->\n    @if (showMonthYearSelector) {\n    <div class=\"tw-mb-4\">\n      <!-- Year Navigation -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n        <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n          (click)=\"previousYear()\">\n          <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\n        </button>\n        <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\n        <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n          (click)=\"nextYear()\">\n          <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\n        </button>\n      </div>\n\n      <!-- Month Grid -->\n      <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\n        @for (monthName of shortMonthNames; track $index) {\n        <button type=\"button\" class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\n          [class.tw-bg-blue-500]=\"$index === currentMonth\" [class.tw-text-white]=\"$index === currentMonth\"\n          [class.tw-text-gray-700]=\"$index !== currentMonth\" [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\n          (click)=\"selectMonth($index)\">\n          {{ monthName }}\n        </button>\n        }\n      </div>\n\n      <!-- Back to Calendar Button -->\n      <div class=\"tw-text-center\">\n        <button type=\"button\"\n          class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\n          (click)=\"toggleMonthYearSelector()\">\n          Back to Calendar\n        </button>\n      </div>\n    </div>\n    } @else {\n    <!-- Calendar View -->\n    <div>\n      <!-- Days of Week Header -->\n      <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\n        @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\n        <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\n          {{ dayName }}\n        </div>\n        }\n      </div>\n\n      <!-- Calendar Days -->\n      <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\n        @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\n          [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\" [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n          [class.tw-bg-blue-500]=\"dayInfo.isSelected\" [class.tw-text-white]=\"dayInfo.isSelected\"\n          [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\n          [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\n          [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\n          (click)=\"showDateTimePicker ? selectDateTimeDate(dayInfo) : selectDate(dayInfo)\">\n          {{ dayInfo.day }}\n        </button>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Date Picker Footer -->\n    <div class=\"tw-flex tw-justify-between tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\n      <button type=\"button\"\n        class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded tw-transition-colors\"\n        (click)=\"closeDatePicker()\">\n        Cancel\n      </button>\n      <button type=\"button\"\n        class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700 tw-rounded tw-transition-colors\"\n        (click)=\"closeDatePicker()\">\n        Done\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Time Picker Template -->\n<ng-template #timePickerTemplate>\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4 tw-w-72\">\n    <!-- Time Picker Header -->\n    <div class=\"tw-text-center tw-mb-3\">\n      <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h3>\n    </div>\n\n    <!-- Time Spinners Container -->\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-3 tw-mb-4\">\n      <!-- Hours -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('hours', 'up')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\n        </button>\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\n          {{ timeHours }}\n        </div>\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('hours', 'down')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\n        </button>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">hour</span>\n      </div>\n\n      <!-- Colon Separator -->\n      <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\n\n      <!-- Minutes -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('minutes', 'up')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\n        </button>\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\n          {{ timeMinutes.toString().padStart(2, '0') }}\n        </div>\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('minutes', 'down')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\n        </button>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">min</span>\n      </div>\n\n      <!-- Colon Separator -->\n      <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\n\n      <!-- Seconds -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('seconds', 'up')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\n        </button>\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\n          {{ timeSeconds.toString().padStart(2, '0') }}\n        </div>\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('seconds', 'down')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\n        </button>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">sec</span>\n      </div>\n    </div>\n\n    <!-- AM/PM Toggle -->\n    <div class=\"tw-flex tw-justify-center tw-mb-3\">\n      <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\n        <button type=\"button\"\n          class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n          [class.tw-bg-white]=\"timeFormat === 'AM'\" [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\n          [class.tw-shadow]=\"timeFormat === 'AM'\" [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\n          (click)=\"timeFormat = 'AM'\">\n          AM\n        </button>\n        <button type=\"button\"\n          class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n          [class.tw-bg-white]=\"timeFormat === 'PM'\" [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\n          [class.tw-shadow]=\"timeFormat === 'PM'\" [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\n          (click)=\"timeFormat = 'PM'\">\n          PM\n        </button>\n      </div>\n    </div>\n\n    <!-- Current Time Display -->\n    <div class=\"tw-text-center tw-mb-3\">\n      <span class=\"tw-text-sm tw-text-gray-600\">\n        {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{\n        timeFormat }}\n      </span>\n    </div>\n\n    <!-- Time Picker Footer -->\n    <div class=\"tw-flex tw-gap-2\">\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\n        (click)=\"showDateTimePicker ? closeDateTimePicker() : closeTimePicker()\">\n        Cancel\n      </button>\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\n        (click)=\"showDateTimePicker ? applyDateTime() : applyTime()\">\n        OK\n      </button>\n    </div>\n\n  </div>\n</ng-template>\n\n<!-- DateTime Picker Template (Combined Date + Time) -->\n<ng-template #dateTimePickerTemplate>\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\n    <!-- DateTime Picker Header -->\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"previousMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\n      </button>\n\n      <button type=\"button\"\n        class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\n        (click)=\"toggleMonthYearSelector()\">\n        {{ monthNames[currentMonth] }} {{ currentYear }}\n      </button>\n\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"nextMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\n      </button>\n    </div>\n\n    <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\n      <!-- Left Side: Calendar -->\n      <div>\n        <!-- Month/Year Selector -->\n        @if (showMonthYearSelector) {\n        <div class=\"tw-mb-4\">\n          <!-- Year Navigation -->\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <button type=\"button\"\n              class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n              (click)=\"previousYear()\">\n              <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\n            </button>\n            <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\n            <button type=\"button\"\n              class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n              (click)=\"nextYear()\">\n              <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\n            </button>\n          </div>\n\n          <!-- Month Grid -->\n          <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\n            @for (monthName of shortMonthNames; track $index) {\n            <button type=\"button\" class=\"tw-px-2 tw-py-1.5 tw-text-xs tw-rounded-md tw-transition-colors tw-text-center\"\n              [class.tw-bg-blue-500]=\"$index === currentMonth\" [class.tw-text-white]=\"$index === currentMonth\"\n              [class.tw-text-gray-700]=\"$index !== currentMonth\" [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\n              (click)=\"selectMonth($index)\">\n              {{ monthName }}\n            </button>\n            }\n          </div>\n\n          <!-- Back to Calendar Button -->\n          <div class=\"tw-text-center\">\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\n              (click)=\"toggleMonthYearSelector()\">\n              Back to Calendar\n            </button>\n          </div>\n        </div>\n        } @else {\n        <!-- Calendar View -->\n        <div>\n          <!-- Days of Week Header -->\n          <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\n            @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\n            <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-1\">\n              {{ dayName }}\n            </div>\n            }\n          </div>\n\n          <!-- Calendar Days -->\n          <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\n            @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-text-xs tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\n              [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\" [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n              [class.tw-bg-blue-500]=\"dayInfo.isSelected\" [class.tw-text-white]=\"dayInfo.isSelected\"\n              [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\n              [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\n              [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\n              (click)=\"selectDateTimeDate(dayInfo)\">\n              {{ dayInfo.day }}\n            </button>\n            }\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Right Side: Time Picker -->\n      <div class=\"tw-border-l tw-border-gray-200 tw-pl-4\">\n        <div class=\"tw-text-center tw-mb-2\">\n          <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h4>\n        </div>\n\n        <!-- Time Spinners -->\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-3\">\n          <!-- Hours -->\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('hours', 'up')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\n            </button>\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\n              {{ timeHours }}\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('hours', 'down')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\n            </button>\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">hour</span>\n          </div>\n\n          <!-- Colon -->\n          <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\n\n          <!-- Minutes -->\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('minutes', 'up')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\n            </button>\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\n              {{ timeMinutes.toString().padStart(2, '0') }}\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('minutes', 'down')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\n            </button>\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">min</span>\n          </div>\n\n          <!-- Colon -->\n          <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\n\n          <!-- Seconds -->\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('seconds', 'up')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\n            </button>\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\n              {{ timeSeconds.toString().padStart(2, '0') }}\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('seconds', 'down')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\n            </button>\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">sec</span>\n          </div>\n        </div>\n\n        <!-- AM/PM Toggle -->\n        <div class=\"tw-flex tw-justify-center tw-mb-2\">\n          <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n              [class.tw-bg-white]=\"timeFormat === 'AM'\" [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\n              [class.tw-shadow-sm]=\"timeFormat === 'AM'\" [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\n              (click)=\"timeFormat = 'AM'\">\n              AM\n            </button>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n              [class.tw-bg-white]=\"timeFormat === 'PM'\" [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\n              [class.tw-shadow-sm]=\"timeFormat === 'PM'\" [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\n              (click)=\"timeFormat = 'PM'\">\n              PM\n            </button>\n          </div>\n        </div>\n\n        <!-- Current Time Display -->\n        <div class=\"tw-text-center tw-text-xs tw-text-gray-600\">\n          {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{\n          timeFormat }}\n        </div>\n      </div>\n    </div>\n\n    <!-- DateTime Picker Footer -->\n    <div class=\"tw-flex tw-gap-2 tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\n      <button type=\"button\"\n        class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-blue-600 tw-bg-white tw-border tw-border-blue-300 hover:tw-bg-blue-50 tw-rounded tw-transition-colors\"\n        (click)=\"setCurrentDateTime()\">\n        Now\n      </button>\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\n        (click)=\"closeDateTimePicker()\">\n        Cancel\n      </button>\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\n        (click)=\"applyDateTime()\">\n        OK\n      </button>\n    </div>\n  </div>\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:var(--tw-gray-500)}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:var(--tw-gray-200);transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid var(--tw-gray-200);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:var(--cide-ele-bg-primary, #ffffff);border:1px solid var(--cide-ele-border-primary, #e5e7eb);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--cide-ele-text-primary, #1f2937)}.cide-date-picker-portal{animation:portalFadeIn .2s ease-out}@keyframes portalFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.cide-date-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=time]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=time]{-moz-appearance:textfield}input[type=time]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=time]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=time]{background:transparent!important;border:none!important;outline:none!important}.cide-time-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-time-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=datetime-local]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=datetime-local]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=datetime-local]{-moz-appearance:textfield}input[type=datetime-local]::-webkit-datetime-edit,input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=datetime-local]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=datetime-local]{background:transparent!important;border:none!important;outline:none!important}.cide-datetime-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-datetime-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"] }]
+                    ], template: "<div class=\"cide-input\">\n  <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\n  @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type ===\n  'date' || type === 'datetime-local' || type === 'url') {\n  <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [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-leading-icon': leadingIcon,\n                'cide-element-trailing-icon': trailingIconInternal,\n                'cide-element-clear-input': clearInput,\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                'cide-element-input-number': (type === 'number')\n            }\">\n    <!-- label -->\n    @if (label && !labelHide) {\n    <label [for]=\"id\" class=\"cide-input-label\">\n      {{label}}\n      @if (required) {\n      <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n      }\n    </label>\n    }\n\n    <!-- all one line elemets which dose not affect with label and error text -->\n    <div class=\"cide-element-input-wrapper\">\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      <!-- Trailing icon -->\n      @if (trailingIconInternal) {\n      <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0 tw-z-10\">\n        <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\n          [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\n          (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\n      </span>\n      }\n\n      <!-- Clear -->\n      @if (clearInput && ngModel) {\n      <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\n        <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n      </button>\n      }\n\n      <!-- Date Input Wrapper -->\n      @if (type === 'date') {\n      <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n        <!-- Date Input (read-only to prevent manual input) -->\n        <input [placeholder]=\"placeholder || 'DD/MM/YYYY'\" [id]=\"id || idRandom\" [disabled]=\"disabled\" [ngClass]=\"{\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                            'tw-pl-1': !leadingIcon,\n                            'tw-pr-8': trailingIconInternal,\n                            'tw-pr-1': !trailingIconInternal,\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                            'tw-h-7': size === 'sm',\n                            '!tw-mt-0': labelHide,\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\n                        }\" [value]=\"getDateDisplayValue()\" type=\"text\" (focus)=\"focusControl()\"\n          (input)=\"onDateInput($event)\" [autocomplete]=\"autocomplete\"\n          class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n\n        <!-- Placeholder overlay for empty date -->\n        @if (!ngModel && placeholder) {\n        <div class=\"cide-input-date-overlay\">\n          {{placeholder}}\n        </div>\n        }\n\n        <!-- Date picker is now rendered as a portal appended to body -->\n      </div>\n      }\n\n      <!-- Time Input Wrapper -->\n      @if (isTimeType()) {\n      <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n        <!-- Time Input (read-only to prevent manual input) -->\n        <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\" [ngClass]=\"{\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                            'tw-pl-1': !leadingIcon,\n                            'tw-pr-8': trailingIconInternal,\n                            'tw-pr-1': !trailingIconInternal,\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                            'tw-h-7': size === 'sm',\n                            '!tw-mt-0': labelHide,\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\n                        }\" [value]=\"getTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\"\n          (click)=\"trailingIconClick()\" [autocomplete]=\"autocomplete\"\n          class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\n\n        <!-- Placeholder overlay for empty time -->\n        @if (!ngModel && placeholder) {\n        <div class=\"cide-input-date-overlay\">\n          {{placeholder}}\n        </div>\n        }\n\n        <!-- Time picker is now rendered as a portal appended to body -->\n      </div>\n      }\n\n      <!-- DateTime Local Input -->\n      @if (type === 'datetime-local') {\n      <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n        <!-- DateTime Input (read-only to prevent manual input) -->\n        <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\" [ngClass]=\"{\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                            'tw-pl-1': !leadingIcon,\n                            'tw-pr-8': trailingIconInternal,\n                            'tw-pr-1': !trailingIconInternal,\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                            'tw-h-7': size === 'sm',\n                            '!tw-mt-0': labelHide,\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\n                        }\" [value]=\"getDateTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\"\n          (click)=\"trailingIconClick()\" [autocomplete]=\"autocomplete\"\n          class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\n\n        <!-- Placeholder overlay for empty datetime -->\n        @if (!ngModel && placeholder) {\n        <div class=\"cide-input-date-overlay\">\n          {{placeholder}}\n        </div>\n        }\n\n        <!-- DateTime picker is now rendered as a portal appended to body -->\n      </div>\n      }\n\n      <!-- Regular Input (non-date, non-time, non-datetime-local, non-url) -->\n      @if (type !== 'date' && !isTimeType() && type !== 'datetime-local' && type !== 'url') {\n      <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\" [ngClass]=\"{\n                        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                        'tw-pl-1': !leadingIcon,\n                        'tw-pr-8': trailingIconInternal,\n                        'tw-pr-1': !trailingIconInternal,\n                        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                        'tw-h-7': size === 'sm',\n                        '!tw-mt-0': labelHide,\n                        'tw-opacity-50 tw-cursor-not-allowed': disabled\n                    }\" [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\"\n        (focus)=\"focusControl()\" [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\" [step]=\"step\"\n        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n      }\n\n      <!-- URL Input -->\n      @if (type === 'url') {\n      <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\" [ngClass]=\"{\n                        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n                        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n                        'tw-pl-1': !leadingIcon,\n                        'tw-pr-8': trailingIconInternal,\n                        'tw-pr-1': !trailingIconInternal,\n                        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n                        'tw-h-7': size === 'sm',\n                        '!tw-mt-0': labelHide,\n                        'tw-opacity-50 tw-cursor-not-allowed': disabled\n                    }\" [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\"\n        (focus)=\"focusControl()\" [autocomplete]=\"autocomplete\"\n        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\n      }\n    </div>\n    <!-- error text / helper text -->\n    @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\n    <span class=\"cide-input-help-error-text\">{{\n      isValid\n      ? helperText : (errorText ?\n      (isTouched ? errorText : helperText)\n      : helperText)}}\n    </span>\n    }\n  </div>\n  }\n\n  <!-- Input with tralling icon -->\n  <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\n        <div class=\"tw-w-fullh-full tw-relative\">\n            <label\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\n            <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\n            </span>\n            <input\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\n                value=\"Ankush Bhure\" />\n        </div>\n    </div> -->\n\n  <!-- Input with leading icon -->\n  <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\n        <div class=\"tw-w-fullh-full tw-relative\">\n            <label\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\n            <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\n            </span>\n            <input\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\n                value=\"Ankush Bhure\" />\n        </div>\n    </div> -->\n\n  <!------------------------------------------CHECKBOX------------------------------------------>\n  @if (type === 'checkbox') {\n  <div class=\"tw-flex\">\n    <div class=\"cide-checkbox tw-relative\">\n      <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\" [disabled]=\"disabled\"\n        class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\n        [autocomplete]=\"autocomplete\" />\n      <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\n        <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\n          <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\n            <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\n          </svg>\n        </span>\n        @if (!labelHide) {\n        <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\n        }\n      </label>\n      <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\n        <!-- Element hidden and its xpath is used to display inside SVG -->\n        <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\n          <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n        </symbol>\n      </svg>\n    </div>\n  </div>\n  }\n\n  <!-------------------------------------------SELECT------------------------------------------->\n  @if (type === 'select') {\n  <div>sas\n    <div class=\"tw-relative\">\n      <div class=\"tw-absolute\">\n        @for (item of option; track $index) {\n        <div class=\"tw-w-full\">\n          {{item}}\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n\n<!-- Date Picker Template -->\n<ng-template #datePickerTemplate>\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\n    <!-- Date Picker Header -->\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"previousMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\n      </button>\n\n      <button type=\"button\"\n        class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\n        (click)=\"toggleMonthYearSelector()\">\n        {{ monthNames[currentMonth] }} {{ currentYear }}\n      </button>\n\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"nextMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\n      </button>\n    </div>\n\n    <!-- Month/Year Selector -->\n    @if (showMonthYearSelector) {\n    <div class=\"tw-mb-4\">\n      <!-- Year Navigation -->\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n        <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n          (click)=\"previousYear()\">\n          <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\n        </button>\n        <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\n        <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n          (click)=\"nextYear()\">\n          <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\n        </button>\n      </div>\n\n      <!-- Month Grid -->\n      <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\n        @for (monthName of shortMonthNames; track $index) {\n        <button type=\"button\" class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\n          [class.tw-bg-blue-500]=\"$index === currentMonth\" [class.tw-text-white]=\"$index === currentMonth\"\n          [class.tw-text-gray-700]=\"$index !== currentMonth\" [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\n          (click)=\"selectMonth($index)\">\n          {{ monthName }}\n        </button>\n        }\n      </div>\n\n      <!-- Back to Calendar Button -->\n      <div class=\"tw-text-center\">\n        <button type=\"button\"\n          class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\n          (click)=\"toggleMonthYearSelector()\">\n          Back to Calendar\n        </button>\n      </div>\n    </div>\n    } @else {\n    <!-- Calendar View -->\n    <div>\n      <!-- Days of Week Header -->\n      <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\n        @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\n        <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\n          {{ dayName }}\n        </div>\n        }\n      </div>\n\n      <!-- Calendar Days -->\n      <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\n        @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\n          [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\" [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n          [class.tw-bg-blue-500]=\"dayInfo.isSelected\" [class.tw-text-white]=\"dayInfo.isSelected\"\n          [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\n          [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\n          [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\n          (click)=\"showDateTimePicker ? selectDateTimeDate(dayInfo) : selectDate(dayInfo)\">\n          {{ dayInfo.day }}\n        </button>\n        }\n      </div>\n    </div>\n    }\n\n    <!-- Date Picker Footer -->\n    <div class=\"tw-flex tw-justify-between tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\n      <button type=\"button\"\n        class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded tw-transition-colors\"\n        (click)=\"closeDatePicker()\">\n        Cancel\n      </button>\n      <button type=\"button\"\n        class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700 tw-rounded tw-transition-colors\"\n        (click)=\"closeDatePicker()\">\n        Done\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Time Picker Template -->\n<ng-template #timePickerTemplate>\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4 tw-w-72\">\n    <!-- Time Picker Header -->\n    <div class=\"tw-text-center tw-mb-3\">\n      <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h3>\n    </div>\n\n    <!-- Time Spinners Container -->\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-3 tw-mb-4\">\n      <!-- Hours -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('hours', 'up')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\n        </button>\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\n          {{ timeHours }}\n        </div>\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('hours', 'down')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\n        </button>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">hour</span>\n      </div>\n\n      <!-- Colon Separator -->\n      <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\n\n      <!-- Minutes -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('minutes', 'up')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\n        </button>\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\n          {{ timeMinutes.toString().padStart(2, '0') }}\n        </div>\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('minutes', 'down')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\n        </button>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">min</span>\n      </div>\n\n      <!-- Colon Separator -->\n      <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\n\n      <!-- Seconds -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('seconds', 'up')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\n        </button>\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\n          {{ timeSeconds.toString().padStart(2, '0') }}\n        </div>\n        <button type=\"button\"\n          class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n          (click)=\"adjustTime('seconds', 'down')\">\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\n        </button>\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">sec</span>\n      </div>\n    </div>\n\n    <!-- AM/PM Toggle -->\n    <div class=\"tw-flex tw-justify-center tw-mb-3\">\n      <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\n        <button type=\"button\"\n          class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n          [class.tw-bg-white]=\"timeFormat === 'AM'\" [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\n          [class.tw-shadow]=\"timeFormat === 'AM'\" [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\n          (click)=\"timeFormat = 'AM'\">\n          AM\n        </button>\n        <button type=\"button\"\n          class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n          [class.tw-bg-white]=\"timeFormat === 'PM'\" [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\n          [class.tw-shadow]=\"timeFormat === 'PM'\" [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\n          (click)=\"timeFormat = 'PM'\">\n          PM\n        </button>\n      </div>\n    </div>\n\n    <!-- Current Time Display -->\n    <div class=\"tw-text-center tw-mb-3\">\n      <span class=\"tw-text-sm tw-text-gray-600\">\n        {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{\n        timeFormat }}\n      </span>\n    </div>\n\n    <!-- Time Picker Footer -->\n    <div class=\"tw-flex tw-gap-2\">\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\n        (click)=\"showDateTimePicker ? closeDateTimePicker() : closeTimePicker()\">\n        Cancel\n      </button>\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\n        (click)=\"showDateTimePicker ? applyDateTime() : applyTime()\">\n        OK\n      </button>\n    </div>\n\n  </div>\n</ng-template>\n\n<!-- DateTime Picker Template (Combined Date + Time) -->\n<ng-template #dateTimePickerTemplate>\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\n    <!-- DateTime Picker Header -->\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"previousMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\n      </button>\n\n      <button type=\"button\"\n        class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\n        (click)=\"toggleMonthYearSelector()\">\n        {{ monthNames[currentMonth] }} {{ currentYear }}\n      </button>\n\n      <button type=\"button\" class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n        (click)=\"nextMonth()\">\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\n      </button>\n    </div>\n\n    <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\n      <!-- Left Side: Calendar -->\n      <div>\n        <!-- Month/Year Selector -->\n        @if (showMonthYearSelector) {\n        <div class=\"tw-mb-4\">\n          <!-- Year Navigation -->\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <button type=\"button\"\n              class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n              (click)=\"previousYear()\">\n              <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\n            </button>\n            <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\n            <button type=\"button\"\n              class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\n              (click)=\"nextYear()\">\n              <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\n            </button>\n          </div>\n\n          <!-- Month Grid -->\n          <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\n            @for (monthName of shortMonthNames; track $index) {\n            <button type=\"button\" class=\"tw-px-2 tw-py-1.5 tw-text-xs tw-rounded-md tw-transition-colors tw-text-center\"\n              [class.tw-bg-blue-500]=\"$index === currentMonth\" [class.tw-text-white]=\"$index === currentMonth\"\n              [class.tw-text-gray-700]=\"$index !== currentMonth\" [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\n              (click)=\"selectMonth($index)\">\n              {{ monthName }}\n            </button>\n            }\n          </div>\n\n          <!-- Back to Calendar Button -->\n          <div class=\"tw-text-center\">\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\n              (click)=\"toggleMonthYearSelector()\">\n              Back to Calendar\n            </button>\n          </div>\n        </div>\n        } @else {\n        <!-- Calendar View -->\n        <div>\n          <!-- Days of Week Header -->\n          <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\n            @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\n            <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-1\">\n              {{ dayName }}\n            </div>\n            }\n          </div>\n\n          <!-- Calendar Days -->\n          <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\n            @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-text-xs tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\n              [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\" [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n              [class.tw-bg-blue-500]=\"dayInfo.isSelected\" [class.tw-text-white]=\"dayInfo.isSelected\"\n              [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\n              [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\n              [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\n              (click)=\"selectDateTimeDate(dayInfo)\">\n              {{ dayInfo.day }}\n            </button>\n            }\n          </div>\n        </div>\n        }\n      </div>\n\n      <!-- Right Side: Time Picker -->\n      <div class=\"tw-border-l tw-border-gray-200 tw-pl-4\">\n        <div class=\"tw-text-center tw-mb-2\">\n          <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h4>\n        </div>\n\n        <!-- Time Spinners -->\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-3\">\n          <!-- Hours -->\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('hours', 'up')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\n            </button>\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\n              {{ timeHours }}\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('hours', 'down')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\n            </button>\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">hour</span>\n          </div>\n\n          <!-- Colon -->\n          <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\n\n          <!-- Minutes -->\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('minutes', 'up')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\n            </button>\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\n              {{ timeMinutes.toString().padStart(2, '0') }}\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('minutes', 'down')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\n            </button>\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">min</span>\n          </div>\n\n          <!-- Colon -->\n          <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\n\n          <!-- Seconds -->\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('seconds', 'up')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\n            </button>\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\n              {{ timeSeconds.toString().padStart(2, '0') }}\n            </div>\n            <button type=\"button\"\n              class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\n              (click)=\"adjustTime('seconds', 'down')\">\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\n            </button>\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">sec</span>\n          </div>\n        </div>\n\n        <!-- AM/PM Toggle -->\n        <div class=\"tw-flex tw-justify-center tw-mb-2\">\n          <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n              [class.tw-bg-white]=\"timeFormat === 'AM'\" [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\n              [class.tw-shadow-sm]=\"timeFormat === 'AM'\" [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\n              (click)=\"timeFormat = 'AM'\">\n              AM\n            </button>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\n              [class.tw-bg-white]=\"timeFormat === 'PM'\" [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\n              [class.tw-shadow-sm]=\"timeFormat === 'PM'\" [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\n              (click)=\"timeFormat = 'PM'\">\n              PM\n            </button>\n          </div>\n        </div>\n\n        <!-- Current Time Display -->\n        <div class=\"tw-text-center tw-text-xs tw-text-gray-600\">\n          {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{\n          timeFormat }}\n        </div>\n      </div>\n    </div>\n\n    <!-- DateTime Picker Footer -->\n    <div class=\"tw-flex tw-gap-2 tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\n      <button type=\"button\"\n        class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-blue-600 tw-bg-white tw-border tw-border-blue-300 hover:tw-bg-blue-50 tw-rounded tw-transition-colors\"\n        (click)=\"setCurrentDateTime()\">\n        Now\n      </button>\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\n        (click)=\"closeDateTimePicker()\">\n        Cancel\n      </button>\n      <button type=\"button\"\n        class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\n        (click)=\"applyDateTime()\">\n        OK\n      </button>\n    </div>\n  </div>\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:var(--tw-gray-500)}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:var(--tw-gray-200);transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid var(--tw-gray-200);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:var(--cide-ele-bg-primary, #ffffff);border:1px solid var(--cide-ele-border-primary, #e5e7eb);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--cide-ele-text-primary, #1f2937)}.cide-date-picker-portal{animation:portalFadeIn .2s ease-out}@keyframes portalFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.cide-date-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=time]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=time]{-moz-appearance:textfield}input[type=time]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=time]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=time]{background:transparent!important;border:none!important;outline:none!important}.cide-time-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-time-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=datetime-local]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=datetime-local]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=datetime-local]{-moz-appearance:textfield}input[type=datetime-local]::-webkit-datetime-edit,input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=datetime-local]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=datetime-local]{background:transparent!important;border:none!important;outline:none!important}.cide-datetime-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-datetime-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fill: [{
                 type: Input
             }], label: [{
@@ -1971,33 +1971,34 @@ class CideSelectComponent {
     // Debug tracking properties
     debugId = Math.random().toString(36).substr(2, 9);
     timeoutIds = [];
-    // Dependencies
-    el = inject(ElementRef);
-    cdr = inject(ChangeDetectorRef);
-    ngControl = inject(NgControl, { optional: true, self: true });
     interactionCount = 0;
     maxInteractionCount = 10; // Prevent infinite loops
     constructor(elementRef) {
         this.elementRef = elementRef;
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
         // Watch for options changes (input signal) - effects must be in constructor
         effect(() => {
             const opts = this.options();
             if (opts && opts.length >= 0) {
                 this.filterOptions();
                 // Update portal context if dropdown is open
-                if (this.isOpen && this.portalContext) {
-                    this.portalContext.options = this.filteredOptions;
+                if (this.isOpen && this.dropdownPortalId) {
+                    setTimeout(() => {
+                        this.updatePortalContext();
+                    }, 0);
                 }
+                // // Update portal context if dropdown is open
+                // if (this.isOpen && this.portalContext) {
+                //   this.portalContext.options = this.filteredOptions;
+                // }
             }
         });
         // Watch for loading changes
         effect(() => {
             const loading = this.loading();
-            if (this.isOpen && this.portalContext) {
-                this.portalContext.loading = loading;
+            if (this.isOpen && this.dropdownPortalId) {
+                setTimeout(() => {
+                    this.updatePortalContext();
+                }, 0);
             }
         });
     }
@@ -2158,8 +2159,6 @@ class CideSelectComponent {
         window.removeEventListener('resize', this.onWindowResize.bind(this));
         this.logDebug('Component destroyed, timeouts cleared');
     }
-    // Portal context property
-    portalContext = {};
     createDropdownPortal() {
         try {
             const triggerElement = this.elementRef?.nativeElement;
@@ -2174,27 +2173,25 @@ class CideSelectComponent {
             // Generate unique portal ID
             this.dropdownPortalId = `select-dropdown-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
             console.log('🔍 Creating new portal with ID:', this.dropdownPortalId);
-            // Initialize shared context object
-            this.portalContext = {
-                options: this.filteredOptions,
-                isOpen: this.isOpen,
-                searchTerm: this.searchTerm,
-                searchable: this.searchable(),
-                multiple: this.multiple(),
-                loading: this.loading(),
-                dropdownPosition: this.dropdownPosition,
-                treeView: this.treeView(),
-                onSearchInput: this.onSearchInput.bind(this),
-                selectOption: this.selectOption.bind(this),
-                isOptionSelected: this.isOptionSelected.bind(this),
-                trackByValue: this.trackByValue.bind(this),
-                getOptionLabel: this.getOptionLabel.bind(this)
-            };
             const portalConfig = {
                 triggerElement,
                 template: this.dropdownTemplate,
                 viewContainerRef: this.dropdownContainer,
-                context: this.portalContext, // Pass the reference
+                context: {
+                    options: this.filteredOptions,
+                    isOpen: this.isOpen,
+                    searchTerm: this.searchTerm,
+                    searchable: this.searchable(),
+                    multiple: this.multiple(),
+                    loading: this.loading(),
+                    dropdownPosition: this.dropdownPosition,
+                    treeView: this.treeView(),
+                    onSearchInput: this.onSearchInput.bind(this),
+                    selectOption: this.selectOption.bind(this),
+                    isOptionSelected: this.isOptionSelected.bind(this),
+                    trackByValue: this.trackByValue.bind(this),
+                    getOptionLabel: this.getOptionLabel.bind(this)
+                },
                 className: 'cide-select-dropdown-portal',
                 position: this.dropdownPosition,
                 align: 'left',
@@ -2238,6 +2235,165 @@ class CideSelectComponent {
             console.error(`💥 SELECT [${this.debugId}] destroyDropdownPortal error:`, error);
         }
     }
+    updatePortalContext() {
+        try {
+            if (!this.dropdownPortalId) {
+                return; // Portal not created yet
+            }
+            // Set flag to prevent blur during update
+            this.isUpdatingOptions = true;
+            // Store reference to search input before destroying portal
+            console.log('🔍 Looking for search input with portal ID:', this.dropdownPortalId);
+            const searchInput = document.querySelector(`#${this.dropdownPortalId} input[type="text"]`);
+            console.log('🔍 searchInput found:', searchInput);
+            // Try alternative selectors if the first one fails
+            let searchInputAlt = null;
+            if (!searchInput) {
+                searchInputAlt = document.querySelector(`[id*="${this.dropdownPortalId}"] input[type="text"]`);
+                console.log('🔍 searchInputAlt found:', searchInputAlt);
+            }
+            const finalSearchInput = searchInput || searchInputAlt;
+            const wasSearchInputFocused = finalSearchInput && document.activeElement === finalSearchInput;
+            const searchInputValue = finalSearchInput ? finalSearchInput.value : '';
+            const cursorPosition = finalSearchInput ? finalSearchInput.selectionStart || 0 : 0;
+            // Since the portal service doesn't have an update context method,
+            // we need to recreate the portal with updated context
+            this.destroyDropdownPortal();
+            this.createDropdownPortal();
+            // Restore focus and value to search input after recreation
+            if (wasSearchInputFocused && searchInputValue) {
+                // Use multiple timing strategies to ensure focus restoration works
+                const restoreFocus = () => {
+                    let newSearchInput = document.querySelector(`#${this.dropdownPortalId} input[type="text"]`);
+                    console.log('🔍 newSearchInput', newSearchInput);
+                    // Try alternative selectors if the first one fails
+                    if (!newSearchInput) {
+                        newSearchInput = document.querySelector(`[id*="${this.dropdownPortalId}"] input[type="text"]`);
+                        console.log('🔍 newSearchInputAlt', newSearchInput);
+                    }
+                    if (newSearchInput) {
+                        newSearchInput.value = searchInputValue;
+                        newSearchInput.focus();
+                        // Set cursor position to the original position
+                        newSearchInput.setSelectionRange(cursorPosition, cursorPosition);
+                        return true;
+                    }
+                    return false;
+                };
+                // Try immediate restoration
+                if (!restoreFocus()) {
+                    // Try with requestAnimationFrame
+                    requestAnimationFrame(() => {
+                        if (!restoreFocus()) {
+                            // Try with setTimeout as fallback
+                            setTimeout(() => {
+                                restoreFocus();
+                                // Clear the flag after restoration
+                                this.isUpdatingOptions = false;
+                            }, 10);
+                        }
+                        else {
+                            // Clear the flag after successful restoration
+                            this.isUpdatingOptions = false;
+                        }
+                    });
+                }
+                else {
+                    // Clear the flag after successful restoration
+                    this.isUpdatingOptions = false;
+                }
+            }
+            else {
+                // Clear the flag if no focus restoration needed
+                this.isUpdatingOptions = false;
+            }
+            this.logDebug('Portal context updated', {
+                filteredOptionsCount: this.filteredOptions.length,
+                searchTerm: this.searchTerm
+            });
+        }
+        catch (error) {
+            console.error(`💥 SELECT [${this.debugId}] updatePortalContext error:`, error);
+            this.isUpdatingOptions = false;
+        }
+    }
+    updateOptionsInDOM() {
+        try {
+            if (!this.dropdownPortalId) {
+                return false; // Portal not created yet
+            }
+            // Find the options container in the DOM
+            console.log('🔍 Looking for options container with portal ID:', this.dropdownPortalId);
+            let optionsContainer = document.querySelector(`#${this.dropdownPortalId} .tw-py-1`);
+            console.log('🔍 optionsContainer (.tw-py-1):', optionsContainer);
+            // Try alternative selectors if the first one fails
+            if (!optionsContainer) {
+                optionsContainer = document.querySelector(`#${this.dropdownPortalId}`);
+                console.log('🔍 optionsContainer (main):', optionsContainer);
+            }
+            if (!optionsContainer) {
+                optionsContainer = document.querySelector(`[id*="${this.dropdownPortalId}"] .tw-py-1`);
+                console.log('🔍 optionsContainer (alt .tw-py-1):', optionsContainer);
+            }
+            if (!optionsContainer) {
+                optionsContainer = document.querySelector(`[id*="${this.dropdownPortalId}"]`);
+                console.log('🔍 optionsContainer (alt main):', optionsContainer);
+            }
+            if (!optionsContainer) {
+                console.log('🔍 No options container found, returning false');
+                return false;
+            }
+            console.log('🔍 optionsContainer found, clearing and updating with', this.filteredOptions.length, 'options');
+            console.log('🔍 Current optionsContainer HTML before clear:', optionsContainer.innerHTML);
+            // Find and clear only the option buttons and loading states, not the entire container
+            const existingOptions = optionsContainer.querySelectorAll('.cide-select-option, .tw-px-3.tw-py-2, .tw-px-3.tw-py-4');
+            console.log('🔍 Found existing options to remove:', existingOptions.length);
+            existingOptions.forEach(option => option.remove());
+            // Add filtered options directly to DOM
+            this.filteredOptions.forEach((option) => {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = `cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none ${this.isOptionSelected(option) ? 'tw-bg-blue-50 tw-text-blue-700' : ''} ${option.disabled ? 'tw-text-gray-400 tw-cursor-not-allowed' : ''}`;
+                button.textContent = this.getOptionLabel(option);
+                button.disabled = option.disabled || false;
+                // Add event listeners
+                button.addEventListener('mousedown', (e) => {
+                    e.preventDefault(); // Prevent blur from closing dropdown before click
+                    this.onDropdownMouseDown();
+                });
+                button.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.selectOption(option);
+                });
+                button.addEventListener('keyup', (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.selectOption(option);
+                    }
+                });
+                optionsContainer.appendChild(button);
+            });
+            // Add "No options" message if no options
+            if (this.filteredOptions.length === 0) {
+                const noOptionsDiv = document.createElement('div');
+                noOptionsDiv.className = 'tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic';
+                noOptionsDiv.textContent = this.searchable() && this.searchTerm ? 'No options found' : 'No options available';
+                optionsContainer.appendChild(noOptionsDiv);
+            }
+            console.log('🔍 Options added, final optionsContainer HTML:', optionsContainer.innerHTML);
+            console.log('🔍 Number of child elements in optionsContainer:', optionsContainer.children.length);
+            this.logDebug('Options updated directly in DOM', {
+                filteredOptionsCount: this.filteredOptions.length,
+                searchTerm: this.searchTerm
+            });
+            return true; // Success
+        }
+        catch (error) {
+            console.error(`💥 SELECT [${this.debugId}] updateOptionsInDOM error:`, error);
+            return false; // Failed
+        }
+    }
     setupDebouncedSearch() {
         this.searchSubject
             .pipe(debounceTime(300), // 300ms debounce
@@ -2679,26 +2835,17 @@ class CideSelectComponent {
             this.searchTerm = event.target.value;
             console.log(`🔍 SELECT [${this.debugId}] Search input changed:`, `"${this.searchTerm}"`);
             // If search term is empty, emit immediately without debounce
-            // If search term is empty, emit immediately without debounce
             if (this.searchTerm === '' || this.searchTerm === null || this.searchTerm === undefined) {
                 console.log(`🔍 SELECT [${this.debugId}] Empty search - emitting immediately`);
                 // Update local filtering immediately
                 this.filterOptions();
-                // Update context properties directly
-                if (this.portalContext) {
-                    this.portalContext.searchTerm = this.searchTerm;
-                    this.portalContext.options = this.filteredOptions;
-                }
+                this.updateOptionsInDOM();
                 this.performSearch('');
             }
             else {
                 // Update local filtering immediately for better UX
                 this.filterOptions();
-                // Update context properties directly
-                if (this.portalContext) {
-                    this.portalContext.searchTerm = this.searchTerm;
-                    this.portalContext.options = this.filteredOptions;
-                }
+                this.updateOptionsInDOM();
                 // For non-empty values, use debounced search for API calls
                 this.searchSubject.next(this.searchTerm);
             }
@@ -2788,11 +2935,33 @@ class CideSelectComponent {
         return timeoutId;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideSelectComponent, isStandalone: true, selector: "cide-ele-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelHide: { classPropertyName: "labelHide", publicName: "labelHide", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ngModel: { classPropertyName: "ngModel", publicName: "ngModel", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null }, labelDir: { classPropertyName: "labelDir", publicName: "labelDir", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, clearInput: { classPropertyName: "clearInput", publicName: "clearInput", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showSearchInput: { classPropertyName: "showSearchInput", publicName: "showSearchInput", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, treeView: { classPropertyName: "treeView", publicName: "treeView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ngModelChange: "ngModelChange", selectionChange: "change", searchChange: "searchChange" }, 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-leading-icon': leadingIcon(),\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\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n    }\n  </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]=\"isDisabled()\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"{\n        'tw-rounded-e-md tw-rounded-es-md': label() && labelPlacement() === 'fixed',\n        'tw-rounded-md': !(label() && labelPlacement() === 'fixed'),\n        'tw-pl-1': !leadingIcon(),\n        'tw-pr-8': trailingIcon() || clearInput() || loading(),\n        'tw-pr-1': !trailingIcon() && !clearInput() && !loading(),\n        'tw-h-8 tw-pt-0.5 tw-pb-0': size() === 'md',\n        'tw-h-7': size() === 'sm',\n        '!tw-mt-0': labelHide(),\n        'tw-opacity-50 tw-cursor-not-allowed': isDisabled(),\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': true\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 tw-sticky tw-top-0 tw-z-20 tw-bg-white\">\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              'cide-select-tree-option': context?.treeView?.enabled\n            }\" class=\"cide-select-option\" [style.white-space]=\"context?.treeView?.enabled ? 'pre' : 'normal'\"\n        [style.font-family]=\"context?.treeView?.enabled ? 'monospace' : 'inherit'\">\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}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideSelectComponent, isStandalone: true, selector: "cide-ele-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelHide: { classPropertyName: "labelHide", publicName: "labelHide", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ngModel: { classPropertyName: "ngModel", publicName: "ngModel", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelPlacement: { classPropertyName: "labelPlacement", publicName: "labelPlacement", isSignal: true, isRequired: false, transformFunction: null }, labelDir: { classPropertyName: "labelDir", publicName: "labelDir", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, clearInput: { classPropertyName: "clearInput", publicName: "clearInput", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showSearchInput: { classPropertyName: "showSearchInput", publicName: "showSearchInput", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, treeView: { classPropertyName: "treeView", publicName: "treeView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ngModelChange: "ngModelChange", selectionChange: "change", searchChange: "searchChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CideSelectComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                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-leading-icon': leadingIcon(),\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\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n    }\n  </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]=\"isDisabled()\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"{\n        'tw-rounded-e-md tw-rounded-es-md': label() && labelPlacement() === 'fixed',\n        'tw-rounded-md': !(label() && labelPlacement() === 'fixed'),\n        'tw-pl-1': !leadingIcon(),\n        'tw-pr-8': trailingIcon() || clearInput() || loading(),\n        'tw-pr-1': !trailingIcon() && !clearInput() && !loading(),\n        'tw-h-8 tw-pt-0.5 tw-pb-0': size() === 'md',\n        'tw-h-7': size() === 'sm',\n        '!tw-mt-0': labelHide(),\n        'tw-opacity-50 tw-cursor-not-allowed': isDisabled(),\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': true\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 tw-sticky tw-top-0 tw-z-20 tw-bg-white\">\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              'cide-select-tree-option': context?.treeView?.enabled\n            }\" class=\"cide-select-option\" [style.white-space]=\"context?.treeView?.enabled ? 'pre' : 'normal'\"\n        [style.font-family]=\"context?.treeView?.enabled ? 'monospace' : 'inherit'\">\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}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\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.3.15", ngImport: i0, type: CideSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-ele-select', standalone: true, imports: [CommonModule, FormsModule], 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-leading-icon': leadingIcon(),\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\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n    }\n  </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]=\"isDisabled()\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"{\n        'tw-rounded-e-md tw-rounded-es-md': label() && labelPlacement() === 'fixed',\n        'tw-rounded-md': !(label() && labelPlacement() === 'fixed'),\n        'tw-pl-1': !leadingIcon(),\n        'tw-pr-8': trailingIcon() || clearInput() || loading(),\n        'tw-pr-1': !trailingIcon() && !clearInput() && !loading(),\n        'tw-h-8 tw-pt-0.5 tw-pb-0': size() === 'md',\n        'tw-h-7': size() === 'sm',\n        '!tw-mt-0': labelHide(),\n        'tw-opacity-50 tw-cursor-not-allowed': isDisabled(),\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': true\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 tw-sticky tw-top-0 tw-z-20 tw-bg-white\">\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              'cide-select-tree-option': context?.treeView?.enabled\n            }\" class=\"cide-select-option\" [style.white-space]=\"context?.treeView?.enabled ? 'pre' : 'normal'\"\n        [style.font-family]=\"context?.treeView?.enabled ? 'monospace' : 'inherit'\">\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}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
+            args: [{ selector: 'cide-ele-select', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CideSelectComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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-leading-icon': leadingIcon(),\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\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n    }\n  </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]=\"isDisabled()\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"{\n        'tw-rounded-e-md tw-rounded-es-md': label() && labelPlacement() === 'fixed',\n        'tw-rounded-md': !(label() && labelPlacement() === 'fixed'),\n        'tw-pl-1': !leadingIcon(),\n        'tw-pr-8': trailingIcon() || clearInput() || loading(),\n        'tw-pr-1': !trailingIcon() && !clearInput() && !loading(),\n        'tw-h-8 tw-pt-0.5 tw-pb-0': size() === 'md',\n        'tw-h-7': size() === 'sm',\n        '!tw-mt-0': labelHide(),\n        'tw-opacity-50 tw-cursor-not-allowed': isDisabled(),\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': true\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 tw-sticky tw-top-0 tw-z-20 tw-bg-white\">\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              'cide-select-tree-option': context?.treeView?.enabled\n            }\" class=\"cide-select-option\" [style.white-space]=\"context?.treeView?.enabled ? 'pre' : 'normal'\"\n        [style.font-family]=\"context?.treeView?.enabled ? 'monospace' : 'inherit'\">\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}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { optionComponents: [{
                 type: ContentChildren,
                 args: [CideSelectOptionComponent]