cloud-ide-element 1.1.102 → 1.1.103

package/fesm2022/cloud-ide-element.mjs

@@ -1651,7 +1651,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\">\r\n    <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\r\n    @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === 'datetime-local' || type === 'url') {\r\n        <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n                'cide-element-size-xxs': (size === '2xs'),\r\n                'cide-element-size-xs': (size === 'xs'),\r\n                'cide-element-size-sm': (size === 'sm'),\r\n                'cide-element-size-md': (size === 'md'),\r\n                'cide-element-size-lg': (size === 'lg'),\r\n                'cide-element-leading-icon': leadingIcon,\r\n                'cide-element-trailing-icon': trailingIconInternal,\r\n                'cide-element-clear-input': clearInput,\r\n                'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n                'cide-element-input-label-start': (labelDir === 'start'),\r\n                'cide-element-input-label-end': (labelDir === 'end'),\r\n                'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n                'cide-element-input-label-less': (!label || labelHide),\r\n                'cide-element-style-outline': (fill === 'outline'),\r\n                'cide-element-style-solid': (fill === 'solid'),\r\n                'cide-element-style-standard': (fill === 'standard'),\r\n                'cide-element-input-number': (type === 'number')\r\n            }\">\r\n            <!-- label -->\r\n            @if (label && !labelHide) {\r\n            <label [for]=\"id\" class=\"cide-input-label\">\r\n              {{label}}\r\n              @if (required) {\r\n                <span class=\"tw-text-red-500 tw-ml-1\">*</span>\r\n              }\r\n            </label>\r\n            }\r\n\r\n            <!-- all one line elemets which dose not affect with label and error text -->\r\n            <div class=\"cide-element-input-wrapper\">\r\n                <!-- Leading Icon -->\r\n                @if (leadingIcon) {\r\n                <span class=\"cide-input-leading-icon-wrapper\">\r\n                    <span\r\n                        class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n                </span>\r\n                }\r\n\r\n                <!-- Trailing icon -->\r\n                @if (trailingIconInternal) {\r\n                <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\r\n                    <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n                        [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n                        (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n                </span>\r\n                }\r\n\r\n                <!-- Clear -->\r\n                @if (clearInput && ngModel) {\r\n                <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\r\n                    <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n                </button>\r\n                }\r\n\r\n                <!-- Date Input Wrapper -->\r\n                @if (type === 'date') {\r\n                <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n                    <!-- Date Input (read-only to prevent manual input) -->\r\n                    <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n                        [ngClass]=\"{\r\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n                            'tw-pl-1': !leadingIcon,\r\n                            'tw-pr-8': trailingIconInternal,\r\n                            'tw-pr-1': !trailingIconInternal,\r\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n                            'tw-h-7': size === 'sm',\r\n                            '!tw-mt-0': labelHide,\r\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n                        }\"\r\n                        [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n                        [autocomplete]=\"autocomplete\"\r\n                        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n                    \r\n                    <!-- Placeholder overlay for empty date -->\r\n                    @if (!ngModel && placeholder) {\r\n                    <div class=\"cide-input-date-overlay\">\r\n                        {{placeholder}}\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- Date picker is now rendered as a portal appended to body -->\r\n                </div>\r\n                }\r\n\r\n                <!-- Time Input Wrapper -->\r\n                @if (isTimeType()) {\r\n                <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n                    <!-- Time Input (read-only to prevent manual input) -->\r\n                    <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n                        [ngClass]=\"{\r\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n                            'tw-pl-1': !leadingIcon,\r\n                            'tw-pr-8': trailingIconInternal,\r\n                            'tw-pr-1': !trailingIconInternal,\r\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n                            'tw-h-7': size === 'sm',\r\n                            '!tw-mt-0': labelHide,\r\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n                        }\"\r\n                        [value]=\"getTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n                        [autocomplete]=\"autocomplete\"\r\n                        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n                    \r\n                    <!-- Placeholder overlay for empty time -->\r\n                    @if (!ngModel && placeholder) {\r\n                    <div class=\"cide-input-date-overlay\">\r\n                        {{placeholder}}\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- Time picker is now rendered as a portal appended to body -->\r\n                </div>\r\n                }\r\n\r\n                <!-- DateTime Local Input -->\r\n                @if (type === 'datetime-local') {\r\n                <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n                    <!-- DateTime Input (read-only to prevent manual input) -->\r\n                    <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n                        [ngClass]=\"{\r\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n                            'tw-pl-1': !leadingIcon,\r\n                            'tw-pr-8': trailingIconInternal,\r\n                            'tw-pr-1': !trailingIconInternal,\r\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n                            'tw-h-7': size === 'sm',\r\n                            '!tw-mt-0': labelHide,\r\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n                        }\"\r\n                        [value]=\"getDateTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n                        [autocomplete]=\"autocomplete\"\r\n                        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n                    \r\n                    <!-- Placeholder overlay for empty datetime -->\r\n                    @if (!ngModel && placeholder) {\r\n                    <div class=\"cide-input-date-overlay\">\r\n                        {{placeholder}}\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- DateTime picker is now rendered as a portal appended to body -->\r\n                </div>\r\n                }\r\n\r\n                <!-- Regular Input (non-date, non-time, non-datetime-local, non-url) -->\r\n                @if (type !== 'date' && !isTimeType() && type !== 'datetime-local' && type !== 'url') {\r\n                <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\r\n                    [ngClass]=\"{\r\n                        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n                        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n                        'tw-pl-1': !leadingIcon,\r\n                        'tw-pr-8': trailingIconInternal,\r\n                        'tw-pr-1': !trailingIconInternal,\r\n                        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n                        'tw-h-7': size === 'sm',\r\n                        '!tw-mt-0': labelHide,\r\n                        'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n                    }\"\r\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n                    [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\" [step]=\"step\"\r\n                    class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n                }\r\n\r\n                <!-- URL Input -->\r\n                @if (type === 'url') {\r\n                <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\r\n                    [ngClass]=\"{\r\n                        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n                        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n                        'tw-pl-1': !leadingIcon,\r\n                        'tw-pr-8': trailingIconInternal,\r\n                        'tw-pr-1': !trailingIconInternal,\r\n                        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n                        'tw-h-7': size === 'sm',\r\n                        '!tw-mt-0': labelHide,\r\n                        'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n                    }\"\r\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n                    [autocomplete]=\"autocomplete\"\r\n                    class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n                }\r\n            </div>\r\n            <!-- error text / helper text -->\r\n            @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\r\n            <span class=\"cide-input-help-error-text\">{{\r\n                isValid\r\n                ? helperText : (errorText ?\r\n                (isTouched ? errorText : helperText)\r\n                : helperText)}}\r\n            </span>\r\n            }\r\n        </div>\r\n    }\r\n\r\n    <!-- Input with tralling icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!-- Input with leading icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!------------------------------------------CHECKBOX------------------------------------------>\r\n    @if (type === 'checkbox') {\r\n    <div class=\"tw-flex\">\r\n        <div class=\"cide-checkbox tw-relative\">\r\n            <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\" [disabled]=\"disabled\"\r\n                class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n                [autocomplete]=\"autocomplete\" />\r\n            <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n                <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n                    <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n                        <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n                    </svg>\r\n                </span>\r\n                @if (!labelHide) {\r\n                <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\r\n                }\r\n            </label>\r\n            <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n                <!-- Element hidden and its xpath is used to display inside SVG -->\r\n                <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n                    <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n                </symbol>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <!-------------------------------------------SELECT------------------------------------------->\r\n    @if (type === 'select') {\r\n    <div>sas\r\n        <div class=\"tw-relative\">\r\n            <div class=\"tw-absolute\">\r\n                @for (item of option; track $index) {\r\n                <div class=\"tw-w-full\">\r\n                    {{item}}\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n    }\r\n</div>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTemplate>\r\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n    <!-- Date Picker Header -->\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"previousMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"toggleMonthYearSelector()\">\r\n        {{ monthNames[currentMonth] }} {{ currentYear }}\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"nextMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Month/Year Selector -->\r\n    @if (showMonthYearSelector) {\r\n      <div class=\"tw-mb-4\">\r\n        <!-- Year Navigation -->\r\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n            (click)=\"previousYear()\">\r\n            <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n          </button>\r\n          <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n            (click)=\"nextYear()\">\r\n            <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n          </button>\r\n        </div>\r\n        \r\n        <!-- Month Grid -->\r\n        <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n          @for (monthName of shortMonthNames; track $index) {\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\r\n              [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n              [class.tw-text-white]=\"$index === currentMonth\"\r\n              [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n              [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n              (click)=\"selectMonth($index)\">\r\n              {{ monthName }}\r\n            </button>\r\n          }\r\n        </div>\r\n        \r\n        <!-- Back to Calendar Button -->\r\n        <div class=\"tw-text-center\">\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n            (click)=\"toggleMonthYearSelector()\">\r\n            Back to Calendar\r\n          </button>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <!-- Calendar View -->\r\n      <div>\r\n        <!-- Days of Week Header -->\r\n        <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n          @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n            <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\r\n              {{ dayName }}\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- Calendar Days -->\r\n        <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n          @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n              [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n              [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n              [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n              [class.tw-text-white]=\"dayInfo.isSelected\"\r\n              [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n              [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n              [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n              (click)=\"showDateTimePicker ? selectDateTimeDate(dayInfo) : selectDate(dayInfo)\">\r\n              {{ dayInfo.day }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Date Picker Footer -->\r\n    <div class=\"tw-flex tw-justify-between tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded tw-transition-colors\"\r\n        (click)=\"closeDatePicker()\">\r\n        Cancel\r\n      </button>\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700 tw-rounded tw-transition-colors\"\r\n        (click)=\"closeDatePicker()\">\r\n        Done\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Time Picker Template -->\r\n<ng-template #timePickerTemplate>\r\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4 tw-w-72\">\r\n    <!-- Time Picker Header -->\r\n    <div class=\"tw-text-center tw-mb-3\">\r\n      <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h3>\r\n    </div>\r\n\r\n    <!-- Time Spinners Container -->\r\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-3 tw-mb-4\">\r\n      <!-- Hours -->\r\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n        <button \r\n          type=\"button\"\r\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\"\r\n          (click)=\"adjustTime('hours', 'up')\">\r\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n        </button>\r\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n          {{ timeHours }}\r\n        </div>\r\n        <button \r\n          type=\"button\"\r\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\"\r\n          (click)=\"adjustTime('hours', 'down')\">\r\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n        </button>\r\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">hour</span>\r\n      </div>\r\n\r\n      <!-- Colon Separator -->\r\n      <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\r\n\r\n      <!-- Minutes -->\r\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n        <button \r\n          type=\"button\"\r\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\"\r\n          (click)=\"adjustTime('minutes', 'up')\">\r\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n        </button>\r\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n          {{ timeMinutes.toString().padStart(2, '0') }}\r\n        </div>\r\n        <button \r\n          type=\"button\"\r\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\"\r\n          (click)=\"adjustTime('minutes', 'down')\">\r\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n        </button>\r\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">min</span>\r\n      </div>\r\n\r\n      <!-- Colon Separator -->\r\n      <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\r\n\r\n      <!-- Seconds -->\r\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n        <button \r\n          type=\"button\"\r\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\"\r\n          (click)=\"adjustTime('seconds', 'up')\">\r\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n        </button>\r\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n          {{ timeSeconds.toString().padStart(2, '0') }}\r\n        </div>\r\n        <button \r\n          type=\"button\"\r\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\"\r\n          (click)=\"adjustTime('seconds', 'down')\">\r\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n        </button>\r\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">sec</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- AM/PM Toggle -->\r\n    <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n      <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\r\n        <button \r\n          type=\"button\"\r\n          class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n          [class.tw-bg-white]=\"timeFormat === 'AM'\"\r\n          [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\r\n          [class.tw-shadow]=\"timeFormat === 'AM'\"\r\n          [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\r\n          (click)=\"timeFormat = 'AM'\">\r\n          AM\r\n        </button>\r\n        <button \r\n          type=\"button\"\r\n          class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n          [class.tw-bg-white]=\"timeFormat === 'PM'\"\r\n          [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\r\n          [class.tw-shadow]=\"timeFormat === 'PM'\"\r\n          [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\r\n          (click)=\"timeFormat = 'PM'\">\r\n          PM\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Current Time Display -->\r\n    <div class=\"tw-text-center tw-mb-3\">\r\n      <span class=\"tw-text-sm tw-text-gray-600\">\r\n        {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{ timeFormat }}\r\n      </span>\r\n    </div>\r\n\r\n    <!-- Time Picker Footer -->\r\n    <div class=\"tw-flex tw-gap-2\">\r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"showDateTimePicker ? closeDateTimePicker() : closeTimePicker()\">\r\n        Cancel\r\n      </button>\r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"showDateTimePicker ? applyDateTime() : applyTime()\">\r\n        OK\r\n      </button>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- DateTime Picker Template (Combined Date + Time) -->\r\n<ng-template #dateTimePickerTemplate>\r\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n    <!-- DateTime Picker Header -->\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"previousMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"toggleMonthYearSelector()\">\r\n        {{ monthNames[currentMonth] }} {{ currentYear }}\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"nextMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\r\n      <!-- Left Side: Calendar -->\r\n      <div>\r\n        <!-- Month/Year Selector -->\r\n        @if (showMonthYearSelector) {\r\n          <div class=\"tw-mb-4\">\r\n            <!-- Year Navigation -->\r\n            <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n              <button \r\n                type=\"button\" \r\n                class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n                (click)=\"previousYear()\">\r\n                <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n              </button>\r\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n              <button \r\n                type=\"button\" \r\n                class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n                (click)=\"nextYear()\">\r\n                <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n              </button>\r\n            </div>\r\n            \r\n            <!-- Month Grid -->\r\n            <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n              @for (monthName of shortMonthNames; track $index) {\r\n                <button \r\n                  type=\"button\"\r\n                  class=\"tw-px-2 tw-py-1.5 tw-text-xs tw-rounded-md tw-transition-colors tw-text-center\"\r\n                  [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n                  [class.tw-text-white]=\"$index === currentMonth\"\r\n                  [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n                  [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n                  (click)=\"selectMonth($index)\">\r\n                  {{ monthName }}\r\n                </button>\r\n              }\r\n            </div>\r\n            \r\n            <!-- Back to Calendar Button -->\r\n            <div class=\"tw-text-center\">\r\n              <button \r\n                type=\"button\" \r\n                class=\"tw-px-3 tw-py-1 tw-text-xs tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n                (click)=\"toggleMonthYearSelector()\">\r\n                Back to Calendar\r\n              </button>\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <!-- Calendar View -->\r\n          <div>\r\n            <!-- Days of Week Header -->\r\n            <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n              @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n                <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-1\">\r\n                  {{ dayName }}\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- Calendar Days -->\r\n            <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n              @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n                <button \r\n                  type=\"button\"\r\n                  class=\"tw-w-7 tw-h-7 tw-text-xs tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n                  [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n                  [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n                  [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n                  [class.tw-text-white]=\"dayInfo.isSelected\"\r\n                  [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n                  [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n                  [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n                  (click)=\"selectDateTimeDate(dayInfo)\">\r\n                  {{ dayInfo.day }}\r\n                </button>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- Right Side: Time Picker -->\r\n      <div class=\"tw-border-l tw-border-gray-200 tw-pl-4\">\r\n        <div class=\"tw-text-center tw-mb-2\">\r\n          <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h4>\r\n        </div>\r\n\r\n        <!-- Time Spinners -->\r\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-3\">\r\n          <!-- Hours -->\r\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n            <button \r\n              type=\"button\"\r\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\"\r\n              (click)=\"adjustTime('hours', 'up')\">\r\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n            </button>\r\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n              {{ timeHours }}\r\n            </div>\r\n            <button \r\n              type=\"button\"\r\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\"\r\n              (click)=\"adjustTime('hours', 'down')\">\r\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n            </button>\r\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">hour</span>\r\n          </div>\r\n\r\n          <!-- Colon -->\r\n          <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\r\n\r\n          <!-- Minutes -->\r\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n            <button \r\n              type=\"button\"\r\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\"\r\n              (click)=\"adjustTime('minutes', 'up')\">\r\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n            </button>\r\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n              {{ timeMinutes.toString().padStart(2, '0') }}\r\n            </div>\r\n            <button \r\n              type=\"button\"\r\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\"\r\n              (click)=\"adjustTime('minutes', 'down')\">\r\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n            </button>\r\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">min</span>\r\n          </div>\r\n\r\n          <!-- Colon -->\r\n          <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\r\n\r\n          <!-- Seconds -->\r\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n            <button \r\n              type=\"button\"\r\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\"\r\n              (click)=\"adjustTime('seconds', 'up')\">\r\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n            </button>\r\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n              {{ timeSeconds.toString().padStart(2, '0') }}\r\n            </div>\r\n            <button \r\n              type=\"button\"\r\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\"\r\n              (click)=\"adjustTime('seconds', 'down')\">\r\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n            </button>\r\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">sec</span>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- AM/PM Toggle -->\r\n        <div class=\"tw-flex tw-justify-center tw-mb-2\">\r\n          <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n              [class.tw-bg-white]=\"timeFormat === 'AM'\"\r\n              [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\r\n              [class.tw-shadow-sm]=\"timeFormat === 'AM'\"\r\n              [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\r\n              (click)=\"timeFormat = 'AM'\">\r\n              AM\r\n            </button>\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n              [class.tw-bg-white]=\"timeFormat === 'PM'\"\r\n              [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\r\n              [class.tw-shadow-sm]=\"timeFormat === 'PM'\"\r\n              [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\r\n              (click)=\"timeFormat = 'PM'\">\r\n              PM\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Current Time Display -->\r\n        <div class=\"tw-text-center tw-text-xs tw-text-gray-600\">\r\n          {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{ timeFormat }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DateTime Picker Footer -->\r\n    <div class=\"tw-flex tw-gap-2 tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"closeDateTimePicker()\">\r\n        Cancel\r\n      </button>\r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"applyDateTime()\">\r\n        OK\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color: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 === '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\n                        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\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\n                        [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                        }\"\n                        [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\n                        [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 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\"\n                        [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                        }\"\n                        [value]=\"getTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\n                        [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\"\n                        [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                        }\"\n                        [value]=\"getDateTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\n                        [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\"\n                    [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                    }\"\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\n                    [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\"\n                    [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                    }\"\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\n                    [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 \n        type=\"button\" \n        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 \n        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 \n        type=\"button\" \n        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 \n            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 \n            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 \n              type=\"button\"\n              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\"\n              [class.tw-text-white]=\"$index === currentMonth\"\n              [class.tw-text-gray-700]=\"$index !== currentMonth\"\n              [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 \n            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 \n              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\"\n              [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n              [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\n              [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 \n        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 \n        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 \n          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 \n          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 \n          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 \n          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 \n          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 \n          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 \n          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'\"\n          [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\n          [class.tw-shadow]=\"timeFormat === 'AM'\"\n          [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\n          (click)=\"timeFormat = 'AM'\">\n          AM\n        </button>\n        <button \n          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'\"\n          [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\n          [class.tw-shadow]=\"timeFormat === 'PM'\"\n          [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') }} {{ timeFormat }}\n      </span>\n    </div>\n\n    <!-- Time Picker Footer -->\n    <div class=\"tw-flex tw-gap-2\">\n      <button \n        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 \n        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 \n        type=\"button\" \n        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 \n        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 \n        type=\"button\" \n        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 \n                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 \n                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 \n                  type=\"button\"\n                  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\"\n                  [class.tw-text-white]=\"$index === currentMonth\"\n                  [class.tw-text-gray-700]=\"$index !== currentMonth\"\n                  [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 \n                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 \n                  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\"\n                  [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n                  [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\n                  [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 \n              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 \n              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 \n              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 \n              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 \n              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 \n              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 \n              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'\"\n              [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\n              [class.tw-shadow-sm]=\"timeFormat === 'AM'\"\n              [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\n              (click)=\"timeFormat = 'AM'\">\n              AM\n            </button>\n            <button \n              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'\"\n              [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\n              [class.tw-shadow-sm]=\"timeFormat === 'PM'\"\n              [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') }} {{ 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 \n        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 \n        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
@@ -1677,7 +1677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             useExisting: forwardRef(() => CideInputComponent),
                         },
                         CapitalizePipe
-                    ], template: "<div class=\"cide-input\">\r\n    <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\r\n    @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === 'datetime-local' || type === 'url') {\r\n        <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n                'cide-element-size-xxs': (size === '2xs'),\r\n                'cide-element-size-xs': (size === 'xs'),\r\n                'cide-element-size-sm': (size === 'sm'),\r\n                'cide-element-size-md': (size === 'md'),\r\n                'cide-element-size-lg': (size === 'lg'),\r\n                'cide-element-leading-icon': leadingIcon,\r\n                'cide-element-trailing-icon': trailingIconInternal,\r\n                'cide-element-clear-input': clearInput,\r\n                'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n                'cide-element-input-label-start': (labelDir === 'start'),\r\n                'cide-element-input-label-end': (labelDir === 'end'),\r\n                'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n                'cide-element-input-label-less': (!label || labelHide),\r\n                'cide-element-style-outline': (fill === 'outline'),\r\n                'cide-element-style-solid': (fill === 'solid'),\r\n                'cide-element-style-standard': (fill === 'standard'),\r\n                'cide-element-input-number': (type === 'number')\r\n            }\">\r\n            <!-- label -->\r\n            @if (label && !labelHide) {\r\n            <label [for]=\"id\" class=\"cide-input-label\">\r\n              {{label}}\r\n              @if (required) {\r\n                <span class=\"tw-text-red-500 tw-ml-1\">*</span>\r\n              }\r\n            </label>\r\n            }\r\n\r\n            <!-- all one line elemets which dose not affect with label and error text -->\r\n            <div class=\"cide-element-input-wrapper\">\r\n                <!-- Leading Icon -->\r\n                @if (leadingIcon) {\r\n                <span class=\"cide-input-leading-icon-wrapper\">\r\n                    <span\r\n                        class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n                </span>\r\n                }\r\n\r\n                <!-- Trailing icon -->\r\n                @if (trailingIconInternal) {\r\n                <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\r\n                    <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n                        [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n                        (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n                </span>\r\n                }\r\n\r\n                <!-- Clear -->\r\n                @if (clearInput && ngModel) {\r\n                <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\r\n                    <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n                </button>\r\n                }\r\n\r\n                <!-- Date Input Wrapper -->\r\n                @if (type === 'date') {\r\n                <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n                    <!-- Date Input (read-only to prevent manual input) -->\r\n                    <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n                        [ngClass]=\"{\r\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n                            'tw-pl-1': !leadingIcon,\r\n                            'tw-pr-8': trailingIconInternal,\r\n                            'tw-pr-1': !trailingIconInternal,\r\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n                            'tw-h-7': size === 'sm',\r\n                            '!tw-mt-0': labelHide,\r\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n                        }\"\r\n                        [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n                        [autocomplete]=\"autocomplete\"\r\n                        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n                    \r\n                    <!-- Placeholder overlay for empty date -->\r\n                    @if (!ngModel && placeholder) {\r\n                    <div class=\"cide-input-date-overlay\">\r\n                        {{placeholder}}\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- Date picker is now rendered as a portal appended to body -->\r\n                </div>\r\n                }\r\n\r\n                <!-- Time Input Wrapper -->\r\n                @if (isTimeType()) {\r\n                <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n                    <!-- Time Input (read-only to prevent manual input) -->\r\n                    <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n                        [ngClass]=\"{\r\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n                            'tw-pl-1': !leadingIcon,\r\n                            'tw-pr-8': trailingIconInternal,\r\n                            'tw-pr-1': !trailingIconInternal,\r\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n                            'tw-h-7': size === 'sm',\r\n                            '!tw-mt-0': labelHide,\r\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n                        }\"\r\n                        [value]=\"getTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n                        [autocomplete]=\"autocomplete\"\r\n                        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n                    \r\n                    <!-- Placeholder overlay for empty time -->\r\n                    @if (!ngModel && placeholder) {\r\n                    <div class=\"cide-input-date-overlay\">\r\n                        {{placeholder}}\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- Time picker is now rendered as a portal appended to body -->\r\n                </div>\r\n                }\r\n\r\n                <!-- DateTime Local Input -->\r\n                @if (type === 'datetime-local') {\r\n                <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n                    <!-- DateTime Input (read-only to prevent manual input) -->\r\n                    <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n                        [ngClass]=\"{\r\n                            'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n                            'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n                            'tw-pl-1': !leadingIcon,\r\n                            'tw-pr-8': trailingIconInternal,\r\n                            'tw-pr-1': !trailingIconInternal,\r\n                            'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n                            'tw-h-7': size === 'sm',\r\n                            '!tw-mt-0': labelHide,\r\n                            'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n                        }\"\r\n                        [value]=\"getDateTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n                        [autocomplete]=\"autocomplete\"\r\n                        class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n                    \r\n                    <!-- Placeholder overlay for empty datetime -->\r\n                    @if (!ngModel && placeholder) {\r\n                    <div class=\"cide-input-date-overlay\">\r\n                        {{placeholder}}\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- DateTime picker is now rendered as a portal appended to body -->\r\n                </div>\r\n                }\r\n\r\n                <!-- Regular Input (non-date, non-time, non-datetime-local, non-url) -->\r\n                @if (type !== 'date' && !isTimeType() && type !== 'datetime-local' && type !== 'url') {\r\n                <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\r\n                    [ngClass]=\"{\r\n                        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n                        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n                        'tw-pl-1': !leadingIcon,\r\n                        'tw-pr-8': trailingIconInternal,\r\n                        'tw-pr-1': !trailingIconInternal,\r\n                        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n                        'tw-h-7': size === 'sm',\r\n                        '!tw-mt-0': labelHide,\r\n                        'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n                    }\"\r\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n                    [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\" [step]=\"step\"\r\n                    class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n                }\r\n\r\n                <!-- URL Input -->\r\n                @if (type === 'url') {\r\n                <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\r\n                    [ngClass]=\"{\r\n                        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n                        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n                        'tw-pl-1': !leadingIcon,\r\n                        'tw-pr-8': trailingIconInternal,\r\n                        'tw-pr-1': !trailingIconInternal,\r\n                        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n                        'tw-h-7': size === 'sm',\r\n                        '!tw-mt-0': labelHide,\r\n                        'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n                    }\"\r\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n                    [autocomplete]=\"autocomplete\"\r\n                    class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n                }\r\n            </div>\r\n            <!-- error text / helper text -->\r\n            @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\r\n            <span class=\"cide-input-help-error-text\">{{\r\n                isValid\r\n                ? helperText : (errorText ?\r\n                (isTouched ? errorText : helperText)\r\n                : helperText)}}\r\n            </span>\r\n            }\r\n        </div>\r\n    }\r\n\r\n    <!-- Input with tralling icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!-- Input with leading icon -->\r\n    <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n        <div class=\"tw-w-fullh-full tw-relative\">\r\n            <label\r\n                class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n            <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n                <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n            </span>\r\n            <input\r\n                class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n                value=\"Ankush Bhure\" />\r\n        </div>\r\n    </div> -->\r\n\r\n    <!------------------------------------------CHECKBOX------------------------------------------>\r\n    @if (type === 'checkbox') {\r\n    <div class=\"tw-flex\">\r\n        <div class=\"cide-checkbox tw-relative\">\r\n            <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\" [disabled]=\"disabled\"\r\n                class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n                [autocomplete]=\"autocomplete\" />\r\n            <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n                <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n                    <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n                        <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n                    </svg>\r\n                </span>\r\n                @if (!labelHide) {\r\n                <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\r\n                }\r\n            </label>\r\n            <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n                <!-- Element hidden and its xpath is used to display inside SVG -->\r\n                <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n                    <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n                </symbol>\r\n            </svg>\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <!-------------------------------------------SELECT------------------------------------------->\r\n    @if (type === 'select') {\r\n    <div>sas\r\n        <div class=\"tw-relative\">\r\n            <div class=\"tw-absolute\">\r\n                @for (item of option; track $index) {\r\n                <div class=\"tw-w-full\">\r\n                    {{item}}\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n    }\r\n</div>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTemplate>\r\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n    <!-- Date Picker Header -->\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"previousMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"toggleMonthYearSelector()\">\r\n        {{ monthNames[currentMonth] }} {{ currentYear }}\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"nextMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Month/Year Selector -->\r\n    @if (showMonthYearSelector) {\r\n      <div class=\"tw-mb-4\">\r\n        <!-- Year Navigation -->\r\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n            (click)=\"previousYear()\">\r\n            <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n          </button>\r\n          <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n            (click)=\"nextYear()\">\r\n            <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n          </button>\r\n        </div>\r\n        \r\n        <!-- Month Grid -->\r\n        <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n          @for (monthName of shortMonthNames; track $index) {\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\r\n              [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n              [class.tw-text-white]=\"$index === currentMonth\"\r\n              [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n              [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n              (click)=\"selectMonth($index)\">\r\n              {{ monthName }}\r\n            </button>\r\n          }\r\n        </div>\r\n        \r\n        <!-- Back to Calendar Button -->\r\n        <div class=\"tw-text-center\">\r\n          <button \r\n            type=\"button\" \r\n            class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n            (click)=\"toggleMonthYearSelector()\">\r\n            Back to Calendar\r\n          </button>\r\n        </div>\r\n      </div>\r\n    } @else {\r\n      <!-- Calendar View -->\r\n      <div>\r\n        <!-- Days of Week Header -->\r\n        <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n          @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n            <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\r\n              {{ dayName }}\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <!-- Calendar Days -->\r\n        <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n          @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n              [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n              [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n              [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n              [class.tw-text-white]=\"dayInfo.isSelected\"\r\n              [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n              [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n              [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n              (click)=\"showDateTimePicker ? selectDateTimeDate(dayInfo) : selectDate(dayInfo)\">\r\n              {{ dayInfo.day }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Date Picker Footer -->\r\n    <div class=\"tw-flex tw-justify-between tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded tw-transition-colors\"\r\n        (click)=\"closeDatePicker()\">\r\n        Cancel\r\n      </button>\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700 tw-rounded tw-transition-colors\"\r\n        (click)=\"closeDatePicker()\">\r\n        Done\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Time Picker Template -->\r\n<ng-template #timePickerTemplate>\r\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4 tw-w-72\">\r\n    <!-- Time Picker Header -->\r\n    <div class=\"tw-text-center tw-mb-3\">\r\n      <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h3>\r\n    </div>\r\n\r\n    <!-- Time Spinners Container -->\r\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-3 tw-mb-4\">\r\n      <!-- Hours -->\r\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n        <button \r\n          type=\"button\"\r\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\"\r\n          (click)=\"adjustTime('hours', 'up')\">\r\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n        </button>\r\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n          {{ timeHours }}\r\n        </div>\r\n        <button \r\n          type=\"button\"\r\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\"\r\n          (click)=\"adjustTime('hours', 'down')\">\r\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n        </button>\r\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">hour</span>\r\n      </div>\r\n\r\n      <!-- Colon Separator -->\r\n      <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\r\n\r\n      <!-- Minutes -->\r\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n        <button \r\n          type=\"button\"\r\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\"\r\n          (click)=\"adjustTime('minutes', 'up')\">\r\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n        </button>\r\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n          {{ timeMinutes.toString().padStart(2, '0') }}\r\n        </div>\r\n        <button \r\n          type=\"button\"\r\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\"\r\n          (click)=\"adjustTime('minutes', 'down')\">\r\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n        </button>\r\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">min</span>\r\n      </div>\r\n\r\n      <!-- Colon Separator -->\r\n      <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\r\n\r\n      <!-- Seconds -->\r\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n        <button \r\n          type=\"button\"\r\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\"\r\n          (click)=\"adjustTime('seconds', 'up')\">\r\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n        </button>\r\n        <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n          {{ timeSeconds.toString().padStart(2, '0') }}\r\n        </div>\r\n        <button \r\n          type=\"button\"\r\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\"\r\n          (click)=\"adjustTime('seconds', 'down')\">\r\n          <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n        </button>\r\n        <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">sec</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- AM/PM Toggle -->\r\n    <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n      <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\r\n        <button \r\n          type=\"button\"\r\n          class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n          [class.tw-bg-white]=\"timeFormat === 'AM'\"\r\n          [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\r\n          [class.tw-shadow]=\"timeFormat === 'AM'\"\r\n          [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\r\n          (click)=\"timeFormat = 'AM'\">\r\n          AM\r\n        </button>\r\n        <button \r\n          type=\"button\"\r\n          class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n          [class.tw-bg-white]=\"timeFormat === 'PM'\"\r\n          [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\r\n          [class.tw-shadow]=\"timeFormat === 'PM'\"\r\n          [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\r\n          (click)=\"timeFormat = 'PM'\">\r\n          PM\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Current Time Display -->\r\n    <div class=\"tw-text-center tw-mb-3\">\r\n      <span class=\"tw-text-sm tw-text-gray-600\">\r\n        {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{ timeFormat }}\r\n      </span>\r\n    </div>\r\n\r\n    <!-- Time Picker Footer -->\r\n    <div class=\"tw-flex tw-gap-2\">\r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"showDateTimePicker ? closeDateTimePicker() : closeTimePicker()\">\r\n        Cancel\r\n      </button>\r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"showDateTimePicker ? applyDateTime() : applyTime()\">\r\n        OK\r\n      </button>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- DateTime Picker Template (Combined Date + Time) -->\r\n<ng-template #dateTimePickerTemplate>\r\n  <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n    <!-- DateTime Picker Header -->\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"previousMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"toggleMonthYearSelector()\">\r\n        {{ monthNames[currentMonth] }} {{ currentYear }}\r\n      </button>\r\n      \r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n        (click)=\"nextMonth()\">\r\n        <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\r\n      <!-- Left Side: Calendar -->\r\n      <div>\r\n        <!-- Month/Year Selector -->\r\n        @if (showMonthYearSelector) {\r\n          <div class=\"tw-mb-4\">\r\n            <!-- Year Navigation -->\r\n            <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n              <button \r\n                type=\"button\" \r\n                class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n                (click)=\"previousYear()\">\r\n                <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n              </button>\r\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n              <button \r\n                type=\"button\" \r\n                class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n                (click)=\"nextYear()\">\r\n                <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n              </button>\r\n            </div>\r\n            \r\n            <!-- Month Grid -->\r\n            <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n              @for (monthName of shortMonthNames; track $index) {\r\n                <button \r\n                  type=\"button\"\r\n                  class=\"tw-px-2 tw-py-1.5 tw-text-xs tw-rounded-md tw-transition-colors tw-text-center\"\r\n                  [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n                  [class.tw-text-white]=\"$index === currentMonth\"\r\n                  [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n                  [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n                  (click)=\"selectMonth($index)\">\r\n                  {{ monthName }}\r\n                </button>\r\n              }\r\n            </div>\r\n            \r\n            <!-- Back to Calendar Button -->\r\n            <div class=\"tw-text-center\">\r\n              <button \r\n                type=\"button\" \r\n                class=\"tw-px-3 tw-py-1 tw-text-xs tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n                (click)=\"toggleMonthYearSelector()\">\r\n                Back to Calendar\r\n              </button>\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <!-- Calendar View -->\r\n          <div>\r\n            <!-- Days of Week Header -->\r\n            <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n              @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n                <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-1\">\r\n                  {{ dayName }}\r\n                </div>\r\n              }\r\n            </div>\r\n\r\n            <!-- Calendar Days -->\r\n            <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n              @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n                <button \r\n                  type=\"button\"\r\n                  class=\"tw-w-7 tw-h-7 tw-text-xs tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n                  [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n                  [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n                  [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n                  [class.tw-text-white]=\"dayInfo.isSelected\"\r\n                  [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n                  [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n                  [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n                  (click)=\"selectDateTimeDate(dayInfo)\">\r\n                  {{ dayInfo.day }}\r\n                </button>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- Right Side: Time Picker -->\r\n      <div class=\"tw-border-l tw-border-gray-200 tw-pl-4\">\r\n        <div class=\"tw-text-center tw-mb-2\">\r\n          <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h4>\r\n        </div>\r\n\r\n        <!-- Time Spinners -->\r\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-3\">\r\n          <!-- Hours -->\r\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n            <button \r\n              type=\"button\"\r\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\"\r\n              (click)=\"adjustTime('hours', 'up')\">\r\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n            </button>\r\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n              {{ timeHours }}\r\n            </div>\r\n            <button \r\n              type=\"button\"\r\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\"\r\n              (click)=\"adjustTime('hours', 'down')\">\r\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n            </button>\r\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">hour</span>\r\n          </div>\r\n\r\n          <!-- Colon -->\r\n          <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\r\n\r\n          <!-- Minutes -->\r\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n            <button \r\n              type=\"button\"\r\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\"\r\n              (click)=\"adjustTime('minutes', 'up')\">\r\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n            </button>\r\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n              {{ timeMinutes.toString().padStart(2, '0') }}\r\n            </div>\r\n            <button \r\n              type=\"button\"\r\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\"\r\n              (click)=\"adjustTime('minutes', 'down')\">\r\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n            </button>\r\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">min</span>\r\n          </div>\r\n\r\n          <!-- Colon -->\r\n          <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\r\n\r\n          <!-- Seconds -->\r\n          <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n            <button \r\n              type=\"button\"\r\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\"\r\n              (click)=\"adjustTime('seconds', 'up')\">\r\n              <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n            </button>\r\n            <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n              {{ timeSeconds.toString().padStart(2, '0') }}\r\n            </div>\r\n            <button \r\n              type=\"button\"\r\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\"\r\n              (click)=\"adjustTime('seconds', 'down')\">\r\n              <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n            </button>\r\n            <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">sec</span>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- AM/PM Toggle -->\r\n        <div class=\"tw-flex tw-justify-center tw-mb-2\">\r\n          <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n              [class.tw-bg-white]=\"timeFormat === 'AM'\"\r\n              [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\r\n              [class.tw-shadow-sm]=\"timeFormat === 'AM'\"\r\n              [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\r\n              (click)=\"timeFormat = 'AM'\">\r\n              AM\r\n            </button>\r\n            <button \r\n              type=\"button\"\r\n              class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n              [class.tw-bg-white]=\"timeFormat === 'PM'\"\r\n              [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\r\n              [class.tw-shadow-sm]=\"timeFormat === 'PM'\"\r\n              [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\r\n              (click)=\"timeFormat = 'PM'\">\r\n              PM\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Current Time Display -->\r\n        <div class=\"tw-text-center tw-text-xs tw-text-gray-600\">\r\n          {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{ timeFormat }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DateTime Picker Footer -->\r\n    <div class=\"tw-flex tw-gap-2 tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"closeDateTimePicker()\">\r\n        Cancel\r\n      </button>\r\n      <button \r\n        type=\"button\" \r\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\"\r\n        (click)=\"applyDateTime()\">\r\n        OK\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color: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 === '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\n                        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\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\n                        [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                        }\"\n                        [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\n                        [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 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\"\n                        [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                        }\"\n                        [value]=\"getTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\n                        [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\"\n                        [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                        }\"\n                        [value]=\"getDateTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\n                        [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\"\n                    [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                    }\"\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\n                    [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\"\n                    [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                    }\"\n                    [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\n                    [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 \n        type=\"button\" \n        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 \n        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 \n        type=\"button\" \n        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 \n            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 \n            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 \n              type=\"button\"\n              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\"\n              [class.tw-text-white]=\"$index === currentMonth\"\n              [class.tw-text-gray-700]=\"$index !== currentMonth\"\n              [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 \n            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 \n              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\"\n              [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n              [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\n              [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 \n        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 \n        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 \n          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 \n          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 \n          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 \n          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 \n          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 \n          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 \n          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'\"\n          [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\n          [class.tw-shadow]=\"timeFormat === 'AM'\"\n          [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\n          (click)=\"timeFormat = 'AM'\">\n          AM\n        </button>\n        <button \n          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'\"\n          [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\n          [class.tw-shadow]=\"timeFormat === 'PM'\"\n          [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') }} {{ timeFormat }}\n      </span>\n    </div>\n\n    <!-- Time Picker Footer -->\n    <div class=\"tw-flex tw-gap-2\">\n      <button \n        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 \n        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 \n        type=\"button\" \n        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 \n        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 \n        type=\"button\" \n        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 \n                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 \n                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 \n                  type=\"button\"\n                  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\"\n                  [class.tw-text-white]=\"$index === currentMonth\"\n                  [class.tw-text-gray-700]=\"$index !== currentMonth\"\n                  [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 \n                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 \n                  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\"\n                  [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\n                  [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\n                  [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 \n              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 \n              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 \n              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 \n              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 \n              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 \n              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 \n              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'\"\n              [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\n              [class.tw-shadow-sm]=\"timeFormat === 'AM'\"\n              [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\n              (click)=\"timeFormat = 'AM'\">\n              AM\n            </button>\n            <button \n              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'\"\n              [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\n              [class.tw-shadow-sm]=\"timeFormat === 'PM'\"\n              [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') }} {{ 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 \n        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 \n        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: [{
@@ -13319,7 +13319,7 @@ class CideEleFloatingContainerComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerComponent, isStandalone: true, selector: "cide-ele-floating-container", inputs: { config: "config", isMinimized: "isMinimized", isMaximized: "isMaximized", isVisible: "isVisible", zIndex: "zIndex" }, outputs: { closeEvent: "closeEvent", minimizeEvent: "minimizeEvent", maximizeEvent: "maximizeEvent", clickEvent: "clickEvent" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
     <div 
       #container
-      class="tw-fixed tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
+      class="tw-fixed tw-bg-white dark:tw-bg-gray-900 tw-bg-opacity-90 dark:tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-border-opacity-50 dark:tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
       [style.left.px]="isMaximized() ? 20 : position().x"
       [style.top.px]="isMaximized() ? 20 : position().y"
       [style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
@@ -13338,7 +13338,7 @@ class CideEleFloatingContainerComponent {
       
       <!-- Header -->
       <div 
-        class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
+        class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-border-opacity-30 dark:tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
         [style.background]="getHeaderBackground()"
         (mousedown)="startDrag($event)"
         (click)="onHeaderClick($event)">
@@ -13398,7 +13398,7 @@ class CideEleFloatingContainerComponent {
       <!-- Content with @defer for performance -->
       @if (!isMinimized()) {
       <div 
-        class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-gray-50 tw-bg-opacity-90"
+        class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-white dark:tw-bg-gray-900 tw-bg-opacity-90 dark:tw-bg-opacity-90"
         [style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
         [style.min-height]="'200px'">
         @defer (when !isMinimized() && isVisible()) {
@@ -13417,7 +13417,7 @@ class CideEleFloatingContainerComponent {
       <!-- Resize Handle (if resizable) -->
       @if (config().resizable !== false) {
         <div 
-          class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
+          class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 dark:tw-bg-gray-600 tw-opacity-50 dark:tw-opacity-50 hover:tw-opacity-100 dark:hover:tw-opacity-100"
           (mousedown)="startResize($event)">
         </div>
       }
@@ -13429,7 +13429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             args: [{ selector: 'cide-ele-floating-container', standalone: true, imports: [CommonModule, CideEleButtonComponent, CideIconComponent, CideSpinnerComponent], template: `
     <div 
       #container
-      class="tw-fixed tw-bg-gray-50 tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
+      class="tw-fixed tw-bg-white dark:tw-bg-gray-900 tw-bg-opacity-90 dark:tw-bg-opacity-90 tw-backdrop-blur-sm tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-border-opacity-50 dark:tw-border-opacity-50 tw-rounded-xl tw-shadow-lg tw-transition-all tw-duration-200 tw-flex tw-flex-col"
       [style.left.px]="isMaximized() ? 20 : position().x"
       [style.top.px]="isMaximized() ? 20 : position().y"
       [style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
@@ -13448,7 +13448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
       
       <!-- Header -->
       <div 
-        class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
+        class="tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-border-opacity-30 dark:tw-border-opacity-30 tw-rounded-t-xl tw-cursor-move tw-transition-all tw-duration-200 tw-shadow-sm tw-flex-shrink-0"
         [style.background]="getHeaderBackground()"
         (mousedown)="startDrag($event)"
         (click)="onHeaderClick($event)">
@@ -13508,7 +13508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
       <!-- Content with @defer for performance -->
       @if (!isMinimized()) {
       <div 
-        class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-gray-50 tw-bg-opacity-90"
+        class="tw-flex-1 tw-overflow-auto tw-overflow-x-hidden floating-container-content tw-bg-white dark:tw-bg-gray-900 tw-bg-opacity-90 dark:tw-bg-opacity-90"
         [style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
         [style.min-height]="'200px'">
         @defer (when !isMinimized() && isVisible()) {
@@ -13527,7 +13527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
       <!-- Resize Handle (if resizable) -->
       @if (config().resizable !== false) {
         <div 
-          class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 tw-opacity-50 hover:tw-opacity-100"
+          class="tw-absolute tw-bottom-0 tw-right-0 tw-w-[1.38rem] tw-h-3 tw-cursor-se-resize tw-bg-gray-300 dark:tw-bg-gray-600 tw-opacity-50 dark:tw-opacity-50 hover:tw-opacity-100 dark:hover:tw-opacity-100"
           (mousedown)="startResize($event)">
         </div>
       }
@@ -14771,5 +14771,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleThemeToggleComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, CideThemeService, ConfirmationService, CoreFileManagerInsertUpdatePayload, CurrencyPipe, CurrencyService, DEFAULT_CURRENCY_CONFIG, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, hostManagerRoutesUrl, notificationRoutesUrl };
+export { CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleThemeToggleComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, CideThemeService, ConfirmationService, CoreFileManagerInsertUpdatePayload, CurrencyPipe, CurrencyService, DEFAULT_CURRENCY_CONFIG, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, FloatingContainerShortcutsService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationApiService, NotificationService, PortalService, TooltipDirective, WebSocketNotificationService, cidePath, hostManagerRoutesUrl, notificationRoutesUrl };
 //# sourceMappingURL=cloud-ide-element.mjs.map