cloud-ide-element 1.1.12 → 1.1.14

package/fesm2022/cloud-ide-element.mjs

@@ -11,6 +11,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { generateStringFromObject, coreRoutesUrl, cidePath, hostManagerRoutesUrl } from 'cloud-ide-lms-model';
 import * as i2$1 from '@angular/router';
 import { tap, catchError as catchError$1 } from 'rxjs/operators';
+import { trigger, state, transition, style, animate } from '@angular/animations';
 
 class CapitalizePipe {
     transform(value, capitalizationMethod) {
@@ -582,6 +583,8 @@ class CideInputComponent {
     showDateTimePicker = false;
     dateTimeStep = 'date';
     dateTimePickerPortalId = `datetime-picker-${this.randomString()}`;
+    // ViewChild for datetime picker template
+    dateTimePickerTemplate;
     // ==================================METHODS FOR CUSTOM FORM COMPONENT=============================
     // FOR ANGULAR CALLED BY UI
     /**
@@ -822,11 +825,26 @@ class CideInputComponent {
                 return false;
             }
         }
+        else if (type == 'time') {
+            if (typeof (value) == 'string') {
+                if (value?.length > 0) {
+                    // Validate time format (HH:mm or HH:mm:ss)
+                    const timeRegex = /^\d{2}:\d{2}(:\d{2})?$/;
+                    return timeRegex.test(value);
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                return false;
+            }
+        }
         else if (type == 'datetime-local') {
             if (typeof (value) == 'string') {
                 if (value?.length > 0) {
-                    // Validate datetime-local format (YYYY-MM-DDTHH:mm)
-                    const datetimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/;
+                    // Validate datetime-local format (YYYY-MM-DDTHH:mm:ss or YYYY-MM-DDTHH:mm)
+                    const datetimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?$/;
                     return datetimeRegex.test(value) && !isNaN(Date.parse(value));
                 }
                 else {
@@ -1321,6 +1339,10 @@ class CideInputComponent {
         this.ngModel = formattedDate;
         this.ngModelChange?.emit(formattedDate);
         this.onChange(formattedDate);
+        // Mark as touched and validate
+        this.isTouched = true;
+        this.onTouched();
+        this.isControlValid(formattedDate);
         // Regenerate calendar to update selection
         this.generateCalendar();
         // Close date picker
@@ -1441,6 +1463,10 @@ class CideInputComponent {
         this.ngModel = timeString;
         this.ngModelChange.emit(timeString);
         this.onChange(timeString);
+        // Mark as touched and validate
+        this.isTouched = true;
+        this.onTouched();
+        this.isControlValid(timeString);
         this.closeTimePicker();
     }
     /**
@@ -1505,9 +1531,9 @@ class CideInputComponent {
         const inputElement = document.getElementById(this.id || this.idRandom);
         if (!inputElement)
             return;
-        // Use date picker template for datetime picker (will show date first, then time)
+        // Use combined datetime picker template (shows date and time together)
         const portalConfig = {
-            template: this.datePickerTemplate,
+            template: this.dateTimePickerTemplate,
             context: { $implicit: this },
             triggerElement: inputElement,
             viewContainerRef: this.viewContainerRef,
@@ -1534,34 +1560,15 @@ class CideInputComponent {
         this.portalService.destroyPortal(this.dateTimePickerPortalId);
     }
     /**
-     * @description Select date in datetime picker (moves to time selection)
+     * @description Select date in datetime picker (just updates the selected date, time stays visible)
      */
     selectDateTimeDate(dayInfo) {
         if (!dayInfo.isCurrentMonth)
             return;
+        // Just update the selected date - time picker remains visible on the right
         this.selectedDate = dayInfo.date;
-        this.dateTimeStep = 'time'; // Move to time selection
-        // Recreate portal with time picker template
-        this.portalService.destroyPortal(this.dateTimePickerPortalId);
-        const inputElement = document.getElementById(this.id || this.idRandom);
-        if (!inputElement)
-            return;
-        const portalConfig = {
-            template: this.timePickerTemplate,
-            context: { $implicit: this },
-            triggerElement: inputElement,
-            viewContainerRef: this.viewContainerRef,
-            className: 'cide-datetime-picker-portal',
-            position: 'bottom',
-            align: 'left',
-            offset: { x: 0, y: 8 },
-            closeOnOutsideClick: true,
-            closeOnEscape: true
-        };
-        this.portalService.createTemplatePortal(this.dateTimePickerPortalId, portalConfig);
-        this.portalService.registerCloseCallback(this.dateTimePickerPortalId, () => {
-            this.closeDateTimePicker();
-        });
+        // Regenerate calendar to update selection
+        this.generateCalendar();
     }
     /**
      * @description Apply datetime (combines date and time)
@@ -1585,6 +1592,10 @@ class CideInputComponent {
         this.ngModel = dateTimeString;
         this.ngModelChange.emit(dateTimeString);
         this.onChange(dateTimeString);
+        // Mark as touched and validate
+        this.isTouched = true;
+        this.onTouched();
+        this.isControlValid(dateTimeString);
         this.closeDateTimePicker();
     }
     /**
@@ -1630,7 +1641,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 }], 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\" [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\" [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\" [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\"\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-4 tw-pt-3 tw-border-t tw-border-gray-200\">\n      <button \n        type=\"button\" \n        class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\"\n        (click)=\"closeDatePicker()\">\n        Cancel\n      </button>\n      <button \n        type=\"button\" \n        class=\"tw-px-3 tw-py-1 tw-text-sm tw-bg-blue-500 tw-text-white hover:tw-bg-blue-600 tw-rounded-md tw-transition-colors\"\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-2xl tw-shadow-lg tw-p-6 tw-w-80\">\n    <!-- Time Picker Header -->\n    <div class=\"tw-text-center tw-mb-6\">\n      <h3 class=\"tw-text-lg 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-4 tw-mb-6\">\n      <!-- Hours -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button \n          type=\"button\"\n          class=\"tw-w-10 tw-h-10 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-xl\">expand_less</span>\n        </button>\n        <div class=\"tw-text-4xl tw-font-normal tw-text-gray-800 tw-my-2 tw-w-16 tw-text-center\">\n          {{ timeHours }}\n        </div>\n        <button \n          type=\"button\"\n          class=\"tw-w-10 tw-h-10 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-xl\">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-4xl tw-font-normal tw-text-gray-800 tw-mb-6\">:</div>\n\n      <!-- Minutes -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button \n          type=\"button\"\n          class=\"tw-w-10 tw-h-10 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-xl\">expand_less</span>\n        </button>\n        <div class=\"tw-text-4xl tw-font-normal tw-text-gray-800 tw-my-2 tw-w-16 tw-text-center\">\n          {{ timeMinutes.toString().padStart(2, '0') }}\n        </div>\n        <button \n          type=\"button\"\n          class=\"tw-w-10 tw-h-10 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-xl\">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-4xl tw-font-normal tw-text-gray-800 tw-mb-6\">:</div>\n\n      <!-- Seconds -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button \n          type=\"button\"\n          class=\"tw-w-10 tw-h-10 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-xl\">expand_less</span>\n        </button>\n        <div class=\"tw-text-4xl tw-font-normal tw-text-gray-800 tw-my-2 tw-w-16 tw-text-center\">\n          {{ timeSeconds.toString().padStart(2, '0') }}\n        </div>\n        <button \n          type=\"button\"\n          class=\"tw-w-10 tw-h-10 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-xl\">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-6\">\n      <div class=\"tw-inline-flex tw-rounded-lg tw-bg-gray-100 tw-p-1\">\n        <button \n          type=\"button\"\n          class=\"tw-px-6 tw-py-2 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-6 tw-py-2 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-6\">\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-3\">\n      <button \n        type=\"button\" \n        class=\"tw-flex-1 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded-lg tw-transition-colors\"\n        (click)=\"showDateTimePicker ? closeDateTimePicker() : closeTimePicker()\">\n        Cancel\n      </button>\n      <button \n        type=\"button\" \n        class=\"tw-flex-1 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded-lg tw-transition-colors tw-border-0\"\n        (click)=\"showDateTimePicker ? applyDateTime() : applyTime()\">\n        OK\n      </button>\n    </div>\n\n    <!-- Back to Date Button (only for datetime picker) -->\n    @if (showDateTimePicker && dateTimeStep === 'time') {\n      <div class=\"tw-text-center tw-mt-4\">\n        <button \n          type=\"button\" \n          class=\"tw-text-sm tw-text-blue-600 hover:tw-text-blue-700 tw-underline tw-border-0 tw-bg-transparent tw-p-0\"\n          (click)=\"backToDateSelection()\">\n          \u2190 Back to Date\n        </button>\n      </div>\n    }\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:#6b7280}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:#f3f4f6;transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid rgb(229,231,235);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.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:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out}.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:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out}.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\">\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\"\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:#6b7280}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:#f3f4f6;transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid rgb(229,231,235);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.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:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out}.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:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out}.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
@@ -1656,7 +1667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             useExisting: forwardRef(() => CideInputComponent),
                         },
                         CapitalizePipe
-                    ], template: "<div class=\"cide-input\">\n    <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\n    @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === '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\" [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\" [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\" [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\"\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-4 tw-pt-3 tw-border-t tw-border-gray-200\">\n      <button \n        type=\"button\" \n        class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\"\n        (click)=\"closeDatePicker()\">\n        Cancel\n      </button>\n      <button \n        type=\"button\" \n        class=\"tw-px-3 tw-py-1 tw-text-sm tw-bg-blue-500 tw-text-white hover:tw-bg-blue-600 tw-rounded-md tw-transition-colors\"\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-2xl tw-shadow-lg tw-p-6 tw-w-80\">\n    <!-- Time Picker Header -->\n    <div class=\"tw-text-center tw-mb-6\">\n      <h3 class=\"tw-text-lg 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-4 tw-mb-6\">\n      <!-- Hours -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button \n          type=\"button\"\n          class=\"tw-w-10 tw-h-10 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-xl\">expand_less</span>\n        </button>\n        <div class=\"tw-text-4xl tw-font-normal tw-text-gray-800 tw-my-2 tw-w-16 tw-text-center\">\n          {{ timeHours }}\n        </div>\n        <button \n          type=\"button\"\n          class=\"tw-w-10 tw-h-10 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-xl\">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-4xl tw-font-normal tw-text-gray-800 tw-mb-6\">:</div>\n\n      <!-- Minutes -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button \n          type=\"button\"\n          class=\"tw-w-10 tw-h-10 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-xl\">expand_less</span>\n        </button>\n        <div class=\"tw-text-4xl tw-font-normal tw-text-gray-800 tw-my-2 tw-w-16 tw-text-center\">\n          {{ timeMinutes.toString().padStart(2, '0') }}\n        </div>\n        <button \n          type=\"button\"\n          class=\"tw-w-10 tw-h-10 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-xl\">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-4xl tw-font-normal tw-text-gray-800 tw-mb-6\">:</div>\n\n      <!-- Seconds -->\n      <div class=\"tw-flex tw-flex-col tw-items-center\">\n        <button \n          type=\"button\"\n          class=\"tw-w-10 tw-h-10 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-xl\">expand_less</span>\n        </button>\n        <div class=\"tw-text-4xl tw-font-normal tw-text-gray-800 tw-my-2 tw-w-16 tw-text-center\">\n          {{ timeSeconds.toString().padStart(2, '0') }}\n        </div>\n        <button \n          type=\"button\"\n          class=\"tw-w-10 tw-h-10 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-xl\">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-6\">\n      <div class=\"tw-inline-flex tw-rounded-lg tw-bg-gray-100 tw-p-1\">\n        <button \n          type=\"button\"\n          class=\"tw-px-6 tw-py-2 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-6 tw-py-2 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-6\">\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-3\">\n      <button \n        type=\"button\" \n        class=\"tw-flex-1 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded-lg tw-transition-colors\"\n        (click)=\"showDateTimePicker ? closeDateTimePicker() : closeTimePicker()\">\n        Cancel\n      </button>\n      <button \n        type=\"button\" \n        class=\"tw-flex-1 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded-lg tw-transition-colors tw-border-0\"\n        (click)=\"showDateTimePicker ? applyDateTime() : applyTime()\">\n        OK\n      </button>\n    </div>\n\n    <!-- Back to Date Button (only for datetime picker) -->\n    @if (showDateTimePicker && dateTimeStep === 'time') {\n      <div class=\"tw-text-center tw-mt-4\">\n        <button \n          type=\"button\" \n          class=\"tw-text-sm tw-text-blue-600 hover:tw-text-blue-700 tw-underline tw-border-0 tw-bg-transparent tw-p-0\"\n          (click)=\"backToDateSelection()\">\n          \u2190 Back to Date\n        </button>\n      </div>\n    }\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:#6b7280}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:#f3f4f6;transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid rgb(229,231,235);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.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:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out}.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:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out}.cide-datetime-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"] }]
+                    ], template: "<div class=\"cide-input\">\r\n    <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\r\n    @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === '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\"\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:#6b7280}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:#f3f4f6;transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid rgb(229,231,235);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out}.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:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out}.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:#fff;border:1px solid rgb(229,231,235);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out}.cide-datetime-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fill: [{
                 type: Input
             }], label: [{
@@ -1719,6 +1730,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             }], timePickerTemplate: [{
                 type: ViewChild,
                 args: ['timePickerTemplate', { static: true }]
+            }], dateTimePickerTemplate: [{
+                type: ViewChild,
+                args: ['dateTimePickerTemplate', { static: true }]
             }] } });
 
 class CideSelectOptionComponent {
@@ -2560,7 +2574,7 @@ class CideSelectComponent {
                 multi: true,
                 useExisting: forwardRef(() => CideSelectComponent),
             }
-        ], queries: [{ propertyName: "optionComponents", predicate: CideSelectOptionComponent }], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-select\" [ngClass]=\"{\n  'cide-element-size-xxs': (size === '2xs'),\n  'cide-element-size-xs': (size === 'xs'),\n  'cide-element-size-sm': (size === 'sm'),\n  'cide-element-size-md': (size === 'md'),\n  'cide-element-size-lg': (size === 'lg'),\n  'cide-element-input-label-floating': (labelPlacement === 'floating'),\n  'cide-element-input-label-start': (labelDir === 'start'),\n  'cide-element-input-label-end': (labelDir === 'end'),\n  'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n  'cide-element-input-label-less': (!label || labelHide),\n  'cide-element-style-outline': (fill === 'outline'),\n  'cide-element-style-solid': (fill === 'solid'),\n  'cide-element-style-standard': (fill === 'standard'),\n}\">\n  @if (label && !labelHide) {\n  <label [for]=\"id\" class=\"cide-select-label\">\n    {{ label }}\n    @if (required) {\n      <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n    }\n  </label>\n  }\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    @if (leadingIcon) {\n    <span class=\"cide-input-leading-icon-wrapper\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\n    }\n\n    <!-- Select Button -->\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"{\n        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n        'tw-pl-1': !leadingIcon,\n        'tw-pr-8': trailingIcon || clearInput || loading,\n        'tw-pr-1': !trailingIcon && !clearInput && !loading,\n        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n        'tw-h-7': size === 'sm',\n        '!tw-mt-0': labelHide,\n        'tw-opacity-50 tw-cursor-not-allowed': disabled,\n        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer': true\n      }\" class=\"cide-select-button\">\n\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n      </span>\n    </button>\n\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n    @if (!clearInput || !ngModel || loading) {\n    <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n      <!-- Loading Spinner -->\n      @if (loading) {\n      <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n        <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"tw-opacity-75\" fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n          </path>\n        </svg>\n      </span>\n      }\n      <!-- Dropdown Arrow -->\n      @if (!loading) {\n      <span\n        class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n        [ngClass]=\"{'tw-rotate-180': isOpen}\">\n        expand_more\n      </span>\n      }\n    </span>\n    }\n\n    <!-- Clear Button -->\n    @if (clearInput && ngModel) {\n    <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n    }\n\n\n  </div>\n\n  <!-- Error/Helper Text -->\n  @if ((errorText || helperText) && !isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  }\n  @if (helperText && isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n  }\n\n  <!-- Portal Container -->\n  <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n  <div\n    class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n    <!-- Search Input (if searchable and showSearchInput is true) -->\n    @if (context?.searchable && showSearchInput) {\n    <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n      <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n        (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n        (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n        class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"tw-py-1\">\n      <!-- Loading State -->\n      @if (context?.loading) {\n      <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n          <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n            viewBox=\"0 0 24 24\">\n            <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"tw-opacity-75\" fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n            </path>\n          </svg>\n          <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n        </div>\n      </div>\n      }\n      <!-- Options -->\n      @if (!context?.loading) {\n      @for (option of context?.options; track $index) {\n      <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n        (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n        [disabled]=\"option.disabled\" [ngClass]=\"{\n              'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n              'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n        {{ context?.getOptionLabel(option) }}\n      </button>\n      }\n      }\n\n      <!-- No options message -->\n      @if (!context?.loading && context?.options.length === 0) {\n      <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n        {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [".cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], queries: [{ propertyName: "optionComponents", predicate: CideSelectOptionComponent }], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-select\" [ngClass]=\"{\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-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}\">\r\n  @if (label && !labelHide) {\r\n  <label [for]=\"id\" class=\"cide-select-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  <div class=\"cide-element-select-wrapper tw-relative\">\r\n    <!-- Leading Icon -->\r\n    @if (leadingIcon) {\r\n    <span class=\"cide-input-leading-icon-wrapper\">\r\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n    </span>\r\n    }\r\n\r\n    <!-- Select Button -->\r\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [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': trailingIcon || clearInput || loading,\r\n        'tw-pr-1': !trailingIcon && !clearInput && !loading,\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        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer': true\r\n      }\" class=\"cide-select-button\">\r\n\r\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\r\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\r\n      </span>\r\n    </button>\r\n\r\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\r\n    @if (!clearInput || !ngModel || loading) {\r\n    <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\r\n      <!-- Loading Spinner -->\r\n      @if (loading) {\r\n      <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\r\n        <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n          <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n          <path class=\"tw-opacity-75\" fill=\"currentColor\"\r\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\r\n          </path>\r\n        </svg>\r\n      </span>\r\n      }\r\n      <!-- Dropdown Arrow -->\r\n      @if (!loading) {\r\n      <span\r\n        class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\r\n        [ngClass]=\"{'tw-rotate-180': isOpen}\">\r\n        expand_more\r\n      </span>\r\n      }\r\n    </span>\r\n    }\r\n\r\n    <!-- Clear Button -->\r\n    @if (clearInput && ngModel) {\r\n    <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\r\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n    </button>\r\n    }\r\n\r\n\r\n  </div>\r\n\r\n  <!-- Error/Helper Text -->\r\n  @if ((errorText || helperText) && !isValid) {\r\n  <span class=\"cide-select-help-error-text\">\r\n    {{ errorText || helperText }}\r\n  </span>\r\n  }\r\n  @if (helperText && isValid) {\r\n  <span class=\"cide-select-help-error-text\">\r\n    {{ helperText }}\r\n  </span>\r\n  }\r\n\r\n  <!-- Portal Container -->\r\n  <div #dropdownContainer></div>\r\n</div>\r\n\r\n<!-- Portal Template for Dropdown -->\r\n<ng-template #dropdownTemplate let-context=\"context\">\r\n  <div\r\n    class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\r\n    <!-- Search Input (if searchable and showSearchInput is true) -->\r\n    @if (context?.searchable && showSearchInput) {\r\n    <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\r\n      <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\r\n        (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\r\n        (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\r\n        class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\r\n    </div>\r\n    }\r\n\r\n    <!-- Options List -->\r\n    <div class=\"tw-py-1\">\r\n      <!-- Loading State -->\r\n      @if (context?.loading) {\r\n      <div class=\"tw-px-3 tw-py-4 tw-text-center\">\r\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\r\n          <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\r\n            viewBox=\"0 0 24 24\">\r\n            <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path class=\"tw-opacity-75\" fill=\"currentColor\"\r\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\r\n        </div>\r\n      </div>\r\n      }\r\n      <!-- Options -->\r\n      @if (!context?.loading) {\r\n      @for (option of context?.options; track $index) {\r\n      <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\r\n        (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\r\n        [disabled]=\"option.disabled\" [ngClass]=\"{\r\n              'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\r\n              'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\r\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\r\n            }\" class=\"cide-select-option\">\r\n        {{ context?.getOptionLabel(option) }}\r\n      </button>\r\n      }\r\n      }\r\n\r\n      <!-- No options message -->\r\n      @if (!context?.loading && context?.options.length === 0) {\r\n      <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\r\n        {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideSelectComponent, decorators: [{
             type: Component,
@@ -2575,7 +2589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => CideSelectComponent),
                         }
-                    ], template: "<div class=\"cide-select\" [ngClass]=\"{\n  'cide-element-size-xxs': (size === '2xs'),\n  'cide-element-size-xs': (size === 'xs'),\n  'cide-element-size-sm': (size === 'sm'),\n  'cide-element-size-md': (size === 'md'),\n  'cide-element-size-lg': (size === 'lg'),\n  'cide-element-input-label-floating': (labelPlacement === 'floating'),\n  'cide-element-input-label-start': (labelDir === 'start'),\n  'cide-element-input-label-end': (labelDir === 'end'),\n  'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n  'cide-element-input-label-less': (!label || labelHide),\n  'cide-element-style-outline': (fill === 'outline'),\n  'cide-element-style-solid': (fill === 'solid'),\n  'cide-element-style-standard': (fill === 'standard'),\n}\">\n  @if (label && !labelHide) {\n  <label [for]=\"id\" class=\"cide-select-label\">\n    {{ label }}\n    @if (required) {\n      <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n    }\n  </label>\n  }\n\n  <div class=\"cide-element-select-wrapper tw-relative\">\n    <!-- Leading Icon -->\n    @if (leadingIcon) {\n    <span class=\"cide-input-leading-icon-wrapper\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\n    }\n\n    <!-- Select Button -->\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"{\n        'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\n        'tw-rounded-md': !(label && labelPlacement === 'fixed'),\n        'tw-pl-1': !leadingIcon,\n        'tw-pr-8': trailingIcon || clearInput || loading,\n        'tw-pr-1': !trailingIcon && !clearInput && !loading,\n        'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\n        'tw-h-7': size === 'sm',\n        '!tw-mt-0': labelHide,\n        'tw-opacity-50 tw-cursor-not-allowed': disabled,\n        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer': true\n      }\" class=\"cide-select-button\">\n\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\n      </span>\n    </button>\n\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n    @if (!clearInput || !ngModel || loading) {\n    <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n      <!-- Loading Spinner -->\n      @if (loading) {\n      <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n        <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"tw-opacity-75\" fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n          </path>\n        </svg>\n      </span>\n      }\n      <!-- Dropdown Arrow -->\n      @if (!loading) {\n      <span\n        class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n        [ngClass]=\"{'tw-rotate-180': isOpen}\">\n        expand_more\n      </span>\n      }\n    </span>\n    }\n\n    <!-- Clear Button -->\n    @if (clearInput && ngModel) {\n    <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n    }\n\n\n  </div>\n\n  <!-- Error/Helper Text -->\n  @if ((errorText || helperText) && !isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ errorText || helperText }}\n  </span>\n  }\n  @if (helperText && isValid) {\n  <span class=\"cide-select-help-error-text\">\n    {{ helperText }}\n  </span>\n  }\n\n  <!-- Portal Container -->\n  <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n  <div\n    class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n    <!-- Search Input (if searchable and showSearchInput is true) -->\n    @if (context?.searchable && showSearchInput) {\n    <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n      <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n        (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n        (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n        class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"tw-py-1\">\n      <!-- Loading State -->\n      @if (context?.loading) {\n      <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n          <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n            viewBox=\"0 0 24 24\">\n            <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"tw-opacity-75\" fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n            </path>\n          </svg>\n          <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n        </div>\n      </div>\n      }\n      <!-- Options -->\n      @if (!context?.loading) {\n      @for (option of context?.options; track $index) {\n      <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n        (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n        [disabled]=\"option.disabled\" [ngClass]=\"{\n              'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n              'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\n            }\" class=\"cide-select-option\">\n        {{ context?.getOptionLabel(option) }}\n      </button>\n      }\n      }\n\n      <!-- No options message -->\n      @if (!context?.loading && context?.options.length === 0) {\n      <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n        {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [".cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
+                    ], template: "<div class=\"cide-select\" [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-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}\">\r\n  @if (label && !labelHide) {\r\n  <label [for]=\"id\" class=\"cide-select-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  <div class=\"cide-element-select-wrapper tw-relative\">\r\n    <!-- Leading Icon -->\r\n    @if (leadingIcon) {\r\n    <span class=\"cide-input-leading-icon-wrapper\">\r\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n    </span>\r\n    }\r\n\r\n    <!-- Select Button -->\r\n    <button type=\"button\" [id]=\"id\" [disabled]=\"disabled\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [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': trailingIcon || clearInput || loading,\r\n        'tw-pr-1': !trailingIcon && !clearInput && !loading,\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        'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer': true\r\n      }\" class=\"cide-select-button\">\r\n\r\n      <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\r\n        {{ ngModel ? getSelectedOptionLabel() : placeholder }}\r\n      </span>\r\n    </button>\r\n\r\n    <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\r\n    @if (!clearInput || !ngModel || loading) {\r\n    <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\r\n      <!-- Loading Spinner -->\r\n      @if (loading) {\r\n      <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\r\n        <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n          <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n          <path class=\"tw-opacity-75\" fill=\"currentColor\"\r\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\r\n          </path>\r\n        </svg>\r\n      </span>\r\n      }\r\n      <!-- Dropdown Arrow -->\r\n      @if (!loading) {\r\n      <span\r\n        class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\r\n        [ngClass]=\"{'tw-rotate-180': isOpen}\">\r\n        expand_more\r\n      </span>\r\n      }\r\n    </span>\r\n    }\r\n\r\n    <!-- Clear Button -->\r\n    @if (clearInput && ngModel) {\r\n    <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\r\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n    </button>\r\n    }\r\n\r\n\r\n  </div>\r\n\r\n  <!-- Error/Helper Text -->\r\n  @if ((errorText || helperText) && !isValid) {\r\n  <span class=\"cide-select-help-error-text\">\r\n    {{ errorText || helperText }}\r\n  </span>\r\n  }\r\n  @if (helperText && isValid) {\r\n  <span class=\"cide-select-help-error-text\">\r\n    {{ helperText }}\r\n  </span>\r\n  }\r\n\r\n  <!-- Portal Container -->\r\n  <div #dropdownContainer></div>\r\n</div>\r\n\r\n<!-- Portal Template for Dropdown -->\r\n<ng-template #dropdownTemplate let-context=\"context\">\r\n  <div\r\n    class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\r\n    <!-- Search Input (if searchable and showSearchInput is true) -->\r\n    @if (context?.searchable && showSearchInput) {\r\n    <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\r\n      <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\r\n        (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\r\n        (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\r\n        class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\r\n    </div>\r\n    }\r\n\r\n    <!-- Options List -->\r\n    <div class=\"tw-py-1\">\r\n      <!-- Loading State -->\r\n      @if (context?.loading) {\r\n      <div class=\"tw-px-3 tw-py-4 tw-text-center\">\r\n        <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\r\n          <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\r\n            viewBox=\"0 0 24 24\">\r\n            <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n            <path class=\"tw-opacity-75\" fill=\"currentColor\"\r\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\r\n        </div>\r\n      </div>\r\n      }\r\n      <!-- Options -->\r\n      @if (!context?.loading) {\r\n      @for (option of context?.options; track $index) {\r\n      <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\r\n        (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\r\n        [disabled]=\"option.disabled\" [ngClass]=\"{\r\n              'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\r\n              'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\r\n              'tw-text-gray-400 tw-cursor-not-allowed': option.disabled\r\n            }\" class=\"cide-select-option\">\r\n        {{ context?.getOptionLabel(option) }}\r\n      </button>\r\n      }\r\n      }\r\n\r\n      <!-- No options message -->\r\n      @if (!context?.loading && context?.options.length === 0) {\r\n      <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\r\n        {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { optionComponents: [{
                 type: ContentChildren,
                 args: [CideSelectOptionComponent]
@@ -5102,7 +5116,7 @@ class CideEleFileInputComponent {
                 useExisting: CideEleFileInputComponent,
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"tw-relative\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n          <div class=\"tw-mb-2\">\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"tw-relative tw-w-full tw-h-full\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n          <div class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n            <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Modern Drag and Drop Zone -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getDragDropZoneClasses()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      \n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n        <!-- Icon and Text -->\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \n                         [class]=\"getIconClasses()\" \n                         size=\"sm\">\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n          </cide-ele-icon>\n          \n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n            @if (isDragOver()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop files here</span>\n            } @else if (hasFiles()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                @if (multipleSignal() && fileNames().length > 1) {\n                  {{ fileNames().length }} files selected\n                } @else {\n                  {{ fileNames()[0] }}\n                }\n              </span>\n              @if (totalFileSize() > 0) {\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n              }\n            } @else {\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n              </span>\n            }\n          </div>\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n          @if (hasFiles()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\" \n                    (click)=\"clearFiles(); $event.stopPropagation()\"\n                    title=\"Clear files\">\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"tw-mt-3\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"tw-w-full tw-h-full tw-object-cover\"\n              loading=\"lazy\">\n            <div class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div> ", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\r\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\r\n  @if (labelSignal() && !isPreviewBoxMode()) {\r\n    <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\" [attr.for]=\"'cide-file-input-' + id()\">\r\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\r\n    </label>\r\n  }\r\n  \r\n  <!-- Preview Box Mode -->\r\n  @if (isPreviewBoxMode()) {\r\n    <div class=\"tw-relative\">\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id()\"\r\n      [attr.accept]=\"acceptSignal()\"\r\n      [attr.multiple]=\"multipleSignal() ? true : null\"\r\n      [disabled]=\"disabledSignal()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"tw-hidden\"\r\n    />\r\n    \r\n    <!-- Preview Box -->\r\n    <div \r\n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\r\n      [class]=\"getPreviewBoxClasses()\"\r\n      [style.width]=\"previewWidthSignal()\"\r\n      [style.height]=\"previewHeightSignal()\"\r\n      (click)=\"triggerFileSelect()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragenter)=\"onDragEnter($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\r\n      \r\n      <!-- No Image State -->\r\n      @if (!hasImages()) {\r\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\r\n          <div class=\"tw-mb-2\">\r\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\r\n          </div>\r\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\r\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\r\n          </div>\r\n        </div>\r\n      }\r\n      \r\n      <!-- Image Preview State -->\r\n      @if (hasImages()) {\r\n        <div class=\"tw-relative tw-w-full tw-h-full\">\r\n          <img \r\n            [src]=\"previewUrls()[0]\" \r\n            [alt]=\"fileNames()[0] || 'Preview image'\"\r\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\r\n          <div class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\r\n            <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">Click to change</div>\r\n          </div>\r\n          @if (!disabledSignal()) {\r\n            <button \r\n              type=\"button\" \r\n              class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\r\n              (click)=\"clearFiles(); $event.stopPropagation()\"\r\n              title=\"Remove image\">\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <!-- File name display for preview box mode -->\r\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\r\n      <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\r\n        {{ fileNames()[0] }}\r\n      </div>\r\n    }\r\n    </div>\r\n  }\r\n\r\n  <!-- Standard Mode -->\r\n  @if (!isPreviewBoxMode()) {\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id()\"\r\n      [attr.accept]=\"acceptSignal()\"\r\n      [attr.multiple]=\"multipleSignal() ? true : null\"\r\n      [disabled]=\"disabledSignal()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"tw-hidden\"\r\n    />\r\n    \r\n    <!-- Modern Drag and Drop Zone -->\r\n    <div \r\n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\r\n      [class]=\"getDragDropZoneClasses()\"\r\n      (click)=\"triggerFileSelect()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragenter)=\"onDragEnter($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\">\r\n      \r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\r\n        <!-- Icon and Text -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\r\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \r\n                         [class]=\"getIconClasses()\" \r\n                         size=\"sm\">\r\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\r\n          </cide-ele-icon>\r\n          \r\n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\r\n            @if (isDragOver()) {\r\n              <span class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop files here</span>\r\n            } @else if (hasFiles()) {\r\n              <span class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\r\n                @if (multipleSignal() && fileNames().length > 1) {\r\n                  {{ fileNames().length }} files selected\r\n                } @else {\r\n                  {{ fileNames()[0] }}\r\n                }\r\n              </span>\r\n              @if (totalFileSize() > 0) {\r\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\r\n              }\r\n            } @else {\r\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\r\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\r\n              </span>\r\n            }\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Action Buttons -->\r\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\r\n          @if (hasFiles()) {\r\n            <button type=\"button\" \r\n                    class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\" \r\n                    (click)=\"clearFiles(); $event.stopPropagation()\"\r\n                    title=\"Clear files\">\r\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <!-- Image Preview Section (only for standard mode) -->\r\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\r\n    <div class=\"tw-mt-3\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\r\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\r\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\r\n          <div \r\n            class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\r\n            [style.width]=\"previewWidthSignal()\"\r\n            [style.height]=\"previewHeightSignal()\">\r\n            <button \r\n              type=\"button\" \r\n              class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\r\n              (click)=\"removePreview(i)\"\r\n              title=\"Remove image\">\r\n              \u00D7\r\n            </button>\r\n            <img \r\n              [src]=\"previewUrl\" \r\n              [alt]=\"fileNames()[i] || 'Preview image'\"\r\n              class=\"tw-w-full tw-h-full tw-object-cover\"\r\n              loading=\"lazy\">\r\n            <div class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">{{ fileNames()[i] }}</div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\r\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\r\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\r\n          @if (hasActiveUploads()) {\r\n            {{ getActiveUploadCount() }} uploading\r\n          } @else if (getUploadCount() > 0) {\r\n            {{ getUploadCount() }} completed\r\n          } @else if (hasEverUploaded()) {\r\n            View uploads\r\n          }\r\n        </span>\r\n      </div>\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\r\n        (click)=\"showFloatingUploaderDialog()\"\r\n        title=\"View upload progress and history\">\r\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n  \r\n  @if (errorTextSignal()) {\r\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\r\n  }\r\n  @if (helperTextSignal() && !errorTextSignal()) {\r\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\r\n  }\r\n</div> ", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFileInputComponent, decorators: [{
             type: Component,
@@ -5117,7 +5131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             useExisting: CideEleFileInputComponent,
                             multi: true
                         }
-                    ], template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\n  @if (labelSignal() && !isPreviewBoxMode()) {\n    <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\" [attr.for]=\"'cide-file-input-' + id()\">\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\n    </label>\n  }\n  \n  <!-- Preview Box Mode -->\n  @if (isPreviewBoxMode()) {\n    <div class=\"tw-relative\">\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Preview Box -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getPreviewBoxClasses()\"\n      [style.width]=\"previewWidthSignal()\"\n      [style.height]=\"previewHeightSignal()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\n      \n      <!-- No Image State -->\n      @if (!hasImages()) {\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\n          <div class=\"tw-mb-2\">\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\n          </div>\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\n          </div>\n        </div>\n      }\n      \n      <!-- Image Preview State -->\n      @if (hasImages()) {\n        <div class=\"tw-relative tw-w-full tw-h-full\">\n          <img \n            [src]=\"previewUrls()[0]\" \n            [alt]=\"fileNames()[0] || 'Preview image'\"\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\n          <div class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\n            <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">Click to change</div>\n          </div>\n          @if (!disabledSignal()) {\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n              (click)=\"clearFiles(); $event.stopPropagation()\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n          }\n        </div>\n      }\n    </div>\n    \n    <!-- File name display for preview box mode -->\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\n      <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\n        {{ fileNames()[0] }}\n      </div>\n    }\n    </div>\n  }\n\n  <!-- Standard Mode -->\n  @if (!isPreviewBoxMode()) {\n    <!-- Hidden file input -->\n    <input\n      type=\"file\"\n      [attr.id]=\"'cide-file-input-' + id()\"\n      [attr.accept]=\"acceptSignal()\"\n      [attr.multiple]=\"multipleSignal() ? true : null\"\n      [disabled]=\"disabledSignal()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"tw-hidden\"\n    />\n    \n    <!-- Modern Drag and Drop Zone -->\n    <div \n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\n      [class]=\"getDragDropZoneClasses()\"\n      (click)=\"triggerFileSelect()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragenter)=\"onDragEnter($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      \n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\n        <!-- Icon and Text -->\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \n                         [class]=\"getIconClasses()\" \n                         size=\"sm\">\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\n          </cide-ele-icon>\n          \n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\n            @if (isDragOver()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop files here</span>\n            } @else if (hasFiles()) {\n              <span class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                @if (multipleSignal() && fileNames().length > 1) {\n                  {{ fileNames().length }} files selected\n                } @else {\n                  {{ fileNames()[0] }}\n                }\n              </span>\n              @if (totalFileSize() > 0) {\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\n              }\n            } @else {\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\n              </span>\n            }\n          </div>\n        </div>\n        \n        <!-- Action Buttons -->\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\n          @if (hasFiles()) {\n            <button type=\"button\" \n                    class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\" \n                    (click)=\"clearFiles(); $event.stopPropagation()\"\n                    title=\"Clear files\">\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n  \n  <!-- Image Preview Section (only for standard mode) -->\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\n    <div class=\"tw-mt-3\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\n          <div \n            class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\n            [style.width]=\"previewWidthSignal()\"\n            [style.height]=\"previewHeightSignal()\">\n            <button \n              type=\"button\" \n              class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\n              (click)=\"removePreview(i)\"\n              title=\"Remove image\">\n              \u00D7\n            </button>\n            <img \n              [src]=\"previewUrl\" \n              [alt]=\"fileNames()[i] || 'Preview image'\"\n              class=\"tw-w-full tw-h-full tw-object-cover\"\n              loading=\"lazy\">\n            <div class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">{{ fileNames()[i] }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\n          @if (hasActiveUploads()) {\n            {{ getActiveUploadCount() }} uploading\n          } @else if (getUploadCount() > 0) {\n            {{ getUploadCount() }} completed\n          } @else if (hasEverUploaded()) {\n            View uploads\n          }\n        </span>\n      </div>\n      <button \n        type=\"button\" \n        class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\n        (click)=\"showFloatingUploaderDialog()\"\n        title=\"View upload progress and history\">\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\n      </button>\n    </div>\n  }\n  \n  @if (errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\n  }\n  @if (helperTextSignal() && !errorTextSignal()) {\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\n  }\n</div> " }]
+                    ], template: "<div class=\"tw-flex tw-flex-col tw-gap-2\">\r\n  <!-- Label (shown when not in preview box mode or when preview box mode but no label override) -->\r\n  @if (labelSignal() && !isPreviewBoxMode()) {\r\n    <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-1.5 tw-leading-5\" [attr.for]=\"'cide-file-input-' + id()\">\r\n      {{ labelSignal() }}@if (requiredSignal()) {<span class=\"tw-text-red-500 dark:tw-text-red-400\"> *</span>}\r\n    </label>\r\n  }\r\n  \r\n  <!-- Preview Box Mode -->\r\n  @if (isPreviewBoxMode()) {\r\n    <div class=\"tw-relative\">\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id()\"\r\n      [attr.accept]=\"acceptSignal()\"\r\n      [attr.multiple]=\"multipleSignal() ? true : null\"\r\n      [disabled]=\"disabledSignal()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"tw-hidden\"\r\n    />\r\n    \r\n    <!-- Preview Box -->\r\n    <div \r\n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-overflow-hidden hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\r\n      [class]=\"getPreviewBoxClasses()\"\r\n      [style.width]=\"previewWidthSignal()\"\r\n      [style.height]=\"previewHeightSignal()\"\r\n      (click)=\"triggerFileSelect()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragenter)=\"onDragEnter($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\"\r\n      [attr.title]=\"disabledSignal() ? 'File selection disabled' : placeholderTextSignal()\">\r\n      \r\n      <!-- No Image State -->\r\n      @if (!hasImages()) {\r\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-h-full tw-p-4\">\r\n          <div class=\"tw-mb-2\">\r\n            <cide-ele-icon class=\"tw-text-gray-400 dark:tw-text-gray-500\" size=\"lg\">{{ isDragOver() ? '\uD83D\uDCC1' : placeholderIconSignal() }}</cide-ele-icon>\r\n          </div>\r\n          <div class=\"tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center\">\r\n            {{ isDragOver() ? 'Drop files here...' : placeholderTextSignal() }}\r\n          </div>\r\n        </div>\r\n      }\r\n      \r\n      <!-- Image Preview State -->\r\n      @if (hasImages()) {\r\n        <div class=\"tw-relative tw-w-full tw-h-full\">\r\n          <img \r\n            [src]=\"previewUrls()[0]\" \r\n            [alt]=\"fileNames()[0] || 'Preview image'\"\r\n            class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-lg\">\r\n          <div class=\"tw-absolute tw-inset-0 tw-bg-black tw-bg-opacity-0 hover:tw-bg-opacity-30 tw-transition-all tw-duration-200 tw-flex tw-items-center tw-justify-center tw-rounded-lg\">\r\n            <div class=\"tw-text-white tw-text-sm tw-opacity-0 hover:tw-opacity-100 tw-transition-opacity tw-duration-200\">Click to change</div>\r\n          </div>\r\n          @if (!disabledSignal()) {\r\n            <button \r\n              type=\"button\" \r\n              class=\"tw-absolute tw-top-2 tw-right-2 tw-w-6 tw-h-6 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-sm tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\r\n              (click)=\"clearFiles(); $event.stopPropagation()\"\r\n              title=\"Remove image\">\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <!-- File name display for preview box mode -->\r\n    @if (hasImages() && fileNames().length && showFileNameSignal()) {\r\n      <div class=\"tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-truncate\">\r\n        {{ fileNames()[0] }}\r\n      </div>\r\n    }\r\n    </div>\r\n  }\r\n\r\n  <!-- Standard Mode -->\r\n  @if (!isPreviewBoxMode()) {\r\n    <!-- Hidden file input -->\r\n    <input\r\n      type=\"file\"\r\n      [attr.id]=\"'cide-file-input-' + id()\"\r\n      [attr.accept]=\"acceptSignal()\"\r\n      [attr.multiple]=\"multipleSignal() ? true : null\"\r\n      [disabled]=\"disabledSignal()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"tw-hidden\"\r\n    />\r\n    \r\n    <!-- Modern Drag and Drop Zone -->\r\n    <div \r\n      class=\"tw-border-2 tw-border-dashed tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-gray-50 dark:tw-bg-gray-800 tw-cursor-pointer tw-transition-all tw-duration-200 tw-min-h-[60px] hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20\"\r\n      [class]=\"getDragDropZoneClasses()\"\r\n      (click)=\"triggerFileSelect()\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragenter)=\"onDragEnter($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      (drop)=\"onDrop($event)\">\r\n      \r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-p-3 tw-gap-3\">\r\n        <!-- Icon and Text -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-2.5 tw-flex-1 tw-min-w-0\">\r\n          <cide-ele-icon class=\"tw-flex-shrink-0 tw-transition-colors tw-duration-200\" \r\n                         [class]=\"getIconClasses()\" \r\n                         size=\"sm\">\r\n            {{ isDragOver() ? 'file_download' : (hasFiles() ? 'check_circle' : 'cloud_upload') }}\r\n          </cide-ele-icon>\r\n          \r\n          <div class=\"tw-flex tw-flex-col tw-gap-0.5 tw-min-w-0\">\r\n            @if (isDragOver()) {\r\n              <span class=\"tw-text-sm tw-font-medium tw-text-blue-700 dark:tw-text-blue-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">Drop files here</span>\r\n            } @else if (hasFiles()) {\r\n              <span class=\"tw-text-sm tw-font-medium tw-text-emerald-700 dark:tw-text-emerald-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\r\n                @if (multipleSignal() && fileNames().length > 1) {\r\n                  {{ fileNames().length }} files selected\r\n                } @else {\r\n                  {{ fileNames()[0] }}\r\n                }\r\n              </span>\r\n              @if (totalFileSize() > 0) {\r\n                <span class=\"tw-text-xs tw-text-emerald-600 dark:tw-text-emerald-400\">{{ fileSizeInMB() }} MB</span>\r\n              }\r\n            } @else {\r\n              <span class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis\">\r\n                {{ multipleSignal() ? 'Choose files or drag here' : 'Choose file or drag here' }}\r\n              </span>\r\n            }\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Action Buttons -->\r\n        <div class=\"tw-flex tw-gap-1 tw-flex-shrink-0\">\r\n          @if (hasFiles()) {\r\n            <button type=\"button\" \r\n                    class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-border-none tw-rounded tw-bg-transparent tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-red-600 hover:tw-bg-red-50 dark:hover:tw-bg-red-900/20 hover:tw-text-red-700\" \r\n                    (click)=\"clearFiles(); $event.stopPropagation()\"\r\n                    title=\"Clear files\">\r\n              <cide-ele-icon size=\"xs\">close</cide-ele-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <!-- Image Preview Section (only for standard mode) -->\r\n  @if (isImagePreviewAvailable() && !isPreviewBoxMode()) {\r\n    <div class=\"tw-mt-3\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200 tw-mb-2\">Preview:</div>\r\n      <div class=\"tw-flex tw-flex-wrap tw-gap-3\">\r\n        @for (previewUrl of previewUrls(); track previewUrl; let i = $index) {\r\n          <div \r\n            class=\"tw-relative tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-lg tw-overflow-hidden tw-bg-white dark:tw-bg-gray-800\"\r\n            [style.width]=\"previewWidthSignal()\"\r\n            [style.height]=\"previewHeightSignal()\">\r\n            <button \r\n              type=\"button\" \r\n              class=\"tw-absolute tw-top-1 tw-right-1 tw-w-5 tw-h-5 tw-bg-red-500 hover:tw-bg-red-600 tw-text-white tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer tw-z-10\"\r\n              (click)=\"removePreview(i)\"\r\n              title=\"Remove image\">\r\n              \u00D7\r\n            </button>\r\n            <img \r\n              [src]=\"previewUrl\" \r\n              [alt]=\"fileNames()[i] || 'Preview image'\"\r\n              class=\"tw-w-full tw-h-full tw-object-cover\"\r\n              loading=\"lazy\">\r\n            <div class=\"tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-bg-black tw-bg-opacity-75 tw-text-white tw-text-xs tw-p-1 tw-truncate\">{{ fileNames()[i] }}</div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <!-- Upload Status and Show Files Button (only for multiple file inputs) -->\r\n  @if (multiple && showFloatingUploaderSignal() && (getUploadCount() > 0 || hasActiveUploads() || hasEverUploaded())) {\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-py-1.5 tw-gap-2\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 dark:tw-text-blue-400\" size=\"sm\">cloud_upload</cide-ele-icon>\r\n        <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">\r\n          @if (hasActiveUploads()) {\r\n            {{ getActiveUploadCount() }} uploading\r\n          } @else if (getUploadCount() > 0) {\r\n            {{ getUploadCount() }} completed\r\n          } @else if (hasEverUploaded()) {\r\n            View uploads\r\n          }\r\n        </span>\r\n      </div>\r\n      <button \r\n        type=\"button\" \r\n        class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-md tw-bg-gray-100 dark:tw-bg-gray-700 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 tw-text-gray-600 dark:tw-text-gray-300 tw-transition-colors tw-duration-200 tw-border-none tw-cursor-pointer\"\r\n        (click)=\"showFloatingUploaderDialog()\"\r\n        title=\"View upload progress and history\">\r\n        <cide-ele-icon size=\"sm\">visibility</cide-ele-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n  \r\n  @if (errorTextSignal()) {\r\n    <div class=\"tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-1\">{{ errorTextSignal() }}</div>\r\n  }\r\n  @if (helperTextSignal() && !errorTextSignal()) {\r\n    <div class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400 tw-mt-1\">{{ helperTextSignal() }}</div>\r\n  }\r\n</div> " }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], accept: [{
@@ -5597,14 +5611,14 @@ class CideEleFloatingFileUploaderComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", inputs: { data: "data" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-overflow-hidden\">\n    <!-- Content starts directly - no header needed since floating container provides it -->\n\n  <!-- Content -->\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-pb-4\">\n    \n    <!-- Drag and Drop Zone -->\n    <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-bg-gray-50 tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-center hover:tw-border-blue-500 hover:tw-bg-blue-50\" \n         [class.tw-border-blue-500]=\"isDragOver()\"\n         [class.tw-bg-blue-100]=\"isDragOver()\"\n         [class.tw-scale-105]=\"isDragOver()\"\n         (dragover)=\"onDragOver($event)\"\n         (dragleave)=\"onDragLeave($event)\" \n         (drop)=\"onDrop($event)\" \n         (click)=\"triggerFileInput()\">\n      \n      <!-- Hidden file input -->\n      <input #fileInput \n             type=\"file\" \n             [multiple]=\"data.multiple !== false\" \n             [accept]=\"data.allowedFileTypes?.join(',') || '*/*'\" \n             (change)=\"onFileInputChange($event)\" \n             class=\"tw-hidden\">\n      \n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-colors tw-duration-200\" \n                       [class.tw-text-blue-500]=\"isDragOver()\"\n                       size=\"sm\">cloud_upload</cide-ele-icon>\n        \n        <div>\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n          </div>\n          @if (data.description) {\n          <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ data.description }}</div>\n          }\n        </div>\n      </div>\n    </div>\n    \n    <!-- Upload Queue - Show files from service state -->\n    @if (allFilesForGroup().length > 0) {\n    <div class=\"tw-space-y-2\">\n      <!-- Show all files from service state -->\n      @for (file of allFilesForGroup(); track file.fileId) {\n      <div class=\"tw-flex tw-items-center tw-px-4 tw-py-3 tw-rounded-lg tw-transition-colors tw-duration-200 tw-bg-white tw-border tw-border-gray-200 hover:tw-bg-gray-100 hover:tw-shadow-sm\"\n           [class.tw-bg-blue-50]=\"file.stage === 'uploading'\"\n           [class.tw-bg-green-50]=\"file.stage === 'complete'\"\n           [class.tw-bg-red-50]=\"file.stage === 'error'\">\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n          <div class=\"tw-min-w-0 tw-flex-1\">\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\">{{ file.fileName }}</div>\n            <div class=\"tw-text-xs\">\n              @switch (file.stage) {\n              @case ('pending') {\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Waiting...</span>\n              }\n              @case ('reading') {\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Reading...</span>\n              }\n              @case ('uploading') {\n              <span class=\"tw-text-blue-600 tw-font-medium\">Uploading...</span>\n              }\n              @case ('complete') {\n              <span class=\"tw-text-green-600 tw-font-medium\">Completed</span>\n              }\n              @case ('error') {\n              <span class=\"tw-text-red-600 tw-font-medium\">Failed</span>\n              }\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Progress Bar (only for uploading files) -->\n        @if (file.stage === 'uploading' && file.percentage !== undefined) {\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-ml-2 tw-min-w-[80px]\">\n          <div class=\"tw-flex-1 tw-h-1 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden\">\n            <div class=\"tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300\" [style.width.%]=\"file.percentage\"></div>\n          </div>\n          <span class=\"tw-text-xs tw-text-gray-500 tw-min-w-[24px] tw-text-right\">{{ file.percentage }}%</span>\n        </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n          @switch (file.stage) {\n          @case ('pending') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('reading') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('uploading') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('complete') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-text-green-600\" title=\"Completed\">\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n          </button>\n          }\n          @case ('error') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-blue-50 hover:tw-text-blue-600\" \n                  title=\"Retry\">\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n          </button>\n          }\n          }\n        </div>\n      </div>\n      }\n    </div>\n    } @else {\n    <!-- No uploads message when manually opened -->\n    <div class=\"tw-py-8 tw-text-center tw-text-gray-500\">\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\n        <cide-ele-icon size=\"md\" class=\"tw-text-gray-300 tw-opacity-70\">cloud_upload</cide-ele-icon>\n        <div>\n          <h4 class=\"tw-text-lg tw-font-semibold tw-text-gray-700 tw-mb-2\">No active uploads</h4>\n          <p class=\"tw-text-sm tw-text-gray-500\">Upload files to see their progress here</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n\n  <!-- Status summary - integrated into content -->\n  @if (hasActiveUploads()) {\n  <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\n    <div class=\"tw-flex tw-gap-3 tw-text-xs\">\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-blue-600\">\n        <cide-ele-icon size=\"xs\">upload</cide-ele-icon>\n        <span>{{ getUploadingCount() }} uploading</span>\n      </div>\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-green-600\">\n        <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n        <span>{{ getCompletedCount() }} completed</span>\n      </div>\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-red-600\">\n        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n        <span>{{ getFailedCount() }} failed</span>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingFileUploaderComponent, isStandalone: true, selector: "cide-ele-floating-file-uploader", inputs: { data: "data" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\r\n@if (isVisible()) {\r\n<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-overflow-hidden\">\r\n    <!-- Content starts directly - no header needed since floating container provides it -->\r\n\r\n  <!-- Content -->\r\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-pb-4\">\r\n    \r\n    <!-- Drag and Drop Zone -->\r\n    <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-bg-gray-50 tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-center hover:tw-border-blue-500 hover:tw-bg-blue-50\" \r\n         [class.tw-border-blue-500]=\"isDragOver()\"\r\n         [class.tw-bg-blue-100]=\"isDragOver()\"\r\n         [class.tw-scale-105]=\"isDragOver()\"\r\n         (dragover)=\"onDragOver($event)\"\r\n         (dragleave)=\"onDragLeave($event)\" \r\n         (drop)=\"onDrop($event)\" \r\n         (click)=\"triggerFileInput()\">\r\n      \r\n      <!-- Hidden file input -->\r\n      <input #fileInput \r\n             type=\"file\" \r\n             [multiple]=\"data.multiple !== false\" \r\n             [accept]=\"data.allowedFileTypes?.join(',') || '*/*'\" \r\n             (change)=\"onFileInputChange($event)\" \r\n             class=\"tw-hidden\">\r\n      \r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-colors tw-duration-200\" \r\n                       [class.tw-text-blue-500]=\"isDragOver()\"\r\n                       size=\"sm\">cloud_upload</cide-ele-icon>\r\n        \r\n        <div>\r\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">\r\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\r\n          </div>\r\n          @if (data.description) {\r\n          <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ data.description }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Upload Queue - Show files from service state -->\r\n    @if (allFilesForGroup().length > 0) {\r\n    <div class=\"tw-space-y-2\">\r\n      <!-- Show all files from service state -->\r\n      @for (file of allFilesForGroup(); track file.fileId) {\r\n      <div class=\"tw-flex tw-items-center tw-px-4 tw-py-3 tw-rounded-lg tw-transition-colors tw-duration-200 tw-bg-white tw-border tw-border-gray-200 hover:tw-bg-gray-100 hover:tw-shadow-sm\"\r\n           [class.tw-bg-blue-50]=\"file.stage === 'uploading'\"\r\n           [class.tw-bg-green-50]=\"file.stage === 'complete'\"\r\n           [class.tw-bg-red-50]=\"file.stage === 'error'\">\r\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0\">\r\n          <cide-ele-icon class=\"tw-flex-shrink-0\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\r\n          <div class=\"tw-min-w-0 tw-flex-1\">\r\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\">{{ file.fileName }}</div>\r\n            <div class=\"tw-text-xs\">\r\n              @switch (file.stage) {\r\n              @case ('pending') {\r\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Waiting...</span>\r\n              }\r\n              @case ('reading') {\r\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Reading...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"tw-text-blue-600 tw-font-medium\">Uploading...</span>\r\n              }\r\n              @case ('complete') {\r\n              <span class=\"tw-text-green-600 tw-font-medium\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"tw-text-red-600 tw-font-medium\">Failed</span>\r\n              }\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar (only for uploading files) -->\r\n        @if (file.stage === 'uploading' && file.percentage !== undefined) {\r\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-ml-2 tw-min-w-[80px]\">\r\n          <div class=\"tw-flex-1 tw-h-1 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden\">\r\n            <div class=\"tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300\" [style.width.%]=\"file.percentage\"></div>\r\n          </div>\r\n          <span class=\"tw-text-xs tw-text-gray-500 tw-min-w-[24px] tw-text-right\">{{ file.percentage }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"tw-flex tw-gap-1 tw-ml-2\">\r\n          @switch (file.stage) {\r\n          @case ('pending') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \r\n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('reading') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \r\n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \r\n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('complete') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-text-green-600\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-blue-50 hover:tw-text-blue-600\" \r\n                  title=\"Retry\">\r\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <!-- No uploads message when manually opened -->\r\n    <div class=\"tw-py-8 tw-text-center tw-text-gray-500\">\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\r\n        <cide-ele-icon size=\"md\" class=\"tw-text-gray-300 tw-opacity-70\">cloud_upload</cide-ele-icon>\r\n        <div>\r\n          <h4 class=\"tw-text-lg tw-font-semibold tw-text-gray-700 tw-mb-2\">No active uploads</h4>\r\n          <p class=\"tw-text-sm tw-text-gray-500\">Upload files to see their progress here</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Status summary - integrated into content -->\r\n  @if (hasActiveUploads()) {\r\n  <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\r\n    <div class=\"tw-flex tw-gap-3 tw-text-xs\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-blue-600\">\r\n        <cide-ele-icon size=\"xs\">upload</cide-ele-icon>\r\n        <span>{{ getUploadingCount() }} uploading</span>\r\n      </div>\r\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-green-600\">\r\n        <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n        <span>{{ getCompletedCount() }} completed</span>\r\n      </div>\r\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-red-600\">\r\n        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\r\n        <span>{{ getFailedCount() }} failed</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingFileUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-ele-floating-file-uploader', standalone: true, imports: [
                         CommonModule,
                         CideIconComponent
-                    ], template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\n@if (isVisible()) {\n<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-overflow-hidden\">\n    <!-- Content starts directly - no header needed since floating container provides it -->\n\n  <!-- Content -->\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-pb-4\">\n    \n    <!-- Drag and Drop Zone -->\n    <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-bg-gray-50 tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-center hover:tw-border-blue-500 hover:tw-bg-blue-50\" \n         [class.tw-border-blue-500]=\"isDragOver()\"\n         [class.tw-bg-blue-100]=\"isDragOver()\"\n         [class.tw-scale-105]=\"isDragOver()\"\n         (dragover)=\"onDragOver($event)\"\n         (dragleave)=\"onDragLeave($event)\" \n         (drop)=\"onDrop($event)\" \n         (click)=\"triggerFileInput()\">\n      \n      <!-- Hidden file input -->\n      <input #fileInput \n             type=\"file\" \n             [multiple]=\"data.multiple !== false\" \n             [accept]=\"data.allowedFileTypes?.join(',') || '*/*'\" \n             (change)=\"onFileInputChange($event)\" \n             class=\"tw-hidden\">\n      \n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-2\">\n        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-colors tw-duration-200\" \n                       [class.tw-text-blue-500]=\"isDragOver()\"\n                       size=\"sm\">cloud_upload</cide-ele-icon>\n        \n        <div>\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\n          </div>\n          @if (data.description) {\n          <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ data.description }}</div>\n          }\n        </div>\n      </div>\n    </div>\n    \n    <!-- Upload Queue - Show files from service state -->\n    @if (allFilesForGroup().length > 0) {\n    <div class=\"tw-space-y-2\">\n      <!-- Show all files from service state -->\n      @for (file of allFilesForGroup(); track file.fileId) {\n      <div class=\"tw-flex tw-items-center tw-px-4 tw-py-3 tw-rounded-lg tw-transition-colors tw-duration-200 tw-bg-white tw-border tw-border-gray-200 hover:tw-bg-gray-100 hover:tw-shadow-sm\"\n           [class.tw-bg-blue-50]=\"file.stage === 'uploading'\"\n           [class.tw-bg-green-50]=\"file.stage === 'complete'\"\n           [class.tw-bg-red-50]=\"file.stage === 'error'\">\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0\">\n          <cide-ele-icon class=\"tw-flex-shrink-0\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\n          <div class=\"tw-min-w-0 tw-flex-1\">\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\">{{ file.fileName }}</div>\n            <div class=\"tw-text-xs\">\n              @switch (file.stage) {\n              @case ('pending') {\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Waiting...</span>\n              }\n              @case ('reading') {\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Reading...</span>\n              }\n              @case ('uploading') {\n              <span class=\"tw-text-blue-600 tw-font-medium\">Uploading...</span>\n              }\n              @case ('complete') {\n              <span class=\"tw-text-green-600 tw-font-medium\">Completed</span>\n              }\n              @case ('error') {\n              <span class=\"tw-text-red-600 tw-font-medium\">Failed</span>\n              }\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Progress Bar (only for uploading files) -->\n        @if (file.stage === 'uploading' && file.percentage !== undefined) {\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-ml-2 tw-min-w-[80px]\">\n          <div class=\"tw-flex-1 tw-h-1 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden\">\n            <div class=\"tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300\" [style.width.%]=\"file.percentage\"></div>\n          </div>\n          <span class=\"tw-text-xs tw-text-gray-500 tw-min-w-[24px] tw-text-right\">{{ file.percentage }}%</span>\n        </div>\n        }\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-gap-1 tw-ml-2\">\n          @switch (file.stage) {\n          @case ('pending') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('reading') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('uploading') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\n          </button>\n          }\n          @case ('complete') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-text-green-600\" title=\"Completed\">\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n          </button>\n          }\n          @case ('error') {\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-blue-50 hover:tw-text-blue-600\" \n                  title=\"Retry\">\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\n          </button>\n          }\n          }\n        </div>\n      </div>\n      }\n    </div>\n    } @else {\n    <!-- No uploads message when manually opened -->\n    <div class=\"tw-py-8 tw-text-center tw-text-gray-500\">\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\n        <cide-ele-icon size=\"md\" class=\"tw-text-gray-300 tw-opacity-70\">cloud_upload</cide-ele-icon>\n        <div>\n          <h4 class=\"tw-text-lg tw-font-semibold tw-text-gray-700 tw-mb-2\">No active uploads</h4>\n          <p class=\"tw-text-sm tw-text-gray-500\">Upload files to see their progress here</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n\n  <!-- Status summary - integrated into content -->\n  @if (hasActiveUploads()) {\n  <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\n    <div class=\"tw-flex tw-gap-3 tw-text-xs\">\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-blue-600\">\n        <cide-ele-icon size=\"xs\">upload</cide-ele-icon>\n        <span>{{ getUploadingCount() }} uploading</span>\n      </div>\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-green-600\">\n        <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\n        <span>{{ getCompletedCount() }} completed</span>\n      </div>\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-red-600\">\n        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\n        <span>{{ getFailedCount() }} failed</span>\n      </div>\n    </div>\n  </div>\n  }\n</div>\n}" }]
+                    ], template: "<!-- File Uploader Content (No absolute positioning - works within floating container) -->\r\n@if (isVisible()) {\r\n<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-overflow-hidden\">\r\n    <!-- Content starts directly - no header needed since floating container provides it -->\r\n\r\n  <!-- Content -->\r\n  <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-pb-4\">\r\n    \r\n    <!-- Drag and Drop Zone -->\r\n    <div class=\"tw-mb-4 tw-p-6 tw-border-2 tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-bg-gray-50 tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-center hover:tw-border-blue-500 hover:tw-bg-blue-50\" \r\n         [class.tw-border-blue-500]=\"isDragOver()\"\r\n         [class.tw-bg-blue-100]=\"isDragOver()\"\r\n         [class.tw-scale-105]=\"isDragOver()\"\r\n         (dragover)=\"onDragOver($event)\"\r\n         (dragleave)=\"onDragLeave($event)\" \r\n         (drop)=\"onDrop($event)\" \r\n         (click)=\"triggerFileInput()\">\r\n      \r\n      <!-- Hidden file input -->\r\n      <input #fileInput \r\n             type=\"file\" \r\n             [multiple]=\"data.multiple !== false\" \r\n             [accept]=\"data.allowedFileTypes?.join(',') || '*/*'\" \r\n             (change)=\"onFileInputChange($event)\" \r\n             class=\"tw-hidden\">\r\n      \r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-colors tw-duration-200\" \r\n                       [class.tw-text-blue-500]=\"isDragOver()\"\r\n                       size=\"sm\">cloud_upload</cide-ele-icon>\r\n        \r\n        <div>\r\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">\r\n            {{ isDragOver() ? 'Drop files here' : 'Drag files here or click to browse' }}\r\n          </div>\r\n          @if (data.description) {\r\n          <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ data.description }}</div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Upload Queue - Show files from service state -->\r\n    @if (allFilesForGroup().length > 0) {\r\n    <div class=\"tw-space-y-2\">\r\n      <!-- Show all files from service state -->\r\n      @for (file of allFilesForGroup(); track file.fileId) {\r\n      <div class=\"tw-flex tw-items-center tw-px-4 tw-py-3 tw-rounded-lg tw-transition-colors tw-duration-200 tw-bg-white tw-border tw-border-gray-200 hover:tw-bg-gray-100 hover:tw-shadow-sm\"\r\n           [class.tw-bg-blue-50]=\"file.stage === 'uploading'\"\r\n           [class.tw-bg-green-50]=\"file.stage === 'complete'\"\r\n           [class.tw-bg-red-50]=\"file.stage === 'error'\">\r\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0\">\r\n          <cide-ele-icon class=\"tw-flex-shrink-0\" size=\"xs\">{{ getStatusIcon(file.stage) }}</cide-ele-icon>\r\n          <div class=\"tw-min-w-0 tw-flex-1\">\r\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\">{{ file.fileName }}</div>\r\n            <div class=\"tw-text-xs\">\r\n              @switch (file.stage) {\r\n              @case ('pending') {\r\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Waiting...</span>\r\n              }\r\n              @case ('reading') {\r\n              <span class=\"tw-text-yellow-600 tw-font-medium\">Reading...</span>\r\n              }\r\n              @case ('uploading') {\r\n              <span class=\"tw-text-blue-600 tw-font-medium\">Uploading...</span>\r\n              }\r\n              @case ('complete') {\r\n              <span class=\"tw-text-green-600 tw-font-medium\">Completed</span>\r\n              }\r\n              @case ('error') {\r\n              <span class=\"tw-text-red-600 tw-font-medium\">Failed</span>\r\n              }\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Progress Bar (only for uploading files) -->\r\n        @if (file.stage === 'uploading' && file.percentage !== undefined) {\r\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-ml-2 tw-min-w-[80px]\">\r\n          <div class=\"tw-flex-1 tw-h-1 tw-bg-gray-200 tw-rounded-full tw-overflow-hidden\">\r\n            <div class=\"tw-h-full tw-bg-blue-500 tw-transition-all tw-duration-300\" [style.width.%]=\"file.percentage\"></div>\r\n          </div>\r\n          <span class=\"tw-text-xs tw-text-gray-500 tw-min-w-[24px] tw-text-right\">{{ file.percentage }}%</span>\r\n        </div>\r\n        }\r\n\r\n        <!-- Actions -->\r\n        <div class=\"tw-flex tw-gap-1 tw-ml-2\">\r\n          @switch (file.stage) {\r\n          @case ('pending') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \r\n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('reading') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \r\n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('uploading') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-red-50 hover:tw-text-red-600\" \r\n                  (click)=\"cancelUpload(file.fileId)\" title=\"Cancel\">\r\n            <cide-ele-icon size=\"xs\">cancel</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('complete') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-text-green-600\" title=\"Completed\">\r\n            <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n          </button>\r\n          }\r\n          @case ('error') {\r\n          <button class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-border-none tw-bg-transparent tw-rounded tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-400 hover:tw-bg-blue-50 hover:tw-text-blue-600\" \r\n                  title=\"Retry\">\r\n            <cide-ele-icon size=\"xs\">refresh</cide-ele-icon>\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <!-- No uploads message when manually opened -->\r\n    <div class=\"tw-py-8 tw-text-center tw-text-gray-500\">\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-4\">\r\n        <cide-ele-icon size=\"md\" class=\"tw-text-gray-300 tw-opacity-70\">cloud_upload</cide-ele-icon>\r\n        <div>\r\n          <h4 class=\"tw-text-lg tw-font-semibold tw-text-gray-700 tw-mb-2\">No active uploads</h4>\r\n          <p class=\"tw-text-sm tw-text-gray-500\">Upload files to see their progress here</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Status summary - integrated into content -->\r\n  @if (hasActiveUploads()) {\r\n  <div class=\"tw-px-4 tw-py-2 tw-bg-gray-50\">\r\n    <div class=\"tw-flex tw-gap-3 tw-text-xs\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-blue-600\">\r\n        <cide-ele-icon size=\"xs\">upload</cide-ele-icon>\r\n        <span>{{ getUploadingCount() }} uploading</span>\r\n      </div>\r\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-green-600\">\r\n        <cide-ele-icon size=\"xs\">check_circle</cide-ele-icon>\r\n        <span>{{ getCompletedCount() }} completed</span>\r\n      </div>\r\n      <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-red-600\">\r\n        <cide-ele-icon size=\"xs\">error</cide-ele-icon>\r\n        <span>{{ getFailedCount() }} failed</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n}" }]
         }], ctorParameters: () => [], propDecorators: { fileInputRef: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -5708,7 +5722,7 @@ class CideTextareaComponent {
                 multi: true,
                 useExisting: forwardRef(() => CideTextareaComponent),
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-textarea\" [ngClass]=\"{\n  'cide-element-size-xxs': (size === '2xs'),\n  'cide-element-size-xs': (size === 'xs'),\n  'cide-element-size-sm': (size === 'sm'),\n  'cide-element-size-md': (size === 'md'),\n  'cide-element-size-lg': (size === 'lg'),\n  'cide-element-input-label-floating': (labelPlacement === 'floating'),\n  'cide-element-input-label-start': (labelDir === 'start'),\n  'cide-element-input-label-end': (labelDir === 'end'),\n  'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n  'cide-element-input-label-less': (!label || labelHide),\n  'cide-element-style-outline': (fill === 'outline'),\n  'cide-element-style-solid': (fill === 'solid'),\n  'cide-element-style-standard': (fill === 'standard'),\n}\">\n  <label *ngIf=\"label && !labelHide\" [for]=\"id\" class=\"cide-textarea-label\">\n    {{ label }}\n    <span *ngIf=\"required\" class=\"tw-text-red-500 tw-ml-1\">*</span>\n  </label>\n  <div class=\"cide-element-input-wrapper\">\n    <!-- Leading Icon -->\n    <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\n    <!-- Trailing Icon -->\n    <span class=\"tw-absolute cide-input-trailing-icon -tw-bottom-1 tw-select-none tw-right-0\"\n      *ngIf=\"trailingIconInternal\">\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    <!-- Clear -->\n    <button class=\"cide-input-clear\" *ngIf=\"clearInput && ngModel\" (click)=\"ClearInputValue()\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n    <!-- Textarea -->\n    <textarea [id]=\"id\" [attr.placeholder]=\"placeholder\" [attr.rows]=\"rows\"\n      [attr.minlength]=\"minlength > 0 ? minlength : null\" [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\n      [disabled]=\"disabled\" [(ngModel)]=\"ngModel\" (input)=\"onInput($event)\" (blur)=\"onBlur()\"\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-mt-0': labelHide,\n        'tw-opacity-50 tw-cursor-not-allowed': disabled\n      }\"\n      class=\"cide-textarea-input tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-py-[1px] tw-outline-none\"></textarea>\n  </div>\n  <span *ngIf=\"(errorText || helperText) && !isValid\" class=\"cide-textarea-help-error-text\">{{ errorText || helperText\n    }}</span>\n  <span *ngIf=\"helperText && isValid\" class=\"cide-textarea-help-error-text\">{{ helperText }}</span>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-textarea\" [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-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}\">\r\n  <label *ngIf=\"label && !labelHide\" [for]=\"id\" class=\"cide-textarea-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"required\" class=\"tw-text-red-500 tw-ml-1\">*</span>\r\n  </label>\r\n  <div class=\"cide-element-input-wrapper\">\r\n    <!-- Leading Icon -->\r\n    <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\r\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n    </span>\r\n    <!-- Trailing Icon -->\r\n    <span class=\"tw-absolute cide-input-trailing-icon -tw-bottom-1 tw-select-none tw-right-0\"\r\n      *ngIf=\"trailingIconInternal\">\r\n      <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n        [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n        (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n    </span>\r\n    <!-- Clear -->\r\n    <button class=\"cide-input-clear\" *ngIf=\"clearInput && ngModel\" (click)=\"ClearInputValue()\">\r\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n    </button>\r\n    <!-- Textarea -->\r\n    <textarea [id]=\"id\" [attr.placeholder]=\"placeholder\" [attr.rows]=\"rows\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\" [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [disabled]=\"disabled\" [(ngModel)]=\"ngModel\" (input)=\"onInput($event)\" (blur)=\"onBlur()\"\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-mt-0': labelHide,\r\n        'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n      }\"\r\n      class=\"cide-textarea-input tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-py-[1px] tw-outline-none\"></textarea>\r\n  </div>\r\n  <span *ngIf=\"(errorText || helperText) && !isValid\" class=\"cide-textarea-help-error-text\">{{ errorText || helperText\r\n    }}</span>\r\n  <span *ngIf=\"helperText && isValid\" class=\"cide-textarea-help-error-text\">{{ helperText }}</span>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideTextareaComponent, decorators: [{
             type: Component,
@@ -5723,7 +5737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => CideTextareaComponent),
                         }
-                    ], template: "<div class=\"cide-textarea\" [ngClass]=\"{\n  'cide-element-size-xxs': (size === '2xs'),\n  'cide-element-size-xs': (size === 'xs'),\n  'cide-element-size-sm': (size === 'sm'),\n  'cide-element-size-md': (size === 'md'),\n  'cide-element-size-lg': (size === 'lg'),\n  'cide-element-input-label-floating': (labelPlacement === 'floating'),\n  'cide-element-input-label-start': (labelDir === 'start'),\n  'cide-element-input-label-end': (labelDir === 'end'),\n  'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n  'cide-element-input-label-less': (!label || labelHide),\n  'cide-element-style-outline': (fill === 'outline'),\n  'cide-element-style-solid': (fill === 'solid'),\n  'cide-element-style-standard': (fill === 'standard'),\n}\">\n  <label *ngIf=\"label && !labelHide\" [for]=\"id\" class=\"cide-textarea-label\">\n    {{ label }}\n    <span *ngIf=\"required\" class=\"tw-text-red-500 tw-ml-1\">*</span>\n  </label>\n  <div class=\"cide-element-input-wrapper\">\n    <!-- Leading Icon -->\n    <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n    </span>\n    <!-- Trailing Icon -->\n    <span class=\"tw-absolute cide-input-trailing-icon -tw-bottom-1 tw-select-none tw-right-0\"\n      *ngIf=\"trailingIconInternal\">\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    <!-- Clear -->\n    <button class=\"cide-input-clear\" *ngIf=\"clearInput && ngModel\" (click)=\"ClearInputValue()\">\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n    </button>\n    <!-- Textarea -->\n    <textarea [id]=\"id\" [attr.placeholder]=\"placeholder\" [attr.rows]=\"rows\"\n      [attr.minlength]=\"minlength > 0 ? minlength : null\" [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\n      [disabled]=\"disabled\" [(ngModel)]=\"ngModel\" (input)=\"onInput($event)\" (blur)=\"onBlur()\"\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-mt-0': labelHide,\n        'tw-opacity-50 tw-cursor-not-allowed': disabled\n      }\"\n      class=\"cide-textarea-input tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-py-[1px] tw-outline-none\"></textarea>\n  </div>\n  <span *ngIf=\"(errorText || helperText) && !isValid\" class=\"cide-textarea-help-error-text\">{{ errorText || helperText\n    }}</span>\n  <span *ngIf=\"helperText && isValid\" class=\"cide-textarea-help-error-text\">{{ helperText }}</span>\n</div>" }]
+                    ], template: "<div class=\"cide-textarea\" [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-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}\">\r\n  <label *ngIf=\"label && !labelHide\" [for]=\"id\" class=\"cide-textarea-label\">\r\n    {{ label }}\r\n    <span *ngIf=\"required\" class=\"tw-text-red-500 tw-ml-1\">*</span>\r\n  </label>\r\n  <div class=\"cide-element-input-wrapper\">\r\n    <!-- Leading Icon -->\r\n    <span class=\"cide-input-leading-icon-wrapper\" *ngIf=\"leadingIcon\">\r\n      <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n    </span>\r\n    <!-- Trailing Icon -->\r\n    <span class=\"tw-absolute cide-input-trailing-icon -tw-bottom-1 tw-select-none tw-right-0\"\r\n      *ngIf=\"trailingIconInternal\">\r\n      <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n        [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n        (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n    </span>\r\n    <!-- Clear -->\r\n    <button class=\"cide-input-clear\" *ngIf=\"clearInput && ngModel\" (click)=\"ClearInputValue()\">\r\n      <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n    </button>\r\n    <!-- Textarea -->\r\n    <textarea [id]=\"id\" [attr.placeholder]=\"placeholder\" [attr.rows]=\"rows\"\r\n      [attr.minlength]=\"minlength > 0 ? minlength : null\" [attr.maxlength]=\"maxlength > 0 ? maxlength : null\"\r\n      [disabled]=\"disabled\" [(ngModel)]=\"ngModel\" (input)=\"onInput($event)\" (blur)=\"onBlur()\"\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-mt-0': labelHide,\r\n        'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n      }\"\r\n      class=\"cide-textarea-input tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-py-[1px] tw-outline-none\"></textarea>\r\n  </div>\r\n  <span *ngIf=\"(errorText || helperText) && !isValid\" class=\"cide-textarea-help-error-text\">{{ errorText || helperText\r\n    }}</span>\r\n  <span *ngIf=\"helperText && isValid\" class=\"cide-textarea-help-error-text\">{{ helperText }}</span>\r\n</div>" }]
         }], propDecorators: { label: [{
                 type: Input
             }], labelHide: [{
@@ -6008,11 +6022,11 @@ class CideEleBreadcrumbComponent {
         this.localLoading.set(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleBreadcrumbComponent, isStandalone: true, selector: "cide-ele-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, showHomeIcon: { classPropertyName: "showHomeIcon", publicName: "showHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, homeIcon: { classPropertyName: "homeIcon", publicName: "homeIcon", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, showDropdownOnOverflow: { classPropertyName: "showDropdownOnOverflow", publicName: "showDropdownOnOverflow", isSignal: true, isRequired: false, transformFunction: null }, dropdownOptions: { classPropertyName: "dropdownOptions", publicName: "dropdownOptions", isSignal: true, isRequired: false, transformFunction: null }, clickableItems: { classPropertyName: "clickableItems", publicName: "clickableItems", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loadingInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contextId: { classPropertyName: "contextId", publicName: "contextId", isSignal: true, isRequired: false, transformFunction: null }, pageCode: { classPropertyName: "pageCode", publicName: "pageCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOptionClick: "dropdownOptionClick", homeClick: "homeClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0\">\n  \n  <!-- Loading State -->\n  @if (effectiveLoading()) {\n    <div class=\"breadcrumb-loading\">\n      <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\n      <span>Loading...</span>\n    </div>\n  }\n\n  <!-- Main Breadcrumb Content -->\n  @if (!effectiveLoading()) {\n    <nav class=\"tw-flex tw-items-center tw-p-1 tw-min-w-0 tw-flex-1\" role=\"navigation\" aria-label=\"Breadcrumb\">\n      <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-1 tw-flex-wrap\">\n        \n        <!-- Home Icon (if enabled) -->\n        @if (config().showHomeIcon) {\n          <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\" \n              [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\n              (click)=\"onHomeClick()\"\n              [title]=\"showTooltips() ? 'Go to Home' : ''\">\n            <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs\">\n              {{ config().homeIcon }}\n            </cide-ele-icon>\n          </li>\n          \n          <!-- Separator after home -->\n          @if (visibleItemsSignal().length > 0) {\n            <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\n              @if (separator().type === 'custom' && separator().text) {\n                <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n              } @else {\n                <cide-ele-icon class=\"tw-text-xs\">\n                  {{ getSeparatorIcon() }}\n                </cide-ele-icon>\n              }\n            </li>\n          }\n        }\n\n        <!-- Visible Items -->\n        @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\n          <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\n              [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\n              [class.tw-text-gray-400]=\"isLast\"\n              (click)=\"onItemClick(item)\"\n              [title]=\"getTooltipText(item)\"\n              [attr.aria-current]=\"isLast ? 'page' : null\">\n            \n            <!-- Item Icon (if provided) -->\n            @if (item.icon) {\n              <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs tw-flex-shrink-0\">\n                {{ item.icon }}\n              </cide-ele-icon>\n            }\n            \n            <!-- Item Label -->\n            <span class=\"tw-font-medium tw-text-xs\">\n              {{ item.label }}\n            </span>\n            \n            <!-- Item Type Badge (for hierarchical style) -->\n            @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\n              <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\n                {{ item.type }}\n              </span>\n            }\n          </li>\n\n          <!-- Separator (except for last item) -->\n          @if (!isLast || isOverflowingSignal()) {\n            <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\n              @if (separator().type === 'custom' && separator().text) {\n                <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n              } @else {\n                <cide-ele-icon class=\"tw-text-xs\">\n                  {{ getSeparatorIcon() }}\n                </cide-ele-icon>\n              }\n            </li>\n          }\n        }\n\n        <!-- Overflow Dropdown -->\n        @if (isOverflowingSignal() && showDropdownOnOverflow()) {\n          <li class=\"breadcrumb-item overflow-item\">\n            <div class=\"breadcrumb-dropdown-container\">\n              <button type=\"button\" \n                      class=\"overflow-button\"\n                      (click)=\"onDropdownToggle()\"\n                      [disabled]=\"disabled()\"\n                      [attr.aria-expanded]=\"showDropdownSignal()\"\n                      aria-haspopup=\"true\"\n                      [title]=\"showTooltips() ? 'More items' : ''\">\n                <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\n                <span class=\"overflow-text\" [class.compact]=\"config().compact\">\n                  {{ hiddenItemsSignal().length }}+ more\n                </span>\n              </button>\n              \n              <!-- Dropdown Menu -->\n              @if (showDropdownSignal()) {\n                <div class=\"breadcrumb-dropdown\" role=\"menu\">\n                  <div class=\"dropdown-header\">\n                    <span>Hidden Items</span>\n                  </div>\n                  \n                  <!-- Hidden Items -->\n                  @for (item of hiddenItemsSignal(); track item.id) {\n                    <button type=\"button\" \n                            class=\"dropdown-item\"\n                            (click)=\"onItemClick(item)\"\n                            [disabled]=\"item.disabled || disabled()\"\n                            role=\"menuitem\">\n                      @if (item.icon) {\n                        <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\n                      }\n                      <span class=\"dropdown-item-label\">{{ item.label }}</span>\n                    </button>\n                  }\n                  \n                  <!-- Custom Dropdown Options -->\n                  @if (dropdownOptions().length > 0) {\n                    <div class=\"dropdown-divider\"></div>\n                    @for (option of dropdownOptions(); track option.id) {\n                      <button type=\"button\" \n                              class=\"dropdown-option\"\n                              (click)=\"onDropdownOptionClick(option)\"\n                              [disabled]=\"option.disabled || disabled()\"\n                              role=\"menuitem\">\n                        @if (option.icon) {\n                          <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\n                        }\n                        <span class=\"dropdown-option-label\">{{ option.label }}</span>\n                      </button>\n                    }\n                  }\n                </div>\n              }\n            </div>\n          </li>\n        }\n      </ol>\n    </nav>\n  }\n\n</div>\n", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding:2px 0}.breadcrumb-container.loading{opacity:.6;pointer-events:none}.breadcrumb-container.disabled{opacity:.5;pointer-events:none}@media (max-width: 768px){.breadcrumb-container.responsive{font-size:10px;padding:3px 0}}.breadcrumb-container.compact{font-size:10px;padding:1px 0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:4px;flex-wrap:wrap}.breadcrumb-item{display:flex;align-items:center;gap:2px;padding:0 2px;position:relative;white-space:nowrap}.breadcrumb-item.clickable{cursor:pointer}.breadcrumb-item.clickable:hover{color:#1f2937}.breadcrumb-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.breadcrumb-item.last{color:#9ca3af}.breadcrumb-item.home-item{padding:0 1px}.breadcrumb-item.home-item .home-icon{color:#6b7280;font-size:13px}.breadcrumb-item.overflow-item{position:relative}.item-label{font-weight:500;color:inherit}.item-label.compact{font-weight:600}.item-icon{color:#6b7280;flex-shrink:0}.item-type-badge{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.item-type-badge.type-category{background-color:#dbeafe;color:#1e40af}.item-type-badge.type-entity{background-color:#dcfce7;color:#166534}.item-type-badge.type-custom{background-color:#f3e8ff;color:#7c3aed}.breadcrumb-separator{display:flex;align-items:center;color:#d1d5db;margin:0 .5px}.breadcrumb-separator .separator-icon{font-size:11px}.breadcrumb-separator .custom-separator{font-weight:400;color:#9ca3af}.breadcrumb-dropdown-container{position:relative}.overflow-button{display:flex;align-items:center;gap:2px;padding:2px 4px;border:none;background:transparent;cursor:pointer;transition:color .15s ease;color:#6b7280}.overflow-button:hover{color:#374151}.overflow-button:disabled{opacity:.5;cursor:not-allowed}.overflow-icon{font-size:14px}.overflow-text{font-size:11px;font-weight:400}.breadcrumb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:1000;min-width:200px;max-width:300px;overflow:hidden;animation:dropdownSlideIn .2s ease-out}.dropdown-header{padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.dropdown-item,.dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .15s ease;color:#374151}.dropdown-item:hover,.dropdown-option:hover{background:#f3f4f6}.dropdown-item:disabled,.dropdown-option:disabled{opacity:.5;cursor:not-allowed}.dropdown-item-icon,.dropdown-option-icon{font-size:14px;color:#6b7280;flex-shrink:0}.dropdown-item-label,.dropdown-option-label{font-size:14px;font-weight:500}.dropdown-divider{height:1px;background:#e5e7eb;margin:4px 0}.style-modern .breadcrumb-item.clickable:hover{color:#1f2937}.style-modern .separator-icon{color:#d1d5db}.style-classic .breadcrumb-item{padding:2px 4px}.style-classic .breadcrumb-item.clickable:hover{color:#1f2937}.style-classic .separator-icon{color:#9ca3af;font-size:12px}.style-minimal .breadcrumb-item{padding:1px 2px}.style-minimal .breadcrumb-item.clickable:hover{color:#1f2937}.style-minimal .separator-icon{color:#d1d5db;font-size:10px}.style-hierarchical{background:transparent;border:none;padding:2px 0}.style-hierarchical .breadcrumb-item{padding:0 2px}.style-hierarchical .breadcrumb-item.clickable:hover{color:#1f2937}.style-hierarchical .separator-icon{color:#d1d5db}.style-hierarchical .breadcrumb-actions{display:none}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.breadcrumb-container.animated .breadcrumb-item{transition:none}.breadcrumb-container.animated .breadcrumb-item:hover{transform:none}.breadcrumb-dropdown{animation:none}}@media (prefers-contrast: high){.breadcrumb-container .breadcrumb-item{border:1px solid transparent}.breadcrumb-container .breadcrumb-item.clickable:hover{border-color:#000}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleBreadcrumbComponent, isStandalone: true, selector: "cide-ele-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, showHomeIcon: { classPropertyName: "showHomeIcon", publicName: "showHomeIcon", isSignal: true, isRequired: false, transformFunction: null }, homeIcon: { classPropertyName: "homeIcon", publicName: "homeIcon", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, showDropdownOnOverflow: { classPropertyName: "showDropdownOnOverflow", publicName: "showDropdownOnOverflow", isSignal: true, isRequired: false, transformFunction: null }, dropdownOptions: { classPropertyName: "dropdownOptions", publicName: "dropdownOptions", isSignal: true, isRequired: false, transformFunction: null }, clickableItems: { classPropertyName: "clickableItems", publicName: "clickableItems", isSignal: true, isRequired: false, transformFunction: null }, showTooltips: { classPropertyName: "showTooltips", publicName: "showTooltips", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loadingInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contextId: { classPropertyName: "contextId", publicName: "contextId", isSignal: true, isRequired: false, transformFunction: null }, pageCode: { classPropertyName: "pageCode", publicName: "pageCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", dropdownOptionClick: "dropdownOptionClick", homeClick: "homeClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- Breadcrumb Component Template -->\r\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0\">\r\n  \r\n  <!-- Loading State -->\r\n  @if (effectiveLoading()) {\r\n    <div class=\"breadcrumb-loading\">\r\n      <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\r\n      <span>Loading...</span>\r\n    </div>\r\n  }\r\n\r\n  <!-- Main Breadcrumb Content -->\r\n  @if (!effectiveLoading()) {\r\n    <nav class=\"tw-flex tw-items-center tw-p-1 tw-min-w-0 tw-flex-1\" role=\"navigation\" aria-label=\"Breadcrumb\">\r\n      <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-1 tw-flex-wrap\">\r\n        \r\n        <!-- Home Icon (if enabled) -->\r\n        @if (config().showHomeIcon) {\r\n          <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\" \r\n              [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\r\n              (click)=\"onHomeClick()\"\r\n              [title]=\"showTooltips() ? 'Go to Home' : ''\">\r\n            <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs\">\r\n              {{ config().homeIcon }}\r\n            </cide-ele-icon>\r\n          </li>\r\n          \r\n          <!-- Separator after home -->\r\n          @if (visibleItemsSignal().length > 0) {\r\n            <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\r\n              @if (separator().type === 'custom' && separator().text) {\r\n                <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\r\n              } @else {\r\n                <cide-ele-icon class=\"tw-text-xs\">\r\n                  {{ getSeparatorIcon() }}\r\n                </cide-ele-icon>\r\n              }\r\n            </li>\r\n          }\r\n        }\r\n\r\n        <!-- Visible Items -->\r\n        @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\r\n          <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\r\n              [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\r\n              [class.tw-text-gray-400]=\"isLast\"\r\n              (click)=\"onItemClick(item)\"\r\n              [title]=\"getTooltipText(item)\"\r\n              [attr.aria-current]=\"isLast ? 'page' : null\">\r\n            \r\n            <!-- Item Icon (if provided) -->\r\n            @if (item.icon) {\r\n              <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs tw-flex-shrink-0\">\r\n                {{ item.icon }}\r\n              </cide-ele-icon>\r\n            }\r\n            \r\n            <!-- Item Label -->\r\n            <span class=\"tw-font-medium tw-text-xs\">\r\n              {{ item.label }}\r\n            </span>\r\n            \r\n            <!-- Item Type Badge (for hierarchical style) -->\r\n            @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\r\n              <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\r\n                {{ item.type }}\r\n              </span>\r\n            }\r\n          </li>\r\n\r\n          <!-- Separator (except for last item) -->\r\n          @if (!isLast || isOverflowingSignal()) {\r\n            <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\r\n              @if (separator().type === 'custom' && separator().text) {\r\n                <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\r\n              } @else {\r\n                <cide-ele-icon class=\"tw-text-xs\">\r\n                  {{ getSeparatorIcon() }}\r\n                </cide-ele-icon>\r\n              }\r\n            </li>\r\n          }\r\n        }\r\n\r\n        <!-- Overflow Dropdown -->\r\n        @if (isOverflowingSignal() && showDropdownOnOverflow()) {\r\n          <li class=\"breadcrumb-item overflow-item\">\r\n            <div class=\"breadcrumb-dropdown-container\">\r\n              <button type=\"button\" \r\n                      class=\"overflow-button\"\r\n                      (click)=\"onDropdownToggle()\"\r\n                      [disabled]=\"disabled()\"\r\n                      [attr.aria-expanded]=\"showDropdownSignal()\"\r\n                      aria-haspopup=\"true\"\r\n                      [title]=\"showTooltips() ? 'More items' : ''\">\r\n                <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\r\n                <span class=\"overflow-text\" [class.compact]=\"config().compact\">\r\n                  {{ hiddenItemsSignal().length }}+ more\r\n                </span>\r\n              </button>\r\n              \r\n              <!-- Dropdown Menu -->\r\n              @if (showDropdownSignal()) {\r\n                <div class=\"breadcrumb-dropdown\" role=\"menu\">\r\n                  <div class=\"dropdown-header\">\r\n                    <span>Hidden Items</span>\r\n                  </div>\r\n                  \r\n                  <!-- Hidden Items -->\r\n                  @for (item of hiddenItemsSignal(); track item.id) {\r\n                    <button type=\"button\" \r\n                            class=\"dropdown-item\"\r\n                            (click)=\"onItemClick(item)\"\r\n                            [disabled]=\"item.disabled || disabled()\"\r\n                            role=\"menuitem\">\r\n                      @if (item.icon) {\r\n                        <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\r\n                      }\r\n                      <span class=\"dropdown-item-label\">{{ item.label }}</span>\r\n                    </button>\r\n                  }\r\n                  \r\n                  <!-- Custom Dropdown Options -->\r\n                  @if (dropdownOptions().length > 0) {\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    @for (option of dropdownOptions(); track option.id) {\r\n                      <button type=\"button\" \r\n                              class=\"dropdown-option\"\r\n                              (click)=\"onDropdownOptionClick(option)\"\r\n                              [disabled]=\"option.disabled || disabled()\"\r\n                              role=\"menuitem\">\r\n                        @if (option.icon) {\r\n                          <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\r\n                        }\r\n                        <span class=\"dropdown-option-label\">{{ option.label }}</span>\r\n                      </button>\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </li>\r\n        }\r\n      </ol>\r\n    </nav>\r\n  }\r\n\r\n</div>\r\n", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding:2px 0}.breadcrumb-container.loading{opacity:.6;pointer-events:none}.breadcrumb-container.disabled{opacity:.5;pointer-events:none}@media (max-width: 768px){.breadcrumb-container.responsive{font-size:10px;padding:3px 0}}.breadcrumb-container.compact{font-size:10px;padding:1px 0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:4px;flex-wrap:wrap}.breadcrumb-item{display:flex;align-items:center;gap:2px;padding:0 2px;position:relative;white-space:nowrap}.breadcrumb-item.clickable{cursor:pointer}.breadcrumb-item.clickable:hover{color:#1f2937}.breadcrumb-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.breadcrumb-item.last{color:#9ca3af}.breadcrumb-item.home-item{padding:0 1px}.breadcrumb-item.home-item .home-icon{color:#6b7280;font-size:13px}.breadcrumb-item.overflow-item{position:relative}.item-label{font-weight:500;color:inherit}.item-label.compact{font-weight:600}.item-icon{color:#6b7280;flex-shrink:0}.item-type-badge{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.item-type-badge.type-category{background-color:#dbeafe;color:#1e40af}.item-type-badge.type-entity{background-color:#dcfce7;color:#166534}.item-type-badge.type-custom{background-color:#f3e8ff;color:#7c3aed}.breadcrumb-separator{display:flex;align-items:center;color:#d1d5db;margin:0 .5px}.breadcrumb-separator .separator-icon{font-size:11px}.breadcrumb-separator .custom-separator{font-weight:400;color:#9ca3af}.breadcrumb-dropdown-container{position:relative}.overflow-button{display:flex;align-items:center;gap:2px;padding:2px 4px;border:none;background:transparent;cursor:pointer;transition:color .15s ease;color:#6b7280}.overflow-button:hover{color:#374151}.overflow-button:disabled{opacity:.5;cursor:not-allowed}.overflow-icon{font-size:14px}.overflow-text{font-size:11px;font-weight:400}.breadcrumb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:1000;min-width:200px;max-width:300px;overflow:hidden;animation:dropdownSlideIn .2s ease-out}.dropdown-header{padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.dropdown-item,.dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .15s ease;color:#374151}.dropdown-item:hover,.dropdown-option:hover{background:#f3f4f6}.dropdown-item:disabled,.dropdown-option:disabled{opacity:.5;cursor:not-allowed}.dropdown-item-icon,.dropdown-option-icon{font-size:14px;color:#6b7280;flex-shrink:0}.dropdown-item-label,.dropdown-option-label{font-size:14px;font-weight:500}.dropdown-divider{height:1px;background:#e5e7eb;margin:4px 0}.style-modern .breadcrumb-item.clickable:hover{color:#1f2937}.style-modern .separator-icon{color:#d1d5db}.style-classic .breadcrumb-item{padding:2px 4px}.style-classic .breadcrumb-item.clickable:hover{color:#1f2937}.style-classic .separator-icon{color:#9ca3af;font-size:12px}.style-minimal .breadcrumb-item{padding:1px 2px}.style-minimal .breadcrumb-item.clickable:hover{color:#1f2937}.style-minimal .separator-icon{color:#d1d5db;font-size:10px}.style-hierarchical{background:transparent;border:none;padding:2px 0}.style-hierarchical .breadcrumb-item{padding:0 2px}.style-hierarchical .breadcrumb-item.clickable:hover{color:#1f2937}.style-hierarchical .separator-icon{color:#d1d5db}.style-hierarchical .breadcrumb-actions{display:none}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.breadcrumb-container.animated .breadcrumb-item{transition:none}.breadcrumb-container.animated .breadcrumb-item:hover{transform:none}.breadcrumb-dropdown{animation:none}}@media (prefers-contrast: high){.breadcrumb-container .breadcrumb-item{border:1px solid transparent}.breadcrumb-container .breadcrumb-item.clickable:hover{border-color:#000}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-ele-breadcrumb', standalone: true, imports: [CommonModule, CideIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Breadcrumb Component Template -->\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0\">\n  \n  <!-- Loading State -->\n  @if (effectiveLoading()) {\n    <div class=\"breadcrumb-loading\">\n      <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\n      <span>Loading...</span>\n    </div>\n  }\n\n  <!-- Main Breadcrumb Content -->\n  @if (!effectiveLoading()) {\n    <nav class=\"tw-flex tw-items-center tw-p-1 tw-min-w-0 tw-flex-1\" role=\"navigation\" aria-label=\"Breadcrumb\">\n      <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-1 tw-flex-wrap\">\n        \n        <!-- Home Icon (if enabled) -->\n        @if (config().showHomeIcon) {\n          <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\" \n              [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\n              (click)=\"onHomeClick()\"\n              [title]=\"showTooltips() ? 'Go to Home' : ''\">\n            <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs\">\n              {{ config().homeIcon }}\n            </cide-ele-icon>\n          </li>\n          \n          <!-- Separator after home -->\n          @if (visibleItemsSignal().length > 0) {\n            <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\n              @if (separator().type === 'custom' && separator().text) {\n                <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n              } @else {\n                <cide-ele-icon class=\"tw-text-xs\">\n                  {{ getSeparatorIcon() }}\n                </cide-ele-icon>\n              }\n            </li>\n          }\n        }\n\n        <!-- Visible Items -->\n        @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\n          <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\n              [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\n              [class.tw-text-gray-400]=\"isLast\"\n              (click)=\"onItemClick(item)\"\n              [title]=\"getTooltipText(item)\"\n              [attr.aria-current]=\"isLast ? 'page' : null\">\n            \n            <!-- Item Icon (if provided) -->\n            @if (item.icon) {\n              <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs tw-flex-shrink-0\">\n                {{ item.icon }}\n              </cide-ele-icon>\n            }\n            \n            <!-- Item Label -->\n            <span class=\"tw-font-medium tw-text-xs\">\n              {{ item.label }}\n            </span>\n            \n            <!-- Item Type Badge (for hierarchical style) -->\n            @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\n              <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\n                {{ item.type }}\n              </span>\n            }\n          </li>\n\n          <!-- Separator (except for last item) -->\n          @if (!isLast || isOverflowingSignal()) {\n            <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\n              @if (separator().type === 'custom' && separator().text) {\n                <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\n              } @else {\n                <cide-ele-icon class=\"tw-text-xs\">\n                  {{ getSeparatorIcon() }}\n                </cide-ele-icon>\n              }\n            </li>\n          }\n        }\n\n        <!-- Overflow Dropdown -->\n        @if (isOverflowingSignal() && showDropdownOnOverflow()) {\n          <li class=\"breadcrumb-item overflow-item\">\n            <div class=\"breadcrumb-dropdown-container\">\n              <button type=\"button\" \n                      class=\"overflow-button\"\n                      (click)=\"onDropdownToggle()\"\n                      [disabled]=\"disabled()\"\n                      [attr.aria-expanded]=\"showDropdownSignal()\"\n                      aria-haspopup=\"true\"\n                      [title]=\"showTooltips() ? 'More items' : ''\">\n                <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\n                <span class=\"overflow-text\" [class.compact]=\"config().compact\">\n                  {{ hiddenItemsSignal().length }}+ more\n                </span>\n              </button>\n              \n              <!-- Dropdown Menu -->\n              @if (showDropdownSignal()) {\n                <div class=\"breadcrumb-dropdown\" role=\"menu\">\n                  <div class=\"dropdown-header\">\n                    <span>Hidden Items</span>\n                  </div>\n                  \n                  <!-- Hidden Items -->\n                  @for (item of hiddenItemsSignal(); track item.id) {\n                    <button type=\"button\" \n                            class=\"dropdown-item\"\n                            (click)=\"onItemClick(item)\"\n                            [disabled]=\"item.disabled || disabled()\"\n                            role=\"menuitem\">\n                      @if (item.icon) {\n                        <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\n                      }\n                      <span class=\"dropdown-item-label\">{{ item.label }}</span>\n                    </button>\n                  }\n                  \n                  <!-- Custom Dropdown Options -->\n                  @if (dropdownOptions().length > 0) {\n                    <div class=\"dropdown-divider\"></div>\n                    @for (option of dropdownOptions(); track option.id) {\n                      <button type=\"button\" \n                              class=\"dropdown-option\"\n                              (click)=\"onDropdownOptionClick(option)\"\n                              [disabled]=\"option.disabled || disabled()\"\n                              role=\"menuitem\">\n                        @if (option.icon) {\n                          <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\n                        }\n                        <span class=\"dropdown-option-label\">{{ option.label }}</span>\n                      </button>\n                    }\n                  }\n                </div>\n              }\n            </div>\n          </li>\n        }\n      </ol>\n    </nav>\n  }\n\n</div>\n", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding:2px 0}.breadcrumb-container.loading{opacity:.6;pointer-events:none}.breadcrumb-container.disabled{opacity:.5;pointer-events:none}@media (max-width: 768px){.breadcrumb-container.responsive{font-size:10px;padding:3px 0}}.breadcrumb-container.compact{font-size:10px;padding:1px 0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:4px;flex-wrap:wrap}.breadcrumb-item{display:flex;align-items:center;gap:2px;padding:0 2px;position:relative;white-space:nowrap}.breadcrumb-item.clickable{cursor:pointer}.breadcrumb-item.clickable:hover{color:#1f2937}.breadcrumb-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.breadcrumb-item.last{color:#9ca3af}.breadcrumb-item.home-item{padding:0 1px}.breadcrumb-item.home-item .home-icon{color:#6b7280;font-size:13px}.breadcrumb-item.overflow-item{position:relative}.item-label{font-weight:500;color:inherit}.item-label.compact{font-weight:600}.item-icon{color:#6b7280;flex-shrink:0}.item-type-badge{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.item-type-badge.type-category{background-color:#dbeafe;color:#1e40af}.item-type-badge.type-entity{background-color:#dcfce7;color:#166534}.item-type-badge.type-custom{background-color:#f3e8ff;color:#7c3aed}.breadcrumb-separator{display:flex;align-items:center;color:#d1d5db;margin:0 .5px}.breadcrumb-separator .separator-icon{font-size:11px}.breadcrumb-separator .custom-separator{font-weight:400;color:#9ca3af}.breadcrumb-dropdown-container{position:relative}.overflow-button{display:flex;align-items:center;gap:2px;padding:2px 4px;border:none;background:transparent;cursor:pointer;transition:color .15s ease;color:#6b7280}.overflow-button:hover{color:#374151}.overflow-button:disabled{opacity:.5;cursor:not-allowed}.overflow-icon{font-size:14px}.overflow-text{font-size:11px;font-weight:400}.breadcrumb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:1000;min-width:200px;max-width:300px;overflow:hidden;animation:dropdownSlideIn .2s ease-out}.dropdown-header{padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.dropdown-item,.dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .15s ease;color:#374151}.dropdown-item:hover,.dropdown-option:hover{background:#f3f4f6}.dropdown-item:disabled,.dropdown-option:disabled{opacity:.5;cursor:not-allowed}.dropdown-item-icon,.dropdown-option-icon{font-size:14px;color:#6b7280;flex-shrink:0}.dropdown-item-label,.dropdown-option-label{font-size:14px;font-weight:500}.dropdown-divider{height:1px;background:#e5e7eb;margin:4px 0}.style-modern .breadcrumb-item.clickable:hover{color:#1f2937}.style-modern .separator-icon{color:#d1d5db}.style-classic .breadcrumb-item{padding:2px 4px}.style-classic .breadcrumb-item.clickable:hover{color:#1f2937}.style-classic .separator-icon{color:#9ca3af;font-size:12px}.style-minimal .breadcrumb-item{padding:1px 2px}.style-minimal .breadcrumb-item.clickable:hover{color:#1f2937}.style-minimal .separator-icon{color:#d1d5db;font-size:10px}.style-hierarchical{background:transparent;border:none;padding:2px 0}.style-hierarchical .breadcrumb-item{padding:0 2px}.style-hierarchical .breadcrumb-item.clickable:hover{color:#1f2937}.style-hierarchical .separator-icon{color:#d1d5db}.style-hierarchical .breadcrumb-actions{display:none}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.breadcrumb-container.animated .breadcrumb-item{transition:none}.breadcrumb-container.animated .breadcrumb-item:hover{transform:none}.breadcrumb-dropdown{animation:none}}@media (prefers-contrast: high){.breadcrumb-container .breadcrumb-item{border:1px solid transparent}.breadcrumb-container .breadcrumb-item.clickable:hover{border-color:#000}}\n"] }]
+            args: [{ selector: 'cide-ele-breadcrumb', standalone: true, imports: [CommonModule, CideIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Breadcrumb Component Template -->\r\n<div [class]=\"getContainerClasses()\" class=\"tw-flex tw-items-center tw-text-xs tw-text-gray-700 tw-py-0\">\r\n  \r\n  <!-- Loading State -->\r\n  @if (effectiveLoading()) {\r\n    <div class=\"breadcrumb-loading\">\r\n      <cide-ele-icon class=\"animate-spin\">refresh</cide-ele-icon>\r\n      <span>Loading...</span>\r\n    </div>\r\n  }\r\n\r\n  <!-- Main Breadcrumb Content -->\r\n  @if (!effectiveLoading()) {\r\n    <nav class=\"tw-flex tw-items-center tw-p-1 tw-min-w-0 tw-flex-1\" role=\"navigation\" aria-label=\"Breadcrumb\">\r\n      <ol class=\"tw-flex tw-items-center tw-list-none tw-m-0 tw-p-0 tw-gap-1 tw-flex-wrap\">\r\n        \r\n        <!-- Home Icon (if enabled) -->\r\n        @if (config().showHomeIcon) {\r\n          <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\" \r\n              [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\r\n              (click)=\"onHomeClick()\"\r\n              [title]=\"showTooltips() ? 'Go to Home' : ''\">\r\n            <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs\">\r\n              {{ config().homeIcon }}\r\n            </cide-ele-icon>\r\n          </li>\r\n          \r\n          <!-- Separator after home -->\r\n          @if (visibleItemsSignal().length > 0) {\r\n            <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\r\n              @if (separator().type === 'custom' && separator().text) {\r\n                <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\r\n              } @else {\r\n                <cide-ele-icon class=\"tw-text-xs\">\r\n                  {{ getSeparatorIcon() }}\r\n                </cide-ele-icon>\r\n              }\r\n            </li>\r\n          }\r\n        }\r\n\r\n        <!-- Visible Items -->\r\n        @for (item of visibleItemsSignal(); track item.id; let i = $index; let isLast = $last) {\r\n          <li class=\"tw-flex tw-items-center tw-gap-1 tw-px-1 tw-whitespace-nowrap tw-relative\"\r\n              [class.tw-cursor-pointer]=\"clickableItems() && !disabled()\"\r\n              [class.tw-text-gray-400]=\"isLast\"\r\n              (click)=\"onItemClick(item)\"\r\n              [title]=\"getTooltipText(item)\"\r\n              [attr.aria-current]=\"isLast ? 'page' : null\">\r\n            \r\n            <!-- Item Icon (if provided) -->\r\n            @if (item.icon) {\r\n              <cide-ele-icon class=\"tw-text-gray-500 tw-text-xs tw-flex-shrink-0\">\r\n                {{ item.icon }}\r\n              </cide-ele-icon>\r\n            }\r\n            \r\n            <!-- Item Label -->\r\n            <span class=\"tw-font-medium tw-text-xs\">\r\n              {{ item.label }}\r\n            </span>\r\n            \r\n            <!-- Item Type Badge (for hierarchical style) -->\r\n            @if (style() === 'hierarchical' && item.type && item.type !== 'root') {\r\n              <span class=\"item-type-badge\" [class]=\"'type-' + item.type\">\r\n                {{ item.type }}\r\n              </span>\r\n            }\r\n          </li>\r\n\r\n          <!-- Separator (except for last item) -->\r\n          @if (!isLast || isOverflowingSignal()) {\r\n            <li class=\"tw-flex tw-items-center tw-text-gray-300 tw-mx-0.5\">\r\n              @if (separator().type === 'custom' && separator().text) {\r\n                <span class=\"tw-font-normal tw-text-gray-400\">{{ separator().text }}</span>\r\n              } @else {\r\n                <cide-ele-icon class=\"tw-text-xs\">\r\n                  {{ getSeparatorIcon() }}\r\n                </cide-ele-icon>\r\n              }\r\n            </li>\r\n          }\r\n        }\r\n\r\n        <!-- Overflow Dropdown -->\r\n        @if (isOverflowingSignal() && showDropdownOnOverflow()) {\r\n          <li class=\"breadcrumb-item overflow-item\">\r\n            <div class=\"breadcrumb-dropdown-container\">\r\n              <button type=\"button\" \r\n                      class=\"overflow-button\"\r\n                      (click)=\"onDropdownToggle()\"\r\n                      [disabled]=\"disabled()\"\r\n                      [attr.aria-expanded]=\"showDropdownSignal()\"\r\n                      aria-haspopup=\"true\"\r\n                      [title]=\"showTooltips() ? 'More items' : ''\">\r\n                <cide-ele-icon class=\"overflow-icon\">more_horiz</cide-ele-icon>\r\n                <span class=\"overflow-text\" [class.compact]=\"config().compact\">\r\n                  {{ hiddenItemsSignal().length }}+ more\r\n                </span>\r\n              </button>\r\n              \r\n              <!-- Dropdown Menu -->\r\n              @if (showDropdownSignal()) {\r\n                <div class=\"breadcrumb-dropdown\" role=\"menu\">\r\n                  <div class=\"dropdown-header\">\r\n                    <span>Hidden Items</span>\r\n                  </div>\r\n                  \r\n                  <!-- Hidden Items -->\r\n                  @for (item of hiddenItemsSignal(); track item.id) {\r\n                    <button type=\"button\" \r\n                            class=\"dropdown-item\"\r\n                            (click)=\"onItemClick(item)\"\r\n                            [disabled]=\"item.disabled || disabled()\"\r\n                            role=\"menuitem\">\r\n                      @if (item.icon) {\r\n                        <cide-ele-icon class=\"dropdown-item-icon\">{{ item.icon }}</cide-ele-icon>\r\n                      }\r\n                      <span class=\"dropdown-item-label\">{{ item.label }}</span>\r\n                    </button>\r\n                  }\r\n                  \r\n                  <!-- Custom Dropdown Options -->\r\n                  @if (dropdownOptions().length > 0) {\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    @for (option of dropdownOptions(); track option.id) {\r\n                      <button type=\"button\" \r\n                              class=\"dropdown-option\"\r\n                              (click)=\"onDropdownOptionClick(option)\"\r\n                              [disabled]=\"option.disabled || disabled()\"\r\n                              role=\"menuitem\">\r\n                        @if (option.icon) {\r\n                          <cide-ele-icon class=\"dropdown-option-icon\">{{ option.icon }}</cide-ele-icon>\r\n                        }\r\n                        <span class=\"dropdown-option-label\">{{ option.label }}</span>\r\n                      </button>\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          </li>\r\n        }\r\n      </ol>\r\n    </nav>\r\n  }\r\n\r\n</div>\r\n", styles: [".breadcrumb-container{display:flex;align-items:center;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;line-height:1.3;color:#374151;background:transparent;padding:2px 0}.breadcrumb-container.loading{opacity:.6;pointer-events:none}.breadcrumb-container.disabled{opacity:.5;pointer-events:none}@media (max-width: 768px){.breadcrumb-container.responsive{font-size:10px;padding:3px 0}}.breadcrumb-container.compact{font-size:10px;padding:1px 0}.breadcrumb-container.animated .breadcrumb-item{transition:color .15s ease}.breadcrumb-loading{display:flex;align-items:center;gap:8px;padding:12px 16px;color:#6b7280;font-size:14px}.breadcrumb-loading cide-ele-icon{animation:spin 1s linear infinite}.breadcrumb-nav{flex:1;min-width:0}.breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:4px;flex-wrap:wrap}.breadcrumb-item{display:flex;align-items:center;gap:2px;padding:0 2px;position:relative;white-space:nowrap}.breadcrumb-item.clickable{cursor:pointer}.breadcrumb-item.clickable:hover{color:#1f2937}.breadcrumb-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.breadcrumb-item.last{color:#9ca3af}.breadcrumb-item.home-item{padding:0 1px}.breadcrumb-item.home-item .home-icon{color:#6b7280;font-size:13px}.breadcrumb-item.overflow-item{position:relative}.item-label{font-weight:500;color:inherit}.item-label.compact{font-weight:600}.item-icon{color:#6b7280;flex-shrink:0}.item-type-badge{padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.item-type-badge.type-category{background-color:#dbeafe;color:#1e40af}.item-type-badge.type-entity{background-color:#dcfce7;color:#166534}.item-type-badge.type-custom{background-color:#f3e8ff;color:#7c3aed}.breadcrumb-separator{display:flex;align-items:center;color:#d1d5db;margin:0 .5px}.breadcrumb-separator .separator-icon{font-size:11px}.breadcrumb-separator .custom-separator{font-weight:400;color:#9ca3af}.breadcrumb-dropdown-container{position:relative}.overflow-button{display:flex;align-items:center;gap:2px;padding:2px 4px;border:none;background:transparent;cursor:pointer;transition:color .15s ease;color:#6b7280}.overflow-button:hover{color:#374151}.overflow-button:disabled{opacity:.5;cursor:not-allowed}.overflow-icon{font-size:14px}.overflow-text{font-size:11px;font-weight:400}.breadcrumb-dropdown{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:1000;min-width:200px;max-width:300px;overflow:hidden;animation:dropdownSlideIn .2s ease-out}.dropdown-header{padding:8px 12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.dropdown-item,.dropdown-option{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .15s ease;color:#374151}.dropdown-item:hover,.dropdown-option:hover{background:#f3f4f6}.dropdown-item:disabled,.dropdown-option:disabled{opacity:.5;cursor:not-allowed}.dropdown-item-icon,.dropdown-option-icon{font-size:14px;color:#6b7280;flex-shrink:0}.dropdown-item-label,.dropdown-option-label{font-size:14px;font-weight:500}.dropdown-divider{height:1px;background:#e5e7eb;margin:4px 0}.style-modern .breadcrumb-item.clickable:hover{color:#1f2937}.style-modern .separator-icon{color:#d1d5db}.style-classic .breadcrumb-item{padding:2px 4px}.style-classic .breadcrumb-item.clickable:hover{color:#1f2937}.style-classic .separator-icon{color:#9ca3af;font-size:12px}.style-minimal .breadcrumb-item{padding:1px 2px}.style-minimal .breadcrumb-item.clickable:hover{color:#1f2937}.style-minimal .separator-icon{color:#d1d5db;font-size:10px}.style-hierarchical{background:transparent;border:none;padding:2px 0}.style-hierarchical .breadcrumb-item{padding:0 2px}.style-hierarchical .breadcrumb-item.clickable:hover{color:#1f2937}.style-hierarchical .separator-icon{color:#d1d5db}.style-hierarchical .breadcrumb-actions{display:none}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.breadcrumb-container.animated .breadcrumb-item{transition:none}.breadcrumb-container.animated .breadcrumb-item:hover{transform:none}.breadcrumb-dropdown{animation:none}}@media (prefers-contrast: high){.breadcrumb-container .breadcrumb-item{border:1px solid transparent}.breadcrumb-container .breadcrumb-item.clickable:hover{border-color:#000}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { itemClick: [{
                 type: Output
             }], dropdownOptionClick: [{
@@ -6050,6 +6064,267 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Export Service - Provides export functionality for Excel (XLSX) and PDF without third-party libraries
+ */
+class ExportService {
+    /**
+     * Export data to Excel (XLSX) format
+     * Uses native Excel XML format for compatibility
+     */
+    exportToExcel(data, columns, filename = 'export') {
+        if (!data || data.length === 0) {
+            console.warn('No data to export');
+            return;
+        }
+        // Create Excel XML content
+        const excelContent = this.generateExcelXML(data, columns);
+        // Create blob and download
+        const blob = new Blob([excelContent], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+        this.downloadFile(blob, `${filename}.xlsx`);
+    }
+    /**
+     * Export data to PDF format
+     * Uses browser's print functionality to generate PDF
+     */
+    exportToPDF(data, columns, filename = 'export') {
+        if (!data || data.length === 0) {
+            console.warn('No data to export');
+            return;
+        }
+        // Create HTML table for PDF
+        const htmlContent = this.generatePDFHTML(data, columns);
+        // Open in new window and print
+        const printWindow = window.open('', '_blank');
+        if (printWindow) {
+            printWindow.document.write(htmlContent);
+            printWindow.document.close();
+            // Wait for content to load then print
+            printWindow.onload = () => {
+                setTimeout(() => {
+                    printWindow.print();
+                }, 250);
+            };
+        }
+    }
+    /**
+     * Export data to CSV format
+     */
+    exportToCSV(data, columns, filename = 'export') {
+        if (!data || data.length === 0) {
+            console.warn('No data to export');
+            return;
+        }
+        // Create CSV content
+        const headers = columns.map(col => this.escapeCSV(col.label)).join(',');
+        const rows = data.map(row => columns.map(col => this.escapeCSV(row[col.key] || '')).join(','));
+        const csvContent = [headers, ...rows].join('\n');
+        // Create blob and download
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        this.downloadFile(blob, `${filename}.csv`);
+    }
+    /**
+     * Generate Excel XML format content
+     */
+    generateExcelXML(data, columns) {
+        const worksheetName = 'Sheet1';
+        // Build header row
+        const headerRow = columns.map(col => `<Cell><Data ss:Type="String">${this.escapeXML(col.label)}</Data></Cell>`).join('');
+        // Build data rows
+        const dataRows = data.map(row => {
+            const cells = columns.map(col => {
+                const value = row[col.key] || '';
+                const isNumber = typeof value === 'number';
+                return `<Cell><Data ss:Type="${isNumber ? 'Number' : 'String'}">${this.escapeXML(String(value))}</Data></Cell>`;
+            }).join('');
+            return `<Row>${cells}</Row>`;
+        }).join('');
+        // Excel 2003 XML format
+        const xml = `<?xml version="1.0"?>
+<?mso-application progid="Excel.Sheet"?>
+<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
+ xmlns:o="urn:schemas-microsoft-com:office:office"
+ xmlns:x="urn:schemas-microsoft-com:office:excel"
+ xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
+ xmlns:html="http://www.w3.org/TR/REC-html40">
+ <DocumentProperties xmlns="urn:schemas-microsoft-com:office:office">
+  <Title>Export</Title>
+  <Created>${new Date().toISOString()}</Created>
+ </DocumentProperties>
+ <Worksheet ss:Name="${worksheetName}">
+  <Table>
+   <Row>${headerRow}</Row>
+   ${dataRows}
+  </Table>
+ </Worksheet>
+</Workbook>`;
+        return xml;
+    }
+    /**
+     * Generate HTML content for PDF printing
+     */
+    generatePDFHTML(data, columns) {
+        const currentDate = new Date().toLocaleDateString();
+        const currentTime = new Date().toLocaleTimeString();
+        // Build table rows
+        const headerCells = columns.map(col => `<th style="${this.getPDFHeaderStyle()}">${col.label}</th>`).join('');
+        const dataRows = data.map(row => {
+            const cells = columns.map(col => `<td style="${this.getPDFCellStyle()}">${row[col.key] || ''}</td>`).join('');
+            return `<tr>${cells}</tr>`;
+        }).join('');
+        const html = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Export</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 20px;
+      font-size: 12px;
+    }
+    .header {
+      text-align: center;
+      margin-bottom: 20px;
+      border-bottom: 2px solid #333;
+      padding-bottom: 10px;
+    }
+    .header h1 {
+      margin: 0;
+      font-size: 18px;
+      color: #333;
+    }
+    .info {
+      margin-bottom: 15px;
+      font-size: 11px;
+      color: #666;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 10px;
+    }
+    th {
+      background-color: #f0f0f0;
+      font-weight: bold;
+      padding: 8px;
+      text-align: left;
+      border: 1px solid #ccc;
+    }
+    td {
+      padding: 6px 8px;
+      border: 1px solid #ccc;
+    }
+    tr:nth-child(even) {
+      background-color: #f9f9f9;
+    }
+    .footer {
+      margin-top: 20px;
+      text-align: center;
+      font-size: 10px;
+      color: #666;
+      border-top: 1px solid #ccc;
+      padding-top: 10px;
+    }
+    @media print {
+      body {
+        margin: 0;
+      }
+      .no-print {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>Data Export</h1>
+    <div class="info">
+      <strong>Generated:</strong> ${currentDate} at ${currentTime}
+    </div>
+    <div class="info">
+      <strong>Total Records:</strong> ${data.length}
+    </div>
+  </div>
+  
+  <table>
+    <thead>
+      <tr>
+        ${headerCells}
+      </tr>
+    </thead>
+    <tbody>
+      ${dataRows}
+    </tbody>
+  </table>
+  
+  <div class="footer">
+    Page generated on ${currentDate} at ${currentTime}
+  </div>
+</body>
+</html>`;
+        return html;
+    }
+    /**
+     * Download file helper
+     */
+    downloadFile(blob, filename) {
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+    }
+    /**
+     * Escape XML special characters
+     */
+    escapeXML(text) {
+        return String(text)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&apos;');
+    }
+    /**
+     * Escape CSV special characters
+     */
+    escapeCSV(text) {
+        if (text === null || text === undefined) {
+            return '';
+        }
+        const stringValue = String(text);
+        // If contains comma, quote, or newline, wrap in quotes and escape quotes
+        if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n')) {
+            return `"${stringValue.replace(/"/g, '""')}"`;
+        }
+        return stringValue;
+    }
+    /**
+     * Get PDF header cell style
+     */
+    getPDFHeaderStyle() {
+        return 'background-color: #f0f0f0; font-weight: bold; padding: 8px; text-align: left; border: 1px solid #ccc;';
+    }
+    /**
+     * Get PDF cell style
+     */
+    getPDFCellStyle() {
+        return 'padding: 6px 8px; border: 1px solid #ccc;';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ExportService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ExportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class TooltipDirective {
     el;
     renderer;
@@ -7730,24 +8005,24 @@ class CideFormFieldErrorComponent {
             .join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFormFieldErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideFormFieldErrorComponent, isStandalone: true, selector: "cide-form-field-error", inputs: { control: "control", formGroup: "formGroup", fieldName: "fieldName", customMessages: "customMessages" }, usesOnChanges: true, ngImport: i0, template: `
-    @if (isFormGroupMode()) {
-      <!-- Form Group Error Display -->
-      @if (formErrors().length > 0) {
-        <div class="tw-flex tw-items-center tw-gap-2 tw-text-red-600 tw-text-sm">
-          <cide-ele-icon class="tw-text-red-500">error</cide-ele-icon>
-          <span>{{ getFormGroupErrorMessage() }}</span>
-        </div>
-      }
-    } @else {
-      <!-- Individual Field Error Display -->
-      @if (control && control.invalid && (control.dirty || control.touched)) {
-        <div class="tw-text-red-500 tw-text-xs tw-mt-1 tw-flex tw-items-center tw-gap-1">
-          <cide-ele-icon class="tw-text-xs">error</cide-ele-icon>
-          <span>{{ getErrorMessage() }}</span>
-        </div>
-      }
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideFormFieldErrorComponent, isStandalone: true, selector: "cide-form-field-error", inputs: { control: "control", formGroup: "formGroup", fieldName: "fieldName", customMessages: "customMessages" }, usesOnChanges: true, ngImport: i0, template: `
+    @if (isFormGroupMode()) {
+      <!-- Form Group Error Display -->
+      @if (formErrors().length > 0) {
+        <div class="tw-flex tw-items-center tw-gap-2 tw-text-red-600 tw-text-sm">
+          <cide-ele-icon class="tw-text-red-500">error</cide-ele-icon>
+          <span>{{ getFormGroupErrorMessage() }}</span>
+        </div>
+      }
+    } @else {
+      <!-- Individual Field Error Display -->
+      @if (control && control.invalid && (control.dirty || control.touched)) {
+        <div class="tw-text-red-500 tw-text-xs tw-mt-1 tw-flex tw-items-center tw-gap-1">
+          <cide-ele-icon class="tw-text-xs">error</cide-ele-icon>
+          <span>{{ getErrorMessage() }}</span>
+        </div>
+      }
+    }
   `, isInline: true, dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFormFieldErrorComponent, decorators: [{
@@ -7755,24 +8030,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             args: [{
                     selector: 'cide-form-field-error',
                     standalone: true,
-                    template: `
-    @if (isFormGroupMode()) {
-      <!-- Form Group Error Display -->
-      @if (formErrors().length > 0) {
-        <div class="tw-flex tw-items-center tw-gap-2 tw-text-red-600 tw-text-sm">
-          <cide-ele-icon class="tw-text-red-500">error</cide-ele-icon>
-          <span>{{ getFormGroupErrorMessage() }}</span>
-        </div>
-      }
-    } @else {
-      <!-- Individual Field Error Display -->
-      @if (control && control.invalid && (control.dirty || control.touched)) {
-        <div class="tw-text-red-500 tw-text-xs tw-mt-1 tw-flex tw-items-center tw-gap-1">
-          <cide-ele-icon class="tw-text-xs">error</cide-ele-icon>
-          <span>{{ getErrorMessage() }}</span>
-        </div>
-      }
-    }
+                    template: `
+    @if (isFormGroupMode()) {
+      <!-- Form Group Error Display -->
+      @if (formErrors().length > 0) {
+        <div class="tw-flex tw-items-center tw-gap-2 tw-text-red-600 tw-text-sm">
+          <cide-ele-icon class="tw-text-red-500">error</cide-ele-icon>
+          <span>{{ getFormGroupErrorMessage() }}</span>
+        </div>
+      }
+    } @else {
+      <!-- Individual Field Error Display -->
+      @if (control && control.invalid && (control.dirty || control.touched)) {
+        <div class="tw-text-red-500 tw-text-xs tw-mt-1 tw-flex tw-items-center tw-gap-1">
+          <cide-ele-icon class="tw-text-xs">error</cide-ele-icon>
+          <span>{{ getErrorMessage() }}</span>
+        </div>
+      }
+    }
   `,
                     imports: [CideIconComponent]
                 }]
@@ -7795,14 +8070,7 @@ class CideEleConfirmationModalComponent {
     customData = signal(null, ...(ngDevMode ? [{ debugName: "customData" }] : []));
     // Modern lifecycle management
     ngOnInit() {
-        // Debug: Log when confirmation state changes
-        effect(() => {
-            const hasActive = this.hasActiveConfirmation();
-            console.log('🔔 Confirmation modal hasActiveConfirmation changed:', hasActive);
-            if (hasActive) {
-                console.log('🔔 Current request:', this.currentRequest());
-            }
-        });
+        // Component initialized
     }
     ngOnDestroy() {
         // Cleanup if needed
@@ -7992,146 +8260,168 @@ class CideEleToastNotificationComponent {
         return notification.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleToastNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideEleToastNotificationComponent, isStandalone: true, selector: "cide-ele-toast-notification", ngImport: i0, template: `
-    <!-- Toast Container -->
-    <div class="toast-container">
-      <div 
-        *ngFor="let notification of activeNotifications(); trackBy: trackByNotification"
-        class="toast-notification"
-        [class]="getToastClass(notification)"
-        [@toastAnimation]>
-        
-        <!-- Toast Content -->
-        <div class="toast-content">
-          <!-- Icon -->
-          <div class="toast-icon" [class]="getIconClass(notification.type)">
-            <cide-ele-icon size="sm">
-              {{ notification.icon }}
-            </cide-ele-icon>
-          </div>
-          
-          <!-- Text Content -->
-          <div class="toast-text">
-            <div *ngIf="notification.title" class="toast-title">
-              {{ notification.title }}
-            </div>
-            <div class="toast-message">
-              {{ notification.message }}
-            </div>
-          </div>
-          
-          <!-- Close Button -->
-          <button 
-            type="button"
-            class="toast-close"
-            (click)="removeNotification(notification.id)"
-            aria-label="Close notification">
-            <cide-ele-icon size="xs">close</cide-ele-icon>
-          </button>
-        </div>
-        
-        <!-- Undo Button -->
-        <div *ngIf="notification.showUndo" class="toast-actions">
-          <button 
-            type="button"
-            class="toast-undo-btn"
-            (click)="executeUndo(notification.id)">
-            {{ notification.undoText }}
-          </button>
-        </div>
-        
-        <!-- Progress Bar -->
-        <div 
-          *ngIf="notification.duration > 0 && !notification.showProgress"
-          class="toast-progress"
-          [style.animation-duration]="notification.duration + 'ms'">
-        </div>
-        
-        <!-- Custom Progress Bar -->
-        <div 
-          *ngIf="notification.showProgress"
-          class="toast-custom-progress">
-          <div 
-            class="toast-custom-progress-bar"
-            [style.width.%]="notification.progress || 0">
-          </div>
-        </div>
-      </div>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideEleToastNotificationComponent, isStandalone: true, selector: "cide-ele-toast-notification", ngImport: i0, template: `
+    <!-- Toast Container -->
+    <div class="toast-container">
+      <div 
+        *ngFor="let notification of activeNotifications(); trackBy: trackByNotification"
+        class="toast-notification"
+        [class]="getToastClass(notification)"
+        [@toastAnimation]>
+        
+        <!-- Toast Content -->
+        <div class="toast-content">
+          <!-- Icon -->
+          <div class="toast-icon" [class]="getIconClass(notification.type)">
+            <cide-ele-icon size="sm">
+              {{ notification.icon }}
+            </cide-ele-icon>
+          </div>
+          
+          <!-- Text Content -->
+          <div class="toast-text">
+            <div *ngIf="notification.title" class="toast-title">
+              {{ notification.title }}
+            </div>
+            <div class="toast-message">
+              {{ notification.message }}
+            </div>
+          </div>
+          
+          <!-- Close Button -->
+          <button 
+            type="button"
+            class="toast-close"
+            (click)="removeNotification(notification.id)"
+            aria-label="Close notification">
+            <cide-ele-icon size="xs">close</cide-ele-icon>
+          </button>
+        </div>
+        
+        <!-- Undo Button -->
+        <div *ngIf="notification.showUndo" class="toast-actions">
+          <button 
+            type="button"
+            class="toast-undo-btn"
+            (click)="executeUndo(notification.id)">
+            {{ notification.undoText }}
+          </button>
+        </div>
+        
+        <!-- Progress Bar -->
+        <div 
+          *ngIf="notification.duration > 0 && !notification.showProgress"
+          class="toast-progress"
+          [style.animation-duration]="notification.duration + 'ms'">
+        </div>
+        
+        <!-- Custom Progress Bar -->
+        <div 
+          *ngIf="notification.showProgress"
+          class="toast-custom-progress">
+          <div 
+            class="toast-custom-progress-bar"
+            [style.width.%]="notification.progress || 0">
+          </div>
+        </div>
+      </div>
+    </div>
   `, isInline: true, styles: [".toast-container{position:fixed;top:80px;right:20px;z-index:9990;display:flex;flex-direction:column;gap:12px;max-width:400px;width:100%}.toast-notification{background:#fff;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid #e5e7eb;overflow:hidden;position:relative;animation:slideInRight .3s ease-out}.toast-notification.success{border-left:4px solid #16a34a}.toast-notification.error{border-left:4px solid #dc2626}.toast-notification.warning{border-left:4px solid #d97706}.toast-notification.info{border-left:4px solid #2563eb}.toast-content{display:flex;align-items:flex-start;gap:12px;padding:16px}.toast-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.toast-icon.success{background-color:#f0fdf4;color:#16a34a}.toast-icon.error{background-color:#fef2f2;color:#dc2626}.toast-icon.warning{background-color:#fffbeb;color:#d97706}.toast-icon.info{background-color:#eff6ff;color:#2563eb}.toast-text{flex:1;min-width:0}.toast-title{font-size:14px;font-weight:600;color:#111827;margin-bottom:4px;line-height:1.4}.toast-message{font-size:14px;color:#6b7280;line-height:1.4}.toast-close{background:none;border:none;color:#9ca3af;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.toast-close:hover{background-color:#f3f4f6;color:#6b7280}.toast-actions{padding:0 16px 16px;display:flex;justify-content:flex-end}.toast-undo-btn{background:none;border:none;color:#2563eb;font-size:14px;font-weight:500;cursor:pointer;padding:8px 12px;border-radius:6px;transition:all .2s ease}.toast-undo-btn:hover{background-color:#eff6ff}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background-color:#e5e7eb;animation:progressShrink linear forwards}.toast-notification.success .toast-progress{background-color:#16a34a}.toast-notification.error .toast-progress{background-color:#dc2626}.toast-notification.warning .toast-progress{background-color:#d97706}.toast-notification.info .toast-progress{background-color:#2563eb}.toast-custom-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background-color:#e5e7eb;overflow:hidden}.toast-custom-progress-bar{height:100%;background-color:#2563eb;transition:width .3s ease;border-radius:0 3px 0 0}.toast-notification.success .toast-custom-progress-bar{background-color:#16a34a}.toast-notification.error .toast-custom-progress-bar{background-color:#dc2626}.toast-notification.warning .toast-custom-progress-bar{background-color:#d97706}.toast-notification.info .toast-custom-progress-bar{background-color:#2563eb}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes progressShrink{0%{width:100%}to{width:0%}}@media (max-width: 640px){.toast-container{top:80px;right:10px;left:10px;max-width:none}.toast-notification{border-radius:6px}.toast-content{padding:12px}.toast-actions{padding:0 12px 12px}}.toast-close:focus,.toast-undo-btn:focus{outline:2px solid #2563eb;outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], animations: [
-        // Add animations here if needed
+            trigger('toastAnimation', [
+                state('void', style({
+                    transform: 'translateX(100%)',
+                    opacity: 0
+                })),
+                state('*', style({
+                    transform: 'translateX(0)',
+                    opacity: 1
+                })),
+                transition('void => *', animate('300ms ease-out')),
+                transition('* => void', animate('200ms ease-in'))
+            ])
         ] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleToastNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-ele-toast-notification', standalone: true, imports: [CommonModule, CideIconComponent], template: `
-    <!-- Toast Container -->
-    <div class="toast-container">
-      <div 
-        *ngFor="let notification of activeNotifications(); trackBy: trackByNotification"
-        class="toast-notification"
-        [class]="getToastClass(notification)"
-        [@toastAnimation]>
-        
-        <!-- Toast Content -->
-        <div class="toast-content">
-          <!-- Icon -->
-          <div class="toast-icon" [class]="getIconClass(notification.type)">
-            <cide-ele-icon size="sm">
-              {{ notification.icon }}
-            </cide-ele-icon>
-          </div>
-          
-          <!-- Text Content -->
-          <div class="toast-text">
-            <div *ngIf="notification.title" class="toast-title">
-              {{ notification.title }}
-            </div>
-            <div class="toast-message">
-              {{ notification.message }}
-            </div>
-          </div>
-          
-          <!-- Close Button -->
-          <button 
-            type="button"
-            class="toast-close"
-            (click)="removeNotification(notification.id)"
-            aria-label="Close notification">
-            <cide-ele-icon size="xs">close</cide-ele-icon>
-          </button>
-        </div>
-        
-        <!-- Undo Button -->
-        <div *ngIf="notification.showUndo" class="toast-actions">
-          <button 
-            type="button"
-            class="toast-undo-btn"
-            (click)="executeUndo(notification.id)">
-            {{ notification.undoText }}
-          </button>
-        </div>
-        
-        <!-- Progress Bar -->
-        <div 
-          *ngIf="notification.duration > 0 && !notification.showProgress"
-          class="toast-progress"
-          [style.animation-duration]="notification.duration + 'ms'">
-        </div>
-        
-        <!-- Custom Progress Bar -->
-        <div 
-          *ngIf="notification.showProgress"
-          class="toast-custom-progress">
-          <div 
-            class="toast-custom-progress-bar"
-            [style.width.%]="notification.progress || 0">
-          </div>
-        </div>
-      </div>
-    </div>
+            args: [{ selector: 'cide-ele-toast-notification', standalone: true, imports: [CommonModule, CideIconComponent], template: `
+    <!-- Toast Container -->
+    <div class="toast-container">
+      <div 
+        *ngFor="let notification of activeNotifications(); trackBy: trackByNotification"
+        class="toast-notification"
+        [class]="getToastClass(notification)"
+        [@toastAnimation]>
+        
+        <!-- Toast Content -->
+        <div class="toast-content">
+          <!-- Icon -->
+          <div class="toast-icon" [class]="getIconClass(notification.type)">
+            <cide-ele-icon size="sm">
+              {{ notification.icon }}
+            </cide-ele-icon>
+          </div>
+          
+          <!-- Text Content -->
+          <div class="toast-text">
+            <div *ngIf="notification.title" class="toast-title">
+              {{ notification.title }}
+            </div>
+            <div class="toast-message">
+              {{ notification.message }}
+            </div>
+          </div>
+          
+          <!-- Close Button -->
+          <button 
+            type="button"
+            class="toast-close"
+            (click)="removeNotification(notification.id)"
+            aria-label="Close notification">
+            <cide-ele-icon size="xs">close</cide-ele-icon>
+          </button>
+        </div>
+        
+        <!-- Undo Button -->
+        <div *ngIf="notification.showUndo" class="toast-actions">
+          <button 
+            type="button"
+            class="toast-undo-btn"
+            (click)="executeUndo(notification.id)">
+            {{ notification.undoText }}
+          </button>
+        </div>
+        
+        <!-- Progress Bar -->
+        <div 
+          *ngIf="notification.duration > 0 && !notification.showProgress"
+          class="toast-progress"
+          [style.animation-duration]="notification.duration + 'ms'">
+        </div>
+        
+        <!-- Custom Progress Bar -->
+        <div 
+          *ngIf="notification.showProgress"
+          class="toast-custom-progress">
+          <div 
+            class="toast-custom-progress-bar"
+            [style.width.%]="notification.progress || 0">
+          </div>
+        </div>
+      </div>
+    </div>
   `, animations: [
-                    // Add animations here if needed
+                        trigger('toastAnimation', [
+                            state('void', style({
+                                transform: 'translateX(100%)',
+                                opacity: 0
+                            })),
+                            state('*', style({
+                                transform: 'translateX(0)',
+                                opacity: 1
+                            })),
+                            transition('void => *', animate('300ms ease-out')),
+                            transition('* => void', animate('200ms ease-in'))
+                        ])
                     ], styles: [".toast-container{position:fixed;top:80px;right:20px;z-index:9990;display:flex;flex-direction:column;gap:12px;max-width:400px;width:100%}.toast-notification{background:#fff;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid #e5e7eb;overflow:hidden;position:relative;animation:slideInRight .3s ease-out}.toast-notification.success{border-left:4px solid #16a34a}.toast-notification.error{border-left:4px solid #dc2626}.toast-notification.warning{border-left:4px solid #d97706}.toast-notification.info{border-left:4px solid #2563eb}.toast-content{display:flex;align-items:flex-start;gap:12px;padding:16px}.toast-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.toast-icon.success{background-color:#f0fdf4;color:#16a34a}.toast-icon.error{background-color:#fef2f2;color:#dc2626}.toast-icon.warning{background-color:#fffbeb;color:#d97706}.toast-icon.info{background-color:#eff6ff;color:#2563eb}.toast-text{flex:1;min-width:0}.toast-title{font-size:14px;font-weight:600;color:#111827;margin-bottom:4px;line-height:1.4}.toast-message{font-size:14px;color:#6b7280;line-height:1.4}.toast-close{background:none;border:none;color:#9ca3af;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.toast-close:hover{background-color:#f3f4f6;color:#6b7280}.toast-actions{padding:0 16px 16px;display:flex;justify-content:flex-end}.toast-undo-btn{background:none;border:none;color:#2563eb;font-size:14px;font-weight:500;cursor:pointer;padding:8px 12px;border-radius:6px;transition:all .2s ease}.toast-undo-btn:hover{background-color:#eff6ff}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background-color:#e5e7eb;animation:progressShrink linear forwards}.toast-notification.success .toast-progress{background-color:#16a34a}.toast-notification.error .toast-progress{background-color:#dc2626}.toast-notification.warning .toast-progress{background-color:#d97706}.toast-notification.info .toast-progress{background-color:#2563eb}.toast-custom-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background-color:#e5e7eb;overflow:hidden}.toast-custom-progress-bar{height:100%;background-color:#2563eb;transition:width .3s ease;border-radius:0 3px 0 0}.toast-notification.success .toast-custom-progress-bar{background-color:#16a34a}.toast-notification.error .toast-custom-progress-bar{background-color:#dc2626}.toast-notification.warning .toast-custom-progress-bar{background-color:#d97706}.toast-notification.info .toast-custom-progress-bar{background-color:#2563eb}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes progressShrink{0%{width:100%}to{width:0%}}@media (max-width: 640px){.toast-container{top:80px;right:10px;left:10px;max-width:none}.toast-notification{border-radius:6px}.toast-content{padding:12px}.toast-actions{padding:0 12px 12px}}.toast-close:focus,.toast-undo-btn:focus{outline:2px solid #2563eb;outline-offset:2px}\n"] }]
         }] });
 
@@ -8248,6 +8538,10 @@ class CideEleDataGridComponent {
     hiddenColumns = signal([], ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : [])); // Hidden column keys
     showFilterPanel = signal(null, ...(ngDevMode ? [{ debugName: "showFilterPanel" }] : [])); // Column key for active filter panel
     filterSearchTerm = signal('', ...(ngDevMode ? [{ debugName: "filterSearchTerm" }] : [])); // Search term for filter values
+    // Export menu state
+    showExportMenu = signal(false, ...(ngDevMode ? [{ debugName: "showExportMenu" }] : [])); // Show/hide export format dropdown
+    // Export service
+    exportService = inject(ExportService);
     // Computed properties
     hasNextPage = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNextPage" }] : []));
     hasPreviousPage = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : []));
@@ -10022,8 +10316,58 @@ class CideEleDataGridComponent {
     get scrollConfig() {
         return this.mergedConfig().scroll;
     }
+    // ===== Export Methods =====
+    /**
+     * Toggle export menu visibility
+     */
+    toggleExportMenu(event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.showExportMenu.set(!this.showExportMenu());
+    }
+    /**
+     * Close export menu
+     */
+    closeExportMenu() {
+        this.showExportMenu.set(false);
+    }
+    /**
+     * Handle export format selection
+     */
+    exportData(format) {
+        const data = this.filteredData();
+        const visibleCols = this.visibleColumns();
+        // Build columns array with visible columns only
+        const columns = visibleCols.map(col => ({
+            key: col.key,
+            label: col.header || col.key
+        }));
+        // Build data array with only visible column values
+        const exportData = data.map(row => {
+            const exportRow = {};
+            columns.forEach(col => {
+                exportRow[col.key] = this.getNestedValue(row, col.key) || '';
+            });
+            return exportRow;
+        });
+        const filename = this.mergedConfig().title || 'export';
+        // Export based on format
+        switch (format) {
+            case 'csv':
+                this.exportService.exportToCSV(exportData, columns, filename);
+                break;
+            case 'excel':
+                this.exportService.exportToExcel(exportData, columns, filename);
+                break;
+            case 'pdf':
+                this.exportService.exportToPDF(exportData, columns, filename);
+                break;
+        }
+        this.closeExportMenu();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleDataGridComponent, isStandalone: true, selector: "cide-ele-data-grid", inputs: { config: "config", templateRenderers: "templateRenderers", customFormatters: "customFormatters", actionHandlers: "actionHandlers", serverSidePagination: "serverSidePagination", totalServerItems: "totalServerItems", currentServerPage: "currentServerPage", currentServerPageSize: "currentServerPageSize", dragDropEnabled: "dragDropEnabled" }, outputs: { gridEvent: "gridEvent" }, usesOnChanges: true, ngImport: i0, template: "  <!-- Data Grid Component -->\n  <div class=\"data-grid-container tw-bg-white tw-shadow tw-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \n       [ngClass]=\"[\n         mergedConfig().tableClass || '',\n         mergedConfig().fullHeight ? 'tw-h-full' : '',\n         isDragDropEnabled() ? 'drag-drop-enabled' : '',\n         isTreeEnabled() ? 'tree-enabled' : ''\n       ]\">\n  \n  <!-- Header Section -->\n  @if (mergedConfig().title || mergedConfig().subtitle) {\n    <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n      @if (mergedConfig().title) {\n        <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\n          {{ mergedConfig().title }}\n        </h3>\n      }\n      @if (mergedConfig().subtitle) {\n        <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\n          {{ mergedConfig().subtitle }}\n        </p>\n      }\n    </div>\n  }\n\n  <!-- Search Section -->\n  @if (searchConfig.enabled) {\n    <div class=\"tw-px-3 tw-py-1.5 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Left Side: Search Input and Action Icons -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\n          <!-- Search Input - Apple Style -->\n          <div class=\"tw-max-w-md data-grid-search-input\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\"\n            (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\"\n            [disabled]=\"loading() || isRefreshing()\"\n            leadingIcon=\"search\"\n              fill=\"outline\"\n              size=\"sm\">\n          </cide-ele-input>\n          </div>\n          \n          <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\n            <!-- Filter Button -->\n            <button type=\"button\"\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\n                    title=\"Filter\"\n                    (click)=\"onActionClick(null, { key: 'filter', label: 'Filter', icon: 'filter_list', variant: 'ghost', onClick: 'filter' })\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\n            </button>\n            \n            <!-- Sort Button -->\n            <button type=\"button\"\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\n                    title=\"Sort\"\n                    (click)=\"onActionClick(null, { key: 'sort', label: 'Sort', icon: 'swap_vert', variant: 'ghost', onClick: 'sort' })\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">swap_vert</cide-ele-icon>\n            </button>\n            \n            <!-- Download/Export Button -->\n            <button type=\"button\"\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\n                    title=\"Download\"\n                    (click)=\"onActionClick(null, { key: 'download', label: 'Download', icon: 'file_download', variant: 'ghost', onClick: 'download' })\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\n            </button>\n          </div>\n        </div>\n        \n        <!-- Right Side: Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <button cideEleButton \n                    variant=\"outline\" \n                    size=\"sm\" \n                    type=\"button\"\n                    (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\n                    class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\n              <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\n              Reset Order\n            </button>\n            <button cideEleButton \n                    variant=\"primary\" \n                    size=\"sm\" \n                    type=\"button\"\n                    (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\n                    class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\n              <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\n              Save Order\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n     <!-- Table Section -->\n   <div class=\"tw-overflow-x-auto tw-relative\"\n        [ngClass]=\"{\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n          'tw-overflow-y-auto': scrollConfig?.enabled,\n          'tw-max-h-full': scrollConfig?.enabled\n        }\"\n        [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n        [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n           [class.empty-table]=\"displayedData.length === 0\"\n           [ngClass]=\"{\n             'tw-table-striped': mergedConfig().striped,\n             'tw-border': mergedConfig().bordered,\n             'tw-table-sm': mergedConfig().compact\n           }\"\n           style=\"table-layout: fixed;\">\n      \n      <!-- Table Header -->\n      <thead class=\"tw-bg-gray-50\" \n            [ngClass]=\"[\n              mergedConfig().headerClass || '',\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\n            ]\">\n        <tr>\n          @for (column of visibleColumns(); track column.key) {\n            <th\n              class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\n              [ngClass]=\"[\n                getColumnWidthClass(column.width),\n                getColumnMaxWidthClass(column.width),\n                column.align === 'center' ? 'tw-text-center' : '',\n                column.align === 'right' ? 'tw-text-right' : ''\n              ]\"\n              [title]=\"column.header\">\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\n                <span class=\"tw-truncate tw-flex-1\">{{ column.header }}</span>\n                \n                <!-- Active Filter Indicator -->\n                @if (isColumnFiltered(column.key)) {\n                  <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\n                    <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\n                    {{ getActiveFilterCount(column.key) }}\n                  </div>\n                }\n                \n                <!-- Column Menu Trigger (Three Dots Icon) -->\n                @if (mergedConfig().columnMenu?.enabled) {\n                  <button\n                    type=\"button\"\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\n                    [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\n                    [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\"\n                    (click)=\"toggleColumnMenu(column.key, $event)\"\n                    title=\"Column options\">\n                    <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\n                  </button>\n                }\n              </div>\n\n              <!-- Column Menu Dropdown -->\n              @if (isColumnMenuOpen(column.key)) {\n                <div class=\"column-menu-dropdown tw-absolute tw-z-50 tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\n                  <div class=\"tw-py-1\">\n                    <!-- Sort Options -->\n                    @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnSort(column, 'asc')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n                        Ascending\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnSort(column, 'desc')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n                        Descending\n                      </button>\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                    }\n\n                    <!-- Filter Option -->\n                    @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\n                      <!-- Check if there's a custom filter renderer template -->\n                      @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\n                        <div class=\"tw-px-4 tw-py-2\">\n                          <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\n                          </ng-container>\n                        </div>\n                      } @else {\n                        <!-- Excel-style Filter Button -->\n                        <button\n                          type=\"button\"\n                          class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                          [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\"\n                          (click)=\"toggleFilterPanel(column.key, $event)\">\n                          <div class=\"tw-flex tw-items-center\">\n                            <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\n                            Filter\n                          </div>\n                          <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\n                            {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\n                          </cide-ele-icon>\n                        </button>\n                        \n                        <!-- Excel-style Filter Panel -->\n                        @if (isFilterPanelOpen(column.key)) {\n                          <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\n                            <!-- Search box -->\n                            <div class=\"tw-px-2 tw-mb-2\">\n                              <input\n                                type=\"text\"\n                                class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\n                                placeholder=\"Search...\"\n                                [(ngModel)]=\"filterSearchTerm\"\n                                (click)=\"$event.stopPropagation()\">\n                            </div>\n                            \n                            <!-- Select All / Deselect All -->\n                            <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\n                              <button\n                                type=\"button\"\n                                class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                                (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\n                                Select All\n                              </button>\n                              <span class=\"tw-text-xs tw-text-gray-400\">|</span>\n                              <button\n                                type=\"button\"\n                                class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                                (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\n                                Clear\n                              </button>\n                            </div>\n                            \n                            <!-- Filter values list -->\n                            <div class=\"tw-max-h-48 tw-overflow-y-auto\">\n                              @for (item of getUniqueColumnValues(column); track item.value) {\n                                <label class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\n                                  <input\n                                    type=\"checkbox\"\n                                    class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                                    [checked]=\"item.checked\"\n                                    (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\n                                    (click)=\"$event.stopPropagation()\">\n                                  <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\n                                  <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\n                                </label>\n                              }\n                            </div>\n                          </div>\n                        }\n                      }\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                    }\n\n                    <!-- Autosize Option -->\n                    @if (mergedConfig().columnMenu?.showAutosize) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnAutosize(column)\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\n                        Autosize\n                      </button>\n                    }\n\n                    <!-- Group By Column Option -->\n                    @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnGroupBy(column)\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">group_work</cide-ele-icon>\n                        Group By Column\n                      </button>\n                    }\n\n                    <!-- Manage Columns Option -->\n                    @if (mergedConfig().columnMenu?.showManageColumns) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onManageColumns()\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\n                        Manage Columns\n                      </button>\n                    }\n\n                    <!-- Reset Columns Option -->\n                    @if (mergedConfig().columnMenu?.showResetColumns) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnReset()\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\n                        Reset Columns\n                      </button>\n                    }\n\n                    <!-- Hide Column Option -->\n                    @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnHide(column)\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\n                        Hide Column\n                      </button>\n                    }\n\n                    <!-- Aggregation Select Option -->\n                    @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                      <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation</div>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnAggregation(column, 'sum')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\n                        Sum\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnAggregation(column, 'avg')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\n                        Average\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnAggregation(column, 'count')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\n                        Count\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnAggregation(column, 'min')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n                        Min\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnAggregation(column, 'max')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n                        Max\n                      </button>\n                    }\n                  </div>\n                </div>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n          <!-- Skeleton Loading Rows -->\n          @for (skeletonItem of getSkeletonArray(); track $index) {\n            <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n              @for (column of columns; track column.key) {\n                <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\">\n                  <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n                </td>\n              }\n            </tr>\n          }\n        } @else {\n          @for (item of displayedData; track trackByFn($index, item)) {\n            <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\n                [ngClass]=\"[\n                  mergedConfig().rowClass || '',\n                  isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n                  isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n                  !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n                  isTreeEnabled() ? getTreeLevelClass(item) : ''\n                ]\"\n                [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n                [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\n                (click)=\"onRowClick(item)\"\n                (keydown.enter)=\"onRowClick(item)\"\n                (keydown.space)=\"onRowClick(item)\"\n                [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n                [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n                [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n                [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n                [draggable]=\"isDragDropEnabled()\"\n                (dragstart)=\"onDragStart($event, item, $index)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, item, $index)\"\n                (dragend)=\"onDragEnd($event)\">\n              \n              @for (column of columns; track column.key) {\n                <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width),\n                      mergedConfig().cellClass || '',\n                      column.align === 'center' ? 'tw-text-center' : '',\n                      column.align === 'right' ? 'tw-text-right' : '',\n                      column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n                    ]\"\n                    [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n                    [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\n                    [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '100px'\">\n                  <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n                  @if (isTreeEnabled() && $index === 0) {\n                    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                      <!-- Tree Indentation -->\n                      <div class=\"tw-flex tw-items-center\">\n                        @if (hasChildren(item)) {\n                          <button \n                            variant=\"outline\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n                            class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                            [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                            <cide-ele-icon \n                              class=\"tw-w-3 tw-h-3\"\n                              [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                              [class.tw-rotate-90]=\"isItemExpanded(item)\"\n                              size=\"xs\">\n                              chevron_right\n                            </cide-ele-icon>\n                          </button>\n                        } @else {\n                          <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n                            <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n                          </div>\n                        }\n                      </div>\n                      \n                      <!-- Cell Content -->\n                      <div class=\"tw-flex-1 tw-w-full\">\n                        @if (column.type === 'text') {\n                          <p class=\"tw-text-sm tw-text-gray-900\"\n                             [class.tw-truncate]=\"column.truncate\"\n                             [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </p>\n                        } @else if (column.type === 'number') {\n                          <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </span>\n                        } @else if (column.type === 'date') {\n                          <span class=\"tw-text-sm tw-text-gray-600\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </span>\n                        } @else if (column.type === 'boolean') {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                                [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                            {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                          </span>\n                        } @else if (column.type === 'status' && column.statusConfig) {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                                [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                            {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                          </span>\n                        } @else if (column.type === 'actions' && column.actions) {\n                          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                            @for (action of column.actions; track action.key) {\n                              <button\n                                cideEleButton\n                                [variant]=\"action.variant || 'ghost'\"\n                                size=\"xs\"\n                                type=\"button\"\n                                (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                                [title]=\"action.tooltip || action.label\"\n                                [disabled]=\"isRefreshing()\"\n                                class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                                [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                                [ngClass]=\"{\n                                  'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                  'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                  'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                  'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                }\">\n                                @if (action.icon) {\n                                  <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                                    <path d=\"M10 12l-5-5h10l-5 5z\"/>\n                                  </svg>\n                                }\n                                {{ action.label }}\n                              </button>\n                            }\n                          </div>\n                        } @else if (column.type === 'custom') {\n                          <!-- Template Renderer -->\n                          @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                            <ng-container \n                              [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                              [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                            </ng-container>\n                          }\n                          <!-- Default rendering -->\n                          @else {\n                            <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                          }\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    <!-- Regular cell content (non-tree or non-first column) -->\n                    @if (column.type === 'text') {\n                      <p class=\"tw-text-sm tw-text-gray-900\"\n                         [class.tw-truncate]=\"column.truncate\"\n                         [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                      </p>\n                    } @else if (column.type === 'number') {\n                      <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                      </span>\n                    } @else if (column.type === 'date') {\n                      <span class=\"tw-text-sm tw-text-gray-600\">\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                      </span>\n                    } @else if (column.type === 'boolean') {\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                            [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                        {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                      </span>\n                    } @else if (column.type === 'status' && column.statusConfig) {\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                            [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                        {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                      </span>\n                    } @else if (column.type === 'actions' && column.actions) {\n                      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                        @for (action of column.actions; track action.key) {\n                          <button\n                            cideEleButton\n                            [variant]=\"action.variant || 'ghost'\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                            [title]=\"action.tooltip || action.label\"\n                            [disabled]=\"isRefreshing()\"\n                            class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                            [ngClass]=\"{\n                              'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                              'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                              'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                              'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                            }\">\n                            @if (action.icon) {\n                              <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                                <path d=\"M10 12l-5-5h10l-5 5z\"/>\n                              </svg>\n                            }\n                            {{ action.label }}\n                          </button>\n                        }\n                      </div>\n                    } @else if (column.type === 'custom') {\n                      <!-- Template Renderer -->\n                      @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                        <ng-container \n                          [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                          [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                        </ng-container>\n                      }\n                      <!-- Default rendering -->\n                      @else {\n                        <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n          }\n          \n          <!-- Empty State -->\n          @if (displayedData.length === 0) {\n            <tr class=\"tw-h-full\">\n              <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n                <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n                  <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"></path>\n                  </svg>\n                  <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n                  <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n                    @if (searchQuery()) {\n                      No results match your search criteria.\n                    } @else {\n                      There are no items to display.\n                    }\n                  </p>\n                </div>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n     <!-- Pagination Section -->\n   @if (paginationConfig.enabled && totalItems() > 0) {\n     <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n          [class.tw-opacity-60]=\"isRefreshing()\">\n      \n      <!-- Results Info and Page Size -->\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-1 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-3\">\n            <p class=\"tw-text-sm tw-text-gray-700\">\n              Showing {{ getItemRangeText() }} results\n            </p>\n            \n                         <!-- Page Size Selector -->\n             <div class=\"tw-flex tw-items-center tw-space-x-2\">\n               <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-500\">view_list</cide-ele-icon>\n               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-16 tw-relative\">\n                 <cide-ele-select\n                   [labelHide]=\"true\"\n                   [ngModel]=\"pageSize()\"\n                   (ngModelChange)=\"updatePageSize($event)\"\n                   [options]=\"getPageSizeOptions()\"\n                   [disabled]=\"isRefreshing()\"\n                   fill=\"outline\"\n                   size=\"xs\"\n                   class=\"tw-z-30\">\n                 </cide-ele-select>\n               </div>\n             </div>\n          </div>\n        }\n\n        <!-- Pagination Controls -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          \n          <!-- Previous/Next and Page Numbers -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            \n            <!-- First Page -->\n            <button\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n              title=\"First page\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">first_page</cide-ele-icon>\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n              title=\"Previous page\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_left</cide-ele-icon>\n            </button>\n            \n            <!-- Page Numbers -->\n            @for (page of getEnhancedPageNumbers(); track page) {\n              @if (page === '...') {\n                <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n              } @else {\n                <button\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\"\n                  [title]=\"'Page ' + page\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n              title=\"Next page\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_right</cide-ele-icon>\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n              title=\"Last page\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">last_page</cide-ele-icon>\n            </button>\n            \n          </div>\n\n          <!-- Quick Jump and Refresh -->\n          @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n            <div class=\"tw-flex tw-items-center tw-space-x-1 tw-border-l tw-border-gray-200 tw-pl-2\">\n              \n              <!-- Quick Jump -->\n              @if (paginationConfig.showQuickJump) {\n                                  <div class=\"tw-flex tw-items-center tw-space-x-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n                    <div class=\"tw-w-16\">\n                                              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                          [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n                          [disabled]=\"isRefreshing()\"\n                          size=\"xs\"\n                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-200 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n                    title=\"Go to page\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n                  title=\"Refresh\">\n                  @if (isRefreshing()) {\n                    <cide-ele-icon class=\"tw-w-[22px] tw-h-4 tw-animate-spin\">refresh</cide-ele-icon>\n                  } @else {\n                    <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">refresh</cide-ele-icon>\n                  }\n                </button>\n              }\n            </div>\n          }\n          \n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:#1f2937;background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000a,0 1px 2px #00000005;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:#fff}.data-grid-container thead{background:linear-gradient(180deg,#fafafa,#f7f7f7);border-bottom:1px solid rgba(0,0,0,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.data-grid-container thead th{background:transparent;color:#6b7280;font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid rgba(0,0,0,.06);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:#00000005}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:#0000000f}.data-grid-container tbody{background-color:#fff}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid rgba(0,0,0,.03);color:#1f2937;font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:#fff;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr:hover{background-color:#00000005;transform:scale(1.001)}.data-grid-container tbody tr:hover td{border-bottom-color:#0000000a}.data-grid-container tbody tr:active{background-color:#00000008;transform:scale(.999)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#00000004}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:#00000008;transform:scale(1.001)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;border:1px solid rgba(0,0,0,.08);background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:1px solid rgba(0,0,0,.06);background:linear-gradient(180deg,#fafafa,#f7f7f7)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05)}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #3b82f6;border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:#f8fafc;box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:10}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:#f3f4f6;border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleDataGridComponent, isStandalone: true, selector: "cide-ele-data-grid", inputs: { config: "config", templateRenderers: "templateRenderers", customFormatters: "customFormatters", actionHandlers: "actionHandlers", serverSidePagination: "serverSidePagination", totalServerItems: "totalServerItems", currentServerPage: "currentServerPage", currentServerPageSize: "currentServerPageSize", dragDropEnabled: "dragDropEnabled" }, outputs: { gridEvent: "gridEvent" }, usesOnChanges: true, ngImport: i0, template: "  <!-- Data Grid Component -->\r\n  <div class=\"data-grid-container tw-bg-white tw-shadow tw-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \r\n       [ngClass]=\"[\r\n         mergedConfig().tableClass || '',\r\n         mergedConfig().fullHeight ? 'tw-h-full' : '',\r\n         isDragDropEnabled() ? 'drag-drop-enabled' : '',\r\n         isTreeEnabled() ? 'tree-enabled' : ''\r\n       ]\">\r\n  \r\n  <!-- Header Section -->\r\n  @if (mergedConfig().title || mergedConfig().subtitle) {\r\n    <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\r\n      @if (mergedConfig().title) {\r\n        <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\r\n          {{ mergedConfig().title }}\r\n        </h3>\r\n      }\r\n      @if (mergedConfig().subtitle) {\r\n        <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\r\n          {{ mergedConfig().subtitle }}\r\n        </p>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Search Section -->\r\n  @if (searchConfig.enabled) {\r\n    <div class=\"tw-px-3 tw-py-1.5 tw-border-b tw-border-gray-200\">\r\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n        <!-- Left Side: Search Input and Action Icons -->\r\n        <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\r\n          <!-- Search Input - Apple Style -->\r\n          <div class=\"tw-max-w-md data-grid-search-input\">\r\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\r\n            [ngModel]=\"searchQuery()\"\r\n            (ngModelChange)=\"updateSearchQuery($event)\"\r\n            [placeholder]=\"searchConfig.placeholder\"\r\n            [disabled]=\"loading() || isRefreshing()\"\r\n            leadingIcon=\"search\"\r\n              fill=\"outline\"\r\n              size=\"sm\">\r\n          </cide-ele-input>\r\n          </div>\r\n          \r\n          <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\r\n          <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\r\n            <!-- Filter Button -->\r\n            <button type=\"button\"\r\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\r\n                    title=\"Filter\"\r\n                    (click)=\"onActionClick(null, { key: 'filter', label: 'Filter', icon: 'filter_list', variant: 'ghost', onClick: 'filter' })\">\r\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\r\n            </button>\r\n            \r\n            <!-- Sort Button -->\r\n            <button type=\"button\"\r\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\r\n                    title=\"Sort\"\r\n                    (click)=\"onActionClick(null, { key: 'sort', label: 'Sort', icon: 'swap_vert', variant: 'ghost', onClick: 'sort' })\">\r\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">swap_vert</cide-ele-icon>\r\n            </button>\r\n            \r\n            <!-- Download/Export Button with Dropdown -->\r\n            <div class=\"tw-relative\">\r\n              <button type=\"button\"\r\n                      class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\r\n                      title=\"Export\"\r\n                      (click)=\"toggleExportMenu($event)\">\r\n                <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\r\n              </button>\r\n              \r\n              <!-- Export Dropdown Menu -->\r\n              @if (showExportMenu()) {\r\n                <div class=\"tw-absolute tw-right-0 tw-mt-1 tw-w-48 tw-bg-white tw-rounded-md tw-shadow-lg tw-border tw-border-gray-200 tw-z-50\"\r\n                     (click)=\"$event.stopPropagation()\">\r\n                  <div class=\"tw-py-1\">\r\n                    <button type=\"button\"\r\n                            class=\"tw-w-full tw-text-left tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100 tw-flex tw-items-center\"\r\n                            (click)=\"exportData('csv')\">\r\n                      <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-2 tw-text-green-600\">description</cide-ele-icon>\r\n                      Export as CSV\r\n                    </button>\r\n                    <button type=\"button\"\r\n                            class=\"tw-w-full tw-text-left tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100 tw-flex tw-items-center\"\r\n                            (click)=\"exportData('excel')\">\r\n                      <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-2 tw-text-blue-600\">file_present</cide-ele-icon>\r\n                      Export as Excel\r\n                    </button>\r\n                    <button type=\"button\"\r\n                            class=\"tw-w-full tw-text-left tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100 tw-flex tw-items-center\"\r\n                            (click)=\"exportData('pdf')\">\r\n                      <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-2 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\r\n                      Export as PDF\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Right Side: Drag Order Actions -->\r\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <button cideEleButton \r\n                    variant=\"outline\" \r\n                    size=\"sm\" \r\n                    type=\"button\"\r\n                    (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\r\n                    class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\r\n              <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\r\n              Reset Order\r\n            </button>\r\n            <button cideEleButton \r\n                    variant=\"primary\" \r\n                    size=\"sm\" \r\n                    type=\"button\"\r\n                    (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\r\n                    class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\r\n              <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\r\n              Save Order\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n     <!-- Table Section -->\r\n   <div class=\"tw-overflow-x-auto tw-relative\"\r\n        [ngClass]=\"{\r\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\r\n          'tw-overflow-y-auto': scrollConfig?.enabled,\r\n          'tw-max-h-full': scrollConfig?.enabled\r\n        }\"\r\n        [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\r\n        [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\r\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\r\n           [class.empty-table]=\"displayedData.length === 0\"\r\n           [ngClass]=\"{\r\n             'tw-table-striped': mergedConfig().striped,\r\n             'tw-border': mergedConfig().bordered,\r\n             'tw-table-sm': mergedConfig().compact\r\n           }\"\r\n           style=\"table-layout: fixed;\">\r\n      \r\n      <!-- Table Header -->\r\n      <thead class=\"tw-bg-gray-50\" \r\n            [ngClass]=\"[\r\n              mergedConfig().headerClass || '',\r\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\r\n            ]\">\r\n        <tr>\r\n          @for (column of visibleColumns(); track column.key) {\r\n            <th\r\n              class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\r\n              [ngClass]=\"[\r\n                getColumnWidthClass(column.width),\r\n                getColumnMaxWidthClass(column.width),\r\n                column.align === 'center' ? 'tw-text-center' : '',\r\n                column.align === 'right' ? 'tw-text-right' : ''\r\n              ]\"\r\n              [title]=\"column.header\">\r\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\r\n                <span class=\"tw-truncate tw-flex-1\">{{ column.header }}</span>\r\n                \r\n                <!-- Active Filter Indicator -->\r\n                @if (isColumnFiltered(column.key)) {\r\n                  <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\r\n                    <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\r\n                    {{ getActiveFilterCount(column.key) }}\r\n                  </div>\r\n                }\r\n                \r\n                <!-- Column Menu Trigger (Three Dots Icon) -->\r\n                @if (mergedConfig().columnMenu?.enabled) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\r\n                    [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\r\n                    [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\"\r\n                    (click)=\"toggleColumnMenu(column.key, $event)\"\r\n                    title=\"Column options\">\r\n                    <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\r\n                  </button>\r\n                }\r\n              </div>\r\n\r\n              <!-- Column Menu Dropdown -->\r\n              @if (isColumnMenuOpen(column.key)) {\r\n                <div class=\"column-menu-dropdown tw-absolute tw-z-50 tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\r\n                  <div class=\"tw-py-1\">\r\n                    <!-- Sort Options -->\r\n                    @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnSort(column, 'asc')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\r\n                        Ascending\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnSort(column, 'desc')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\r\n                        Descending\r\n                      </button>\r\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n                    }\r\n\r\n                    <!-- Filter Option -->\r\n                    @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\r\n                      <!-- Check if there's a custom filter renderer template -->\r\n                      @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\r\n                        <div class=\"tw-px-4 tw-py-2\">\r\n                          <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\r\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\r\n                          </ng-container>\r\n                        </div>\r\n                      } @else {\r\n                        <!-- Excel-style Filter Button -->\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                          [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\"\r\n                          (click)=\"toggleFilterPanel(column.key, $event)\">\r\n                          <div class=\"tw-flex tw-items-center\">\r\n                            <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\r\n                            Filter\r\n                          </div>\r\n                          <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\r\n                            {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\r\n                          </cide-ele-icon>\r\n                        </button>\r\n                        \r\n                        <!-- Excel-style Filter Panel -->\r\n                        @if (isFilterPanelOpen(column.key)) {\r\n                          <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\r\n                            <!-- Search box -->\r\n                            <div class=\"tw-px-2 tw-mb-2\">\r\n                              <input\r\n                                type=\"text\"\r\n                                class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\r\n                                placeholder=\"Search...\"\r\n                                [(ngModel)]=\"filterSearchTerm\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                            </div>\r\n                            \r\n                            <!-- Select All / Deselect All -->\r\n                            <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\r\n                              <button\r\n                                type=\"button\"\r\n                                class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\r\n                                (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\r\n                                Select All\r\n                              </button>\r\n                              <span class=\"tw-text-xs tw-text-gray-400\">|</span>\r\n                              <button\r\n                                type=\"button\"\r\n                                class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\r\n                                (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\r\n                                Clear\r\n                              </button>\r\n                            </div>\r\n                            \r\n                            <!-- Filter values list -->\r\n                            <div class=\"tw-max-h-48 tw-overflow-y-auto\">\r\n                              @for (item of getUniqueColumnValues(column); track item.value) {\r\n                                <label class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\r\n                                  <input\r\n                                    type=\"checkbox\"\r\n                                    class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\r\n                                    [checked]=\"item.checked\"\r\n                                    (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\r\n                                    (click)=\"$event.stopPropagation()\">\r\n                                  <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\r\n                                  <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\r\n                                </label>\r\n                              }\r\n                            </div>\r\n                          </div>\r\n                        }\r\n                      }\r\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n                    }\r\n\r\n                    <!-- Autosize Option -->\r\n                    @if (mergedConfig().columnMenu?.showAutosize) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnAutosize(column)\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\r\n                        Autosize\r\n                      </button>\r\n                    }\r\n\r\n                    <!-- Group By Column Option -->\r\n                    @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnGroupBy(column)\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">group_work</cide-ele-icon>\r\n                        Group By Column\r\n                      </button>\r\n                    }\r\n\r\n                    <!-- Manage Columns Option -->\r\n                    @if (mergedConfig().columnMenu?.showManageColumns) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onManageColumns()\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\r\n                        Manage Columns\r\n                      </button>\r\n                    }\r\n\r\n                    <!-- Reset Columns Option -->\r\n                    @if (mergedConfig().columnMenu?.showResetColumns) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnReset()\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\r\n                        Reset Columns\r\n                      </button>\r\n                    }\r\n\r\n                    <!-- Hide Column Option -->\r\n                    @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\r\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnHide(column)\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\r\n                        Hide Column\r\n                      </button>\r\n                    }\r\n\r\n                    <!-- Aggregation Select Option -->\r\n                    @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\r\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n                      <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation</div>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnAggregation(column, 'sum')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\r\n                        Sum\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnAggregation(column, 'avg')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\r\n                        Average\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnAggregation(column, 'count')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\r\n                        Count\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnAggregation(column, 'min')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\r\n                        Min\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnAggregation(column, 'max')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\r\n                        Max\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n\r\n      <!-- Table Body -->\r\n      <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\r\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\r\n          <!-- Skeleton Loading Rows -->\r\n          @for (skeletonItem of getSkeletonArray(); track $index) {\r\n            <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\r\n              @for (column of columns; track column.key) {\r\n                <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\r\n                    [ngClass]=\"[\r\n                      getColumnWidthClass(column.width),\r\n                      getColumnMaxWidthClass(column.width)\r\n                    ]\">\r\n                  <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else {\r\n          @for (item of displayedData; track trackByFn($index, item)) {\r\n            <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\r\n                [ngClass]=\"[\r\n                  mergedConfig().rowClass || '',\r\n                  isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\r\n                  isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\r\n                  !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\r\n                  isTreeEnabled() ? getTreeLevelClass(item) : ''\r\n                ]\"\r\n                [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\r\n                [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\r\n                (click)=\"onRowClick(item)\"\r\n                (keydown.enter)=\"onRowClick(item)\"\r\n                (keydown.space)=\"onRowClick(item)\"\r\n                [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\r\n                [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\r\n                [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\r\n                [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\r\n                [draggable]=\"isDragDropEnabled()\"\r\n                (dragstart)=\"onDragStart($event, item, $index)\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                (drop)=\"onDrop($event, item, $index)\"\r\n                (dragend)=\"onDragEnd($event)\">\r\n              \r\n              @for (column of columns; track column.key) {\r\n                <td class=\"tw-pr-3 tw-py-1 tw-relative\"\r\n                    [ngClass]=\"[\r\n                      getColumnWidthClass(column.width),\r\n                      getColumnMaxWidthClass(column.width),\r\n                      mergedConfig().cellClass || '',\r\n                      column.align === 'center' ? 'tw-text-center' : '',\r\n                      column.align === 'right' ? 'tw-text-right' : '',\r\n                      column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\r\n                    ]\"\r\n                    [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\r\n                    [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\r\n                    [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '100px'\">\r\n                  <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\r\n                  @if (isTreeEnabled() && $index === 0) {\r\n                    <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                      <!-- Tree Indentation -->\r\n                      <div class=\"tw-flex tw-items-center\">\r\n                        @if (hasChildren(item)) {\r\n                          <button \r\n                            variant=\"outline\"\r\n                            size=\"xs\"\r\n                            type=\"button\"\r\n                            (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\r\n                            class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\r\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\r\n                            [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\r\n                            <cide-ele-icon \r\n                              class=\"tw-w-3 tw-h-3\"\r\n                              [class.tw-transition-transform]=\"!isDragDropEnabled()\"\r\n                              [class.tw-rotate-90]=\"isItemExpanded(item)\"\r\n                              size=\"xs\">\r\n                              chevron_right\r\n                            </cide-ele-icon>\r\n                          </button>\r\n                        } @else {\r\n                          <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\r\n                            <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                      \r\n                      <!-- Cell Content -->\r\n                      <div class=\"tw-flex-1 tw-w-full\">\r\n                        @if (column.type === 'text') {\r\n                          <p class=\"tw-text-sm tw-text-gray-900\"\r\n                             [class.tw-truncate]=\"column.truncate\"\r\n                             [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\r\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n                          </p>\r\n                        } @else if (column.type === 'number') {\r\n                          <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\r\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n                          </span>\r\n                        } @else if (column.type === 'date') {\r\n                          <span class=\"tw-text-sm tw-text-gray-600\">\r\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n                          </span>\r\n                        } @else if (column.type === 'boolean') {\r\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n                                [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n                            {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\r\n                          </span>\r\n                        } @else if (column.type === 'status' && column.statusConfig) {\r\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n                                [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\r\n                            {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\r\n                          </span>\r\n                        } @else if (column.type === 'actions' && column.actions) {\r\n                          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                            @for (action of column.actions; track action.key) {\r\n                              <button\r\n                                cideEleButton\r\n                                [variant]=\"action.variant || 'ghost'\"\r\n                                size=\"xs\"\r\n                                type=\"button\"\r\n                                (click)=\"onActionClick(item, action); $event.stopPropagation()\"\r\n                                [title]=\"action.tooltip || action.label\"\r\n                                [disabled]=\"isRefreshing()\"\r\n                                class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\r\n                                [class.tw-transition-colors]=\"!isDragDropEnabled()\"\r\n                                [ngClass]=\"{\r\n                                  'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\r\n                                  'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\r\n                                  'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\r\n                                  'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\r\n                                }\">\r\n                                @if (action.icon) {\r\n                                  <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n                                    <path d=\"M10 12l-5-5h10l-5 5z\"/>\r\n                                  </svg>\r\n                                }\r\n                                {{ action.label }}\r\n                              </button>\r\n                            }\r\n                          </div>\r\n                        } @else if (column.type === 'custom') {\r\n                          <!-- Template Renderer -->\r\n                          @if (column.renderer && isTemplateRenderer(column.renderer)) {\r\n                            <ng-container \r\n                              [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\r\n                              [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\r\n                            </ng-container>\r\n                          }\r\n                          <!-- Default rendering -->\r\n                          @else {\r\n                            <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\r\n                          }\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                  } @else {\r\n                    <!-- Regular cell content (non-tree or non-first column) -->\r\n                    @if (column.type === 'text') {\r\n                      <p class=\"tw-text-sm tw-text-gray-900\"\r\n                         [class.tw-truncate]=\"column.truncate\"\r\n                         [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\r\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n                      </p>\r\n                    } @else if (column.type === 'number') {\r\n                      <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\r\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n                      </span>\r\n                    } @else if (column.type === 'date') {\r\n                      <span class=\"tw-text-sm tw-text-gray-600\">\r\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n                      </span>\r\n                    } @else if (column.type === 'boolean') {\r\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n                            [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n                        {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\r\n                      </span>\r\n                    } @else if (column.type === 'status' && column.statusConfig) {\r\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n                            [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\r\n                        {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\r\n                      </span>\r\n                    } @else if (column.type === 'actions' && column.actions) {\r\n                      <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                        @for (action of column.actions; track action.key) {\r\n                          <button\r\n                            cideEleButton\r\n                            [variant]=\"action.variant || 'ghost'\"\r\n                            size=\"xs\"\r\n                            type=\"button\"\r\n                            (click)=\"onActionClick(item, action); $event.stopPropagation()\"\r\n                            [title]=\"action.tooltip || action.label\"\r\n                            [disabled]=\"isRefreshing()\"\r\n                            class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\r\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\r\n                            [ngClass]=\"{\r\n                              'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\r\n                              'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\r\n                              'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\r\n                              'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\r\n                            }\">\r\n                            @if (action.icon) {\r\n                              <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n                                <path d=\"M10 12l-5-5h10l-5 5z\"/>\r\n                              </svg>\r\n                            }\r\n                            {{ action.label }}\r\n                          </button>\r\n                        }\r\n                      </div>\r\n                    } @else if (column.type === 'custom') {\r\n                      <!-- Template Renderer -->\r\n                      @if (column.renderer && isTemplateRenderer(column.renderer)) {\r\n                        <ng-container \r\n                          [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\r\n                          [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\r\n                        </ng-container>\r\n                      }\r\n                      <!-- Default rendering -->\r\n                      @else {\r\n                        <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\r\n                      }\r\n                    }\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n          \r\n          <!-- Empty State -->\r\n          @if (displayedData.length === 0) {\r\n            <tr class=\"tw-h-full\">\r\n              <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\r\n                <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\r\n                  <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"></path>\r\n                  </svg>\r\n                  <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\r\n                  <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\r\n                    @if (searchQuery()) {\r\n                      No results match your search criteria.\r\n                    } @else {\r\n                      There are no items to display.\r\n                    }\r\n                  </p>\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n     <!-- Pagination Section -->\r\n   @if (paginationConfig.enabled && totalItems() > 0) {\r\n     <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\r\n          [class.tw-opacity-60]=\"isRefreshing()\">\r\n      \r\n      <!-- Results Info and Page Size -->\r\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-1 sm:tw-space-y-0\">\r\n        \r\n        <!-- Results Info -->\r\n        @if (paginationConfig.showPageInfo) {\r\n          <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n            <p class=\"tw-text-sm tw-text-gray-700\">\r\n              Showing {{ getItemRangeText() }} results\r\n            </p>\r\n            \r\n                         <!-- Page Size Selector -->\r\n             <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n               <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-500\">view_list</cide-ele-icon>\r\n               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\r\n               <div class=\"tw-w-16 tw-relative\">\r\n                 <cide-ele-select\r\n                   [labelHide]=\"true\"\r\n                   [ngModel]=\"pageSize()\"\r\n                   (ngModelChange)=\"updatePageSize($event)\"\r\n                   [options]=\"getPageSizeOptions()\"\r\n                   [disabled]=\"isRefreshing()\"\r\n                   fill=\"outline\"\r\n                   size=\"xs\"\r\n                   class=\"tw-z-30\">\r\n                 </cide-ele-select>\r\n               </div>\r\n             </div>\r\n          </div>\r\n        }\r\n\r\n        <!-- Pagination Controls -->\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          \r\n          <!-- Previous/Next and Page Numbers -->\r\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n            \r\n            <!-- First Page -->\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"onPageChange(1)\"\r\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\r\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n              title=\"First page\">\r\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">first_page</cide-ele-icon>\r\n            </button>\r\n            \r\n            <!-- Previous Page -->\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"previousPage()\"\r\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\r\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n              title=\"Previous page\">\r\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_left</cide-ele-icon>\r\n            </button>\r\n            \r\n            <!-- Page Numbers -->\r\n            @for (page of getEnhancedPageNumbers(); track page) {\r\n              @if (page === '...') {\r\n                <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\r\n              } @else {\r\n                <button\r\n                  type=\"button\"\r\n                  (click)=\"onPageChange(page)\"\r\n                  [disabled]=\"isRefreshing()\"\r\n                  class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n                  [ngClass]=\"{\r\n                    'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700': currentPage() === page,\r\n                    'tw-bg-white tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\r\n                  }\"\r\n                  [title]=\"'Page ' + page\">\r\n                  {{ page }}\r\n                </button>\r\n              }\r\n            }\r\n            \r\n            <!-- Next Page -->\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"nextPage()\"\r\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\r\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n              title=\"Next page\">\r\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_right</cide-ele-icon>\r\n            </button>\r\n            \r\n            <!-- Last Page -->\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"onPageChange(totalPages())\"\r\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\r\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n              title=\"Last page\">\r\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">last_page</cide-ele-icon>\r\n            </button>\r\n            \r\n          </div>\r\n\r\n          <!-- Quick Jump and Refresh -->\r\n          @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\r\n            <div class=\"tw-flex tw-items-center tw-space-x-1 tw-border-l tw-border-gray-200 tw-pl-2\">\r\n              \r\n              <!-- Quick Jump -->\r\n              @if (paginationConfig.showQuickJump) {\r\n                                  <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n                    <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\r\n                    <div class=\"tw-w-16\">\r\n                                              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\r\n                          [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\r\n                          [disabled]=\"isRefreshing()\"\r\n                          size=\"xs\"\r\n                          (keydown.enter)=\"onJumpToPage()\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                  <button\r\n                    type=\"button\"\r\n                    (click)=\"onJumpToPage()\"\r\n                    [disabled]=\"isRefreshing()\"\r\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-200 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n                    title=\"Go to page\">\r\n                    Go\r\n                  </button>\r\n                </div>\r\n              }\r\n              \r\n              <!-- Refresh Button -->\r\n              @if (paginationConfig.showRefresh) {\r\n                <button\r\n                  type=\"button\"\r\n                  (click)=\"onRefresh()\"\r\n                  [disabled]=\"isRefreshing()\"\r\n                  class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n                  title=\"Refresh\">\r\n                  @if (isRefreshing()) {\r\n                    <cide-ele-icon class=\"tw-w-[22px] tw-h-4 tw-animate-spin\">refresh</cide-ele-icon>\r\n                  } @else {\r\n                    <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">refresh</cide-ele-icon>\r\n                  }\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n          \r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:#1f2937;background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000a,0 1px 2px #00000005;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:#fff}.data-grid-container thead{background:linear-gradient(180deg,#fafafa,#f7f7f7);border-bottom:1px solid rgba(0,0,0,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.data-grid-container thead th{background:transparent;color:#6b7280;font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid rgba(0,0,0,.06);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:#00000005}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:#0000000f}.data-grid-container tbody{background-color:#fff}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid rgba(0,0,0,.03);color:#1f2937;font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:#fff;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr:hover{background-color:#00000005;transform:scale(1.001)}.data-grid-container tbody tr:hover td{border-bottom-color:#0000000a}.data-grid-container tbody tr:active{background-color:#00000008;transform:scale(.999)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#00000004}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:#00000008;transform:scale(1.001)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;border:1px solid rgba(0,0,0,.08);background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:1px solid rgba(0,0,0,.06);background:linear-gradient(180deg,#fafafa,#f7f7f7)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05)}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #3b82f6;border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:#f8fafc;box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:10}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:#f3f4f6;border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, decorators: [{
             type: Component,
@@ -10035,7 +10379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideSelectComponent,
                         CideIconComponent,
                         CideEleButtonComponent
-                    ], template: "  <!-- Data Grid Component -->\n  <div class=\"data-grid-container tw-bg-white tw-shadow tw-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \n       [ngClass]=\"[\n         mergedConfig().tableClass || '',\n         mergedConfig().fullHeight ? 'tw-h-full' : '',\n         isDragDropEnabled() ? 'drag-drop-enabled' : '',\n         isTreeEnabled() ? 'tree-enabled' : ''\n       ]\">\n  \n  <!-- Header Section -->\n  @if (mergedConfig().title || mergedConfig().subtitle) {\n    <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n      @if (mergedConfig().title) {\n        <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\n          {{ mergedConfig().title }}\n        </h3>\n      }\n      @if (mergedConfig().subtitle) {\n        <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\n          {{ mergedConfig().subtitle }}\n        </p>\n      }\n    </div>\n  }\n\n  <!-- Search Section -->\n  @if (searchConfig.enabled) {\n    <div class=\"tw-px-3 tw-py-1.5 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Left Side: Search Input and Action Icons -->\n        <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\n          <!-- Search Input - Apple Style -->\n          <div class=\"tw-max-w-md data-grid-search-input\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\"\n            (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\"\n            [disabled]=\"loading() || isRefreshing()\"\n            leadingIcon=\"search\"\n              fill=\"outline\"\n              size=\"sm\">\n          </cide-ele-input>\n          </div>\n          \n          <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\n            <!-- Filter Button -->\n            <button type=\"button\"\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\n                    title=\"Filter\"\n                    (click)=\"onActionClick(null, { key: 'filter', label: 'Filter', icon: 'filter_list', variant: 'ghost', onClick: 'filter' })\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\n            </button>\n            \n            <!-- Sort Button -->\n            <button type=\"button\"\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\n                    title=\"Sort\"\n                    (click)=\"onActionClick(null, { key: 'sort', label: 'Sort', icon: 'swap_vert', variant: 'ghost', onClick: 'sort' })\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">swap_vert</cide-ele-icon>\n            </button>\n            \n            <!-- Download/Export Button -->\n            <button type=\"button\"\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\n                    title=\"Download\"\n                    (click)=\"onActionClick(null, { key: 'download', label: 'Download', icon: 'file_download', variant: 'ghost', onClick: 'download' })\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\n            </button>\n          </div>\n        </div>\n        \n        <!-- Right Side: Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <button cideEleButton \n                    variant=\"outline\" \n                    size=\"sm\" \n                    type=\"button\"\n                    (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\n                    class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\n              <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\n              Reset Order\n            </button>\n            <button cideEleButton \n                    variant=\"primary\" \n                    size=\"sm\" \n                    type=\"button\"\n                    (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\n                    class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\n              <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\n              Save Order\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n     <!-- Table Section -->\n   <div class=\"tw-overflow-x-auto tw-relative\"\n        [ngClass]=\"{\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\n          'tw-overflow-y-auto': scrollConfig?.enabled,\n          'tw-max-h-full': scrollConfig?.enabled\n        }\"\n        [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\n        [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\n           [class.empty-table]=\"displayedData.length === 0\"\n           [ngClass]=\"{\n             'tw-table-striped': mergedConfig().striped,\n             'tw-border': mergedConfig().bordered,\n             'tw-table-sm': mergedConfig().compact\n           }\"\n           style=\"table-layout: fixed;\">\n      \n      <!-- Table Header -->\n      <thead class=\"tw-bg-gray-50\" \n            [ngClass]=\"[\n              mergedConfig().headerClass || '',\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\n            ]\">\n        <tr>\n          @for (column of visibleColumns(); track column.key) {\n            <th\n              class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\n              [ngClass]=\"[\n                getColumnWidthClass(column.width),\n                getColumnMaxWidthClass(column.width),\n                column.align === 'center' ? 'tw-text-center' : '',\n                column.align === 'right' ? 'tw-text-right' : ''\n              ]\"\n              [title]=\"column.header\">\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\n                <span class=\"tw-truncate tw-flex-1\">{{ column.header }}</span>\n                \n                <!-- Active Filter Indicator -->\n                @if (isColumnFiltered(column.key)) {\n                  <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\n                    <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\n                    {{ getActiveFilterCount(column.key) }}\n                  </div>\n                }\n                \n                <!-- Column Menu Trigger (Three Dots Icon) -->\n                @if (mergedConfig().columnMenu?.enabled) {\n                  <button\n                    type=\"button\"\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\n                    [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\n                    [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\"\n                    (click)=\"toggleColumnMenu(column.key, $event)\"\n                    title=\"Column options\">\n                    <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\n                  </button>\n                }\n              </div>\n\n              <!-- Column Menu Dropdown -->\n              @if (isColumnMenuOpen(column.key)) {\n                <div class=\"column-menu-dropdown tw-absolute tw-z-50 tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\n                  <div class=\"tw-py-1\">\n                    <!-- Sort Options -->\n                    @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnSort(column, 'asc')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n                        Ascending\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnSort(column, 'desc')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n                        Descending\n                      </button>\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                    }\n\n                    <!-- Filter Option -->\n                    @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\n                      <!-- Check if there's a custom filter renderer template -->\n                      @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\n                        <div class=\"tw-px-4 tw-py-2\">\n                          <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\n                          </ng-container>\n                        </div>\n                      } @else {\n                        <!-- Excel-style Filter Button -->\n                        <button\n                          type=\"button\"\n                          class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                          [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\"\n                          (click)=\"toggleFilterPanel(column.key, $event)\">\n                          <div class=\"tw-flex tw-items-center\">\n                            <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\n                            Filter\n                          </div>\n                          <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\n                            {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\n                          </cide-ele-icon>\n                        </button>\n                        \n                        <!-- Excel-style Filter Panel -->\n                        @if (isFilterPanelOpen(column.key)) {\n                          <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\n                            <!-- Search box -->\n                            <div class=\"tw-px-2 tw-mb-2\">\n                              <input\n                                type=\"text\"\n                                class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\n                                placeholder=\"Search...\"\n                                [(ngModel)]=\"filterSearchTerm\"\n                                (click)=\"$event.stopPropagation()\">\n                            </div>\n                            \n                            <!-- Select All / Deselect All -->\n                            <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\n                              <button\n                                type=\"button\"\n                                class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                                (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\n                                Select All\n                              </button>\n                              <span class=\"tw-text-xs tw-text-gray-400\">|</span>\n                              <button\n                                type=\"button\"\n                                class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\n                                (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\n                                Clear\n                              </button>\n                            </div>\n                            \n                            <!-- Filter values list -->\n                            <div class=\"tw-max-h-48 tw-overflow-y-auto\">\n                              @for (item of getUniqueColumnValues(column); track item.value) {\n                                <label class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\n                                  <input\n                                    type=\"checkbox\"\n                                    class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n                                    [checked]=\"item.checked\"\n                                    (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\n                                    (click)=\"$event.stopPropagation()\">\n                                  <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\n                                  <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\n                                </label>\n                              }\n                            </div>\n                          </div>\n                        }\n                      }\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                    }\n\n                    <!-- Autosize Option -->\n                    @if (mergedConfig().columnMenu?.showAutosize) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnAutosize(column)\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\n                        Autosize\n                      </button>\n                    }\n\n                    <!-- Group By Column Option -->\n                    @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnGroupBy(column)\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">group_work</cide-ele-icon>\n                        Group By Column\n                      </button>\n                    }\n\n                    <!-- Manage Columns Option -->\n                    @if (mergedConfig().columnMenu?.showManageColumns) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onManageColumns()\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\n                        Manage Columns\n                      </button>\n                    }\n\n                    <!-- Reset Columns Option -->\n                    @if (mergedConfig().columnMenu?.showResetColumns) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnReset()\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\n                        Reset Columns\n                      </button>\n                    }\n\n                    <!-- Hide Column Option -->\n                    @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnHide(column)\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\n                        Hide Column\n                      </button>\n                    }\n\n                    <!-- Aggregation Select Option -->\n                    @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\n                      <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation</div>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnAggregation(column, 'sum')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\n                        Sum\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnAggregation(column, 'avg')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\n                        Average\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnAggregation(column, 'count')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\n                        Count\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnAggregation(column, 'min')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\n                        Min\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\n                        (click)=\"onColumnAggregation(column, 'max')\">\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\n                        Max\n                      </button>\n                    }\n                  </div>\n                </div>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n          <!-- Skeleton Loading Rows -->\n          @for (skeletonItem of getSkeletonArray(); track $index) {\n            <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n              @for (column of columns; track column.key) {\n                <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\">\n                  <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n                </td>\n              }\n            </tr>\n          }\n        } @else {\n          @for (item of displayedData; track trackByFn($index, item)) {\n            <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\n                [ngClass]=\"[\n                  mergedConfig().rowClass || '',\n                  isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n                  isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n                  !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n                  isTreeEnabled() ? getTreeLevelClass(item) : ''\n                ]\"\n                [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n                [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\n                (click)=\"onRowClick(item)\"\n                (keydown.enter)=\"onRowClick(item)\"\n                (keydown.space)=\"onRowClick(item)\"\n                [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n                [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n                [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n                [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n                [draggable]=\"isDragDropEnabled()\"\n                (dragstart)=\"onDragStart($event, item, $index)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, item, $index)\"\n                (dragend)=\"onDragEnd($event)\">\n              \n              @for (column of columns; track column.key) {\n                <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width),\n                      mergedConfig().cellClass || '',\n                      column.align === 'center' ? 'tw-text-center' : '',\n                      column.align === 'right' ? 'tw-text-right' : '',\n                      column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n                    ]\"\n                    [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n                    [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\n                    [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '100px'\">\n                  <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n                  @if (isTreeEnabled() && $index === 0) {\n                    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                      <!-- Tree Indentation -->\n                      <div class=\"tw-flex tw-items-center\">\n                        @if (hasChildren(item)) {\n                          <button \n                            variant=\"outline\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n                            class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                            [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                            <cide-ele-icon \n                              class=\"tw-w-3 tw-h-3\"\n                              [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                              [class.tw-rotate-90]=\"isItemExpanded(item)\"\n                              size=\"xs\">\n                              chevron_right\n                            </cide-ele-icon>\n                          </button>\n                        } @else {\n                          <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n                            <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n                          </div>\n                        }\n                      </div>\n                      \n                      <!-- Cell Content -->\n                      <div class=\"tw-flex-1 tw-w-full\">\n                        @if (column.type === 'text') {\n                          <p class=\"tw-text-sm tw-text-gray-900\"\n                             [class.tw-truncate]=\"column.truncate\"\n                             [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </p>\n                        } @else if (column.type === 'number') {\n                          <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </span>\n                        } @else if (column.type === 'date') {\n                          <span class=\"tw-text-sm tw-text-gray-600\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </span>\n                        } @else if (column.type === 'boolean') {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                                [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                            {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                          </span>\n                        } @else if (column.type === 'status' && column.statusConfig) {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                                [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                            {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                          </span>\n                        } @else if (column.type === 'actions' && column.actions) {\n                          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                            @for (action of column.actions; track action.key) {\n                              <button\n                                cideEleButton\n                                [variant]=\"action.variant || 'ghost'\"\n                                size=\"xs\"\n                                type=\"button\"\n                                (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                                [title]=\"action.tooltip || action.label\"\n                                [disabled]=\"isRefreshing()\"\n                                class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                                [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                                [ngClass]=\"{\n                                  'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                  'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                  'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                  'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                }\">\n                                @if (action.icon) {\n                                  <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                                    <path d=\"M10 12l-5-5h10l-5 5z\"/>\n                                  </svg>\n                                }\n                                {{ action.label }}\n                              </button>\n                            }\n                          </div>\n                        } @else if (column.type === 'custom') {\n                          <!-- Template Renderer -->\n                          @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                            <ng-container \n                              [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                              [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                            </ng-container>\n                          }\n                          <!-- Default rendering -->\n                          @else {\n                            <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                          }\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    <!-- Regular cell content (non-tree or non-first column) -->\n                    @if (column.type === 'text') {\n                      <p class=\"tw-text-sm tw-text-gray-900\"\n                         [class.tw-truncate]=\"column.truncate\"\n                         [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                      </p>\n                    } @else if (column.type === 'number') {\n                      <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                      </span>\n                    } @else if (column.type === 'date') {\n                      <span class=\"tw-text-sm tw-text-gray-600\">\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                      </span>\n                    } @else if (column.type === 'boolean') {\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                            [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                        {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                      </span>\n                    } @else if (column.type === 'status' && column.statusConfig) {\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                            [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                        {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                      </span>\n                    } @else if (column.type === 'actions' && column.actions) {\n                      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                        @for (action of column.actions; track action.key) {\n                          <button\n                            cideEleButton\n                            [variant]=\"action.variant || 'ghost'\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                            [title]=\"action.tooltip || action.label\"\n                            [disabled]=\"isRefreshing()\"\n                            class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                            [ngClass]=\"{\n                              'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                              'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                              'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                              'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                            }\">\n                            @if (action.icon) {\n                              <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                                <path d=\"M10 12l-5-5h10l-5 5z\"/>\n                              </svg>\n                            }\n                            {{ action.label }}\n                          </button>\n                        }\n                      </div>\n                    } @else if (column.type === 'custom') {\n                      <!-- Template Renderer -->\n                      @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                        <ng-container \n                          [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                          [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\n                        </ng-container>\n                      }\n                      <!-- Default rendering -->\n                      @else {\n                        <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\n                      }\n                    }\n                  }\n                </td>\n              }\n            </tr>\n          }\n          \n          <!-- Empty State -->\n          @if (displayedData.length === 0) {\n            <tr class=\"tw-h-full\">\n              <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n                <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n                  <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"></path>\n                  </svg>\n                  <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n                  <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n                    @if (searchQuery()) {\n                      No results match your search criteria.\n                    } @else {\n                      There are no items to display.\n                    }\n                  </p>\n                </div>\n              </td>\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n\n     <!-- Pagination Section -->\n   @if (paginationConfig.enabled && totalItems() > 0) {\n     <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n          [class.tw-opacity-60]=\"isRefreshing()\">\n      \n      <!-- Results Info and Page Size -->\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-1 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-3\">\n            <p class=\"tw-text-sm tw-text-gray-700\">\n              Showing {{ getItemRangeText() }} results\n            </p>\n            \n                         <!-- Page Size Selector -->\n             <div class=\"tw-flex tw-items-center tw-space-x-2\">\n               <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-500\">view_list</cide-ele-icon>\n               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-16 tw-relative\">\n                 <cide-ele-select\n                   [labelHide]=\"true\"\n                   [ngModel]=\"pageSize()\"\n                   (ngModelChange)=\"updatePageSize($event)\"\n                   [options]=\"getPageSizeOptions()\"\n                   [disabled]=\"isRefreshing()\"\n                   fill=\"outline\"\n                   size=\"xs\"\n                   class=\"tw-z-30\">\n                 </cide-ele-select>\n               </div>\n             </div>\n          </div>\n        }\n\n        <!-- Pagination Controls -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          \n          <!-- Previous/Next and Page Numbers -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            \n            <!-- First Page -->\n            <button\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n              title=\"First page\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">first_page</cide-ele-icon>\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n              title=\"Previous page\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_left</cide-ele-icon>\n            </button>\n            \n            <!-- Page Numbers -->\n            @for (page of getEnhancedPageNumbers(); track page) {\n              @if (page === '...') {\n                <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n              } @else {\n                <button\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\"\n                  [title]=\"'Page ' + page\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n              title=\"Next page\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_right</cide-ele-icon>\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n              title=\"Last page\">\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">last_page</cide-ele-icon>\n            </button>\n            \n          </div>\n\n          <!-- Quick Jump and Refresh -->\n          @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n            <div class=\"tw-flex tw-items-center tw-space-x-1 tw-border-l tw-border-gray-200 tw-pl-2\">\n              \n              <!-- Quick Jump -->\n              @if (paginationConfig.showQuickJump) {\n                                  <div class=\"tw-flex tw-items-center tw-space-x-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n                    <div class=\"tw-w-16\">\n                                              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                          [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n                          [disabled]=\"isRefreshing()\"\n                          size=\"xs\"\n                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-200 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n                    title=\"Go to page\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n                  title=\"Refresh\">\n                  @if (isRefreshing()) {\n                    <cide-ele-icon class=\"tw-w-[22px] tw-h-4 tw-animate-spin\">refresh</cide-ele-icon>\n                  } @else {\n                    <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">refresh</cide-ele-icon>\n                  }\n                </button>\n              }\n            </div>\n          }\n          \n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:#1f2937;background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000a,0 1px 2px #00000005;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:#fff}.data-grid-container thead{background:linear-gradient(180deg,#fafafa,#f7f7f7);border-bottom:1px solid rgba(0,0,0,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.data-grid-container thead th{background:transparent;color:#6b7280;font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid rgba(0,0,0,.06);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:#00000005}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:#0000000f}.data-grid-container tbody{background-color:#fff}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid rgba(0,0,0,.03);color:#1f2937;font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:#fff;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr:hover{background-color:#00000005;transform:scale(1.001)}.data-grid-container tbody tr:hover td{border-bottom-color:#0000000a}.data-grid-container tbody tr:active{background-color:#00000008;transform:scale(.999)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#00000004}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:#00000008;transform:scale(1.001)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;border:1px solid rgba(0,0,0,.08);background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:1px solid rgba(0,0,0,.06);background:linear-gradient(180deg,#fafafa,#f7f7f7)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05)}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #3b82f6;border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:#f8fafc;box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:10}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:#f3f4f6;border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"] }]
+                    ], template: "  <!-- Data Grid Component -->\r\n  <div class=\"data-grid-container tw-bg-white tw-shadow tw-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \r\n       [ngClass]=\"[\r\n         mergedConfig().tableClass || '',\r\n         mergedConfig().fullHeight ? 'tw-h-full' : '',\r\n         isDragDropEnabled() ? 'drag-drop-enabled' : '',\r\n         isTreeEnabled() ? 'tree-enabled' : ''\r\n       ]\">\r\n  \r\n  <!-- Header Section -->\r\n  @if (mergedConfig().title || mergedConfig().subtitle) {\r\n    <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\r\n      @if (mergedConfig().title) {\r\n        <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\r\n          {{ mergedConfig().title }}\r\n        </h3>\r\n      }\r\n      @if (mergedConfig().subtitle) {\r\n        <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\r\n          {{ mergedConfig().subtitle }}\r\n        </p>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Search Section -->\r\n  @if (searchConfig.enabled) {\r\n    <div class=\"tw-px-3 tw-py-1.5 tw-border-b tw-border-gray-200\">\r\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n        <!-- Left Side: Search Input and Action Icons -->\r\n        <div class=\"tw-flex tw-items-center tw-space-x-1.5\">\r\n          <!-- Search Input - Apple Style -->\r\n          <div class=\"tw-max-w-md data-grid-search-input\">\r\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\r\n            [ngModel]=\"searchQuery()\"\r\n            (ngModelChange)=\"updateSearchQuery($event)\"\r\n            [placeholder]=\"searchConfig.placeholder\"\r\n            [disabled]=\"loading() || isRefreshing()\"\r\n            leadingIcon=\"search\"\r\n              fill=\"outline\"\r\n              size=\"sm\">\r\n          </cide-ele-input>\r\n          </div>\r\n          \r\n          <!-- Action Icons (Filter, Sort, Download) - Apple Style Compact -->\r\n          <div class=\"tw-flex tw-items-center tw-space-x-1 data-grid-action-buttons\">\r\n            <!-- Filter Button -->\r\n            <button type=\"button\"\r\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\r\n                    title=\"Filter\"\r\n                    (click)=\"onActionClick(null, { key: 'filter', label: 'Filter', icon: 'filter_list', variant: 'ghost', onClick: 'filter' })\">\r\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\r\n            </button>\r\n            \r\n            <!-- Sort Button -->\r\n            <button type=\"button\"\r\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\r\n                    title=\"Sort\"\r\n                    (click)=\"onActionClick(null, { key: 'sort', label: 'Sort', icon: 'swap_vert', variant: 'ghost', onClick: 'sort' })\">\r\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">swap_vert</cide-ele-icon>\r\n            </button>\r\n            \r\n            <!-- Download/Export Button with Dropdown -->\r\n            <div class=\"tw-relative\">\r\n              <button type=\"button\"\r\n                      class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200\"\r\n                      title=\"Export\"\r\n                      (click)=\"toggleExportMenu($event)\">\r\n                <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\r\n              </button>\r\n              \r\n              <!-- Export Dropdown Menu -->\r\n              @if (showExportMenu()) {\r\n                <div class=\"tw-absolute tw-right-0 tw-mt-1 tw-w-48 tw-bg-white tw-rounded-md tw-shadow-lg tw-border tw-border-gray-200 tw-z-50\"\r\n                     (click)=\"$event.stopPropagation()\">\r\n                  <div class=\"tw-py-1\">\r\n                    <button type=\"button\"\r\n                            class=\"tw-w-full tw-text-left tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100 tw-flex tw-items-center\"\r\n                            (click)=\"exportData('csv')\">\r\n                      <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-2 tw-text-green-600\">description</cide-ele-icon>\r\n                      Export as CSV\r\n                    </button>\r\n                    <button type=\"button\"\r\n                            class=\"tw-w-full tw-text-left tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100 tw-flex tw-items-center\"\r\n                            (click)=\"exportData('excel')\">\r\n                      <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-2 tw-text-blue-600\">file_present</cide-ele-icon>\r\n                      Export as Excel\r\n                    </button>\r\n                    <button type=\"button\"\r\n                            class=\"tw-w-full tw-text-left tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100 tw-flex tw-items-center\"\r\n                            (click)=\"exportData('pdf')\">\r\n                      <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-2 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\r\n                      Export as PDF\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Right Side: Drag Order Actions -->\r\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <button cideEleButton \r\n                    variant=\"outline\" \r\n                    size=\"sm\" \r\n                    type=\"button\"\r\n                    (click)=\"onActionClick(null, { key: 'reset-order', label: 'Reset Order', icon: 'undo', variant: 'outline', onClick: 'resetOrder' })\"\r\n                    class=\"tw-text-blue-700 tw-border-blue-300 hover:tw-bg-blue-100\">\r\n              <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">undo</cide-ele-icon>\r\n              Reset Order\r\n            </button>\r\n            <button cideEleButton \r\n                    variant=\"primary\" \r\n                    size=\"sm\" \r\n                    type=\"button\"\r\n                    (click)=\"onActionClick(null, { key: 'save-order', label: 'Save Order', icon: 'save', variant: 'primary', onClick: 'saveOrder' })\"\r\n                    class=\"tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white\">\r\n              <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">save</cide-ele-icon>\r\n              Save Order\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n     <!-- Table Section -->\r\n   <div class=\"tw-overflow-x-auto tw-relative\"\r\n        [ngClass]=\"{\r\n          'tw-flex-1 tw-min-h-0': mergedConfig().fullHeight,\r\n          'tw-overflow-y-auto': scrollConfig?.enabled,\r\n          'tw-max-h-full': scrollConfig?.enabled\r\n        }\"\r\n        [style.maxHeight]=\"scrollConfig?.enabled ? scrollConfig?.maxHeight : null\"\r\n        [style.minHeight]=\"scrollConfig?.enabled ? scrollConfig?.minHeight : null\">\r\n    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-h-full tw-table-fixed\"\r\n           [class.empty-table]=\"displayedData.length === 0\"\r\n           [ngClass]=\"{\r\n             'tw-table-striped': mergedConfig().striped,\r\n             'tw-border': mergedConfig().bordered,\r\n             'tw-table-sm': mergedConfig().compact\r\n           }\"\r\n           style=\"table-layout: fixed;\">\r\n      \r\n      <!-- Table Header -->\r\n      <thead class=\"tw-bg-gray-50\" \r\n            [ngClass]=\"[\r\n              mergedConfig().headerClass || '',\r\n              scrollConfig?.enabled && scrollConfig?.stickyHeader ? 'tw-sticky tw-top-0 tw-z-10' : ''\r\n            ]\">\r\n        <tr>\r\n          @for (column of visibleColumns(); track column.key) {\r\n            <th\r\n              class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-relative\"\r\n              [ngClass]=\"[\r\n                getColumnWidthClass(column.width),\r\n                getColumnMaxWidthClass(column.width),\r\n                column.align === 'center' ? 'tw-text-center' : '',\r\n                column.align === 'right' ? 'tw-text-right' : ''\r\n              ]\"\r\n              [title]=\"column.header\">\r\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\r\n                <span class=\"tw-truncate tw-flex-1\">{{ column.header }}</span>\r\n                \r\n                <!-- Active Filter Indicator -->\r\n                @if (isColumnFiltered(column.key)) {\r\n                  <div class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-blue-100 tw-text-blue-700 tw-text-xs tw-font-medium tw-mr-1\">\r\n                    <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-mr-0.5\">filter_alt</cide-ele-icon>\r\n                    {{ getActiveFilterCount(column.key) }}\r\n                  </div>\r\n                }\r\n                \r\n                <!-- Column Menu Trigger (Three Dots Icon) -->\r\n                @if (mergedConfig().columnMenu?.enabled) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-600 hover:tw-text-gray-800 hover:tw-bg-gray-100 tw-transition-all column-menu-trigger\"\r\n                    [class.tw-text-blue-600]=\"isColumnMenuOpen(column.key) || isColumnFiltered(column.key)\"\r\n                    [class.tw-bg-blue-50]=\"isColumnFiltered(column.key)\"\r\n                    (click)=\"toggleColumnMenu(column.key, $event)\"\r\n                    title=\"Column options\">\r\n                    <cide-ele-icon class=\"tw-w-5 tw-h-4\">more_vert</cide-ele-icon>\r\n                  </button>\r\n                }\r\n              </div>\r\n\r\n              <!-- Column Menu Dropdown -->\r\n              @if (isColumnMenuOpen(column.key)) {\r\n                <div class=\"column-menu-dropdown tw-absolute tw-z-50 tw-mt-2 tw-w-56 tw-rounded-lg tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5\">\r\n                  <div class=\"tw-py-1\">\r\n                    <!-- Sort Options -->\r\n                    @if (mergedConfig().columnMenu?.showSort && column.sortable !== false) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnSort(column, 'asc')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\r\n                        Ascending\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnSort(column, 'desc')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\r\n                        Descending\r\n                      </button>\r\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n                    }\r\n\r\n                    <!-- Filter Option -->\r\n                    @if (mergedConfig().columnMenu?.showFilter && column.filterable !== false) {\r\n                      <!-- Check if there's a custom filter renderer template -->\r\n                      @if (column.filterRenderer && templateRenderers[column.filterRenderer]) {\r\n                        <div class=\"tw-px-4 tw-py-2\">\r\n                          <ng-container [ngTemplateOutlet]=\"$any(templateRenderers[column.filterRenderer])\"\r\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column: column, onFilter: onColumnFilter.bind(this) }\">\r\n                          </ng-container>\r\n                        </div>\r\n                      } @else {\r\n                        <!-- Excel-style Filter Button -->\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"tw-w-full tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                          [class.tw-bg-blue-50]=\"isFilterPanelOpen(column.key)\"\r\n                          (click)=\"toggleFilterPanel(column.key, $event)\">\r\n                          <div class=\"tw-flex tw-items-center\">\r\n                            <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">filter_list</cide-ele-icon>\r\n                            Filter\r\n                          </div>\r\n                          <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-gray-400\">\r\n                            {{ isFilterPanelOpen(column.key) ? 'expand_less' : 'expand_more' }}\r\n                          </cide-ele-icon>\r\n                        </button>\r\n                        \r\n                        <!-- Excel-style Filter Panel -->\r\n                        @if (isFilterPanelOpen(column.key)) {\r\n                          <div class=\"tw-px-2 tw-py-2 tw-bg-gray-50\" (click)=\"$event.stopPropagation()\">\r\n                            <!-- Search box -->\r\n                            <div class=\"tw-px-2 tw-mb-2\">\r\n                              <input\r\n                                type=\"text\"\r\n                                class=\"tw-w-full tw-px-2 tw-py-1 tw-text-xs tw-border tw-border-gray-300 tw-rounded focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-blue-500\"\r\n                                placeholder=\"Search...\"\r\n                                [(ngModel)]=\"filterSearchTerm\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                            </div>\r\n                            \r\n                            <!-- Select All / Deselect All -->\r\n                            <div class=\"tw-px-2 tw-mb-1 tw-flex tw-gap-2\">\r\n                              <button\r\n                                type=\"button\"\r\n                                class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\r\n                                (click)=\"selectAllFilterValues(column); $event.stopPropagation()\">\r\n                                Select All\r\n                              </button>\r\n                              <span class=\"tw-text-xs tw-text-gray-400\">|</span>\r\n                              <button\r\n                                type=\"button\"\r\n                                class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-700\"\r\n                                (click)=\"deselectAllFilterValues(column); $event.stopPropagation()\">\r\n                                Clear\r\n                              </button>\r\n                            </div>\r\n                            \r\n                            <!-- Filter values list -->\r\n                            <div class=\"tw-max-h-48 tw-overflow-y-auto\">\r\n                              @for (item of getUniqueColumnValues(column); track item.value) {\r\n                                <label class=\"tw-flex tw-items-center tw-px-2 tw-py-1 tw-text-xs hover:tw-bg-white tw-cursor-pointer tw-rounded\">\r\n                                  <input\r\n                                    type=\"checkbox\"\r\n                                    class=\"tw-mr-2 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\r\n                                    [checked]=\"item.checked\"\r\n                                    (change)=\"toggleFilterValue(column, item.value, $any($event.target).checked)\"\r\n                                    (click)=\"$event.stopPropagation()\">\r\n                                  <span class=\"tw-flex-1 tw-truncate\">{{ item.label }}</span>\r\n                                  <span class=\"tw-text-gray-400 tw-ml-1\">({{ item.count }})</span>\r\n                                </label>\r\n                              }\r\n                            </div>\r\n                          </div>\r\n                        }\r\n                      }\r\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n                    }\r\n\r\n                    <!-- Autosize Option -->\r\n                    @if (mergedConfig().columnMenu?.showAutosize) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnAutosize(column)\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">fit_screen</cide-ele-icon>\r\n                        Autosize\r\n                      </button>\r\n                    }\r\n\r\n                    <!-- Group By Column Option -->\r\n                    @if (mergedConfig().columnMenu?.showGroupBy && column.groupable !== false) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnGroupBy(column)\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">group_work</cide-ele-icon>\r\n                        Group By Column\r\n                      </button>\r\n                    }\r\n\r\n                    <!-- Manage Columns Option -->\r\n                    @if (mergedConfig().columnMenu?.showManageColumns) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onManageColumns()\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">view_column</cide-ele-icon>\r\n                        Manage Columns\r\n                      </button>\r\n                    }\r\n\r\n                    <!-- Reset Columns Option -->\r\n                    @if (mergedConfig().columnMenu?.showResetColumns) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnReset()\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">refresh</cide-ele-icon>\r\n                        Reset Columns\r\n                      </button>\r\n                    }\r\n\r\n                    <!-- Hide Column Option -->\r\n                    @if (mergedConfig().columnMenu?.showHideColumn && column.hideable !== false) {\r\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnHide(column)\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">visibility_off</cide-ele-icon>\r\n                        Hide Column\r\n                      </button>\r\n                    }\r\n\r\n                    <!-- Aggregation Select Option -->\r\n                    @if (mergedConfig().columnMenu?.showAggregation && column.aggregatable !== false) {\r\n                      <div class=\"tw-border-t tw-border-gray-100 tw-my-1\"></div>\r\n                      <div class=\"tw-px-4 tw-py-2 tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase\">Aggregation</div>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnAggregation(column, 'sum')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">functions</cide-ele-icon>\r\n                        Sum\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnAggregation(column, 'avg')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">analytics</cide-ele-icon>\r\n                        Average\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnAggregation(column, 'count')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">tag</cide-ele-icon>\r\n                        Count\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnAggregation(column, 'min')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_downward</cide-ele-icon>\r\n                        Min\r\n                      </button>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-w-full tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-50 tw-transition-colors\"\r\n                        (click)=\"onColumnAggregation(column, 'max')\">\r\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3 tw-text-gray-400\">arrow_upward</cide-ele-icon>\r\n                        Max\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n            </th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n\r\n      <!-- Table Body -->\r\n      <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\r\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\r\n          <!-- Skeleton Loading Rows -->\r\n          @for (skeletonItem of getSkeletonArray(); track $index) {\r\n            <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\r\n              @for (column of columns; track column.key) {\r\n                <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\r\n                    [ngClass]=\"[\r\n                      getColumnWidthClass(column.width),\r\n                      getColumnMaxWidthClass(column.width)\r\n                    ]\">\r\n                  <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n        } @else {\r\n          @for (item of displayedData; track trackByFn($index, item)) {\r\n            <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\r\n                [ngClass]=\"[\r\n                  mergedConfig().rowClass || '',\r\n                  isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\r\n                  isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\r\n                  !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\r\n                  isTreeEnabled() ? getTreeLevelClass(item) : ''\r\n                ]\"\r\n                [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\r\n                [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\r\n                (click)=\"onRowClick(item)\"\r\n                (keydown.enter)=\"onRowClick(item)\"\r\n                (keydown.space)=\"onRowClick(item)\"\r\n                [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\r\n                [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\r\n                [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\r\n                [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\r\n                [draggable]=\"isDragDropEnabled()\"\r\n                (dragstart)=\"onDragStart($event, item, $index)\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                (drop)=\"onDrop($event, item, $index)\"\r\n                (dragend)=\"onDragEnd($event)\">\r\n              \r\n              @for (column of columns; track column.key) {\r\n                <td class=\"tw-pr-3 tw-py-1 tw-relative\"\r\n                    [ngClass]=\"[\r\n                      getColumnWidthClass(column.width),\r\n                      getColumnMaxWidthClass(column.width),\r\n                      mergedConfig().cellClass || '',\r\n                      column.align === 'center' ? 'tw-text-center' : '',\r\n                      column.align === 'right' ? 'tw-text-right' : '',\r\n                      column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\r\n                    ]\"\r\n                    [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\r\n                    [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\r\n                    [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '100px'\">\r\n                  <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\r\n                  @if (isTreeEnabled() && $index === 0) {\r\n                    <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                      <!-- Tree Indentation -->\r\n                      <div class=\"tw-flex tw-items-center\">\r\n                        @if (hasChildren(item)) {\r\n                          <button \r\n                            variant=\"outline\"\r\n                            size=\"xs\"\r\n                            type=\"button\"\r\n                            (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\r\n                            class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\r\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\r\n                            [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\r\n                            <cide-ele-icon \r\n                              class=\"tw-w-3 tw-h-3\"\r\n                              [class.tw-transition-transform]=\"!isDragDropEnabled()\"\r\n                              [class.tw-rotate-90]=\"isItemExpanded(item)\"\r\n                              size=\"xs\">\r\n                              chevron_right\r\n                            </cide-ele-icon>\r\n                          </button>\r\n                        } @else {\r\n                          <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\r\n                            <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                      \r\n                      <!-- Cell Content -->\r\n                      <div class=\"tw-flex-1 tw-w-full\">\r\n                        @if (column.type === 'text') {\r\n                          <p class=\"tw-text-sm tw-text-gray-900\"\r\n                             [class.tw-truncate]=\"column.truncate\"\r\n                             [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\r\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n                          </p>\r\n                        } @else if (column.type === 'number') {\r\n                          <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\r\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n                          </span>\r\n                        } @else if (column.type === 'date') {\r\n                          <span class=\"tw-text-sm tw-text-gray-600\">\r\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n                          </span>\r\n                        } @else if (column.type === 'boolean') {\r\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n                                [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n                            {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\r\n                          </span>\r\n                        } @else if (column.type === 'status' && column.statusConfig) {\r\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n                                [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\r\n                            {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\r\n                          </span>\r\n                        } @else if (column.type === 'actions' && column.actions) {\r\n                          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                            @for (action of column.actions; track action.key) {\r\n                              <button\r\n                                cideEleButton\r\n                                [variant]=\"action.variant || 'ghost'\"\r\n                                size=\"xs\"\r\n                                type=\"button\"\r\n                                (click)=\"onActionClick(item, action); $event.stopPropagation()\"\r\n                                [title]=\"action.tooltip || action.label\"\r\n                                [disabled]=\"isRefreshing()\"\r\n                                class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\r\n                                [class.tw-transition-colors]=\"!isDragDropEnabled()\"\r\n                                [ngClass]=\"{\r\n                                  'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\r\n                                  'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\r\n                                  'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\r\n                                  'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\r\n                                }\">\r\n                                @if (action.icon) {\r\n                                  <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n                                    <path d=\"M10 12l-5-5h10l-5 5z\"/>\r\n                                  </svg>\r\n                                }\r\n                                {{ action.label }}\r\n                              </button>\r\n                            }\r\n                          </div>\r\n                        } @else if (column.type === 'custom') {\r\n                          <!-- Template Renderer -->\r\n                          @if (column.renderer && isTemplateRenderer(column.renderer)) {\r\n                            <ng-container \r\n                              [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\r\n                              [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\r\n                            </ng-container>\r\n                          }\r\n                          <!-- Default rendering -->\r\n                          @else {\r\n                            <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\r\n                          }\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                  } @else {\r\n                    <!-- Regular cell content (non-tree or non-first column) -->\r\n                    @if (column.type === 'text') {\r\n                      <p class=\"tw-text-sm tw-text-gray-900\"\r\n                         [class.tw-truncate]=\"column.truncate\"\r\n                         [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\r\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n                      </p>\r\n                    } @else if (column.type === 'number') {\r\n                      <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\r\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n                      </span>\r\n                    } @else if (column.type === 'date') {\r\n                      <span class=\"tw-text-sm tw-text-gray-600\">\r\n                        {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\r\n                      </span>\r\n                    } @else if (column.type === 'boolean') {\r\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n                            [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n                        {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\r\n                      </span>\r\n                    } @else if (column.type === 'status' && column.statusConfig) {\r\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\r\n                            [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\r\n                        {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\r\n                      </span>\r\n                    } @else if (column.type === 'actions' && column.actions) {\r\n                      <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                        @for (action of column.actions; track action.key) {\r\n                          <button\r\n                            cideEleButton\r\n                            [variant]=\"action.variant || 'ghost'\"\r\n                            size=\"xs\"\r\n                            type=\"button\"\r\n                            (click)=\"onActionClick(item, action); $event.stopPropagation()\"\r\n                            [title]=\"action.tooltip || action.label\"\r\n                            [disabled]=\"isRefreshing()\"\r\n                            class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\r\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\r\n                            [ngClass]=\"{\r\n                              'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\r\n                              'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\r\n                              'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\r\n                              'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\r\n                            }\">\r\n                            @if (action.icon) {\r\n                              <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n                                <path d=\"M10 12l-5-5h10l-5 5z\"/>\r\n                              </svg>\r\n                            }\r\n                            {{ action.label }}\r\n                          </button>\r\n                        }\r\n                      </div>\r\n                    } @else if (column.type === 'custom') {\r\n                      <!-- Template Renderer -->\r\n                      @if (column.renderer && isTemplateRenderer(column.renderer)) {\r\n                        <ng-container \r\n                          [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\r\n                          [ngTemplateOutletContext]=\"getTemplateContext(getNestedValue(item, column.valueGetter || column.key), item, column)\">\r\n                        </ng-container>\r\n                      }\r\n                      <!-- Default rendering -->\r\n                      @else {\r\n                        <div>{{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}</div>\r\n                      }\r\n                    }\r\n                  }\r\n                </td>\r\n              }\r\n            </tr>\r\n          }\r\n          \r\n          <!-- Empty State -->\r\n          @if (displayedData.length === 0) {\r\n            <tr class=\"tw-h-full\">\r\n              <td [attr.colspan]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\r\n                <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\r\n                  <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"></path>\r\n                  </svg>\r\n                  <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\r\n                  <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\r\n                    @if (searchQuery()) {\r\n                      No results match your search criteria.\r\n                    } @else {\r\n                      There are no items to display.\r\n                    }\r\n                  </p>\r\n                </div>\r\n              </td>\r\n            </tr>\r\n          }\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n     <!-- Pagination Section -->\r\n   @if (paginationConfig.enabled && totalItems() > 0) {\r\n     <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\r\n          [class.tw-opacity-60]=\"isRefreshing()\">\r\n      \r\n      <!-- Results Info and Page Size -->\r\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-1 sm:tw-space-y-0\">\r\n        \r\n        <!-- Results Info -->\r\n        @if (paginationConfig.showPageInfo) {\r\n          <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n            <p class=\"tw-text-sm tw-text-gray-700\">\r\n              Showing {{ getItemRangeText() }} results\r\n            </p>\r\n            \r\n                         <!-- Page Size Selector -->\r\n             <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n               <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-500\">view_list</cide-ele-icon>\r\n               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\r\n               <div class=\"tw-w-16 tw-relative\">\r\n                 <cide-ele-select\r\n                   [labelHide]=\"true\"\r\n                   [ngModel]=\"pageSize()\"\r\n                   (ngModelChange)=\"updatePageSize($event)\"\r\n                   [options]=\"getPageSizeOptions()\"\r\n                   [disabled]=\"isRefreshing()\"\r\n                   fill=\"outline\"\r\n                   size=\"xs\"\r\n                   class=\"tw-z-30\">\r\n                 </cide-ele-select>\r\n               </div>\r\n             </div>\r\n          </div>\r\n        }\r\n\r\n        <!-- Pagination Controls -->\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          \r\n          <!-- Previous/Next and Page Numbers -->\r\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n            \r\n            <!-- First Page -->\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"onPageChange(1)\"\r\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\r\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n              title=\"First page\">\r\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">first_page</cide-ele-icon>\r\n            </button>\r\n            \r\n            <!-- Previous Page -->\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"previousPage()\"\r\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\r\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n              title=\"Previous page\">\r\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_left</cide-ele-icon>\r\n            </button>\r\n            \r\n            <!-- Page Numbers -->\r\n            @for (page of getEnhancedPageNumbers(); track page) {\r\n              @if (page === '...') {\r\n                <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\r\n              } @else {\r\n                <button\r\n                  type=\"button\"\r\n                  (click)=\"onPageChange(page)\"\r\n                  [disabled]=\"isRefreshing()\"\r\n                  class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n                  [ngClass]=\"{\r\n                    'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700': currentPage() === page,\r\n                    'tw-bg-white tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\r\n                  }\"\r\n                  [title]=\"'Page ' + page\">\r\n                  {{ page }}\r\n                </button>\r\n              }\r\n            }\r\n            \r\n            <!-- Next Page -->\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"nextPage()\"\r\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\r\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n              title=\"Next page\">\r\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_right</cide-ele-icon>\r\n            </button>\r\n            \r\n            <!-- Last Page -->\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"onPageChange(totalPages())\"\r\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\r\n              class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n              title=\"Last page\">\r\n              <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">last_page</cide-ele-icon>\r\n            </button>\r\n            \r\n          </div>\r\n\r\n          <!-- Quick Jump and Refresh -->\r\n          @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\r\n            <div class=\"tw-flex tw-items-center tw-space-x-1 tw-border-l tw-border-gray-200 tw-pl-2\">\r\n              \r\n              <!-- Quick Jump -->\r\n              @if (paginationConfig.showQuickJump) {\r\n                                  <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n                    <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\r\n                    <div class=\"tw-w-16\">\r\n                                              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\r\n                          [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\r\n                          [disabled]=\"isRefreshing()\"\r\n                          size=\"xs\"\r\n                          (keydown.enter)=\"onJumpToPage()\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                  <button\r\n                    type=\"button\"\r\n                    (click)=\"onJumpToPage()\"\r\n                    [disabled]=\"isRefreshing()\"\r\n                    class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-200 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n                    title=\"Go to page\">\r\n                    Go\r\n                  </button>\r\n                </div>\r\n              }\r\n              \r\n              <!-- Refresh Button -->\r\n              @if (paginationConfig.showRefresh) {\r\n                <button\r\n                  type=\"button\"\r\n                  (click)=\"onRefresh()\"\r\n                  [disabled]=\"isRefreshing()\"\r\n                  class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n                  title=\"Refresh\">\r\n                  @if (isRefreshing()) {\r\n                    <cide-ele-icon class=\"tw-w-[22px] tw-h-4 tw-animate-spin\">refresh</cide-ele-icon>\r\n                  } @else {\r\n                    <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">refresh</cide-ele-icon>\r\n                  }\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n          \r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:#1f2937;background-color:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000a,0 1px 2px #00000005;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:#fff}.data-grid-container thead{background:linear-gradient(180deg,#fafafa,#f7f7f7);border-bottom:1px solid rgba(0,0,0,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.data-grid-container thead th{background:transparent;color:#6b7280;font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid rgba(0,0,0,.06);text-align:left;white-space:nowrap;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container thead th:first-child{padding-left:12px}.data-grid-container thead th:last-child{padding-right:12px}.data-grid-container thead th:hover{background-color:#00000005}.data-grid-container thead th .column-menu-trigger{opacity:1;transition:all .2s cubic-bezier(.4,0,.2,1);margin-left:4px;cursor:pointer;padding:2px;border-radius:4px}.data-grid-container thead th .column-menu-trigger:hover{background-color:#0000000f}.data-grid-container tbody{background-color:#fff}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid rgba(0,0,0,.03);color:#1f2937;font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody td:first-child{padding-left:12px}.data-grid-container tbody td:last-child{padding-right:12px}.data-grid-container tbody tr{background-color:#fff;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr:hover{background-color:#00000005;transform:scale(1.001)}.data-grid-container tbody tr:hover td{border-bottom-color:#0000000a}.data-grid-container tbody tr:active{background-color:#00000008;transform:scale(.999)}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#00000004}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:#00000008;transform:scale(1.001)}.data-grid-container.tw-table-sm thead th{padding:8px 10px;font-size:11px}.data-grid-container.tw-table-sm thead th:first-child{padding-left:16px}.data-grid-container.tw-table-sm thead th:last-child{padding-right:16px}.data-grid-container.tw-table-sm tbody td{padding:8px 10px;font-size:12px;line-height:1.4}.data-grid-container.tw-table-sm tbody td:first-child{padding-left:16px}.data-grid-container.tw-table-sm tbody td:last-child{padding-right:16px}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;animation:fadeIn .2s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .data-grid-action-buttons button{position:relative;border:1px solid rgba(0,0,0,.08);background:transparent;outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:6px;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button cide-ele-icon{color:#6b7280;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled){background-color:#0000000a;border-color:#0000001f}.data-grid-container .data-grid-action-buttons button:hover:not(:disabled) cide-ele-icon{color:#374151;transform:scale(1.05)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled){background-color:#00000014;border-color:#00000026;transform:scale(.95)}.data-grid-container .data-grid-action-buttons button:active:not(:disabled) cide-ele-icon{transform:scale(.98)}.data-grid-container .data-grid-action-buttons button:focus-visible{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f61f}.data-grid-container .data-grid-action-buttons button:disabled{cursor:not-allowed;opacity:.3;background:transparent!important;border-color:#0000000d}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls{padding:12px 20px;border-top:1px solid rgba(0,0,0,.06);background:linear-gradient(180deg,#fafafa,#f7f7f7)}.data-grid-container .pagination-controls button{transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px}.data-grid-container .pagination-controls button:hover:not(:disabled){background-color:#0000000a;transform:scale(1.02)}.data-grid-container .pagination-controls button:active:not(:disabled){transform:scale(.98);background-color:#00000014}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed;opacity:.3}.data-grid-container .pagination-controls button.active{background-color:#3b82f61a;color:#3b82f6;font-weight:500;box-shadow:0 0 0 1px #3b82f633}.data-grid-container .pagination-controls input[type=number]{transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid rgba(0,0,0,.06);border-radius:6px}.data-grid-container .pagination-controls input[type=number]:hover{border-color:#0000001a}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .status-badge{font-weight:500;letter-spacing:-.01em;padding:4px 12px;border-radius:12px;font-size:12px;display:inline-flex;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .status-badge.active{background-color:#34d39926;color:#059669;border:1px solid rgba(52,211,153,.3)}.data-grid-container .status-badge.active:hover{background-color:#34d39933}.data-grid-container .status-badge.inactive{background-color:#f8717126;color:#dc2626;border:1px solid rgba(248,113,113,.3)}.data-grid-container .status-badge.inactive:hover{background-color:#f8717133}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper{transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:hover:not(:has(input:disabled)){background-color:#00000005}.data-grid-container .data-grid-search-input ::ng-deep input{font-size:13px;font-weight:400;color:#1f2937;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep input::placeholder{color:#9ca3af;font-weight:400}.data-grid-container .data-grid-search-input ::ng-deep input:focus{outline:none;border-color:#3b82f64d;box-shadow:0 0 0 3px #3b82f614;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep input:disabled{background-color:#00000005;color:#9ca3af;cursor:not-allowed}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-leading-icon cide-ele-icon{color:#9ca3af;transition:color .2s cubic-bezier(.4,0,.2,1)}.data-grid-container .data-grid-search-input ::ng-deep input:focus~.cide-input-leading-icon cide-ele-icon,.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper:has(input:focus) .cide-input-leading-icon cide-ele-icon{color:#6b7280}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]{border:1px solid #e5e7eb;background-color:#fafafa;border-radius:8px}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:hover:not(:has(input:disabled)){border-color:#d1d5db;background-color:#fff}.data-grid-container .data-grid-search-input ::ng-deep .cide-input-wrapper[data-fill=outline]:has(input:focus){border-color:#3b82f64d;background-color:#fff}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .column-menu-dropdown{animation:dropdownFadeIn .15s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 25px #0000001a,0 4px 10px #0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.05)}.data-grid-container .column-menu-dropdown button{font-size:13px;font-weight:400;letter-spacing:-.01em;text-align:left;transition:all .15s cubic-bezier(.4,0,.2,1)}.data-grid-container .column-menu-dropdown button:hover{background-color:#3b82f60d;color:#1f2937}.data-grid-container .column-menu-dropdown button:hover cide-ele-icon{color:#3b82f6}.data-grid-container .column-menu-dropdown button:active{background-color:#3b82f61a;transform:scale(.98)}.data-grid-container .column-menu-dropdown .tw-uppercase{letter-spacing:.05em}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.data-grid-container .empty-state{padding:4rem 2rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1.5rem;opacity:.3;transition:all .3s cubic-bezier(.4,0,.2,1)}.data-grid-container .empty-state svg:hover{opacity:.5;transform:scale(1.05)}.data-grid-container .empty-state h3{margin-bottom:.75rem;font-weight:600;color:#374151;font-size:16px;letter-spacing:-.01em}.data-grid-container .empty-state p{color:#6b7280;font-size:14px;line-height:1.5}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #3b82f6;border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:#f8fafc;box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:10}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:#f3f4f6;border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], templateRenderers: [{
@@ -10384,170 +10728,170 @@ class CideEleDropdownComponent {
         this.dropdownManager.unregisterDropdown(this.dropdownId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleDropdownComponent, isStandalone: true, selector: "cide-ele-dropdown", inputs: { items: "items", config: "config", triggerTemplate: "triggerTemplate", menuTemplate: "menuTemplate" }, outputs: { itemClick: "itemClick", dropdownToggle: "dropdownToggle" }, host: { listeners: { "window:resize": "onWindowResize()", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, isSignal: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true, isSignal: true }, { propertyName: "dropdownMenuTemplate", first: true, predicate: ["dropdownMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="tw-relative" #dropdownContainer>
-      <!-- Trigger Button -->
-      <button 
-        type="button" 
-        class="dropdown-trigger tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-text-gray-400 hover:tw-text-gray-600 hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-blue-500 tw-transition-all tw-duration-150"
-        [class]="getTriggerClasses()"
-        (click)="toggleDropdown($event)"
-        [title]="config.triggerIcon === 'more_vert' ? 'More actions' : 'Options'">
-        
-                 <!-- Custom Trigger Template -->
-         @if (triggerTemplate) {
-           <ng-container *ngTemplateOutlet="triggerTemplate; context: { $implicit: isOpen() }">
-           </ng-container>
-         } @else {
-           <!-- Default Trigger -->
-           <cide-ele-icon 
-             [class]="getTriggerIconClasses()"
-             [size]="config.triggerSize || 'sm'">
-             {{ config.triggerIcon || 'more_vert' }}
-           </cide-ele-icon>
-         }
-      </button>
-      
-      <!-- Dropdown Menu (Non-Portal) -->
-      @if (isOpen() && !getSafeConfig().usePortal) {
-        <div 
-          #dropdownMenu
-          class="dropdown-menu tw-absolute tw-z-50 tw-bg-white tw-shadow-lg tw-border tw-border-gray-200 tw-rounded-md tw-text-black"
-          [class]="getMenuClasses()"
-          [style]="getMenuStyles()"
-          role="menu">
-          <ng-container *ngTemplateOutlet="dropdownMenuTemplate; context: { $implicit: items }">
-          </ng-container>
-        </div>
-      }
-    </div>
-   
-    <!-- Dropdown Menu Template (for both portal and non-portal) -->
-    <ng-template #dropdownMenuTemplate let-context="context">
-      <!-- Custom Menu Template -->
-      @if (menuTemplate) {
-        <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: context?.items }">
-        </ng-container>
-      } @else {
-        <!-- Default Menu -->
-        <div class="tw-py-1" role="none">
-          @for (item of context?.items; track item.id) {
-            @if (item.divider) {
-              <!-- Divider Item -->
-              <hr class="tw-border-t tw-border-gray-200 tw-my-1" role="separator">
-            } @else {
-              <!-- Regular Menu Item -->
-              <button 
-                type="button"
-                [class]="getItemClasses(item)"
-                [disabled]="item.disabled"
-                (click)="onItemClick(item, $event)"
-                [attr.data-item-id]="item.id">
-                
-                <!-- Item Icon -->
-                @if (item.icon) {
-                  <cide-ele-icon 
-                    class="tw-w-4 tw-h-4 tw-mr-2"
-                    [class]="item.iconColor || 'tw-text-gray-400'"
-                    size="xs">
-                    {{ item.icon }}
-                  </cide-ele-icon>
-                }
-                
-                <!-- Item Label -->
-                <span [class]="item.textColor || 'tw-text-gray-700'">
-                  {{ item.label }}
-                </span>
-              </button>
-            }
-          }
-        </div>
-      }
-    </ng-template>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleDropdownComponent, isStandalone: true, selector: "cide-ele-dropdown", inputs: { items: "items", config: "config", triggerTemplate: "triggerTemplate", menuTemplate: "menuTemplate" }, outputs: { itemClick: "itemClick", dropdownToggle: "dropdownToggle" }, host: { listeners: { "window:resize": "onWindowResize()", "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, isSignal: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true, isSignal: true }, { propertyName: "dropdownMenuTemplate", first: true, predicate: ["dropdownMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="tw-relative" #dropdownContainer>
+      <!-- Trigger Button -->
+      <button 
+        type="button" 
+        class="dropdown-trigger tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-text-gray-400 hover:tw-text-gray-600 hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-blue-500 tw-transition-all tw-duration-150"
+        [class]="getTriggerClasses()"
+        (click)="toggleDropdown($event)"
+        [title]="config.triggerIcon === 'more_vert' ? 'More actions' : 'Options'">
+        
+                 <!-- Custom Trigger Template -->
+         @if (triggerTemplate) {
+           <ng-container *ngTemplateOutlet="triggerTemplate; context: { $implicit: isOpen() }">
+           </ng-container>
+         } @else {
+           <!-- Default Trigger -->
+           <cide-ele-icon 
+             [class]="getTriggerIconClasses()"
+             [size]="config.triggerSize || 'sm'">
+             {{ config.triggerIcon || 'more_vert' }}
+           </cide-ele-icon>
+         }
+      </button>
+      
+      <!-- Dropdown Menu (Non-Portal) -->
+      @if (isOpen() && !getSafeConfig().usePortal) {
+        <div 
+          #dropdownMenu
+          class="dropdown-menu tw-absolute tw-z-50 tw-bg-white tw-shadow-lg tw-border tw-border-gray-200 tw-rounded-md tw-text-black"
+          [class]="getMenuClasses()"
+          [style]="getMenuStyles()"
+          role="menu">
+          <ng-container *ngTemplateOutlet="dropdownMenuTemplate; context: { $implicit: items }">
+          </ng-container>
+        </div>
+      }
+    </div>
+   
+    <!-- Dropdown Menu Template (for both portal and non-portal) -->
+    <ng-template #dropdownMenuTemplate let-context="context">
+      <!-- Custom Menu Template -->
+      @if (menuTemplate) {
+        <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: context?.items }">
+        </ng-container>
+      } @else {
+        <!-- Default Menu -->
+        <div class="tw-py-1" role="none">
+          @for (item of context?.items; track item.id) {
+            @if (item.divider) {
+              <!-- Divider Item -->
+              <hr class="tw-border-t tw-border-gray-200 tw-my-1" role="separator">
+            } @else {
+              <!-- Regular Menu Item -->
+              <button 
+                type="button"
+                [class]="getItemClasses(item)"
+                [disabled]="item.disabled"
+                (click)="onItemClick(item, $event)"
+                [attr.data-item-id]="item.id">
+                
+                <!-- Item Icon -->
+                @if (item.icon) {
+                  <cide-ele-icon 
+                    class="tw-w-4 tw-h-4 tw-mr-2"
+                    [class]="item.iconColor || 'tw-text-gray-400'"
+                    size="xs">
+                    {{ item.icon }}
+                  </cide-ele-icon>
+                }
+                
+                <!-- Item Label -->
+                <span [class]="item.textColor || 'tw-text-gray-700'">
+                  {{ item.label }}
+                </span>
+              </button>
+            }
+          }
+        </div>
+      }
+    </ng-template>
    `, isInline: true, styles: [".dropdown-menu{transform-origin:top right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-ele-dropdown', standalone: true, imports: [CommonModule, CideIconComponent], template: `
-    <div class="tw-relative" #dropdownContainer>
-      <!-- Trigger Button -->
-      <button 
-        type="button" 
-        class="dropdown-trigger tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-text-gray-400 hover:tw-text-gray-600 hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-blue-500 tw-transition-all tw-duration-150"
-        [class]="getTriggerClasses()"
-        (click)="toggleDropdown($event)"
-        [title]="config.triggerIcon === 'more_vert' ? 'More actions' : 'Options'">
-        
-                 <!-- Custom Trigger Template -->
-         @if (triggerTemplate) {
-           <ng-container *ngTemplateOutlet="triggerTemplate; context: { $implicit: isOpen() }">
-           </ng-container>
-         } @else {
-           <!-- Default Trigger -->
-           <cide-ele-icon 
-             [class]="getTriggerIconClasses()"
-             [size]="config.triggerSize || 'sm'">
-             {{ config.triggerIcon || 'more_vert' }}
-           </cide-ele-icon>
-         }
-      </button>
-      
-      <!-- Dropdown Menu (Non-Portal) -->
-      @if (isOpen() && !getSafeConfig().usePortal) {
-        <div 
-          #dropdownMenu
-          class="dropdown-menu tw-absolute tw-z-50 tw-bg-white tw-shadow-lg tw-border tw-border-gray-200 tw-rounded-md tw-text-black"
-          [class]="getMenuClasses()"
-          [style]="getMenuStyles()"
-          role="menu">
-          <ng-container *ngTemplateOutlet="dropdownMenuTemplate; context: { $implicit: items }">
-          </ng-container>
-        </div>
-      }
-    </div>
-   
-    <!-- Dropdown Menu Template (for both portal and non-portal) -->
-    <ng-template #dropdownMenuTemplate let-context="context">
-      <!-- Custom Menu Template -->
-      @if (menuTemplate) {
-        <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: context?.items }">
-        </ng-container>
-      } @else {
-        <!-- Default Menu -->
-        <div class="tw-py-1" role="none">
-          @for (item of context?.items; track item.id) {
-            @if (item.divider) {
-              <!-- Divider Item -->
-              <hr class="tw-border-t tw-border-gray-200 tw-my-1" role="separator">
-            } @else {
-              <!-- Regular Menu Item -->
-              <button 
-                type="button"
-                [class]="getItemClasses(item)"
-                [disabled]="item.disabled"
-                (click)="onItemClick(item, $event)"
-                [attr.data-item-id]="item.id">
-                
-                <!-- Item Icon -->
-                @if (item.icon) {
-                  <cide-ele-icon 
-                    class="tw-w-4 tw-h-4 tw-mr-2"
-                    [class]="item.iconColor || 'tw-text-gray-400'"
-                    size="xs">
-                    {{ item.icon }}
-                  </cide-ele-icon>
-                }
-                
-                <!-- Item Label -->
-                <span [class]="item.textColor || 'tw-text-gray-700'">
-                  {{ item.label }}
-                </span>
-              </button>
-            }
-          }
-        </div>
-      }
-    </ng-template>
+            args: [{ selector: 'cide-ele-dropdown', standalone: true, imports: [CommonModule, CideIconComponent], template: `
+    <div class="tw-relative" #dropdownContainer>
+      <!-- Trigger Button -->
+      <button 
+        type="button" 
+        class="dropdown-trigger tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-text-gray-400 hover:tw-text-gray-600 hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-blue-500 tw-transition-all tw-duration-150"
+        [class]="getTriggerClasses()"
+        (click)="toggleDropdown($event)"
+        [title]="config.triggerIcon === 'more_vert' ? 'More actions' : 'Options'">
+        
+                 <!-- Custom Trigger Template -->
+         @if (triggerTemplate) {
+           <ng-container *ngTemplateOutlet="triggerTemplate; context: { $implicit: isOpen() }">
+           </ng-container>
+         } @else {
+           <!-- Default Trigger -->
+           <cide-ele-icon 
+             [class]="getTriggerIconClasses()"
+             [size]="config.triggerSize || 'sm'">
+             {{ config.triggerIcon || 'more_vert' }}
+           </cide-ele-icon>
+         }
+      </button>
+      
+      <!-- Dropdown Menu (Non-Portal) -->
+      @if (isOpen() && !getSafeConfig().usePortal) {
+        <div 
+          #dropdownMenu
+          class="dropdown-menu tw-absolute tw-z-50 tw-bg-white tw-shadow-lg tw-border tw-border-gray-200 tw-rounded-md tw-text-black"
+          [class]="getMenuClasses()"
+          [style]="getMenuStyles()"
+          role="menu">
+          <ng-container *ngTemplateOutlet="dropdownMenuTemplate; context: { $implicit: items }">
+          </ng-container>
+        </div>
+      }
+    </div>
+   
+    <!-- Dropdown Menu Template (for both portal and non-portal) -->
+    <ng-template #dropdownMenuTemplate let-context="context">
+      <!-- Custom Menu Template -->
+      @if (menuTemplate) {
+        <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: context?.items }">
+        </ng-container>
+      } @else {
+        <!-- Default Menu -->
+        <div class="tw-py-1" role="none">
+          @for (item of context?.items; track item.id) {
+            @if (item.divider) {
+              <!-- Divider Item -->
+              <hr class="tw-border-t tw-border-gray-200 tw-my-1" role="separator">
+            } @else {
+              <!-- Regular Menu Item -->
+              <button 
+                type="button"
+                [class]="getItemClasses(item)"
+                [disabled]="item.disabled"
+                (click)="onItemClick(item, $event)"
+                [attr.data-item-id]="item.id">
+                
+                <!-- Item Icon -->
+                @if (item.icon) {
+                  <cide-ele-icon 
+                    class="tw-w-4 tw-h-4 tw-mr-2"
+                    [class]="item.iconColor || 'tw-text-gray-400'"
+                    size="xs">
+                    {{ item.icon }}
+                  </cide-ele-icon>
+                }
+                
+                <!-- Item Label -->
+                <span [class]="item.textColor || 'tw-text-gray-700'">
+                  {{ item.label }}
+                </span>
+              </button>
+            }
+          }
+        </div>
+      }
+    </ng-template>
    `, styles: [".dropdown-menu{transform-origin:top right}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
@@ -10745,222 +11089,222 @@ class CideEleFloatingContainerComponent {
         return 'linear-gradient(135deg, var(--cide-theme-primary-color) 0%, var(--tw-blue-400) 100%)';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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"
-      [style.left.px]="isMaximized() ? 20 : position().x"
-      [style.top.px]="isMaximized() ? 20 : position().y"
-      [style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
-      [style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
-      [style.min-width]="config().minWidth || '300px'"
-      [style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
-      [style.max-width]="config().maxWidth || '90vw'"
-      [style.max-height]="config().maxHeight || '90vh'"
-      [style.z-index]="zIndex()"
-      [class.tw-cursor-move]="isDragging()"
-      [class.tw-select-none]="true"
-      (mousedown)="onMouseDown($event)"
-      (mousemove)="onMouseMove($event)"
-      (mouseup)="onMouseUp($event)"
-      (mouseleave)="onMouseUp($event)">
-      
-      <!-- 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"
-        [style.background]="getHeaderBackground()"
-        (mousedown)="startDrag($event)"
-        (click)="onHeaderClick($event)">
-        
-        <!-- Title Section -->
-        <div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
-          @if (config().icon) {
-            <cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
-          }
-          <h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
-          @if (isMinimized()) {
-            <span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
-          }
-        </div>
-        
-        <!-- Action Buttons -->
-        <div class="tw-flex tw-items-center tw-space-x-1">
-          @if (config().minimizable !== false) {
-            <button 
-              cideEleButton 
-              variant="ghost" 
-              size="xs" 
-              type="button" 
-              (click)="minimize(); $event.stopPropagation()" 
-              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
-              [title]="isMinimized() ? 'Restore' : 'Minimize'">
-              <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
-            </button>
-          }
-          @if (config().maximizable !== false) {
-            <button 
-              cideEleButton 
-              variant="ghost" 
-              size="xs" 
-              type="button" 
-              (click)="toggleMaximize(); $event.stopPropagation()" 
-              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
-              [title]="isMaximized() ? 'Restore' : 'Maximize'">
-              <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
-            </button>
-          }
-          @if (config().closable !== false) {
-            <button 
-              cideEleButton 
-              variant="ghost" 
-              size="xs" 
-              type="button" 
-              (click)="close(); $event.stopPropagation()" 
-              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
-              title="Close">
-              <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
-            </button>
-          }
-        </div>
-      </div>
-      
-      <!-- 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"
-        [style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
-        [style.min-height]="'200px'">
-        @defer (when !isMinimized() && isVisible()) {
-          <div class="tw-p-0 tw-min-h-full">
-            <ng-content></ng-content>
-          </div>
-        } @placeholder {
-          <div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
-            <cide-ele-spinner size="sm"></cide-ele-spinner>
-            <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
-          </div>
-        }
-      </div>
-      }
-      
-      <!-- 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"
-          (mousedown)="startResize($event)">
-        </div>
-      }
-    </div>
+    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"
+      [style.left.px]="isMaximized() ? 20 : position().x"
+      [style.top.px]="isMaximized() ? 20 : position().y"
+      [style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
+      [style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
+      [style.min-width]="config().minWidth || '300px'"
+      [style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
+      [style.max-width]="config().maxWidth || '90vw'"
+      [style.max-height]="config().maxHeight || '90vh'"
+      [style.z-index]="zIndex()"
+      [class.tw-cursor-move]="isDragging()"
+      [class.tw-select-none]="true"
+      (mousedown)="onMouseDown($event)"
+      (mousemove)="onMouseMove($event)"
+      (mouseup)="onMouseUp($event)"
+      (mouseleave)="onMouseUp($event)">
+      
+      <!-- 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"
+        [style.background]="getHeaderBackground()"
+        (mousedown)="startDrag($event)"
+        (click)="onHeaderClick($event)">
+        
+        <!-- Title Section -->
+        <div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
+          @if (config().icon) {
+            <cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
+          }
+          <h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
+          @if (isMinimized()) {
+            <span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
+          }
+        </div>
+        
+        <!-- Action Buttons -->
+        <div class="tw-flex tw-items-center tw-space-x-1">
+          @if (config().minimizable !== false) {
+            <button 
+              cideEleButton 
+              variant="ghost" 
+              size="xs" 
+              type="button" 
+              (click)="minimize(); $event.stopPropagation()" 
+              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
+              [title]="isMinimized() ? 'Restore' : 'Minimize'">
+              <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
+            </button>
+          }
+          @if (config().maximizable !== false) {
+            <button 
+              cideEleButton 
+              variant="ghost" 
+              size="xs" 
+              type="button" 
+              (click)="toggleMaximize(); $event.stopPropagation()" 
+              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
+              [title]="isMaximized() ? 'Restore' : 'Maximize'">
+              <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
+            </button>
+          }
+          @if (config().closable !== false) {
+            <button 
+              cideEleButton 
+              variant="ghost" 
+              size="xs" 
+              type="button" 
+              (click)="close(); $event.stopPropagation()" 
+              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
+              title="Close">
+              <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
+            </button>
+          }
+        </div>
+      </div>
+      
+      <!-- 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"
+        [style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
+        [style.min-height]="'200px'">
+        @defer (when !isMinimized() && isVisible()) {
+          <div class="tw-p-0 tw-min-h-full">
+            <ng-content></ng-content>
+          </div>
+        } @placeholder {
+          <div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
+            <cide-ele-spinner size="sm"></cide-ele-spinner>
+            <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
+          </div>
+        }
+      </div>
+      }
+      
+      <!-- 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"
+          (mousedown)="startResize($event)">
+        </div>
+      }
+    </div>
   `, isInline: true, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9;position:relative;flex:1;display:flex;flex-direction:column}.floating-container-content::-webkit-scrollbar{width:8px}.floating-container-content::-webkit-scrollbar-track{background:#f8fafc;border-radius:4px;margin:4px}.floating-container-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;transition:background-color .2s ease;border:1px solid #e2e8f0}.floating-container-content::-webkit-scrollbar-thumb:hover{background:#94a3b8;border-color:#cbd5e1}.floating-container-content::-webkit-scrollbar-thumb:active{background:#64748b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerComponent, decorators: [{
             type: Component,
-            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"
-      [style.left.px]="isMaximized() ? 20 : position().x"
-      [style.top.px]="isMaximized() ? 20 : position().y"
-      [style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
-      [style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
-      [style.min-width]="config().minWidth || '300px'"
-      [style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
-      [style.max-width]="config().maxWidth || '90vw'"
-      [style.max-height]="config().maxHeight || '90vh'"
-      [style.z-index]="zIndex()"
-      [class.tw-cursor-move]="isDragging()"
-      [class.tw-select-none]="true"
-      (mousedown)="onMouseDown($event)"
-      (mousemove)="onMouseMove($event)"
-      (mouseup)="onMouseUp($event)"
-      (mouseleave)="onMouseUp($event)">
-      
-      <!-- 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"
-        [style.background]="getHeaderBackground()"
-        (mousedown)="startDrag($event)"
-        (click)="onHeaderClick($event)">
-        
-        <!-- Title Section -->
-        <div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
-          @if (config().icon) {
-            <cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
-          }
-          <h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
-          @if (isMinimized()) {
-            <span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
-          }
-        </div>
-        
-        <!-- Action Buttons -->
-        <div class="tw-flex tw-items-center tw-space-x-1">
-          @if (config().minimizable !== false) {
-            <button 
-              cideEleButton 
-              variant="ghost" 
-              size="xs" 
-              type="button" 
-              (click)="minimize(); $event.stopPropagation()" 
-              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
-              [title]="isMinimized() ? 'Restore' : 'Minimize'">
-              <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
-            </button>
-          }
-          @if (config().maximizable !== false) {
-            <button 
-              cideEleButton 
-              variant="ghost" 
-              size="xs" 
-              type="button" 
-              (click)="toggleMaximize(); $event.stopPropagation()" 
-              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
-              [title]="isMaximized() ? 'Restore' : 'Maximize'">
-              <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
-            </button>
-          }
-          @if (config().closable !== false) {
-            <button 
-              cideEleButton 
-              variant="ghost" 
-              size="xs" 
-              type="button" 
-              (click)="close(); $event.stopPropagation()" 
-              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
-              title="Close">
-              <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
-            </button>
-          }
-        </div>
-      </div>
-      
-      <!-- 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"
-        [style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
-        [style.min-height]="'200px'">
-        @defer (when !isMinimized() && isVisible()) {
-          <div class="tw-p-0 tw-min-h-full">
-            <ng-content></ng-content>
-          </div>
-        } @placeholder {
-          <div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
-            <cide-ele-spinner size="sm"></cide-ele-spinner>
-            <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
-          </div>
-        }
-      </div>
-      }
-      
-      <!-- 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"
-          (mousedown)="startResize($event)">
-        </div>
-      }
-    </div>
+            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"
+      [style.left.px]="isMaximized() ? 20 : position().x"
+      [style.top.px]="isMaximized() ? 20 : position().y"
+      [style.width]="isMaximized() ? 'calc(100vw - 40px)' : (config().width || '400px')"
+      [style.height]="isMaximized() ? 'calc(100vh - 40px)' : (isMinimized() ? 'auto' : (savedHeight || config().height || '500px'))"
+      [style.min-width]="config().minWidth || '300px'"
+      [style.min-height]="isMinimized() ? 'auto' : (config().minHeight || '200px')"
+      [style.max-width]="config().maxWidth || '90vw'"
+      [style.max-height]="config().maxHeight || '90vh'"
+      [style.z-index]="zIndex()"
+      [class.tw-cursor-move]="isDragging()"
+      [class.tw-select-none]="true"
+      (mousedown)="onMouseDown($event)"
+      (mousemove)="onMouseMove($event)"
+      (mouseup)="onMouseUp($event)"
+      (mouseleave)="onMouseUp($event)">
+      
+      <!-- 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"
+        [style.background]="getHeaderBackground()"
+        (mousedown)="startDrag($event)"
+        (click)="onHeaderClick($event)">
+        
+        <!-- Title Section -->
+        <div class="tw-flex tw-items-center tw-space-x-2 tw-text-white">
+          @if (config().icon) {
+            <cide-ele-icon class="tw-w-4 tw-h-4">{{ config().icon }}</cide-ele-icon>
+          }
+          <h2 class="tw-text-sm tw-font-medium tw-truncate">{{ config().title }}</h2>
+          @if (isMinimized()) {
+            <span class="tw-text-xs tw-opacity-75">(Click to restore)</span>
+          }
+        </div>
+        
+        <!-- Action Buttons -->
+        <div class="tw-flex tw-items-center tw-space-x-1">
+          @if (config().minimizable !== false) {
+            <button 
+              cideEleButton 
+              variant="ghost" 
+              size="xs" 
+              type="button" 
+              (click)="minimize(); $event.stopPropagation()" 
+              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
+              [title]="isMinimized() ? 'Restore' : 'Minimize'">
+              <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMinimized() ? 'open_in_full' : 'remove' }}</cide-ele-icon>
+            </button>
+          }
+          @if (config().maximizable !== false) {
+            <button 
+              cideEleButton 
+              variant="ghost" 
+              size="xs" 
+              type="button" 
+              (click)="toggleMaximize(); $event.stopPropagation()" 
+              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
+              [title]="isMaximized() ? 'Restore' : 'Maximize'">
+              <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">{{ isMaximized() ? 'fullscreen_exit' : 'fullscreen' }}</cide-ele-icon>
+            </button>
+          }
+          @if (config().closable !== false) {
+            <button 
+              cideEleButton 
+              variant="ghost" 
+              size="xs" 
+              type="button" 
+              (click)="close(); $event.stopPropagation()" 
+              class="tw-w-6 tw-h-6 tw-rounded-lg tw-text-white hover:tw-bg-white hover:tw-bg-opacity-20 tw-transition-all tw-duration-200"
+              title="Close">
+              <cide-ele-icon class="tw-w-[1.38rem] tw-h-3">close</cide-ele-icon>
+            </button>
+          }
+        </div>
+      </div>
+      
+      <!-- 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"
+        [style.height]="isMaximized() ? 'calc(100vh - 100px)' : 'auto'"
+        [style.min-height]="'200px'">
+        @defer (when !isMinimized() && isVisible()) {
+          <div class="tw-p-0 tw-min-h-full">
+            <ng-content></ng-content>
+          </div>
+        } @placeholder {
+          <div class="tw-flex tw-items-center tw-justify-center tw-p-4 tw-min-h-[200px]">
+            <cide-ele-spinner size="sm"></cide-ele-spinner>
+            <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading content...</span>
+          </div>
+        }
+      </div>
+      }
+      
+      <!-- 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"
+          (mousedown)="startResize($event)">
+        </div>
+      }
+    </div>
   `, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9;position:relative;flex:1;display:flex;flex-direction:column}.floating-container-content::-webkit-scrollbar{width:8px}.floating-container-content::-webkit-scrollbar-track{background:#f8fafc;border-radius:4px;margin:4px}.floating-container-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;transition:background-color .2s ease;border:1px solid #e2e8f0}.floating-container-content::-webkit-scrollbar-thumb:hover{background:#94a3b8;border-color:#cbd5e1}.floating-container-content::-webkit-scrollbar-thumb:active{background:#64748b}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
@@ -10990,96 +11334,96 @@ class CideEleFloatingContainerManagerComponent {
     // Computed properties
     visibleContainers = computed(() => this.containerService.visibleContainers(), ...(ngDevMode ? [{ debugName: "visibleContainers" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerManagerComponent, isStandalone: true, selector: "cide-ele-floating-container-manager", ngImport: i0, template: `
-    @for (container of visibleContainers(); track container.id) {
-      <cide-ele-floating-container
-        [config]="containerService.getConfigSignal(container.config)"
-        [isMinimized]="containerService.getMinimizedSignal(container.id)"
-        [isMaximized]="containerService.getMaximizedSignal(container.id)"
-        [isVisible]="containerService.getVisibleSignal(container.id)"
-        [zIndex]="containerService.getZIndexSignal(container.id)"
-        (closeEvent)="containerService.onClose($event)"
-        (minimizeEvent)="containerService.onMinimize($event)"
-        (maximizeEvent)="containerService.onMaximize($event)"
-        (clickEvent)="containerService.bringToFront($event)">
-        
-        <!-- Dynamic content loading with @defer for performance -->
-        @defer (when container.isVisible) {
-          <div 
-            cideEleFloatingDynamic
-            [componentId]="container.config.componentId || container.config.id"
-            [componentConfig]="containerService.getComponentConfig(container.config)"
-            [isVisible]="container.isVisible">
-          </div>
-        } @placeholder {
-          <div class="tw-flex tw-items-center tw-justify-center tw-p-4">
-            <cide-ele-spinner size="sm"></cide-ele-spinner>
-            <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading component...</span>
-          </div>
-        } @error {
-          <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center">
-            <cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-500 tw-mb-2">error</cide-ele-icon>
-            <p class="tw-text-red-600 tw-font-medium">Failed to load component</p>
-            <p class="tw-text-gray-500 tw-text-sm">Component "{{ container.config.componentId || container.config.id }}" is not available</p>
-            <button 
-              cideEleButton 
-              variant="outline" 
-              size="xs" 
-              (click)="containerService.onClose(container.id)"
-              class="tw-mt-2">
-              Close
-            </button>
-          </div>
-        }
-      </cide-ele-floating-container>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleFloatingContainerManagerComponent, isStandalone: true, selector: "cide-ele-floating-container-manager", ngImport: i0, template: `
+    @for (container of visibleContainers(); track container.id) {
+      <cide-ele-floating-container
+        [config]="containerService.getConfigSignal(container.config)"
+        [isMinimized]="containerService.getMinimizedSignal(container.id)"
+        [isMaximized]="containerService.getMaximizedSignal(container.id)"
+        [isVisible]="containerService.getVisibleSignal(container.id)"
+        [zIndex]="containerService.getZIndexSignal(container.id)"
+        (closeEvent)="containerService.onClose($event)"
+        (minimizeEvent)="containerService.onMinimize($event)"
+        (maximizeEvent)="containerService.onMaximize($event)"
+        (clickEvent)="containerService.bringToFront($event)">
+        
+        <!-- Dynamic content loading with @defer for performance -->
+        @defer (when container.isVisible) {
+          <div 
+            cideEleFloatingDynamic
+            [componentId]="container.config.componentId || container.config.id"
+            [componentConfig]="containerService.getComponentConfig(container.config)"
+            [isVisible]="container.isVisible">
+          </div>
+        } @placeholder {
+          <div class="tw-flex tw-items-center tw-justify-center tw-p-4">
+            <cide-ele-spinner size="sm"></cide-ele-spinner>
+            <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading component...</span>
+          </div>
+        } @error {
+          <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center">
+            <cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-500 tw-mb-2">error</cide-ele-icon>
+            <p class="tw-text-red-600 tw-font-medium">Failed to load component</p>
+            <p class="tw-text-gray-500 tw-text-sm">Component "{{ container.config.componentId || container.config.id }}" is not available</p>
+            <button 
+              cideEleButton 
+              variant="outline" 
+              size="xs" 
+              (click)="containerService.onClose(container.id)"
+              class="tw-mt-2">
+              Close
+            </button>
+          </div>
+        }
+      </cide-ele-floating-container>
+    }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleFloatingContainerComponent, selector: "cide-ele-floating-container", inputs: ["config", "isMinimized", "isMaximized", "isVisible", "zIndex"], outputs: ["closeEvent", "minimizeEvent", "maximizeEvent", "clickEvent"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)]] });
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerManagerComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return floatingContainerDynamic_directive; }).then(m => m.CideEleFloatingContainerDynamicDirective)], resolveMetadata: CideEleFloatingContainerDynamicDirective => ({ decorators: [{
                 type: Component,
-                args: [{ selector: 'cide-ele-floating-container-manager', standalone: true, imports: [CommonModule, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideSpinnerComponent, CideEleButtonComponent, CideIconComponent], template: `
-    @for (container of visibleContainers(); track container.id) {
-      <cide-ele-floating-container
-        [config]="containerService.getConfigSignal(container.config)"
-        [isMinimized]="containerService.getMinimizedSignal(container.id)"
-        [isMaximized]="containerService.getMaximizedSignal(container.id)"
-        [isVisible]="containerService.getVisibleSignal(container.id)"
-        [zIndex]="containerService.getZIndexSignal(container.id)"
-        (closeEvent)="containerService.onClose($event)"
-        (minimizeEvent)="containerService.onMinimize($event)"
-        (maximizeEvent)="containerService.onMaximize($event)"
-        (clickEvent)="containerService.bringToFront($event)">
-        
-        <!-- Dynamic content loading with @defer for performance -->
-        @defer (when container.isVisible) {
-          <div 
-            cideEleFloatingDynamic
-            [componentId]="container.config.componentId || container.config.id"
-            [componentConfig]="containerService.getComponentConfig(container.config)"
-            [isVisible]="container.isVisible">
-          </div>
-        } @placeholder {
-          <div class="tw-flex tw-items-center tw-justify-center tw-p-4">
-            <cide-ele-spinner size="sm"></cide-ele-spinner>
-            <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading component...</span>
-          </div>
-        } @error {
-          <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center">
-            <cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-500 tw-mb-2">error</cide-ele-icon>
-            <p class="tw-text-red-600 tw-font-medium">Failed to load component</p>
-            <p class="tw-text-gray-500 tw-text-sm">Component "{{ container.config.componentId || container.config.id }}" is not available</p>
-            <button 
-              cideEleButton 
-              variant="outline" 
-              size="xs" 
-              (click)="containerService.onClose(container.id)"
-              class="tw-mt-2">
-              Close
-            </button>
-          </div>
-        }
-      </cide-ele-floating-container>
-    }
+                args: [{ selector: 'cide-ele-floating-container-manager', standalone: true, imports: [CommonModule, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideSpinnerComponent, CideEleButtonComponent, CideIconComponent], template: `
+    @for (container of visibleContainers(); track container.id) {
+      <cide-ele-floating-container
+        [config]="containerService.getConfigSignal(container.config)"
+        [isMinimized]="containerService.getMinimizedSignal(container.id)"
+        [isMaximized]="containerService.getMaximizedSignal(container.id)"
+        [isVisible]="containerService.getVisibleSignal(container.id)"
+        [zIndex]="containerService.getZIndexSignal(container.id)"
+        (closeEvent)="containerService.onClose($event)"
+        (minimizeEvent)="containerService.onMinimize($event)"
+        (maximizeEvent)="containerService.onMaximize($event)"
+        (clickEvent)="containerService.bringToFront($event)">
+        
+        <!-- Dynamic content loading with @defer for performance -->
+        @defer (when container.isVisible) {
+          <div 
+            cideEleFloatingDynamic
+            [componentId]="container.config.componentId || container.config.id"
+            [componentConfig]="containerService.getComponentConfig(container.config)"
+            [isVisible]="container.isVisible">
+          </div>
+        } @placeholder {
+          <div class="tw-flex tw-items-center tw-justify-center tw-p-4">
+            <cide-ele-spinner size="sm"></cide-ele-spinner>
+            <span class="tw-ml-2 tw-text-sm tw-text-gray-600">Loading component...</span>
+          </div>
+        } @error {
+          <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center">
+            <cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-500 tw-mb-2">error</cide-ele-icon>
+            <p class="tw-text-red-600 tw-font-medium">Failed to load component</p>
+            <p class="tw-text-gray-500 tw-text-sm">Component "{{ container.config.componentId || container.config.id }}" is not available</p>
+            <button 
+              cideEleButton 
+              variant="outline" 
+              size="xs" 
+              (click)="containerService.onClose(container.id)"
+              class="tw-mt-2">
+              Close
+            </button>
+          </div>
+        }
+      </cide-ele-floating-container>
+    }
   ` }]
             }], ctorParameters: null, propDecorators: null }) });
 
@@ -12164,5 +12508,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, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationService, PortalService, TooltipDirective };
+export { CapitalizePipe, CideCoreFileManagerService, CideEleBreadcrumbComponent, CideEleButtonComponent, CideEleConfirmationModalComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleFileInputComponent, CideEleFileManagerService, CideEleFloatingContainerComponent, CideEleFloatingContainerDynamicDirective, CideEleFloatingContainerManagerComponent, CideEleFloatingContainerService, CideEleFloatingFeaturesService, CideEleFloatingFileUploaderComponent, CideEleFloatingFileUploaderService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideEleResizerDirective, CideEleSkeletonLoaderComponent, CideEleTabComponent, CideEleToastNotificationComponent, CideElementsService, CideFormFieldErrorComponent, CideIconComponent, CideInputComponent, CideSelectComponent, CideSelectOptionComponent, CideSpinnerComponent, CideTextareaComponent, ConfirmationService, CoreFileManagerInsertUpdatePayload, DEFAULT_GRID_CONFIG, DropdownManagerService, ExportService, ICoreCyfmSave, KeyboardShortcutService, MFileManager, NotificationService, PortalService, TooltipDirective };
 //# sourceMappingURL=cloud-ide-element.mjs.map