cloud-ide-element 1.1.11 → 1.1.12

package/fesm2022/cloud-ide-element.mjs

@@ -569,6 +569,19 @@ class CideInputComponent {
     // ViewChild for date picker template
     datePickerTemplate;
     datePickerViewRef = null;
+    // Time picker properties
+    showTimePicker = false;
+    timeHours = 1;
+    timeMinutes = 30;
+    timeSeconds = 30;
+    timeFormat = 'AM';
+    timePickerPortalId = `time-picker-${this.randomString()}`;
+    // ViewChild for time picker template
+    timePickerTemplate;
+    // DateTime picker properties
+    showDateTimePicker = false;
+    dateTimeStep = 'date';
+    dateTimePickerPortalId = `datetime-picker-${this.randomString()}`;
     // ==================================METHODS FOR CUSTOM FORM COMPONENT=============================
     // FOR ANGULAR CALLED BY UI
     /**
@@ -659,6 +672,10 @@ class CideInputComponent {
     ngOnDestroy() {
         // Clean up date picker portal
         this.portalService.destroyPortal(this.datePickerPortalId);
+        // Clean up time picker portal
+        this.portalService.destroyPortal(this.timePickerPortalId);
+        // Clean up datetime picker portal
+        this.portalService.destroyPortal(this.dateTimePickerPortalId);
     }
     /** @description custom method run when HTML changes, we call method registerd by angular to detect change */
     upDateValue(value) {
@@ -714,6 +731,25 @@ class CideInputComponent {
                 }
             }
         }
+        else if (type === 'datetime-local' && typeof value === 'string' && value) {
+            // Ensure datetime-local is in YYYY-MM-DDTHH:mm format
+            const datetimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/;
+            if (datetimeRegex.test(value) && !isNaN(Date.parse(value))) {
+                return value; // Already in correct format
+            }
+            else {
+                // Try to parse and format unformatted datetime to YYYY-MM-DDTHH:mm
+                const parsedDate = new Date(value);
+                if (!isNaN(parsedDate.getTime())) {
+                    const year = parsedDate.getFullYear();
+                    const month = String(parsedDate.getMonth() + 1).padStart(2, '0');
+                    const day = String(parsedDate.getDate()).padStart(2, '0');
+                    const hours = String(parsedDate.getHours()).padStart(2, '0');
+                    const minutes = String(parsedDate.getMinutes()).padStart(2, '0');
+                    return `${year}-${month}-${day}T${hours}:${minutes}`;
+                }
+            }
+        }
         else if (type === 'url' && typeof value === 'string' && value) {
             // Normalize URL format - ensure it starts with http:// or https://
             if (!value.startsWith('http://') && !value.startsWith('https://')) {
@@ -786,6 +822,21 @@ class CideInputComponent {
                 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}$/;
+                    return datetimeRegex.test(value) && !isNaN(Date.parse(value));
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                return false;
+            }
+        }
         else {
             return false;
         }
@@ -891,6 +942,45 @@ class CideInputComponent {
                 validation_status.validation.required = `Date is required!`;
             }
         }
+        else if (this.type == 'datetime-local') {
+            if (typeof (value) == 'string' && value) {
+                // Validate datetime-local format and parse
+                const datetimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/;
+                if (!datetimeRegex.test(value)) {
+                    validation_status.status = true;
+                    validation_status.validation.required = `Invalid datetime format (YYYY-MM-DDTHH:mm)!`;
+                }
+                else {
+                    const parsedDate = Date.parse(value);
+                    if (isNaN(parsedDate)) {
+                        validation_status.status = true;
+                        validation_status.validation.required = `Invalid datetime!`;
+                    }
+                    else {
+                        // Validate min datetime
+                        if (this.min && typeof this.min === 'string') {
+                            const minDate = Date.parse(this.min);
+                            if (!isNaN(minDate) && parsedDate < minDate) {
+                                validation_status.status = true;
+                                validation_status.validation.required = `Datetime must be after ${this.min}!`;
+                            }
+                        }
+                        // Validate max datetime
+                        if (this.max && typeof this.max === 'string') {
+                            const maxDate = Date.parse(this.max);
+                            if (!isNaN(maxDate) && parsedDate > maxDate) {
+                                validation_status.status = true;
+                                validation_status.validation.required = `Datetime must be before ${this.max}!`;
+                            }
+                        }
+                    }
+                }
+            }
+            else if (this.required && !value) {
+                validation_status.status = true;
+                validation_status.validation.required = `Datetime is required!`;
+            }
+        }
         this.isValid = !validation_status.status;
         this.errorText = Object.values(validation_status.validation).at(0) || '';
         return validation_status;
@@ -922,6 +1012,29 @@ class CideInputComponent {
                 this.closeDatePicker();
             }
         }
+        else if (this.type === 'time') {
+            // Toggle custom time picker using portal service
+            this.showTimePicker = !this.showTimePicker;
+            if (this.showTimePicker) {
+                this.initializeTimePicker();
+                this.createTimePickerUsingPortal();
+            }
+            else {
+                this.closeTimePicker();
+            }
+        }
+        else if (this.type === 'datetime-local') {
+            // Toggle custom datetime picker using portal service
+            this.showDateTimePicker = !this.showDateTimePicker;
+            if (this.showDateTimePicker) {
+                this.dateTimeStep = 'date'; // Start with date selection
+                this.initializeDateTimePicker();
+                this.createDateTimePickerUsingPortal();
+            }
+            else {
+                this.closeDateTimePicker();
+            }
+        }
         else {
             this.typeInternal = this.type;
         }
@@ -963,6 +1076,12 @@ class CideInputComponent {
             this.onValidate();
         }
     }
+    /**
+     * @description Helper to check if type is time (for template type narrowing)
+     */
+    isTimeType() {
+        return this.type === 'time';
+    }
     /**
      * @description use to detact the change in type if changes done this method is ued to run
      */
@@ -978,6 +1097,18 @@ class CideInputComponent {
             this.trailingIconInternal = this.trailingIcon || "calendar_today";
             this.isTrailingIconAllwedClick = true; // Allow clicking calendar icon
         }
+        else if (this.type === 'time') {
+            this.typeInternal = "time";
+            // Set default schedule icon for time picker
+            this.trailingIconInternal = this.trailingIcon || "schedule";
+            this.isTrailingIconAllwedClick = true; // Allow clicking time icon
+        }
+        else if (this.type === 'datetime-local') {
+            this.typeInternal = "datetime-local";
+            // Set default schedule icon if no trailing icon specified
+            this.trailingIconInternal = this.trailingIcon || "event";
+            this.isTrailingIconAllwedClick = true; // datetime-local now uses custom picker
+        }
         else if (this.type === 'url') {
             this.typeInternal = "url";
             // Set default link icon if no trailing icon specified
@@ -1195,6 +1326,296 @@ class CideInputComponent {
         // Close date picker
         this.closeDatePicker();
     }
+    // ==================== TIME PICKER METHODS ====================
+    /**
+     * @description Initialize time picker with current values
+     */
+    initializeTimePicker() {
+        if (this.ngModel) {
+            // Parse existing time value (format: HH:mm or HH:mm:ss)
+            const timeString = this.ngModel.toString();
+            const timeParts = timeString.split(':');
+            if (timeParts.length >= 2) {
+                let hours = parseInt(timeParts[0]);
+                const minutes = parseInt(timeParts[1]);
+                const seconds = timeParts[2] ? parseInt(timeParts[2]) : 0;
+                // Convert to 12-hour format
+                this.timeFormat = hours >= 12 ? 'PM' : 'AM';
+                this.timeHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours);
+                this.timeMinutes = minutes;
+                this.timeSeconds = seconds;
+            }
+        }
+        else {
+            // Default to current time
+            const now = new Date();
+            let hours = now.getHours();
+            this.timeFormat = hours >= 12 ? 'PM' : 'AM';
+            this.timeHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours);
+            this.timeMinutes = now.getMinutes();
+            this.timeSeconds = now.getSeconds();
+        }
+    }
+    /**
+     * @description Create time picker using template-based portal service
+     */
+    createTimePickerUsingPortal() {
+        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-time-picker-portal',
+            position: 'bottom',
+            align: 'left',
+            offset: { x: 0, y: 8 },
+            closeOnOutsideClick: true,
+            closeOnEscape: true
+        };
+        this.portalService.createTemplatePortal(this.timePickerPortalId, portalConfig);
+        // Register close callback
+        this.portalService.registerCloseCallback(this.timePickerPortalId, () => {
+            this.closeTimePicker();
+        });
+        inputElement.setAttribute('data-portal-trigger', this.timePickerPortalId);
+    }
+    /**
+     * @description Close time picker
+     */
+    closeTimePicker() {
+        this.showTimePicker = false;
+        this.portalService.destroyPortal(this.timePickerPortalId);
+    }
+    /**
+     * @description Increment/decrement time value
+     */
+    adjustTime(unit, direction) {
+        if (unit === 'hours') {
+            if (direction === 'up') {
+                this.timeHours = this.timeHours === 12 ? 1 : this.timeHours + 1;
+            }
+            else {
+                this.timeHours = this.timeHours === 1 ? 12 : this.timeHours - 1;
+            }
+        }
+        else if (unit === 'minutes') {
+            if (direction === 'up') {
+                this.timeMinutes = this.timeMinutes === 59 ? 0 : this.timeMinutes + 1;
+            }
+            else {
+                this.timeMinutes = this.timeMinutes === 0 ? 59 : this.timeMinutes - 1;
+            }
+        }
+        else if (unit === 'seconds') {
+            if (direction === 'up') {
+                this.timeSeconds = this.timeSeconds === 59 ? 0 : this.timeSeconds + 1;
+            }
+            else {
+                this.timeSeconds = this.timeSeconds === 0 ? 59 : this.timeSeconds - 1;
+            }
+        }
+    }
+    /**
+     * @description Toggle AM/PM
+     */
+    toggleTimeFormat() {
+        this.timeFormat = this.timeFormat === 'AM' ? 'PM' : 'AM';
+    }
+    /**
+     * @description Apply selected time
+     */
+    applyTime() {
+        // Convert to 24-hour format
+        let hours = this.timeHours;
+        if (this.timeFormat === 'PM' && hours !== 12) {
+            hours += 12;
+        }
+        else if (this.timeFormat === 'AM' && hours === 12) {
+            hours = 0;
+        }
+        // Format time as HH:mm:ss
+        const timeString = `${hours.toString().padStart(2, '0')}:${this.timeMinutes.toString().padStart(2, '0')}:${this.timeSeconds.toString().padStart(2, '0')}`;
+        this.ngModel = timeString;
+        this.ngModelChange.emit(timeString);
+        this.onChange(timeString);
+        this.closeTimePicker();
+    }
+    /**
+     * @description Get time display value for the input field
+     */
+    getTimeDisplayValue() {
+        if (!this.ngModel)
+            return '';
+        const timeString = this.ngModel.toString();
+        const timeParts = timeString.split(':');
+        if (timeParts.length >= 2) {
+            let hours = parseInt(timeParts[0]);
+            const minutes = parseInt(timeParts[1]);
+            const seconds = timeParts[2] ? parseInt(timeParts[2]) : 0;
+            const format = hours >= 12 ? 'PM' : 'AM';
+            hours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours);
+            return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} ${format}`;
+        }
+        return timeString;
+    }
+    // ==================== DATETIME PICKER METHODS ====================
+    /**
+     * @description Initialize datetime picker
+     */
+    initializeDateTimePicker() {
+        if (this.ngModel) {
+            // Parse existing datetime value
+            const dateTimeString = this.ngModel.toString();
+            const dateTime = new Date(dateTimeString);
+            if (!isNaN(dateTime.getTime())) {
+                // Initialize date picker values
+                this.selectedDate = dateTime;
+                this.currentMonth = dateTime.getMonth();
+                this.currentYear = dateTime.getFullYear();
+                this.generateCalendar();
+                // Initialize time picker values
+                let hours = dateTime.getHours();
+                this.timeFormat = hours >= 12 ? 'PM' : 'AM';
+                this.timeHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours);
+                this.timeMinutes = dateTime.getMinutes();
+                this.timeSeconds = dateTime.getSeconds();
+            }
+        }
+        else {
+            // Default to current date and time
+            const now = new Date();
+            this.selectedDate = now;
+            this.currentMonth = now.getMonth();
+            this.currentYear = now.getFullYear();
+            this.generateCalendar();
+            let hours = now.getHours();
+            this.timeFormat = hours >= 12 ? 'PM' : 'AM';
+            this.timeHours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours);
+            this.timeMinutes = now.getMinutes();
+            this.timeSeconds = now.getSeconds();
+        }
+    }
+    /**
+     * @description Create datetime picker using portal service
+     */
+    createDateTimePickerUsingPortal() {
+        const inputElement = document.getElementById(this.id || this.idRandom);
+        if (!inputElement)
+            return;
+        // Use date picker template for datetime picker (will show date first, then time)
+        const portalConfig = {
+            template: this.datePickerTemplate,
+            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();
+        });
+        inputElement.setAttribute('data-portal-trigger', this.dateTimePickerPortalId);
+    }
+    /**
+     * @description Close datetime picker
+     */
+    closeDateTimePicker() {
+        this.showDateTimePicker = false;
+        this.dateTimeStep = 'date';
+        this.showMonthYearSelector = false;
+        this.portalService.destroyPortal(this.dateTimePickerPortalId);
+    }
+    /**
+     * @description Select date in datetime picker (moves to time selection)
+     */
+    selectDateTimeDate(dayInfo) {
+        if (!dayInfo.isCurrentMonth)
+            return;
+        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();
+        });
+    }
+    /**
+     * @description Apply datetime (combines date and time)
+     */
+    applyDateTime() {
+        if (!this.selectedDate)
+            return;
+        // Convert time to 24-hour format
+        let hours = this.timeHours;
+        if (this.timeFormat === 'PM' && hours !== 12) {
+            hours += 12;
+        }
+        else if (this.timeFormat === 'AM' && hours === 12) {
+            hours = 0;
+        }
+        // Combine date and time
+        const dateTime = new Date(this.selectedDate);
+        dateTime.setHours(hours, this.timeMinutes, this.timeSeconds);
+        // Format as datetime-local string (YYYY-MM-DDTHH:mm:ss)
+        const dateTimeString = dateTime.toISOString().slice(0, 19);
+        this.ngModel = dateTimeString;
+        this.ngModelChange.emit(dateTimeString);
+        this.onChange(dateTimeString);
+        this.closeDateTimePicker();
+    }
+    /**
+     * @description Get datetime display value
+     */
+    getDateTimeDisplayValue() {
+        if (!this.ngModel)
+            return '';
+        const dateTime = new Date(this.ngModel.toString());
+        if (isNaN(dateTime.getTime()))
+            return this.ngModel.toString();
+        // Format: MMM DD, YYYY HH:mm AM/PM
+        const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        const month = monthNames[dateTime.getMonth()];
+        const day = dateTime.getDate();
+        const year = dateTime.getFullYear();
+        let hours = dateTime.getHours();
+        const minutes = dateTime.getMinutes();
+        const format = hours >= 12 ? 'PM' : 'AM';
+        hours = hours === 0 ? 12 : (hours > 12 ? hours - 12 : hours);
+        return `${month} ${day}, ${year} ${hours}:${minutes.toString().padStart(2, '0')} ${format}`;
+    }
+    /**
+     * @description Back to date selection in datetime picker
+     */
+    backToDateSelection() {
+        this.dateTimeStep = 'date';
+        // Recreate portal with date picker template
+        this.portalService.destroyPortal(this.dateTimePickerPortalId);
+        this.createDateTimePickerUsingPortal();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideInputComponent, isStandalone: true, selector: "cide-ele-input", inputs: { fill: "fill", label: "label", labelHide: "labelHide", disabled: "disabled", clearInput: "clearInput", labelPlacement: "labelPlacement", labelDir: "labelDir", placeholder: "placeholder", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", helperText: "helperText", helperTextCollapse: "helperTextCollapse", hideHelperAndErrorText: "hideHelperAndErrorText", errorText: "errorText", maxlength: "maxlength", minlength: "minlength", required: "required", autocapitalize: "autocapitalize", autocomplete: "autocomplete", type: "type", width: "width", id: "id", ngModel: "ngModel", option: "option", min: "min", max: "max", size: "size" }, outputs: { ngModelChange: "ngModelChange" }, providers: [
             {
@@ -1209,7 +1630,7 @@ class CideInputComponent {
                 useExisting: forwardRef(() => CideInputComponent),
             },
             CapitalizePipe
-        ], viewQueries: [{ propertyName: "datePickerTemplate", first: true, predicate: ["datePickerTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-input\">\n    <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\n    @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || 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                <!-- Regular Input (non-date, non-url) -->\n                @if (type !== 'date' && 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)=\"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>", 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}\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 }], 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: 
                 // 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
@@ -1235,7 +1656,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 === '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                <!-- Regular Input (non-date, non-url) -->\n                @if (type !== 'date' && 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)=\"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>", 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}\n"] }]
+                    ], template: "<div class=\"cide-input\">\n    <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\n    @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === 'datetime-local' || type === 'url') {\n        <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\n                'cide-element-size-xxs': (size === '2xs'),\n                'cide-element-size-xs': (size === 'xs'),\n                'cide-element-size-sm': (size === 'sm'),\n                'cide-element-size-md': (size === 'md'),\n                'cide-element-size-lg': (size === 'lg'),\n                'cide-element-leading-icon': leadingIcon,\n                'cide-element-trailing-icon': trailingIconInternal,\n                'cide-element-clear-input': clearInput,\n                'cide-element-input-label-floating': (labelPlacement === 'floating'),\n                'cide-element-input-label-start': (labelDir === 'start'),\n                'cide-element-input-label-end': (labelDir === 'end'),\n                'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\n                'cide-element-input-label-less': (!label || labelHide),\n                'cide-element-style-outline': (fill === 'outline'),\n                'cide-element-style-solid': (fill === 'solid'),\n                'cide-element-style-standard': (fill === 'standard'),\n                'cide-element-input-number': (type === 'number')\n            }\">\n            <!-- label -->\n            @if (label && !labelHide) {\n            <label [for]=\"id\" class=\"cide-input-label\">\n              {{label}}\n              @if (required) {\n                <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n              }\n            </label>\n            }\n\n            <!-- all one line elemets which dose not affect with label and error text -->\n            <div class=\"cide-element-input-wrapper\">\n                <!-- Leading Icon -->\n                @if (leadingIcon) {\n                <span class=\"cide-input-leading-icon-wrapper\">\n                    <span\n                        class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\n                </span>\n                }\n\n                <!-- Trailing icon -->\n                @if (trailingIconInternal) {\n                <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\n                    <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\n                        [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\n                        (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\n                </span>\n                }\n\n                <!-- Clear -->\n                @if (clearInput && ngModel) {\n                <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\n                    <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n                </button>\n                }\n\n                <!-- Date Input Wrapper -->\n                @if (type === 'date') {\n                <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\n                    <!-- Date Input (read-only to prevent manual input) -->\n                    <input [placeholder]=\"placeholder\" [id]=\"id\" [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"] }]
         }], ctorParameters: () => [], propDecorators: { fill: [{
                 type: Input
             }], label: [{
@@ -1295,6 +1716,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
             }], datePickerTemplate: [{
                 type: ViewChild,
                 args: ['datePickerTemplate', { static: true }]
+            }], timePickerTemplate: [{
+                type: ViewChild,
+                args: ['timePickerTemplate', { static: true }]
             }] } });
 
 class CideSelectOptionComponent {
@@ -7766,6 +8190,17 @@ const DEFAULT_GRID_CONFIG = {
         virtualScroll: false,
         rowHeight: 40
     },
+    columnMenu: {
+        enabled: true,
+        showSort: true,
+        showFilter: true,
+        showAutosize: true,
+        showGroupBy: true,
+        showManageColumns: true,
+        showResetColumns: true,
+        showHideColumn: true,
+        showAggregation: true
+    },
     responsive: true,
     striped: false,
     bordered: true,
@@ -7806,20 +8241,46 @@ class CideEleDataGridComponent {
     localReorderedData = []; // Local data for visual reordering
     searchDebounceTimer;
     isDataUpdate = false;
+    // Column menu state
+    openColumnMenu = signal(null, ...(ngDevMode ? [{ debugName: "openColumnMenu" }] : [])); // Column key of open menu
+    columnFilters = signal([], ...(ngDevMode ? [{ debugName: "columnFilters" }] : [])); // Active column filters
+    columnSorts = signal([], ...(ngDevMode ? [{ debugName: "columnSorts" }] : [])); // Active column sorts
+    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
     // Computed properties
     hasNextPage = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNextPage" }] : []));
     hasPreviousPage = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : []));
     // Merged configuration with defaults
     mergedConfig = signal(this.config, ...(ngDevMode ? [{ debugName: "mergedConfig" }] : []));
+    // Visible columns (excluding hidden)
+    visibleColumns = computed(() => {
+        const hidden = this.hiddenColumns();
+        return this.mergedConfig().columns.filter(col => !hidden.includes(col.key) && !col.hidden);
+    }, ...(ngDevMode ? [{ debugName: "visibleColumns" }] : []));
     ngOnInit() {
         this.initializeGrid();
         this.initializeOriginalOrder();
+        // Add global click listener to close menus when clicking outside
+        document.addEventListener('click', this.handleGlobalClick.bind(this));
     }
     ngOnDestroy() {
         // Clean up search debounce timer
         if (this.searchDebounceTimer) {
             clearTimeout(this.searchDebounceTimer);
         }
+        // Remove global click listener
+        document.removeEventListener('click', this.handleGlobalClick.bind(this));
+    }
+    handleGlobalClick(event) {
+        // Close column menu and filter panel when clicking outside
+        const target = event.target;
+        const isInsideMenu = target.closest('.column-menu-dropdown');
+        const isMenuTrigger = target.closest('.column-menu-trigger');
+        if (!isInsideMenu && !isMenuTrigger) {
+            this.closeColumnMenu();
+            this.closeFilterPanel();
+        }
     }
     ngOnChanges(changes) {
         if (changes['config']) {
@@ -9049,9 +9510,287 @@ class CideEleDataGridComponent {
         }
         this.emitEvent('action', item, undefined, action);
     }
+    // ===== Column Menu Methods =====
+    toggleColumnMenu(columnKey, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        const current = this.openColumnMenu();
+        this.openColumnMenu.set(current === columnKey ? null : columnKey);
+    }
+    closeColumnMenu() {
+        this.openColumnMenu.set(null);
+    }
+    isColumnMenuOpen(columnKey) {
+        return this.openColumnMenu() === columnKey;
+    }
+    onColumnSort(column, direction) {
+        const sorts = this.columnSorts();
+        const existingIndex = sorts.findIndex(s => s.columnKey === column.key);
+        if (existingIndex !== -1) {
+            // Update existing sort
+            sorts[existingIndex].direction = direction;
+        }
+        else {
+            // Add new sort (replace existing for single column sort, or add for multi-column)
+            sorts.push({ columnKey: column.key, direction });
+        }
+        this.columnSorts.set([...sorts]);
+        this.emitEvent('columnSort', { columnKey: column.key, direction }, column);
+        this.closeColumnMenu();
+    }
+    onColumnFilter(column, value, operator = 'equals') {
+        const filters = this.columnFilters();
+        const existingIndex = filters.findIndex(f => f.columnKey === column.key);
+        if (value === null || value === undefined || value === '') {
+            // Remove filter
+            if (existingIndex !== -1) {
+                filters.splice(existingIndex, 1);
+            }
+        }
+        else {
+            const filter = { columnKey: column.key, value, operator };
+            if (existingIndex !== -1) {
+                // Update existing filter
+                filters[existingIndex] = filter;
+            }
+            else {
+                // Add new filter
+                filters.push(filter);
+            }
+        }
+        this.columnFilters.set([...filters]);
+        this.emitEvent('columnFilter', filters, column);
+    }
+    onColumnAutosize(column) {
+        this.emitEvent('columnAutosize', column.key, column);
+        this.closeColumnMenu();
+    }
+    onColumnGroupBy(column) {
+        this.emitEvent('columnGroupBy', column.key, column);
+        this.closeColumnMenu();
+    }
+    onColumnHide(column) {
+        const hidden = this.hiddenColumns();
+        if (!hidden.includes(column.key)) {
+            this.hiddenColumns.set([...hidden, column.key]);
+            this.emitEvent('columnHide', column.key, column);
+        }
+        this.closeColumnMenu();
+    }
+    onColumnShow(columnKey) {
+        const hidden = this.hiddenColumns();
+        const index = hidden.indexOf(columnKey);
+        if (index !== -1) {
+            hidden.splice(index, 1);
+            this.hiddenColumns.set([...hidden]);
+            const column = this.mergedConfig().columns.find(c => c.key === columnKey);
+            if (column) {
+                this.emitEvent('columnShow', columnKey, column);
+            }
+        }
+    }
+    onColumnReset() {
+        this.hiddenColumns.set([]);
+        this.columnFilters.set([]);
+        this.columnSorts.set([]);
+        this.emitEvent('columnReset', null);
+        this.closeColumnMenu();
+    }
+    onColumnAggregation(column, aggregationType) {
+        this.emitEvent('columnAggregation', { columnKey: column.key, aggregationType }, column);
+        this.closeColumnMenu();
+    }
+    onManageColumns() {
+        this.emitEvent('manageColumns', null);
+        this.closeColumnMenu();
+    }
+    getColumnFilterValue(columnKey) {
+        const filter = this.columnFilters().find(f => f.columnKey === columnKey);
+        return filter?.value;
+    }
+    getColumnSortDirection(columnKey) {
+        const sort = this.columnSorts().find(s => s.columnKey === columnKey);
+        return sort?.direction || null;
+    }
+    isColumnFiltered(columnKey) {
+        return this.columnFilters().some(f => f.columnKey === columnKey);
+    }
+    getActiveFilterCount(columnKey) {
+        const filter = this.columnFilters().find(f => f.columnKey === columnKey);
+        if (filter && filter.operator === 'in' && Array.isArray(filter.value)) {
+            return filter.value.length;
+        }
+        return 0;
+    }
+    toggleFilterPanel(columnKey, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        const current = this.showFilterPanel();
+        this.showFilterPanel.set(current === columnKey ? null : columnKey);
+        this.filterSearchTerm.set('');
+    }
+    closeFilterPanel() {
+        this.showFilterPanel.set(null);
+        this.filterSearchTerm.set('');
+    }
+    isFilterPanelOpen(columnKey) {
+        return this.showFilterPanel() === columnKey;
+    }
+    getUniqueColumnValues(column) {
+        const data = this.internalData();
+        const values = new Map();
+        // Count occurrences of each value
+        data.forEach(row => {
+            const value = column.valueGetter
+                ? this.getNestedValue(row, column.valueGetter)
+                : row[column.key];
+            const count = values.get(value) || 0;
+            values.set(value, count + 1);
+        });
+        // Get active filter for this column
+        const activeFilter = this.columnFilters().find(f => f.columnKey === column.key);
+        const activeValues = activeFilter?.operator === 'in' && Array.isArray(activeFilter.value)
+            ? activeFilter.value
+            : [];
+        // Convert to array and sort
+        const result = Array.from(values.entries())
+            .map(([value, count]) => ({
+            value,
+            label: this.formatFilterValue(value, column),
+            count,
+            checked: activeValues.length === 0 || activeValues.includes(value)
+        }))
+            .sort((a, b) => {
+            // Sort by label
+            if (a.label < b.label)
+                return -1;
+            if (a.label > b.label)
+                return 1;
+            return 0;
+        });
+        // Filter by search term
+        const searchTerm = this.filterSearchTerm().toLowerCase();
+        if (searchTerm) {
+            return result.filter(item => item.label.toLowerCase().includes(searchTerm));
+        }
+        return result;
+    }
+    formatFilterValue(value, column) {
+        if (value === null || value === undefined)
+            return '(Blank)';
+        if (typeof value === 'boolean')
+            return value ? 'Yes' : 'No';
+        if (value instanceof Date)
+            return value.toLocaleDateString();
+        return String(value);
+    }
+    toggleFilterValue(column, value, checked) {
+        const filters = this.columnFilters();
+        const existingIndex = filters.findIndex(f => f.columnKey === column.key);
+        let selectedValues = [];
+        if (existingIndex !== -1) {
+            const existing = filters[existingIndex];
+            selectedValues = Array.isArray(existing.value) ? [...existing.value] : [];
+        }
+        else {
+            // If no filter exists, start with all values
+            selectedValues = this.getUniqueColumnValues(column).map(v => v.value);
+        }
+        if (checked) {
+            // Add value if not present
+            if (!selectedValues.includes(value)) {
+                selectedValues.push(value);
+            }
+        }
+        else {
+            // Remove value
+            selectedValues = selectedValues.filter(v => v !== value);
+        }
+        // Apply filter
+        if (selectedValues.length === 0 || selectedValues.length === this.getUniqueColumnValues(column).length) {
+            // Remove filter if all or none selected
+            if (existingIndex !== -1) {
+                filters.splice(existingIndex, 1);
+            }
+        }
+        else {
+            const filter = {
+                columnKey: column.key,
+                value: selectedValues,
+                operator: 'in'
+            };
+            if (existingIndex !== -1) {
+                filters[existingIndex] = filter;
+            }
+            else {
+                filters.push(filter);
+            }
+        }
+        this.columnFilters.set([...filters]);
+        this.emitEvent('columnFilter', filters, column);
+        this.applyFiltersToData();
+    }
+    selectAllFilterValues(column) {
+        const filters = this.columnFilters();
+        const existingIndex = filters.findIndex(f => f.columnKey === column.key);
+        if (existingIndex !== -1) {
+            filters.splice(existingIndex, 1);
+            this.columnFilters.set([...filters]);
+            this.emitEvent('columnFilter', filters, column);
+            this.applyFiltersToData();
+        }
+    }
+    deselectAllFilterValues(column) {
+        const filters = this.columnFilters();
+        const existingIndex = filters.findIndex(f => f.columnKey === column.key);
+        const filter = {
+            columnKey: column.key,
+            value: [],
+            operator: 'in'
+        };
+        if (existingIndex !== -1) {
+            filters[existingIndex] = filter;
+        }
+        else {
+            filters.push(filter);
+        }
+        this.columnFilters.set([...filters]);
+        this.emitEvent('columnFilter', filters, column);
+        this.applyFiltersToData();
+    }
+    applyFiltersToData() {
+        let filtered = [...this.internalData()];
+        const filters = this.columnFilters();
+        filters.forEach(filter => {
+            const column = this.mergedConfig().columns.find(c => c.key === filter.columnKey);
+            if (!column)
+                return;
+            filtered = filtered.filter(row => {
+                const value = column.valueGetter
+                    ? this.getNestedValue(row, column.valueGetter)
+                    : row[column.key];
+                if (filter.operator === 'in' && Array.isArray(filter.value)) {
+                    return filter.value.includes(value);
+                }
+                return true;
+            });
+        });
+        this.filteredData.set(filtered);
+        this.totalItems.set(filtered.length);
+        this.totalPages.set(Math.ceil(filtered.length / this.pageSize()));
+    }
     // ===== Utility Methods =====
     emitEvent(type, data, column, action) {
-        this.gridEvent.emit({ type, data, column, action });
+        this.gridEvent.emit({
+            type,
+            data,
+            column,
+            action,
+            filters: this.columnFilters(),
+            sorts: this.columnSorts()
+        });
     }
     /**
      * Get nested value from an object
@@ -9284,7 +10023,7 @@ class CideEleDataGridComponent {
         return this.mergedConfig().scroll;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideEleDataGridComponent, isStandalone: true, selector: "cide-ele-data-grid", inputs: { config: "config", templateRenderers: "templateRenderers", customFormatters: "customFormatters", actionHandlers: "actionHandlers", serverSidePagination: "serverSidePagination", totalServerItems: "totalServerItems", currentServerPage: "currentServerPage", currentServerPageSize: "currentServerPageSize", dragDropEnabled: "dragDropEnabled" }, outputs: { gridEvent: "gridEvent" }, usesOnChanges: true, ngImport: i0, template: "  <!-- Data Grid Component -->\n  <div class=\"data-grid-container tw-bg-white tw-shadow tw-rounded-lg tw-overflow-visible tw-flex tw-flex-col\" \n       [ngClass]=\"[\n         mergedConfig().tableClass || '',\n         mergedConfig().fullHeight ? 'tw-h-full' : '',\n         isDragDropEnabled() ? 'drag-drop-enabled' : '',\n         isTreeEnabled() ? 'tree-enabled' : ''\n       ]\">\n  \n  <!-- Header Section -->\n  @if (mergedConfig().title || mergedConfig().subtitle) {\n    <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n      @if (mergedConfig().title) {\n        <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">\n          {{ mergedConfig().title }}\n        </h3>\n      }\n      @if (mergedConfig().subtitle) {\n        <p class=\"tw-text-sm tw-text-gray-600 tw-mt-0.5\">\n          {{ mergedConfig().subtitle }}\n        </p>\n      }\n    </div>\n  }\n\n  <!-- Search Section -->\n  @if (searchConfig.enabled) {\n    <div class=\"tw-px-3 tw-py-2 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Search Input -->\n        <div class=\"tw-max-w-md\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\"\n            (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\"\n            [disabled]=\"loading() || isRefreshing()\"\n            leadingIcon=\"search\"\n            fill=\"outline\">\n          </cide-ele-input>\n        </div>\n        \n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <button cideEleButton \n                    variant=\"outline\" \n                    size=\"sm\" \n                    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 columns; track column.key) {\n            <th\n              class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-truncate\"\n              [ngClass]=\"[\n                getColumnWidthClass(column.width),\n                getColumnMaxWidthClass(column.width),\n                column.align === 'center' ? 'tw-text-center' : '',\n                column.align === 'right' ? 'tw-text-right' : ''\n              ]\"\n              [title]=\"column.header\">\n              {{ column.header }}\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n          <!-- Skeleton Loading Rows -->\n          @for (skeletonItem of getSkeletonArray(); track $index) {\n            <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n              @for (column of columns; track column.key) {\n                <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\">\n                  <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n                </td>\n              }\n            </tr>\n          }\n        } @else {\n          @for (item of displayedData; track trackByFn($index, item)) {\n            <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\n                [ngClass]=\"[\n                  mergedConfig().rowClass || '',\n                  isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n                  isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n                  !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n                  isTreeEnabled() ? getTreeLevelClass(item) : ''\n                ]\"\n                [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n                [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\n                (click)=\"onRowClick(item)\"\n                (keydown.enter)=\"onRowClick(item)\"\n                (keydown.space)=\"onRowClick(item)\"\n                [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n                [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n                [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n                [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n                [draggable]=\"isDragDropEnabled()\"\n                (dragstart)=\"onDragStart($event, item, $index)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, item, $index)\"\n                (dragend)=\"onDragEnd($event)\">\n              \n              @for (column of columns; track column.key) {\n                <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width),\n                      mergedConfig().cellClass || '',\n                      column.align === 'center' ? 'tw-text-center' : '',\n                      column.align === 'right' ? 'tw-text-right' : '',\n                      column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n                    ]\"\n                    [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n                    [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\n                    [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '100px'\">\n                  <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n                  @if (isTreeEnabled() && $index === 0) {\n                    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                      <!-- Tree Indentation -->\n                      <div class=\"tw-flex tw-items-center\">\n                        @if (hasChildren(item)) {\n                          <button \n                            variant=\"outline\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n                            class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                            [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                            <cide-ele-icon \n                              class=\"tw-w-3 tw-h-3\"\n                              [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                              [class.tw-rotate-90]=\"isItemExpanded(item)\"\n                              size=\"xs\">\n                              chevron_right\n                            </cide-ele-icon>\n                          </button>\n                        } @else {\n                          <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n                            <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n                          </div>\n                        }\n                      </div>\n                      \n                      <!-- Cell Content -->\n                      <div class=\"tw-flex-1 tw-w-full\">\n                        @if (column.type === 'text') {\n                          <p class=\"tw-text-sm tw-text-gray-900\"\n                             [class.tw-truncate]=\"column.truncate\"\n                             [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </p>\n                        } @else if (column.type === 'number') {\n                          <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </span>\n                        } @else if (column.type === 'date') {\n                          <span class=\"tw-text-sm tw-text-gray-600\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </span>\n                        } @else if (column.type === 'boolean') {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                                [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                            {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                          </span>\n                        } @else if (column.type === 'status' && column.statusConfig) {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                                [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                            {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                          </span>\n                        } @else if (column.type === 'actions' && column.actions) {\n                          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                            @for (action of column.actions; track action.key) {\n                              <button\n                                cideEleButton\n                                [variant]=\"action.variant || 'ghost'\"\n                                size=\"xs\"\n                                type=\"button\"\n                                (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                                [title]=\"action.tooltip || action.label\"\n                                [disabled]=\"isRefreshing()\"\n                                class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                                [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                                [ngClass]=\"{\n                                  'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                  'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                  'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                  'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                }\">\n                                @if (action.icon) {\n                                  <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                                    <path d=\"M10 12l-5-5h10l-5 5z\"/>\n                                  </svg>\n                                }\n                                {{ action.label }}\n                              </button>\n                            }\n                          </div>\n                        } @else if (column.type === 'custom') {\n                          <!-- Template Renderer -->\n                          @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                            <ng-container \n                              [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                              [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-2 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n          [class.tw-opacity-60]=\"isRefreshing()\">\n      \n      <!-- Results Info and Page Size -->\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-4\">\n            <p class=\"tw-text-sm tw-text-gray-700\">\n              Showing {{ getItemRangeText() }} results\n            </p>\n            \n                         <!-- Page Size Selector -->\n             <div class=\"tw-flex tw-items-center tw-space-x-2\">\n               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-20 tw-relative\">\n                 <cide-ele-select\n                   [labelHide]=\"true\"\n                   [ngModel]=\"pageSize()\"\n                   (ngModelChange)=\"updatePageSize($event)\"\n                   [options]=\"getPageSizeOptions()\"\n                   [disabled]=\"isRefreshing()\"\n                   fill=\"outline\"\n                   size=\"sm\"\n                   class=\"tw-z-30\">\n                 </cide-ele-select>\n               </div>\n             </div>\n          </div>\n        }\n\n        <!-- Pagination Controls -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          \n          <!-- Previous/Next and Page Numbers -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            \n            <!-- First Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00AB\u00AB\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u2039\n            </button>\n            \n            <!-- Page Numbers -->\n            @for (page of getEnhancedPageNumbers(); track page) {\n              @if (page === '...') {\n                <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n              } @else {\n                <button\n                  cideEleButton\n                  [variant]=\"currentPage() === page ? 'primary' : 'outline'\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-px-3 tw-py-2 tw-text-sm tw-border tw-rounded-md tw-transition-colors\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white tw-border-blue-600': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u203A\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00BB\u00BB\n            </button>\n            \n          </div>\n\n          <!-- Quick Jump and Refresh -->\n          @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2 tw-border-l tw-border-gray-200 tw-pl-3\">\n              \n              <!-- Quick Jump -->\n              @if (paginationConfig.showQuickJump) {\n                                  <div class=\"tw-flex tw-items-center tw-space-x-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n                    <div class=\"tw-w-20\">\n                                              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                          [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n                          [disabled]=\"isRefreshing()\"\n                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    cideEleButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-px-3 tw-py-2 tw-text-sm tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  cideEleButton\n                  variant=\"outline\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"!tw-w-10 !tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-600 tw-bg-gray-100 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                  @if (isRefreshing()) {\n                    <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                      <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n                  } @else {\n                    <svg class=\"tw-h-4 tw-w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"></path>\n                    </svg>\n                  }\n                </button>\n              }\n            </div>\n          }\n          \n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#f9fafb}.data-grid-container.tw-table-sm th,.data-grid-container.tw-table-sm td{padding:.5rem 1rem}.data-grid-container tbody tr:hover{background-color:#f3f4f6}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#fffc;z-index:10}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls button{transition:all .15s ease-in-out}.data-grid-container .pagination-controls button:hover:not(:disabled){transform:translateY(-1px)}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed}.data-grid-container .pagination-controls button.active{box-shadow:0 2px 4px #3b82f64d}.data-grid-container .pagination-controls input[type=number]{transition:border-color .15s ease-in-out}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .status-badge{font-weight:500;letter-spacing:.025em}.data-grid-container .status-badge.active{background-color:#d1fae5;color:#065f46}.data-grid-container .status-badge.inactive{background-color:#fee2e2;color:#991b1b}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .empty-state{padding:3rem 1.5rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1rem;opacity:.4}.data-grid-container .empty-state h3{margin-bottom:.5rem}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #3b82f6;border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:#f8fafc;box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:10}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:#f3f4f6;border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, decorators: [{
             type: Component,
@@ -9296,7 +10035,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-2 tw-border-b tw-border-gray-200\">\n      <div class=\"tw-flex tw-items-center tw-justify-between\">\n        <!-- Search Input -->\n        <div class=\"tw-max-w-md\">\n          <cide-ele-input [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\" id=\"search-input\" type=\"text\"\n            [ngModel]=\"searchQuery()\"\n            (ngModelChange)=\"updateSearchQuery($event)\"\n            [placeholder]=\"searchConfig.placeholder\"\n            [disabled]=\"loading() || isRefreshing()\"\n            leadingIcon=\"search\"\n            fill=\"outline\">\n          </cide-ele-input>\n        </div>\n        \n        <!-- Drag Order Actions -->\n        @if (isDragDropEnabled() && (isDragging() || hasOrderChanged())) {\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <button cideEleButton \n                    variant=\"outline\" \n                    size=\"sm\" \n                    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 columns; track column.key) {\n            <th\n              class=\"tw-px-3 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider tw-truncate\"\n              [ngClass]=\"[\n                getColumnWidthClass(column.width),\n                getColumnMaxWidthClass(column.width),\n                column.align === 'center' ? 'tw-text-center' : '',\n                column.align === 'right' ? 'tw-text-right' : ''\n              ]\"\n              [title]=\"column.header\">\n              {{ column.header }}\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\n        @if (loading() || isRefreshing() || pageChangeLoading()) {\n          <!-- Skeleton Loading Rows -->\n          @for (skeletonItem of getSkeletonArray(); track $index) {\n            <tr class=\"tw-animate-pulse tw-border-b tw-border-gray-200\">\n              @for (column of columns; track column.key) {\n                <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width)\n                    ]\">\n                  <div class=\"tw-h-2 tw-bg-gray-200 tw-rounded tw-w-3/4\"></div>\n                </td>\n              }\n            </tr>\n          }\n        } @else {\n          @for (item of displayedData; track trackByFn($index, item)) {\n            <tr class=\"tw-group hover:tw-bg-gray-50 tw-border-b-2 tw-border-gray-200\"\n                [ngClass]=\"[\n                  mergedConfig().rowClass || '',\n                  isRefreshing() ? 'tw-opacity-60 tw-pointer-events-none' : '',\n                  isDragDropEnabled() ? 'tw-cursor-move tw-border-2 tw-border-transparent' : '',\n                  !isDragDropEnabled() ? 'tw-transition-colors tw-duration-150' : '',\n                  isTreeEnabled() ? getTreeLevelClass(item) : ''\n                ]\"\n                [style.border-color]=\"isDragOverRow === $index ? '#3b82f6' : 'transparent'\"\n                [style.background-color]=\"isDragOverRow === $index ? '#eff6ff' : ''\"\n                (click)=\"onRowClick(item)\"\n                (keydown.enter)=\"onRowClick(item)\"\n                (keydown.space)=\"onRowClick(item)\"\n                [class.tw-cursor-pointer]=\"mergedConfig().onRowClick && !isDragDropEnabled()\"\n                [tabindex]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 0 : -1\"\n                [attr.role]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'button' : null\"\n                [attr.aria-label]=\"mergedConfig().onRowClick && !isDragDropEnabled() ? 'Select row' : null\"\n                [draggable]=\"isDragDropEnabled()\"\n                (dragstart)=\"onDragStart($event, item, $index)\"\n                (dragover)=\"onDragOver($event)\"\n                (dragleave)=\"onDragLeave($event)\"\n                (drop)=\"onDrop($event, item, $index)\"\n                (dragend)=\"onDragEnd($event)\">\n              \n              @for (column of columns; track column.key) {\n                <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n                    [ngClass]=\"[\n                      getColumnWidthClass(column.width),\n                      getColumnMaxWidthClass(column.width),\n                      mergedConfig().cellClass || '',\n                      column.align === 'center' ? 'tw-text-center' : '',\n                      column.align === 'right' ? 'tw-text-right' : '',\n                      column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n                    ]\"\n                    [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n                    [style.maxWidth]=\"getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : 'none'\"\n                    [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : '100px'\">\n                  <!-- Tree Expand/Collapse Button (only for first column when tree is enabled) -->\n                  @if (isTreeEnabled() && $index === 0) {\n                    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                      <!-- Tree Indentation -->\n                      <div class=\"tw-flex tw-items-center\">\n                        @if (hasChildren(item)) {\n                          <button \n                            variant=\"outline\"\n                            size=\"xs\"\n                            type=\"button\"\n                            (click)=\"onActionClick(item, { key: 'toggle-expand', label: 'Toggle', icon: '', variant: 'ghost', onClick: 'toggle-expand' }); $event.stopPropagation()\"\n                            class=\"tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-text-gray-500 hover:tw-text-gray-700 tw-rounded\"\n                            [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                            [title]=\"isItemExpanded(item) ? 'Collapse' : 'Expand'\">\n                            <cide-ele-icon \n                              class=\"tw-w-3 tw-h-3\"\n                              [class.tw-transition-transform]=\"!isDragDropEnabled()\"\n                              [class.tw-rotate-90]=\"isItemExpanded(item)\"\n                              size=\"xs\">\n                              chevron_right\n                            </cide-ele-icon>\n                          </button>\n                        } @else {\n                          <div class=\"tw-w-8 tw-h-5 tw-flex tw-items-center tw-justify-center\">\n                            <!-- <div class=\"tw-w-1 tw-h-1 tw-bg-gray-300 tw-rounded-full\"></div> -->\n                          </div>\n                        }\n                      </div>\n                      \n                      <!-- Cell Content -->\n                      <div class=\"tw-flex-1 tw-w-full\">\n                        @if (column.type === 'text') {\n                          <p class=\"tw-text-sm tw-text-gray-900\"\n                             [class.tw-truncate]=\"column.truncate\"\n                             [title]=\"column.truncate ? (getNestedValue(item, column.valueGetter || column.key) || '').toString() : ''\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </p>\n                        } @else if (column.type === 'number') {\n                          <span class=\"tw-text-sm tw-text-gray-900 tw-font-mono\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </span>\n                        } @else if (column.type === 'date') {\n                          <span class=\"tw-text-sm tw-text-gray-600\">\n                            {{ formatValue(getNestedValue(item, column.valueGetter || column.key), column) }}\n                          </span>\n                        } @else if (column.type === 'boolean') {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                                [ngClass]=\"getNestedValue(item, column.valueGetter || column.key) ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n                            {{ getNestedValue(item, column.valueGetter || column.key) ? 'Yes' : 'No' }}\n                          </span>\n                        } @else if (column.type === 'status' && column.statusConfig) {\n                          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n                                [ngClass]=\"getStatusClass(getNestedValue(item, column.valueGetter || column.key), column.statusConfig)\">\n                            {{ getStatusText(getNestedValue(item, column.valueGetter || column.key), column.statusConfig) }}\n                          </span>\n                        } @else if (column.type === 'actions' && column.actions) {\n                          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n                            @for (action of column.actions; track action.key) {\n                              <button\n                                cideEleButton\n                                [variant]=\"action.variant || 'ghost'\"\n                                size=\"xs\"\n                                type=\"button\"\n                                (click)=\"onActionClick(item, action); $event.stopPropagation()\"\n                                [title]=\"action.tooltip || action.label\"\n                                [disabled]=\"isRefreshing()\"\n                                class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-2 tw-text-xs tw-font-medium tw-rounded\"\n                                [class.tw-transition-colors]=\"!isDragDropEnabled()\"\n                                [ngClass]=\"{\n                                  'tw-text-gray-700 tw-bg-gray-100 hover:tw-bg-gray-200': action.variant === 'ghost',\n                                  'tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700': action.variant === 'primary',\n                                  'tw-text-blue-700 tw-bg-blue-50 tw-border tw-border-blue-200 hover:tw-bg-blue-100': action.variant === 'outline',\n                                  'tw-text-white tw-bg-red-600 hover:tw-bg-red-700': action.variant === 'danger'\n                                }\">\n                                @if (action.icon) {\n                                  <svg class=\"tw-w-3 tw-h-3 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                                    <path d=\"M10 12l-5-5h10l-5 5z\"/>\n                                  </svg>\n                                }\n                                {{ action.label }}\n                              </button>\n                            }\n                          </div>\n                        } @else if (column.type === 'custom') {\n                          <!-- Template Renderer -->\n                          @if (column.renderer && isTemplateRenderer(column.renderer)) {\n                            <ng-container \n                              [ngTemplateOutlet]=\"getTemplateRenderer(column.renderer)!\"\n                              [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-2 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n          [class.tw-opacity-60]=\"isRefreshing()\">\n      \n      <!-- Results Info and Page Size -->\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n        \n        <!-- Results Info -->\n        @if (paginationConfig.showPageInfo) {\n          <div class=\"tw-flex tw-items-center tw-space-x-4\">\n            <p class=\"tw-text-sm tw-text-gray-700\">\n              Showing {{ getItemRangeText() }} results\n            </p>\n            \n                         <!-- Page Size Selector -->\n             <div class=\"tw-flex tw-items-center tw-space-x-2\">\n               <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n               <div class=\"tw-w-20 tw-relative\">\n                 <cide-ele-select\n                   [labelHide]=\"true\"\n                   [ngModel]=\"pageSize()\"\n                   (ngModelChange)=\"updatePageSize($event)\"\n                   [options]=\"getPageSizeOptions()\"\n                   [disabled]=\"isRefreshing()\"\n                   fill=\"outline\"\n                   size=\"sm\"\n                   class=\"tw-z-30\">\n                 </cide-ele-select>\n               </div>\n             </div>\n          </div>\n        }\n\n        <!-- Pagination Controls -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          \n          <!-- Previous/Next and Page Numbers -->\n          <div class=\"tw-flex tw-items-center tw-space-x-1\">\n            \n            <!-- First Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(1)\"\n              [disabled]=\"currentPage() === 1 || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00AB\u00AB\n            </button>\n            \n            <!-- Previous Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"previousPage()\"\n              [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u2039\n            </button>\n            \n            <!-- Page Numbers -->\n            @for (page of getEnhancedPageNumbers(); track page) {\n              @if (page === '...') {\n                <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n              } @else {\n                <button\n                  cideEleButton\n                  [variant]=\"currentPage() === page ? 'primary' : 'outline'\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onPageChange(page)\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"tw-px-3 tw-py-2 tw-text-sm tw-border tw-rounded-md tw-transition-colors\"\n                  [ngClass]=\"{\n                    'tw-bg-blue-600 tw-text-white tw-border-blue-600': currentPage() === page,\n                    'tw-bg-white tw-text-gray-700 tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n                  }\">\n                  {{ page }}\n                </button>\n              }\n            }\n            \n            <!-- Next Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"nextPage()\"\n              [disabled]=\"!hasNextPage() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u203A\n            </button>\n            \n            <!-- Last Page -->\n            <button\n              cideEleButton\n              variant=\"ghost\"\n              size=\"sm\"\n              type=\"button\"\n              (click)=\"onPageChange(totalPages())\"\n              [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n              class=\"tw-px-3 tw-py-2 tw-text-lg tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n              \u00BB\u00BB\n            </button>\n            \n          </div>\n\n          <!-- Quick Jump and Refresh -->\n          @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n            <div class=\"tw-flex tw-items-center tw-space-x-2 tw-border-l tw-border-gray-200 tw-pl-3\">\n              \n              <!-- Quick Jump -->\n              @if (paginationConfig.showQuickJump) {\n                                  <div class=\"tw-flex tw-items-center tw-space-x-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n                    <div class=\"tw-w-20\">\n                                              <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n                          [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n                          [disabled]=\"isRefreshing()\"\n                          (keydown.enter)=\"onJumpToPage()\">\n                      </cide-ele-input>\n                    </div>\n                  <button\n                    cideEleButton\n                    variant=\"outline\"\n                    size=\"sm\"\n                    type=\"button\"\n                    (click)=\"onJumpToPage()\"\n                    [disabled]=\"isRefreshing()\"\n                    class=\"tw-px-3 tw-py-2 tw-text-sm tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                    Go\n                  </button>\n                </div>\n              }\n              \n              <!-- Refresh Button -->\n              @if (paginationConfig.showRefresh) {\n                <button\n                  cideEleButton\n                  variant=\"outline\"\n                  size=\"sm\"\n                  type=\"button\"\n                  (click)=\"onRefresh()\"\n                  [disabled]=\"isRefreshing()\"\n                  class=\"!tw-w-10 !tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-600 tw-bg-gray-100 tw-border tw-border-gray-300 tw-rounded-md hover:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\">\n                  @if (isRefreshing()) {\n                    <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                      <path class=\"tw-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n                  } @else {\n                    <svg class=\"tw-h-4 tw-w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"></path>\n                    </svg>\n                  }\n                </button>\n              }\n            </div>\n          }\n          \n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".data-grid-container{width:100%;display:flex;flex-direction:column;min-height:400px}.data-grid-container.tw-h-full{height:100%;min-height:100%}.data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container .tw-overflow-x-auto.tw-flex-1{flex:1;min-height:0}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar{height:6px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af}.data-grid-container table{min-height:300px}.data-grid-container.tw-h-full table,.data-grid-container.tw-h-full tbody{height:100%}.data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#f9fafb}.data-grid-container.tw-table-sm th,.data-grid-container.tw-table-sm td{padding:.5rem 1rem}.data-grid-container tbody tr:hover{background-color:#f3f4f6}.data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:#e5f3ff}.data-grid-container.loading-overlay{position:relative}.data-grid-container.loading-overlay:after{content:\"\";position:absolute;inset:0;background:#fffc;z-index:10}.data-grid-container .tw-animate-pulse div{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.data-grid-container .action-buttons{display:flex;gap:.25rem}.data-grid-container .action-buttons button{transition:all .15s ease-in-out}.data-grid-container .action-buttons button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.data-grid-container .action-buttons button:disabled{cursor:not-allowed;opacity:.5}.data-grid-container .pagination-controls button{transition:all .15s ease-in-out}.data-grid-container .pagination-controls button:hover:not(:disabled){transform:translateY(-1px)}.data-grid-container .pagination-controls button:disabled{cursor:not-allowed}.data-grid-container .pagination-controls button.active{box-shadow:0 2px 4px #3b82f64d}.data-grid-container .pagination-controls input[type=number]{transition:border-color .15s ease-in-out}.data-grid-container .pagination-controls input[type=number]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .status-badge{font-weight:500;letter-spacing:.025em}.data-grid-container .status-badge.active{background-color:#d1fae5;color:#065f46}.data-grid-container .status-badge.inactive{background-color:#fee2e2;color:#991b1b}.data-grid-container .search-input{position:relative}.data-grid-container .search-input input{transition:all .15s ease-in-out}.data-grid-container .search-input input:focus{box-shadow:0 0 0 3px #3b82f61a}.data-grid-container .search-input .search-icon{pointer-events:none}.data-grid-container .empty-state{padding:3rem 1.5rem;text-align:center}.data-grid-container .empty-state svg{margin:0 auto 1rem;opacity:.4}.data-grid-container .empty-state h3{margin-bottom:.5rem}.data-grid-container.tw-h-full tbody tr:only-child td{height:100%;vertical-align:middle}.data-grid-container.tw-h-full table.empty-table{height:100%}.data-grid-container.tw-h-full tbody tr:only-child{height:100%}@media (max-width: 640px){.data-grid-container .tw-px-6{padding-left:1rem;padding-right:1rem}.data-grid-container .pagination-controls{flex-direction:column;gap:1rem}.data-grid-container .pagination-controls .flex{justify-content:center}.data-grid-container .pagination-info{display:none}.data-grid-container .search-actions{flex-direction:column;gap:1rem}}@media (prefers-color-scheme: dark){.data-grid-container.dark-mode{background-color:#1f2937;color:#f9fafb}.data-grid-container.dark-mode table{background-color:#1f2937}.data-grid-container.dark-mode thead{background-color:#374151}.data-grid-container.dark-mode tbody tr{border-color:#374151}.data-grid-container.dark-mode tbody tr:hover{background-color:#374151}.data-grid-container.dark-mode .tw-text-gray-900{color:#f9fafb!important}.data-grid-container.dark-mode .tw-text-gray-600{color:#d1d5db!important}.data-grid-container.dark-mode .tw-text-gray-500{color:#9ca3af!important}}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:#f3f4f6}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed #3b82f6;border-radius:4px}.data-grid-container.drag-drop-enabled tbody tr.tw-bg-blue-50{background-color:#eff6ffe6}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]{cursor:move;position:relative}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover{background-color:#f8fafc;box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:active{cursor:grabbing}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]{position:relative}.data-grid-container.drag-drop-enabled tbody tr[style*=border-top]:before{content:\"\";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#60a5fa);z-index:10}.data-grid-container.tree-enabled tbody tr td:first-child{position:relative}.data-grid-container.tree-enabled tbody tr td:first-child button{transition:all .15s ease}.data-grid-container.tree-enabled tbody tr td:first-child button:hover{background-color:#f3f4f6;border-radius:2px}.data-grid-container.tree-enabled tbody tr td:first-child button svg{transition:transform .2s ease}.data-grid-container.tree-enabled tbody tr[style*=padding-left]{border-left:2px solid transparent}.data-grid-container.tree-enabled tbody tr[style*=padding-left]:hover{border-left-color:#e5e7eb}.tree-level-0{border-bottom:2px solid #e5e7eb!important;background-color:#fff}.tree-level-0:hover{background-color:#f5f5f5!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid #d1d5db!important;background-color:#fafafa}.tree-level-1:hover{background-color:#f1f5f9!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid #d1d5db!important;background-color:#f9fafb}.tree-level-2:hover{background-color:#f3f4f6!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid #e5e7eb!important;background-color:#fefefe}.tree-level-deep:hover{background-color:#f9fafb!important}.tree-level-deep td:first-child{font-weight:300}table td{box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}table td.tw-overflow-hidden{overflow:hidden;text-overflow:ellipsis}table td:first-child{min-width:150px}table td:first-child>div{display:flex;align-items:center;min-width:0}table td:first-child>div .tw-flex{min-width:0}table td .tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}\n"] }]
+                    ], 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"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], templateRenderers: [{