cloud-ide-element 1.1.99 → 1.1.102
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -521,6 +521,8 @@ class CideInputComponent {
|
|
|
521
521
|
min = 0;
|
|
522
522
|
/** @description max value for number type control or max date for date type control */
|
|
523
523
|
max = 0;
|
|
524
|
+
/** @description step value for number type control */
|
|
525
|
+
step = 1;
|
|
524
526
|
/**
|
|
525
527
|
* @description
|
|
526
528
|
* Holds the size of the component like Small, Extra small, Large
|
|
@@ -1636,7 +1638,7 @@ class CideInputComponent {
|
|
|
1636
1638
|
this.createDateTimePickerUsingPortal();
|
|
1637
1639
|
}
|
|
1638
1640
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1639
|
-
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: [
|
|
1641
|
+
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", step: "step", size: "size" }, outputs: { ngModelChange: "ngModelChange" }, providers: [
|
|
1640
1642
|
{
|
|
1641
1643
|
provide: NG_VALUE_ACCESSOR,
|
|
1642
1644
|
useExisting: forwardRef(() => CideInputComponent),
|
|
@@ -1649,7 +1651,7 @@ class CideInputComponent {
|
|
|
1649
1651
|
useExisting: forwardRef(() => CideInputComponent),
|
|
1650
1652
|
},
|
|
1651
1653
|
CapitalizePipe
|
|
1652
|
-
], viewQueries: [{ propertyName: "datePickerTemplate", first: true, predicate: ["datePickerTemplate"], descendants: true, static: true }, { propertyName: "timePickerTemplate", first: true, predicate: ["timePickerTemplate"], descendants: true, static: true }, { propertyName: "dateTimePickerTemplate", first: true, predicate: ["dateTimePickerTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-input\">\r\n <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\r\n @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === 'datetime-local' || type === 'url') {\r\n <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n 'cide-element-size-xxs': (size === '2xs'),\r\n 'cide-element-size-xs': (size === 'xs'),\r\n 'cide-element-size-sm': (size === 'sm'),\r\n 'cide-element-size-md': (size === 'md'),\r\n 'cide-element-size-lg': (size === 'lg'),\r\n 'cide-element-leading-icon': leadingIcon,\r\n 'cide-element-trailing-icon': trailingIconInternal,\r\n 'cide-element-clear-input': clearInput,\r\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n 'cide-element-input-label-start': (labelDir === 'start'),\r\n 'cide-element-input-label-end': (labelDir === 'end'),\r\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n 'cide-element-input-label-less': (!label || labelHide),\r\n 'cide-element-style-outline': (fill === 'outline'),\r\n 'cide-element-style-solid': (fill === 'solid'),\r\n 'cide-element-style-standard': (fill === 'standard'),\r\n 'cide-element-input-number': (type === 'number')\r\n }\">\r\n <!-- label -->\r\n @if (label && !labelHide) {\r\n <label [for]=\"id\" class=\"cide-input-label\">\r\n {{label}}\r\n @if (required) {\r\n <span class=\"tw-text-red-500 tw-ml-1\">*</span>\r\n }\r\n </label>\r\n }\r\n\r\n <!-- all one line elemets which dose not affect with label and error text -->\r\n <div class=\"cide-element-input-wrapper\">\r\n <!-- Leading Icon -->\r\n @if (leadingIcon) {\r\n <span class=\"cide-input-leading-icon-wrapper\">\r\n <span\r\n class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n </span>\r\n }\r\n\r\n <!-- Trailing icon -->\r\n @if (trailingIconInternal) {\r\n <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n </span>\r\n }\r\n\r\n <!-- Clear -->\r\n @if (clearInput && ngModel) {\r\n <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\r\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n </button>\r\n }\r\n\r\n <!-- Date Input Wrapper -->\r\n @if (type === 'date') {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- Date Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty date -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- Date picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- Time Input Wrapper -->\r\n @if (isTimeType()) {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- Time Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [value]=\"getTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty time -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- Time picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- DateTime Local Input -->\r\n @if (type === 'datetime-local') {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- DateTime Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [value]=\"getDateTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty datetime -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- DateTime picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- Regular Input (non-date, non-time, non-datetime-local, non-url) -->\r\n @if (type !== 'date' && !isTimeType() && type !== 'datetime-local' && type !== 'url') {\r\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n }\r\n\r\n <!-- URL Input -->\r\n @if (type === 'url') {\r\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n }\r\n </div>\r\n <!-- error text / helper text -->\r\n @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\r\n <span class=\"cide-input-help-error-text\">{{\r\n isValid\r\n ? helperText : (errorText ?\r\n (isTouched ? errorText : helperText)\r\n : helperText)}}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Input with tralling icon -->\r\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n <div class=\"tw-w-fullh-full tw-relative\">\r\n <label\r\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n </span>\r\n <input\r\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n value=\"Ankush Bhure\" />\r\n </div>\r\n </div> -->\r\n\r\n <!-- Input with leading icon -->\r\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n <div class=\"tw-w-fullh-full tw-relative\">\r\n <label\r\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n </span>\r\n <input\r\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n value=\"Ankush Bhure\" />\r\n </div>\r\n </div> -->\r\n\r\n <!------------------------------------------CHECKBOX------------------------------------------>\r\n @if (type === 'checkbox') {\r\n <div class=\"tw-flex\">\r\n <div class=\"cide-checkbox tw-relative\">\r\n <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\" [disabled]=\"disabled\"\r\n class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n [autocomplete]=\"autocomplete\" />\r\n <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n </svg>\r\n </span>\r\n @if (!labelHide) {\r\n <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\r\n }\r\n </label>\r\n <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n <!-- Element hidden and its xpath is used to display inside SVG -->\r\n <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </symbol>\r\n </svg>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-------------------------------------------SELECT------------------------------------------->\r\n @if (type === 'select') {\r\n <div>sas\r\n <div class=\"tw-relative\">\r\n <div class=\"tw-absolute\">\r\n @for (item of option; track $index) {\r\n <div class=\"tw-w-full\">\r\n {{item}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n <!-- Date Picker Header -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n {{ monthNames[currentMonth] }} {{ currentYear }}\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Month/Year Selector -->\r\n @if (showMonthYearSelector) {\r\n <div class=\"tw-mb-4\">\r\n <!-- Year Navigation -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n </button>\r\n </div>\r\n \r\n <!-- Month Grid -->\r\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n @for (monthName of shortMonthNames; track $index) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\r\n [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n [class.tw-text-white]=\"$index === currentMonth\"\r\n [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n (click)=\"selectMonth($index)\">\r\n {{ monthName }}\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Back to Calendar Button -->\r\n <div class=\"tw-text-center\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n Back to Calendar\r\n </button>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Calendar View -->\r\n <div>\r\n <!-- Days of Week Header -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\r\n {{ dayName }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Calendar Days -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n [class.tw-text-white]=\"dayInfo.isSelected\"\r\n [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n (click)=\"showDateTimePicker ? selectDateTimeDate(dayInfo) : selectDate(dayInfo)\">\r\n {{ dayInfo.day }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Date Picker Footer -->\r\n <div class=\"tw-flex tw-justify-between tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded tw-transition-colors\"\r\n (click)=\"closeDatePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700 tw-rounded tw-transition-colors\"\r\n (click)=\"closeDatePicker()\">\r\n Done\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Time Picker Template -->\r\n<ng-template #timePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4 tw-w-72\">\r\n <!-- Time Picker Header -->\r\n <div class=\"tw-text-center tw-mb-3\">\r\n <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h3>\r\n </div>\r\n\r\n <!-- Time Spinners Container -->\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-3 tw-mb-4\">\r\n <!-- Hours -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n {{ timeHours }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">hour</span>\r\n </div>\r\n\r\n <!-- Colon Separator -->\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\r\n\r\n <!-- Minutes -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n {{ timeMinutes.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">min</span>\r\n </div>\r\n\r\n <!-- Colon Separator -->\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\r\n\r\n <!-- Seconds -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n {{ timeSeconds.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">sec</span>\r\n </div>\r\n </div>\r\n\r\n <!-- AM/PM Toggle -->\r\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\r\n [class.tw-shadow]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\r\n (click)=\"timeFormat = 'AM'\">\r\n AM\r\n </button>\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\r\n [class.tw-shadow]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\r\n (click)=\"timeFormat = 'PM'\">\r\n PM\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Current Time Display -->\r\n <div class=\"tw-text-center tw-mb-3\">\r\n <span class=\"tw-text-sm tw-text-gray-600\">\r\n {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{ timeFormat }}\r\n </span>\r\n </div>\r\n\r\n <!-- Time Picker Footer -->\r\n <div class=\"tw-flex tw-gap-2\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\r\n (click)=\"showDateTimePicker ? closeDateTimePicker() : closeTimePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\r\n (click)=\"showDateTimePicker ? applyDateTime() : applyTime()\">\r\n OK\r\n </button>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<!-- DateTime Picker Template (Combined Date + Time) -->\r\n<ng-template #dateTimePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n <!-- DateTime Picker Header -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n {{ monthNames[currentMonth] }} {{ currentYear }}\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\r\n <!-- Left Side: Calendar -->\r\n <div>\r\n <!-- Month/Year Selector -->\r\n @if (showMonthYearSelector) {\r\n <div class=\"tw-mb-4\">\r\n <!-- Year Navigation -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n </button>\r\n </div>\r\n \r\n <!-- Month Grid -->\r\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n @for (monthName of shortMonthNames; track $index) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-2 tw-py-1.5 tw-text-xs tw-rounded-md tw-transition-colors tw-text-center\"\r\n [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n [class.tw-text-white]=\"$index === currentMonth\"\r\n [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n (click)=\"selectMonth($index)\">\r\n {{ monthName }}\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Back to Calendar Button -->\r\n <div class=\"tw-text-center\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n Back to Calendar\r\n </button>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Calendar View -->\r\n <div>\r\n <!-- Days of Week Header -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-1\">\r\n {{ dayName }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Calendar Days -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-text-xs tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n [class.tw-text-white]=\"dayInfo.isSelected\"\r\n [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n (click)=\"selectDateTimeDate(dayInfo)\">\r\n {{ dayInfo.day }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Right Side: Time Picker -->\r\n <div class=\"tw-border-l tw-border-gray-200 tw-pl-4\">\r\n <div class=\"tw-text-center tw-mb-2\">\r\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h4>\r\n </div>\r\n\r\n <!-- Time Spinners -->\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-3\">\r\n <!-- Hours -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n {{ timeHours }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">hour</span>\r\n </div>\r\n\r\n <!-- Colon -->\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\r\n\r\n <!-- Minutes -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n {{ timeMinutes.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">min</span>\r\n </div>\r\n\r\n <!-- Colon -->\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\r\n\r\n <!-- Seconds -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n {{ timeSeconds.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">sec</span>\r\n </div>\r\n </div>\r\n\r\n <!-- AM/PM Toggle -->\r\n <div class=\"tw-flex tw-justify-center tw-mb-2\">\r\n <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\r\n [class.tw-shadow-sm]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\r\n (click)=\"timeFormat = 'AM'\">\r\n AM\r\n </button>\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\r\n [class.tw-shadow-sm]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\r\n (click)=\"timeFormat = 'PM'\">\r\n PM\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Current Time Display -->\r\n <div class=\"tw-text-center tw-text-xs tw-text-gray-600\">\r\n {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{ timeFormat }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- DateTime Picker Footer -->\r\n <div class=\"tw-flex tw-gap-2 tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\r\n (click)=\"closeDateTimePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\r\n (click)=\"applyDateTime()\">\r\n OK\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:var(--tw-gray-500)}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:var(--tw-gray-200);transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid var(--tw-gray-200);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:var(--cide-ele-bg-primary, #ffffff);border:1px solid var(--cide-ele-border-primary, #e5e7eb);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--cide-ele-text-primary, #1f2937)}.cide-date-picker-portal{animation:portalFadeIn .2s ease-out}@keyframes portalFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.cide-date-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=time]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=time]{-moz-appearance:textfield}input[type=time]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=time]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=time]{background:transparent!important;border:none!important;outline:none!important}.cide-time-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-time-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=datetime-local]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=datetime-local]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=datetime-local]{-moz-appearance:textfield}input[type=datetime-local]::-webkit-datetime-edit,input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=datetime-local]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=datetime-local]{background:transparent!important;border:none!important;outline:none!important}.cide-datetime-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-datetime-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
1654
|
+
], viewQueries: [{ propertyName: "datePickerTemplate", first: true, predicate: ["datePickerTemplate"], descendants: true, static: true }, { propertyName: "timePickerTemplate", first: true, predicate: ["timePickerTemplate"], descendants: true, static: true }, { propertyName: "dateTimePickerTemplate", first: true, predicate: ["dateTimePickerTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-input\">\r\n <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\r\n @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === 'datetime-local' || type === 'url') {\r\n <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n 'cide-element-size-xxs': (size === '2xs'),\r\n 'cide-element-size-xs': (size === 'xs'),\r\n 'cide-element-size-sm': (size === 'sm'),\r\n 'cide-element-size-md': (size === 'md'),\r\n 'cide-element-size-lg': (size === 'lg'),\r\n 'cide-element-leading-icon': leadingIcon,\r\n 'cide-element-trailing-icon': trailingIconInternal,\r\n 'cide-element-clear-input': clearInput,\r\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n 'cide-element-input-label-start': (labelDir === 'start'),\r\n 'cide-element-input-label-end': (labelDir === 'end'),\r\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n 'cide-element-input-label-less': (!label || labelHide),\r\n 'cide-element-style-outline': (fill === 'outline'),\r\n 'cide-element-style-solid': (fill === 'solid'),\r\n 'cide-element-style-standard': (fill === 'standard'),\r\n 'cide-element-input-number': (type === 'number')\r\n }\">\r\n <!-- label -->\r\n @if (label && !labelHide) {\r\n <label [for]=\"id\" class=\"cide-input-label\">\r\n {{label}}\r\n @if (required) {\r\n <span class=\"tw-text-red-500 tw-ml-1\">*</span>\r\n }\r\n </label>\r\n }\r\n\r\n <!-- all one line elemets which dose not affect with label and error text -->\r\n <div class=\"cide-element-input-wrapper\">\r\n <!-- Leading Icon -->\r\n @if (leadingIcon) {\r\n <span class=\"cide-input-leading-icon-wrapper\">\r\n <span\r\n class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n </span>\r\n }\r\n\r\n <!-- Trailing icon -->\r\n @if (trailingIconInternal) {\r\n <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n </span>\r\n }\r\n\r\n <!-- Clear -->\r\n @if (clearInput && ngModel) {\r\n <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\r\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n </button>\r\n }\r\n\r\n <!-- Date Input Wrapper -->\r\n @if (type === 'date') {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- Date Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty date -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- Date picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- Time Input Wrapper -->\r\n @if (isTimeType()) {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- Time Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [value]=\"getTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty time -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- Time picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- DateTime Local Input -->\r\n @if (type === 'datetime-local') {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- DateTime Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [value]=\"getDateTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty datetime -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- DateTime picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- Regular Input (non-date, non-time, non-datetime-local, non-url) -->\r\n @if (type !== 'date' && !isTimeType() && type !== 'datetime-local' && type !== 'url') {\r\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\" [step]=\"step\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n }\r\n\r\n <!-- URL Input -->\r\n @if (type === 'url') {\r\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n }\r\n </div>\r\n <!-- error text / helper text -->\r\n @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\r\n <span class=\"cide-input-help-error-text\">{{\r\n isValid\r\n ? helperText : (errorText ?\r\n (isTouched ? errorText : helperText)\r\n : helperText)}}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Input with tralling icon -->\r\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n <div class=\"tw-w-fullh-full tw-relative\">\r\n <label\r\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n </span>\r\n <input\r\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n value=\"Ankush Bhure\" />\r\n </div>\r\n </div> -->\r\n\r\n <!-- Input with leading icon -->\r\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n <div class=\"tw-w-fullh-full tw-relative\">\r\n <label\r\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n </span>\r\n <input\r\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n value=\"Ankush Bhure\" />\r\n </div>\r\n </div> -->\r\n\r\n <!------------------------------------------CHECKBOX------------------------------------------>\r\n @if (type === 'checkbox') {\r\n <div class=\"tw-flex\">\r\n <div class=\"cide-checkbox tw-relative\">\r\n <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\" [disabled]=\"disabled\"\r\n class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n [autocomplete]=\"autocomplete\" />\r\n <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n </svg>\r\n </span>\r\n @if (!labelHide) {\r\n <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\r\n }\r\n </label>\r\n <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n <!-- Element hidden and its xpath is used to display inside SVG -->\r\n <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </symbol>\r\n </svg>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-------------------------------------------SELECT------------------------------------------->\r\n @if (type === 'select') {\r\n <div>sas\r\n <div class=\"tw-relative\">\r\n <div class=\"tw-absolute\">\r\n @for (item of option; track $index) {\r\n <div class=\"tw-w-full\">\r\n {{item}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n <!-- Date Picker Header -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n {{ monthNames[currentMonth] }} {{ currentYear }}\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Month/Year Selector -->\r\n @if (showMonthYearSelector) {\r\n <div class=\"tw-mb-4\">\r\n <!-- Year Navigation -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n </button>\r\n </div>\r\n \r\n <!-- Month Grid -->\r\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n @for (monthName of shortMonthNames; track $index) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\r\n [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n [class.tw-text-white]=\"$index === currentMonth\"\r\n [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n (click)=\"selectMonth($index)\">\r\n {{ monthName }}\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Back to Calendar Button -->\r\n <div class=\"tw-text-center\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n Back to Calendar\r\n </button>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Calendar View -->\r\n <div>\r\n <!-- Days of Week Header -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\r\n {{ dayName }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Calendar Days -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n [class.tw-text-white]=\"dayInfo.isSelected\"\r\n [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n (click)=\"showDateTimePicker ? selectDateTimeDate(dayInfo) : selectDate(dayInfo)\">\r\n {{ dayInfo.day }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Date Picker Footer -->\r\n <div class=\"tw-flex tw-justify-between tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded tw-transition-colors\"\r\n (click)=\"closeDatePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700 tw-rounded tw-transition-colors\"\r\n (click)=\"closeDatePicker()\">\r\n Done\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Time Picker Template -->\r\n<ng-template #timePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4 tw-w-72\">\r\n <!-- Time Picker Header -->\r\n <div class=\"tw-text-center tw-mb-3\">\r\n <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h3>\r\n </div>\r\n\r\n <!-- Time Spinners Container -->\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-3 tw-mb-4\">\r\n <!-- Hours -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n {{ timeHours }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">hour</span>\r\n </div>\r\n\r\n <!-- Colon Separator -->\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\r\n\r\n <!-- Minutes -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n {{ timeMinutes.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">min</span>\r\n </div>\r\n\r\n <!-- Colon Separator -->\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\r\n\r\n <!-- Seconds -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n {{ timeSeconds.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">sec</span>\r\n </div>\r\n </div>\r\n\r\n <!-- AM/PM Toggle -->\r\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\r\n [class.tw-shadow]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\r\n (click)=\"timeFormat = 'AM'\">\r\n AM\r\n </button>\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\r\n [class.tw-shadow]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\r\n (click)=\"timeFormat = 'PM'\">\r\n PM\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Current Time Display -->\r\n <div class=\"tw-text-center tw-mb-3\">\r\n <span class=\"tw-text-sm tw-text-gray-600\">\r\n {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{ timeFormat }}\r\n </span>\r\n </div>\r\n\r\n <!-- Time Picker Footer -->\r\n <div class=\"tw-flex tw-gap-2\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\r\n (click)=\"showDateTimePicker ? closeDateTimePicker() : closeTimePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\r\n (click)=\"showDateTimePicker ? applyDateTime() : applyTime()\">\r\n OK\r\n </button>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<!-- DateTime Picker Template (Combined Date + Time) -->\r\n<ng-template #dateTimePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n <!-- DateTime Picker Header -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n {{ monthNames[currentMonth] }} {{ currentYear }}\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\r\n <!-- Left Side: Calendar -->\r\n <div>\r\n <!-- Month/Year Selector -->\r\n @if (showMonthYearSelector) {\r\n <div class=\"tw-mb-4\">\r\n <!-- Year Navigation -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n </button>\r\n </div>\r\n \r\n <!-- Month Grid -->\r\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n @for (monthName of shortMonthNames; track $index) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-2 tw-py-1.5 tw-text-xs tw-rounded-md tw-transition-colors tw-text-center\"\r\n [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n [class.tw-text-white]=\"$index === currentMonth\"\r\n [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n (click)=\"selectMonth($index)\">\r\n {{ monthName }}\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Back to Calendar Button -->\r\n <div class=\"tw-text-center\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n Back to Calendar\r\n </button>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Calendar View -->\r\n <div>\r\n <!-- Days of Week Header -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-1\">\r\n {{ dayName }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Calendar Days -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-text-xs tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n [class.tw-text-white]=\"dayInfo.isSelected\"\r\n [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n (click)=\"selectDateTimeDate(dayInfo)\">\r\n {{ dayInfo.day }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Right Side: Time Picker -->\r\n <div class=\"tw-border-l tw-border-gray-200 tw-pl-4\">\r\n <div class=\"tw-text-center tw-mb-2\">\r\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h4>\r\n </div>\r\n\r\n <!-- Time Spinners -->\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-3\">\r\n <!-- Hours -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n {{ timeHours }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">hour</span>\r\n </div>\r\n\r\n <!-- Colon -->\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\r\n\r\n <!-- Minutes -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n {{ timeMinutes.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">min</span>\r\n </div>\r\n\r\n <!-- Colon -->\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\r\n\r\n <!-- Seconds -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n {{ timeSeconds.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">sec</span>\r\n </div>\r\n </div>\r\n\r\n <!-- AM/PM Toggle -->\r\n <div class=\"tw-flex tw-justify-center tw-mb-2\">\r\n <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\r\n [class.tw-shadow-sm]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\r\n (click)=\"timeFormat = 'AM'\">\r\n AM\r\n </button>\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\r\n [class.tw-shadow-sm]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\r\n (click)=\"timeFormat = 'PM'\">\r\n PM\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Current Time Display -->\r\n <div class=\"tw-text-center tw-text-xs tw-text-gray-600\">\r\n {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{ timeFormat }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- DateTime Picker Footer -->\r\n <div class=\"tw-flex tw-gap-2 tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\r\n (click)=\"closeDateTimePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\r\n (click)=\"applyDateTime()\">\r\n OK\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:var(--tw-gray-500)}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:var(--tw-gray-200);transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid var(--tw-gray-200);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:var(--cide-ele-bg-primary, #ffffff);border:1px solid var(--cide-ele-border-primary, #e5e7eb);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--cide-ele-text-primary, #1f2937)}.cide-date-picker-portal{animation:portalFadeIn .2s ease-out}@keyframes portalFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.cide-date-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=time]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=time]{-moz-appearance:textfield}input[type=time]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=time]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=time]{background:transparent!important;border:none!important;outline:none!important}.cide-time-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-time-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=datetime-local]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=datetime-local]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=datetime-local]{-moz-appearance:textfield}input[type=datetime-local]::-webkit-datetime-edit,input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=datetime-local]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=datetime-local]{background:transparent!important;border:none!important;outline:none!important}.cide-datetime-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-datetime-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
1653
1655
|
// directives
|
|
1654
1656
|
CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type:
|
|
1655
1657
|
// for ngModel
|
|
@@ -1675,7 +1677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
1675
1677
|
useExisting: forwardRef(() => CideInputComponent),
|
|
1676
1678
|
},
|
|
1677
1679
|
CapitalizePipe
|
|
1678
|
-
], template: "<div class=\"cide-input\">\r\n <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\r\n @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === 'datetime-local' || type === 'url') {\r\n <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n 'cide-element-size-xxs': (size === '2xs'),\r\n 'cide-element-size-xs': (size === 'xs'),\r\n 'cide-element-size-sm': (size === 'sm'),\r\n 'cide-element-size-md': (size === 'md'),\r\n 'cide-element-size-lg': (size === 'lg'),\r\n 'cide-element-leading-icon': leadingIcon,\r\n 'cide-element-trailing-icon': trailingIconInternal,\r\n 'cide-element-clear-input': clearInput,\r\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n 'cide-element-input-label-start': (labelDir === 'start'),\r\n 'cide-element-input-label-end': (labelDir === 'end'),\r\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n 'cide-element-input-label-less': (!label || labelHide),\r\n 'cide-element-style-outline': (fill === 'outline'),\r\n 'cide-element-style-solid': (fill === 'solid'),\r\n 'cide-element-style-standard': (fill === 'standard'),\r\n 'cide-element-input-number': (type === 'number')\r\n }\">\r\n <!-- label -->\r\n @if (label && !labelHide) {\r\n <label [for]=\"id\" class=\"cide-input-label\">\r\n {{label}}\r\n @if (required) {\r\n <span class=\"tw-text-red-500 tw-ml-1\">*</span>\r\n }\r\n </label>\r\n }\r\n\r\n <!-- all one line elemets which dose not affect with label and error text -->\r\n <div class=\"cide-element-input-wrapper\">\r\n <!-- Leading Icon -->\r\n @if (leadingIcon) {\r\n <span class=\"cide-input-leading-icon-wrapper\">\r\n <span\r\n class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n </span>\r\n }\r\n\r\n <!-- Trailing icon -->\r\n @if (trailingIconInternal) {\r\n <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n </span>\r\n }\r\n\r\n <!-- Clear -->\r\n @if (clearInput && ngModel) {\r\n <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\r\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n </button>\r\n }\r\n\r\n <!-- Date Input Wrapper -->\r\n @if (type === 'date') {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- Date Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty date -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- Date picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- Time Input Wrapper -->\r\n @if (isTimeType()) {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- Time Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [value]=\"getTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty time -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- Time picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- DateTime Local Input -->\r\n @if (type === 'datetime-local') {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- DateTime Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [value]=\"getDateTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty datetime -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- DateTime picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- Regular Input (non-date, non-time, non-datetime-local, non-url) -->\r\n @if (type !== 'date' && !isTimeType() && type !== 'datetime-local' && type !== 'url') {\r\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n }\r\n\r\n <!-- URL Input -->\r\n @if (type === 'url') {\r\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n }\r\n </div>\r\n <!-- error text / helper text -->\r\n @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\r\n <span class=\"cide-input-help-error-text\">{{\r\n isValid\r\n ? helperText : (errorText ?\r\n (isTouched ? errorText : helperText)\r\n : helperText)}}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Input with tralling icon -->\r\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n <div class=\"tw-w-fullh-full tw-relative\">\r\n <label\r\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n </span>\r\n <input\r\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n value=\"Ankush Bhure\" />\r\n </div>\r\n </div> -->\r\n\r\n <!-- Input with leading icon -->\r\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n <div class=\"tw-w-fullh-full tw-relative\">\r\n <label\r\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n </span>\r\n <input\r\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n value=\"Ankush Bhure\" />\r\n </div>\r\n </div> -->\r\n\r\n <!------------------------------------------CHECKBOX------------------------------------------>\r\n @if (type === 'checkbox') {\r\n <div class=\"tw-flex\">\r\n <div class=\"cide-checkbox tw-relative\">\r\n <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\" [disabled]=\"disabled\"\r\n class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n [autocomplete]=\"autocomplete\" />\r\n <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n </svg>\r\n </span>\r\n @if (!labelHide) {\r\n <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\r\n }\r\n </label>\r\n <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n <!-- Element hidden and its xpath is used to display inside SVG -->\r\n <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </symbol>\r\n </svg>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-------------------------------------------SELECT------------------------------------------->\r\n @if (type === 'select') {\r\n <div>sas\r\n <div class=\"tw-relative\">\r\n <div class=\"tw-absolute\">\r\n @for (item of option; track $index) {\r\n <div class=\"tw-w-full\">\r\n {{item}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n <!-- Date Picker Header -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n {{ monthNames[currentMonth] }} {{ currentYear }}\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Month/Year Selector -->\r\n @if (showMonthYearSelector) {\r\n <div class=\"tw-mb-4\">\r\n <!-- Year Navigation -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n </button>\r\n </div>\r\n \r\n <!-- Month Grid -->\r\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n @for (monthName of shortMonthNames; track $index) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\r\n [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n [class.tw-text-white]=\"$index === currentMonth\"\r\n [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n (click)=\"selectMonth($index)\">\r\n {{ monthName }}\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Back to Calendar Button -->\r\n <div class=\"tw-text-center\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n Back to Calendar\r\n </button>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Calendar View -->\r\n <div>\r\n <!-- Days of Week Header -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\r\n {{ dayName }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Calendar Days -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n [class.tw-text-white]=\"dayInfo.isSelected\"\r\n [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n (click)=\"showDateTimePicker ? selectDateTimeDate(dayInfo) : selectDate(dayInfo)\">\r\n {{ dayInfo.day }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Date Picker Footer -->\r\n <div class=\"tw-flex tw-justify-between tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded tw-transition-colors\"\r\n (click)=\"closeDatePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700 tw-rounded tw-transition-colors\"\r\n (click)=\"closeDatePicker()\">\r\n Done\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Time Picker Template -->\r\n<ng-template #timePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4 tw-w-72\">\r\n <!-- Time Picker Header -->\r\n <div class=\"tw-text-center tw-mb-3\">\r\n <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h3>\r\n </div>\r\n\r\n <!-- Time Spinners Container -->\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-3 tw-mb-4\">\r\n <!-- Hours -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n {{ timeHours }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">hour</span>\r\n </div>\r\n\r\n <!-- Colon Separator -->\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\r\n\r\n <!-- Minutes -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n {{ timeMinutes.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">min</span>\r\n </div>\r\n\r\n <!-- Colon Separator -->\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\r\n\r\n <!-- Seconds -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n {{ timeSeconds.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">sec</span>\r\n </div>\r\n </div>\r\n\r\n <!-- AM/PM Toggle -->\r\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\r\n [class.tw-shadow]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\r\n (click)=\"timeFormat = 'AM'\">\r\n AM\r\n </button>\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\r\n [class.tw-shadow]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\r\n (click)=\"timeFormat = 'PM'\">\r\n PM\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Current Time Display -->\r\n <div class=\"tw-text-center tw-mb-3\">\r\n <span class=\"tw-text-sm tw-text-gray-600\">\r\n {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{ timeFormat }}\r\n </span>\r\n </div>\r\n\r\n <!-- Time Picker Footer -->\r\n <div class=\"tw-flex tw-gap-2\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\r\n (click)=\"showDateTimePicker ? closeDateTimePicker() : closeTimePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\r\n (click)=\"showDateTimePicker ? applyDateTime() : applyTime()\">\r\n OK\r\n </button>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<!-- DateTime Picker Template (Combined Date + Time) -->\r\n<ng-template #dateTimePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n <!-- DateTime Picker Header -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n {{ monthNames[currentMonth] }} {{ currentYear }}\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\r\n <!-- Left Side: Calendar -->\r\n <div>\r\n <!-- Month/Year Selector -->\r\n @if (showMonthYearSelector) {\r\n <div class=\"tw-mb-4\">\r\n <!-- Year Navigation -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n </button>\r\n </div>\r\n \r\n <!-- Month Grid -->\r\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n @for (monthName of shortMonthNames; track $index) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-2 tw-py-1.5 tw-text-xs tw-rounded-md tw-transition-colors tw-text-center\"\r\n [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n [class.tw-text-white]=\"$index === currentMonth\"\r\n [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n (click)=\"selectMonth($index)\">\r\n {{ monthName }}\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Back to Calendar Button -->\r\n <div class=\"tw-text-center\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n Back to Calendar\r\n </button>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Calendar View -->\r\n <div>\r\n <!-- Days of Week Header -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-1\">\r\n {{ dayName }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Calendar Days -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-text-xs tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n [class.tw-text-white]=\"dayInfo.isSelected\"\r\n [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n (click)=\"selectDateTimeDate(dayInfo)\">\r\n {{ dayInfo.day }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Right Side: Time Picker -->\r\n <div class=\"tw-border-l tw-border-gray-200 tw-pl-4\">\r\n <div class=\"tw-text-center tw-mb-2\">\r\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h4>\r\n </div>\r\n\r\n <!-- Time Spinners -->\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-3\">\r\n <!-- Hours -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n {{ timeHours }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">hour</span>\r\n </div>\r\n\r\n <!-- Colon -->\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\r\n\r\n <!-- Minutes -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n {{ timeMinutes.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">min</span>\r\n </div>\r\n\r\n <!-- Colon -->\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\r\n\r\n <!-- Seconds -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n {{ timeSeconds.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">sec</span>\r\n </div>\r\n </div>\r\n\r\n <!-- AM/PM Toggle -->\r\n <div class=\"tw-flex tw-justify-center tw-mb-2\">\r\n <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\r\n [class.tw-shadow-sm]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\r\n (click)=\"timeFormat = 'AM'\">\r\n AM\r\n </button>\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\r\n [class.tw-shadow-sm]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\r\n (click)=\"timeFormat = 'PM'\">\r\n PM\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Current Time Display -->\r\n <div class=\"tw-text-center tw-text-xs tw-text-gray-600\">\r\n {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{ timeFormat }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- DateTime Picker Footer -->\r\n <div class=\"tw-flex tw-gap-2 tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\r\n (click)=\"closeDateTimePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\r\n (click)=\"applyDateTime()\">\r\n OK\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:var(--tw-gray-500)}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:var(--tw-gray-200);transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid var(--tw-gray-200);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:var(--cide-ele-bg-primary, #ffffff);border:1px solid var(--cide-ele-border-primary, #e5e7eb);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--cide-ele-text-primary, #1f2937)}.cide-date-picker-portal{animation:portalFadeIn .2s ease-out}@keyframes portalFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.cide-date-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=time]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=time]{-moz-appearance:textfield}input[type=time]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=time]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=time]{background:transparent!important;border:none!important;outline:none!important}.cide-time-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-time-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=datetime-local]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=datetime-local]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=datetime-local]{-moz-appearance:textfield}input[type=datetime-local]::-webkit-datetime-edit,input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=datetime-local]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=datetime-local]{background:transparent!important;border:none!important;outline:none!important}.cide-datetime-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-datetime-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"] }]
|
|
1680
|
+
], template: "<div class=\"cide-input\">\r\n <!------------------------------------------TEXT | PASSWORD | DATE | URL------------------------------------------>\r\n @if (type === 'text' || type === 'number' || type === 'password' || type === 'email' || type === 'tel' || type === 'date' || type === 'datetime-local' || type === 'url') {\r\n <div class=\"tw-w-full tw-relative\" [ngStyle]=\"{ width: width }\" [ngClass]=\"{\r\n 'cide-element-size-xxs': (size === '2xs'),\r\n 'cide-element-size-xs': (size === 'xs'),\r\n 'cide-element-size-sm': (size === 'sm'),\r\n 'cide-element-size-md': (size === 'md'),\r\n 'cide-element-size-lg': (size === 'lg'),\r\n 'cide-element-leading-icon': leadingIcon,\r\n 'cide-element-trailing-icon': trailingIconInternal,\r\n 'cide-element-clear-input': clearInput,\r\n 'cide-element-input-label-floating': (labelPlacement === 'floating'),\r\n 'cide-element-input-label-start': (labelDir === 'start'),\r\n 'cide-element-input-label-end': (labelDir === 'end'),\r\n 'cide-element-input-label-fixed': (labelPlacement === 'fixed'),\r\n 'cide-element-input-label-less': (!label || labelHide),\r\n 'cide-element-style-outline': (fill === 'outline'),\r\n 'cide-element-style-solid': (fill === 'solid'),\r\n 'cide-element-style-standard': (fill === 'standard'),\r\n 'cide-element-input-number': (type === 'number')\r\n }\">\r\n <!-- label -->\r\n @if (label && !labelHide) {\r\n <label [for]=\"id\" class=\"cide-input-label\">\r\n {{label}}\r\n @if (required) {\r\n <span class=\"tw-text-red-500 tw-ml-1\">*</span>\r\n }\r\n </label>\r\n }\r\n\r\n <!-- all one line elemets which dose not affect with label and error text -->\r\n <div class=\"cide-element-input-wrapper\">\r\n <!-- Leading Icon -->\r\n @if (leadingIcon) {\r\n <span class=\"cide-input-leading-icon-wrapper\">\r\n <span\r\n class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon}}</span>\r\n </span>\r\n }\r\n\r\n <!-- Trailing icon -->\r\n @if (trailingIconInternal) {\r\n <span class=\"tw-absolute cide-input-trailing-icon tw-select-none tw-right-0\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"\r\n [ngClass]=\"{'tw-cursor-pointer': isTrailingIconAllwedClick}\" [attr.tabindex]=\"false\"\r\n (click)=\"trailingIconClick()\" (keyup)=\"trailingIconClick()\">{{trailingIconInternal}}</span>\r\n </span>\r\n }\r\n\r\n <!-- Clear -->\r\n @if (clearInput && ngModel) {\r\n <button class=\"cide-input-clear\" (click)=\"ClearInputValue()\">\r\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\r\n </button>\r\n }\r\n\r\n <!-- Date Input Wrapper -->\r\n @if (type === 'date') {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- Date Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [value]=\"getDateDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty date -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- Date picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- Time Input Wrapper -->\r\n @if (isTimeType()) {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- Time Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [value]=\"getTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty time -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- Time picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- DateTime Local Input -->\r\n @if (type === 'datetime-local') {\r\n <div class=\"cide-input-date-wrapper\" [ngClass]=\"{'cide-input-date-has-value': ngModel}\">\r\n <!-- DateTime Input (read-only to prevent manual input) -->\r\n <input [placeholder]=\"placeholder\" [id]=\"id || idRandom\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [value]=\"getDateTimeDisplayValue()\" type=\"text\" readonly (focus)=\"focusControl()\" (click)=\"trailingIconClick()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none tw-cursor-pointer\" />\r\n \r\n <!-- Placeholder overlay for empty datetime -->\r\n @if (!ngModel && placeholder) {\r\n <div class=\"cide-input-date-overlay\">\r\n {{placeholder}}\r\n </div>\r\n }\r\n\r\n <!-- DateTime picker is now rendered as a portal appended to body -->\r\n </div>\r\n }\r\n\r\n <!-- Regular Input (non-date, non-time, non-datetime-local, non-url) -->\r\n @if (type !== 'date' && !isTimeType() && type !== 'datetime-local' && type !== 'url') {\r\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n [autocomplete]=\"autocomplete\" [min]=\"min\" [max]=\"max\" [step]=\"step\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n }\r\n\r\n <!-- URL Input -->\r\n @if (type === 'url') {\r\n <input [placeholder]=\"placeholder\" [id]=\"id\" [disabled]=\"disabled\"\r\n [ngClass]=\"{\r\n 'tw-rounded-e-md tw-rounded-es-md': label && labelPlacement === 'fixed',\r\n 'tw-rounded-md': !(label && labelPlacement === 'fixed'),\r\n 'tw-pl-1': !leadingIcon,\r\n 'tw-pr-8': trailingIconInternal,\r\n 'tw-pr-1': !trailingIconInternal,\r\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size === 'md',\r\n 'tw-h-7': size === 'sm',\r\n '!tw-mt-0': labelHide,\r\n 'tw-opacity-50 tw-cursor-not-allowed': disabled\r\n }\"\r\n [(ngModel)]=\"ngModel\" [type]=\"typeInternal\" (input)=\"upDateValue($event)\" (focus)=\"focusControl()\"\r\n [autocomplete]=\"autocomplete\"\r\n class=\"tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 cide-input-input tw-outline-none\" />\r\n }\r\n </div>\r\n <!-- error text / helper text -->\r\n @if ((errorText || helperText || !helperTextCollapse) && !hideHelperAndErrorText) {\r\n <span class=\"cide-input-help-error-text\">{{\r\n isValid\r\n ? helperText : (errorText ?\r\n (isTouched ? errorText : helperText)\r\n : helperText)}}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Input with tralling icon -->\r\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n <div class=\"tw-w-fullh-full tw-relative\">\r\n <label\r\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n <span class=\"tw-absolute -tw-bottom-px tw-right-0 -tw-z-10 tw-text-gray-400\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n </span>\r\n <input\r\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-1 tw-pr-8 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n value=\"Ankush Bhure\" />\r\n </div>\r\n </div> -->\r\n\r\n <!-- Input with leading icon -->\r\n <!-- <div class=\"tw-inline-block tw-h-12 tw-w-64\">\r\n <div class=\"tw-w-fullh-full tw-relative\">\r\n <label\r\n class=\"tw-absolute -tw-top-1/3 tw-mx-2 tw-bg-white tw-px-0.5 tw-py-0 tw-text-sm tw-leading-4 tw-text-gray-700\">Name</label>\r\n <span class=\"tw-absolute -tw-bottom-px tw-left-0 -tw-z-10 tw-text-gray-400\">\r\n <span class=\"material-symbols-outlined tw-w-8 tw-text-center !tw-text-2xl\"> person </span>\r\n </span>\r\n <input\r\n class=\"tw-m-0 tw-h-8 tw-w-full tw-overflow-hidden tw-rounded-md tw-border-2 tw-border-solid tw-border-gray-300 tw-bg-transparent tw-p-0 tw-pb-0.5 tw-pl-8 tw-pr-1 tw-text-sm tw-text-gray-600 tw-outline-none hover:tw-border-blue-400 focus:tw-border-blue-400 focus:tw-text-gray-950\"\r\n value=\"Ankush Bhure\" />\r\n </div>\r\n </div> -->\r\n\r\n <!------------------------------------------CHECKBOX------------------------------------------>\r\n @if (type === 'checkbox') {\r\n <div class=\"tw-flex\">\r\n <div class=\"cide-checkbox tw-relative\">\r\n <input [checked]=\"ngModel\" [value]=\"ngModel\" [id]=\"idRandom\" [type]=\"type\" [disabled]=\"disabled\"\r\n class=\"tw-absolute tw-left-0 tw-invisible\" (click)=\"updateValueCheckBox(!ngModel); focusControl()\"\r\n [autocomplete]=\"autocomplete\" />\r\n <label class=\"cide-checkbox-label tw-cursor-pointer\" [for]=\"idRandom\">\r\n <span class=\"tw-border-2 tw-border-solid tw-relative tw-rounded-md\">\r\n <svg width=\"12px\" height=\"10px\" class=\"tw-absolute\">\r\n <use xlink:href=\"#sdfwiorfklasfjjalfjwerwr\"></use>\r\n </svg>\r\n </span>\r\n @if (!labelHide) {\r\n <span class=\"tw-text-sm tw-pl-2 tw-leading-[18px] tw-select-none tw-cursor-pointer\">{{label}}</span>\r\n }\r\n </label>\r\n <svg class=\"tw-absolute tw-h-0 tw-w-0 tw-select-none tw-pointer-events-none\">\r\n <!-- Element hidden and its xpath is used to display inside SVG -->\r\n <symbol id=\"sdfwiorfklasfjjalfjwerwr\" viewbox=\"0 0 12 10\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </symbol>\r\n </svg>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-------------------------------------------SELECT------------------------------------------->\r\n @if (type === 'select') {\r\n <div>sas\r\n <div class=\"tw-relative\">\r\n <div class=\"tw-absolute\">\r\n @for (item of option; track $index) {\r\n <div class=\"tw-w-full\">\r\n {{item}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Date Picker Template -->\r\n<ng-template #datePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n <!-- Date Picker Header -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n {{ monthNames[currentMonth] }} {{ currentYear }}\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n </button>\r\n </div>\r\n\r\n <!-- Month/Year Selector -->\r\n @if (showMonthYearSelector) {\r\n <div class=\"tw-mb-4\">\r\n <!-- Year Navigation -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n </button>\r\n </div>\r\n \r\n <!-- Month Grid -->\r\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n @for (monthName of shortMonthNames; track $index) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-2 tw-text-sm tw-rounded-md tw-transition-colors tw-text-center\"\r\n [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n [class.tw-text-white]=\"$index === currentMonth\"\r\n [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n (click)=\"selectMonth($index)\">\r\n {{ monthName }}\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Back to Calendar Button -->\r\n <div class=\"tw-text-center\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-sm tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n Back to Calendar\r\n </button>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Calendar View -->\r\n <div>\r\n <!-- Days of Week Header -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-2\">\r\n {{ dayName }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Calendar Days -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-text-sm tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n [class.tw-text-white]=\"dayInfo.isSelected\"\r\n [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n (click)=\"showDateTimePicker ? selectDateTimeDate(dayInfo) : selectDate(dayInfo)\">\r\n {{ dayInfo.day }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Date Picker Footer -->\r\n <div class=\"tw-flex tw-justify-between tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-600 hover:tw-bg-gray-100 tw-rounded tw-transition-colors\"\r\n (click)=\"closeDatePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700 tw-rounded tw-transition-colors\"\r\n (click)=\"closeDatePicker()\">\r\n Done\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Time Picker Template -->\r\n<ng-template #timePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4 tw-w-72\">\r\n <!-- Time Picker Header -->\r\n <div class=\"tw-text-center tw-mb-3\">\r\n <h3 class=\"tw-text-base tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h3>\r\n </div>\r\n\r\n <!-- Time Spinners Container -->\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-3 tw-mb-4\">\r\n <!-- Hours -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n {{ timeHours }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">hour</span>\r\n </div>\r\n\r\n <!-- Colon Separator -->\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\r\n\r\n <!-- Minutes -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n {{ timeMinutes.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">min</span>\r\n </div>\r\n\r\n <!-- Colon Separator -->\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-mb-4\">:</div>\r\n\r\n <!-- Seconds -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-2xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-12 tw-text-center\">\r\n {{ timeSeconds.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-lg\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-2\">sec</span>\r\n </div>\r\n </div>\r\n\r\n <!-- AM/PM Toggle -->\r\n <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\r\n [class.tw-shadow]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\r\n (click)=\"timeFormat = 'AM'\">\r\n AM\r\n </button>\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-4 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\r\n [class.tw-shadow]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\r\n (click)=\"timeFormat = 'PM'\">\r\n PM\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Current Time Display -->\r\n <div class=\"tw-text-center tw-mb-3\">\r\n <span class=\"tw-text-sm tw-text-gray-600\">\r\n {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{ timeFormat }}\r\n </span>\r\n </div>\r\n\r\n <!-- Time Picker Footer -->\r\n <div class=\"tw-flex tw-gap-2\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\r\n (click)=\"showDateTimePicker ? closeDateTimePicker() : closeTimePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\r\n (click)=\"showDateTimePicker ? applyDateTime() : applyTime()\">\r\n OK\r\n </button>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<!-- DateTime Picker Template (Combined Date + Time) -->\r\n<ng-template #dateTimePickerTemplate>\r\n <div class=\"tw-bg-white tw-border tw-border-gray-300 tw-rounded-lg tw-shadow-lg tw-p-4\">\r\n <!-- DateTime Picker Header -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-4\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_left</span>\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-text-sm tw-font-medium tw-text-gray-800 hover:tw-bg-gray-100 tw-px-3 tw-py-1 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n {{ monthNames[currentMonth] }} {{ currentYear }}\r\n </button>\r\n \r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextMonth()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">chevron_right</span>\r\n </button>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-2 tw-gap-4\">\r\n <!-- Left Side: Calendar -->\r\n <div>\r\n <!-- Month/Year Selector -->\r\n @if (showMonthYearSelector) {\r\n <div class=\"tw-mb-4\">\r\n <!-- Year Navigation -->\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"previousYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_left</span>\r\n </button>\r\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ currentYear }}</span>\r\n <button \r\n type=\"button\" \r\n class=\"tw-p-1 tw-rounded-md tw-text-gray-600 hover:tw-bg-gray-100 tw-transition-colors\"\r\n (click)=\"nextYear()\">\r\n <span class=\"material-symbols-outlined tw-text-base\">keyboard_double_arrow_right</span>\r\n </button>\r\n </div>\r\n \r\n <!-- Month Grid -->\r\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-2 tw-mb-3\">\r\n @for (monthName of shortMonthNames; track $index) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-2 tw-py-1.5 tw-text-xs tw-rounded-md tw-transition-colors tw-text-center\"\r\n [class.tw-bg-blue-500]=\"$index === currentMonth\"\r\n [class.tw-text-white]=\"$index === currentMonth\"\r\n [class.tw-text-gray-700]=\"$index !== currentMonth\"\r\n [class.hover:tw-bg-blue-50]=\"$index !== currentMonth\"\r\n (click)=\"selectMonth($index)\">\r\n {{ monthName }}\r\n </button>\r\n }\r\n </div>\r\n \r\n <!-- Back to Calendar Button -->\r\n <div class=\"tw-text-center\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-text-blue-600 hover:tw-bg-blue-50 tw-rounded-md tw-transition-colors\"\r\n (click)=\"toggleMonthYearSelector()\">\r\n Back to Calendar\r\n </button>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Calendar View -->\r\n <div>\r\n <!-- Days of Week Header -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1 tw-mb-2\">\r\n @for (dayName of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track dayName) {\r\n <div class=\"tw-text-center tw-text-xs tw-font-medium tw-text-gray-500 tw-py-1\">\r\n {{ dayName }}\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Calendar Days -->\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-1\">\r\n @for (dayInfo of calendarDays; track dayInfo.date.getTime()) {\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-text-xs tw-rounded-md tw-transition-colors tw-flex tw-items-center tw-justify-center\"\r\n [class.tw-text-gray-400]=\"!dayInfo.isCurrentMonth\"\r\n [class.tw-text-gray-900]=\"dayInfo.isCurrentMonth\"\r\n [class.tw-bg-blue-500]=\"dayInfo.isSelected\"\r\n [class.tw-text-white]=\"dayInfo.isSelected\"\r\n [class.tw-bg-blue-100]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.tw-text-blue-800]=\"dayInfo.isToday && !dayInfo.isSelected\"\r\n [class.hover:tw-bg-blue-50]=\"dayInfo.isCurrentMonth && !dayInfo.isSelected\"\r\n (click)=\"selectDateTimeDate(dayInfo)\">\r\n {{ dayInfo.day }}\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Right Side: Time Picker -->\r\n <div class=\"tw-border-l tw-border-gray-200 tw-pl-4\">\r\n <div class=\"tw-text-center tw-mb-2\">\r\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-m-0\">Time</h4>\r\n </div>\r\n\r\n <!-- Time Spinners -->\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-3\">\r\n <!-- Hours -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n {{ timeHours }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('hours', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">hour</span>\r\n </div>\r\n\r\n <!-- Colon -->\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\r\n\r\n <!-- Minutes -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n {{ timeMinutes.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('minutes', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">min</span>\r\n </div>\r\n\r\n <!-- Colon -->\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-mb-3\">:</div>\r\n\r\n <!-- Seconds -->\r\n <div class=\"tw-flex tw-flex-col tw-items-center\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'up')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_less</span>\r\n </button>\r\n <div class=\"tw-text-xl tw-font-medium tw-text-gray-800 tw-my-1 tw-w-10 tw-text-center\">\r\n {{ timeSeconds.toString().padStart(2, '0') }}\r\n </div>\r\n <button \r\n type=\"button\"\r\n class=\"tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-text-gray-500 hover:tw-bg-gray-100 tw-transition-colors tw-border-0 tw-bg-white\"\r\n (click)=\"adjustTime('seconds', 'down')\">\r\n <span class=\"material-symbols-outlined tw-text-base\">expand_more</span>\r\n </button>\r\n <span class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">sec</span>\r\n </div>\r\n </div>\r\n\r\n <!-- AM/PM Toggle -->\r\n <div class=\"tw-flex tw-justify-center tw-mb-2\">\r\n <div class=\"tw-inline-flex tw-rounded-md tw-bg-gray-100 tw-p-0.5\">\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'AM'\"\r\n [class.tw-shadow-sm]=\"timeFormat === 'AM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'AM'\"\r\n (click)=\"timeFormat = 'AM'\">\r\n AM\r\n </button>\r\n <button \r\n type=\"button\"\r\n class=\"tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-rounded-md tw-transition-colors tw-border-0\"\r\n [class.tw-bg-white]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-800]=\"timeFormat === 'PM'\"\r\n [class.tw-shadow-sm]=\"timeFormat === 'PM'\"\r\n [class.tw-text-gray-600]=\"timeFormat !== 'PM'\"\r\n (click)=\"timeFormat = 'PM'\">\r\n PM\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Current Time Display -->\r\n <div class=\"tw-text-center tw-text-xs tw-text-gray-600\">\r\n {{ timeHours }}:{{ timeMinutes.toString().padStart(2, '0') }}:{{ timeSeconds.toString().padStart(2, '0') }} {{ timeFormat }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- DateTime Picker Footer -->\r\n <div class=\"tw-flex tw-gap-2 tw-mt-3 tw-pt-2 tw-border-t tw-border-gray-200\">\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-gray-700 tw-bg-white tw-border tw-border-gray-300 hover:tw-bg-gray-50 tw-rounded tw-transition-colors\"\r\n (click)=\"closeDateTimePicker()\">\r\n Cancel\r\n </button>\r\n <button \r\n type=\"button\" \r\n class=\"tw-flex-1 tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-text-white tw-bg-blue-600 hover:tw-bg-blue-700 tw-rounded tw-transition-colors tw-border-0\"\r\n (click)=\"applyDateTime()\">\r\n OK\r\n </button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=date]{-moz-appearance:textfield}input[type=date]::-webkit-datetime-edit,input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=date]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=date]{background:transparent!important;border:none!important;outline:none!important}.cide-input-date-wrapper{position:relative;width:100%}.cide-input-date-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;padding-left:.25rem;color:var(--tw-gray-500)}.cide-input-date-has-value .cide-input-date-overlay{display:none}.cide-date-picker-panel{min-width:320px;max-width:400px;z-index:1000}.cide-date-picker-panel{animation:datePickerFadeIn .2s ease-out}@keyframes datePickerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cide-date-picker-panel button:disabled{opacity:.5;cursor:not-allowed}.cide-date-picker-panel button:focus{outline:2px solid rgb(59,130,246);outline-offset:2px}.cide-date-picker-panel button:hover:not(:disabled){transform:scale(1.05);transition:transform .1s ease-in-out}.cide-date-picker-panel button.today:not(.selected){box-shadow:0 0 0 1px #3b82f6}.cide-date-picker-panel button.selected{box-shadow:0 2px 4px #3b82f64d;font-weight:600}.cide-date-picker-panel .nav-button{transition:all .2s ease-in-out}.cide-date-picker-panel .nav-button:hover{background-color:var(--tw-gray-200);transform:scale(1.1)}.cide-date-picker-panel h3{-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}.cide-date-picker-panel .days-header{border-bottom:1px solid var(--tw-gray-200);margin-bottom:.5rem;padding-bottom:.5rem}.cide-date-picker-portal{box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:.5rem;background:var(--cide-ele-bg-primary, #ffffff);border:1px solid var(--cide-ele-border-primary, #e5e7eb);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;color:var(--cide-ele-text-primary, #1f2937)}.cide-date-picker-portal{animation:portalFadeIn .2s ease-out}@keyframes portalFadeIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.cide-date-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=time]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=time]{-moz-appearance:textfield}input[type=time]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=time]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=time]{background:transparent!important;border:none!important;outline:none!important}.cide-time-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-time-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}input[type=datetime-local]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}input[type=datetime-local]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-outer-spin-button{display:none;-webkit-appearance:none}input[type=datetime-local]{-moz-appearance:textfield}input[type=datetime-local]::-webkit-datetime-edit,input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper{padding:0;background:transparent}input[type=datetime-local]::-webkit-datetime-edit-text{color:transparent;background:transparent}input[type=datetime-local]{background:transparent!important;border:none!important;outline:none!important}.cide-datetime-picker-portal{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-radius:1rem;background:var(--cide-theme-light-color);border:1px solid var(--tw-gray-200);z-index:9999;transition:opacity .2s ease-in-out,transform .2s ease-in-out;animation:portalFadeIn .2s ease-out;color:var(--cide-theme-text-color)}.cide-datetime-picker-portal.cide-portal{position:fixed!important;z-index:9999!important}\n"] }]
|
|
1679
1681
|
}], ctorParameters: () => [], propDecorators: { fill: [{
|
|
1680
1682
|
type: Input
|
|
1681
1683
|
}], label: [{
|
|
@@ -1728,6 +1730,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
1728
1730
|
type: Input
|
|
1729
1731
|
}], max: [{
|
|
1730
1732
|
type: Input
|
|
1733
|
+
}], step: [{
|
|
1734
|
+
type: Input
|
|
1731
1735
|
}], size: [{
|
|
1732
1736
|
type: Input
|
|
1733
1737
|
}], ngModelChange: [{
|
|
@@ -9856,6 +9860,7 @@ class CideEleDataGridComponent {
|
|
|
9856
9860
|
groupedColumns = signal([], ...(ngDevMode ? [{ debugName: "groupedColumns" }] : [])); // Columns to group by
|
|
9857
9861
|
expandedGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedGroups" }] : [])); // Expanded group keys
|
|
9858
9862
|
hasAutoExpandedGroups = false; // Track if we've auto-expanded groups on initial load
|
|
9863
|
+
pendingExpandedGroupsUpdate = null; // Track pending expanded groups update
|
|
9859
9864
|
// Export menu state
|
|
9860
9865
|
showExportMenu = signal(false, ...(ngDevMode ? [{ debugName: "showExportMenu" }] : [])); // Show/hide export format dropdown
|
|
9861
9866
|
showFilterDropdown = signal(false, ...(ngDevMode ? [{ debugName: "showFilterDropdown" }] : [])); // Show/hide filter dropdown
|
|
@@ -10015,6 +10020,14 @@ class CideEleDataGridComponent {
|
|
|
10015
10020
|
loading: { ...DEFAULT_GRID_CONFIG.loading, ...this.config.loading },
|
|
10016
10021
|
scroll: { ...DEFAULT_GRID_CONFIG.scroll, ...this.config.scroll }
|
|
10017
10022
|
});
|
|
10023
|
+
// Clear grouping if showGroupBy is disabled
|
|
10024
|
+
const columnMenuConfig = this.mergedConfig().columnMenu;
|
|
10025
|
+
if (columnMenuConfig && columnMenuConfig.showGroupBy === false) {
|
|
10026
|
+
if (this.groupedColumns().length > 0) {
|
|
10027
|
+
this.groupedColumns.set([]);
|
|
10028
|
+
this.expandedGroups.set(new Set());
|
|
10029
|
+
}
|
|
10030
|
+
}
|
|
10018
10031
|
}
|
|
10019
10032
|
initializeGrid() {
|
|
10020
10033
|
// Ensure we have valid data
|
|
@@ -10058,6 +10071,16 @@ class CideEleDataGridComponent {
|
|
|
10058
10071
|
* Only groups visible columns (not hidden ones)
|
|
10059
10072
|
*/
|
|
10060
10073
|
initializeDefaultGrouping() {
|
|
10074
|
+
// If grouping is disabled in column menu, clear any existing grouping
|
|
10075
|
+
const columnMenuConfig = this.mergedConfig().columnMenu;
|
|
10076
|
+
if (columnMenuConfig && columnMenuConfig.showGroupBy === false) {
|
|
10077
|
+
// Clear any existing grouping when showGroupBy is disabled
|
|
10078
|
+
if (this.groupedColumns().length > 0) {
|
|
10079
|
+
this.groupedColumns.set([]);
|
|
10080
|
+
this.expandedGroups.set(new Set());
|
|
10081
|
+
}
|
|
10082
|
+
return; // Don't initialize grouping if it's disabled
|
|
10083
|
+
}
|
|
10061
10084
|
// Only initialize if groupedColumns is empty (not already set)
|
|
10062
10085
|
if (this.groupedColumns().length === 0) {
|
|
10063
10086
|
const columns = this.mergedConfig().columns || [];
|
|
@@ -12129,9 +12152,12 @@ class CideEleDataGridComponent {
|
|
|
12129
12152
|
return this.localReorderedData;
|
|
12130
12153
|
}
|
|
12131
12154
|
let data = this.filteredData();
|
|
12132
|
-
//
|
|
12155
|
+
// Check if grouping is disabled in column menu config
|
|
12156
|
+
const columnMenuConfig = this.mergedConfig().columnMenu;
|
|
12157
|
+
const groupingDisabled = columnMenuConfig && columnMenuConfig.showGroupBy === false;
|
|
12158
|
+
// Apply grouping if any columns are grouped and grouping is not disabled
|
|
12133
12159
|
const grouped = this.groupedColumns();
|
|
12134
|
-
if (grouped.length > 0 && !this.serverSidePagination) {
|
|
12160
|
+
if (grouped.length > 0 && !this.serverSidePagination && !groupingDisabled) {
|
|
12135
12161
|
// If tree is enabled, we need to flatten tree first for grouping, then preserve structure
|
|
12136
12162
|
const treeConfig = this.mergedConfig().tree;
|
|
12137
12163
|
if (treeConfig?.enabled) {
|
|
@@ -12307,10 +12333,19 @@ class CideEleDataGridComponent {
|
|
|
12307
12333
|
}
|
|
12308
12334
|
});
|
|
12309
12335
|
// Update expanded groups set if we auto-expanded any
|
|
12336
|
+
// Defer signal update to avoid writing to signals during template rendering
|
|
12310
12337
|
if (shouldAutoExpand && newExpanded.size > expanded.size) {
|
|
12311
|
-
|
|
12338
|
+
// Store the update to apply after rendering
|
|
12339
|
+
this.pendingExpandedGroupsUpdate = newExpanded;
|
|
12312
12340
|
// Mark that we've auto-expanded groups so we don't do it again on subsequent renders
|
|
12313
12341
|
this.hasAutoExpandedGroups = true;
|
|
12342
|
+
// Defer the signal update using queueMicrotask to avoid writing during template rendering
|
|
12343
|
+
queueMicrotask(() => {
|
|
12344
|
+
if (this.pendingExpandedGroupsUpdate) {
|
|
12345
|
+
this.expandedGroups.set(this.pendingExpandedGroupsUpdate);
|
|
12346
|
+
this.pendingExpandedGroupsUpdate = null;
|
|
12347
|
+
}
|
|
12348
|
+
});
|
|
12314
12349
|
}
|
|
12315
12350
|
return result;
|
|
12316
12351
|
}
|
|
@@ -12559,7 +12594,7 @@ class CideEleDataGridComponent {
|
|
|
12559
12594
|
return String(value);
|
|
12560
12595
|
}
|
|
12561
12596
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12562
|
-
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-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 with Dropdown -->\n <div class=\"tw-relative\">\n <button type=\"button\"\n class=\"filter-dropdown-trigger 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-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200 tw-relative\"\n [class.tw-text-blue-600]=\"columnFilters().length > 0\"\n [class.tw-bg-blue-50]=\"columnFilters().length > 0\"\n title=\"Filter\"\n (click)=\"toggleFilterDropdown()\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\n @if (columnFilters().length > 0) {\n <span class=\"tw-absolute -tw-top-1 -tw-right-1 tw-inline-flex tw-items-center tw-justify-center tw-w-4 tw-h-4 tw-text-xs tw-font-semibold tw-text-white tw-bg-blue-600 tw-rounded-full tw-border tw-border-white\">\n {{ columnFilters().length }}\n </span>\n }\n </button>\n \n <!-- Filter Dropdown Menu -->\n @if (showFilterDropdown()) {\n <div class=\"filter-dropdown tw-absolute tw-left-0 tw-mt-2 tw-w-80 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tw-py-1.5\">\n <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Active Filters</span>\n @if (columnFilters().length > 0) {\n <button type=\"button\" \n class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-font-medium\"\n (click)=\"clearAllFilters()\">\n Clear All\n </button>\n }\n </div>\n @if (columnFilters().length === 0) {\n <div class=\"tw-px-4 tw-py-6 tw-text-center\">\n <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-text-gray-300 tw-mx-auto tw-mb-2\">filter_list</cide-ele-icon>\n <p class=\"tw-text-sm tw-text-gray-500\">No filters applied</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Use column filters to narrow down your results</p>\n </div>\n } @else {\n <div class=\"tw-max-h-96 tw-overflow-y-auto\">\n @for (filter of columnFilters(); track filter.columnKey) {\n <div class=\"tw-px-4 tw-py-3 hover:tw-bg-gray-50 tw-border-b tw-border-gray-100 last:tw-border-b-0\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <div class=\"tw-text-xs tw-font-semibold tw-text-gray-600 tw-mb-1\">{{ getColumnHeader(filter.columnKey) }}</div>\n <div class=\"tw-text-sm tw-text-gray-700 tw-flex tw-items-center tw-gap-1\">\n @if (filter.operator === 'in' && isArray(filter.value)) {\n <span class=\"tw-inline-flex tw-items-center tw-gap-1\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3\">check_circle</cide-ele-icon>\n {{ getArrayLength(filter.value) }} selected\n </span>\n } @else {\n <span>{{ $any(filter.value) }}</span>\n }\n </div>\n </div>\n <button type=\"button\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-400 hover:tw-text-red-600 hover:tw-bg-red-50 tw-transition-colors\"\n (click)=\"removeFilter(filter.columnKey)\"\n title=\"Remove filter\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n \n <!-- Download/Export Button with Dropdown -->\n <div class=\"tw-relative\">\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=\"Export\"\n (click)=\"toggleExportMenu($event)\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\n </button>\n \n <!-- Export Dropdown Menu - Improved Design -->\n @if (showExportMenu()) {\n <div class=\"tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tw-py-1.5\">\n <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Export Options</span>\n </div>\n <button type=\"button\"\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-green-50 hover:tw-text-green-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n (click)=\"exportData('csv')\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-green-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-green-600\">description</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-font-medium\">CSV</div>\n <div class=\"tw-text-xs tw-text-gray-500\">Comma separated values</div>\n </div>\n </button>\n <button type=\"button\"\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-blue-50 hover:tw-text-blue-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n (click)=\"exportData('excel')\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">table_chart</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-font-medium\">Excel</div>\n <div class=\"tw-text-xs tw-text-gray-500\">Microsoft Excel format</div>\n </div>\n </button>\n <button type=\"button\"\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-red-50 hover:tw-text-red-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n (click)=\"exportData('pdf')\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-font-medium\">PDF</div>\n <div class=\"tw-text-xs tw-text-gray-500\">Portable document format</div>\n </div>\n </button>\n </div>\n </div>\n }\n </div>\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 [style.width]=\"getColumnWidthStyle(column.width)\"\n [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\"\n [title]=\"column.header\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-truncate tw-flex-1\">\n <span class=\"tw-truncate\">{{ column.header }}</span>\n @if (getColumnSortDirection(column.key) === 'asc') {\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\" title=\"Sorted Ascending\">arrow_upward</cide-ele-icon>\n }\n @if (getColumnSortDirection(column.key) === 'desc') {\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\" title=\"Sorted Descending\">arrow_downward</cide-ele-icon>\n }\n </div>\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-[9999] 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 @let sortDirection = getColumnSortDirection(column.key);\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-transition-colors\"\n [class.tw-text-blue-700]=\"sortDirection === 'asc'\"\n [class.tw-bg-blue-50]=\"sortDirection === 'asc'\"\n [class.tw-text-gray-700]=\"sortDirection !== 'asc'\"\n [class.hover:tw-bg-gray-50]=\"sortDirection !== 'asc'\"\n (click)=\"onColumnSort(column, 'asc')\">\n <div class=\"tw-flex tw-items-center\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" \n [class.tw-text-blue-600]=\"sortDirection === 'asc'\"\n [class.tw-text-gray-400]=\"sortDirection !== 'asc'\">arrow_upward</cide-ele-icon>\n Ascending\n </div>\n @if (sortDirection === 'asc') {\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n }\n </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-transition-colors\"\n [class.tw-text-blue-700]=\"sortDirection === 'desc'\"\n [class.tw-bg-blue-50]=\"sortDirection === 'desc'\"\n [class.tw-text-gray-700]=\"sortDirection !== 'desc'\"\n [class.hover:tw-bg-gray-50]=\"sortDirection !== 'desc'\"\n (click)=\"onColumnSort(column, 'desc')\">\n <div class=\"tw-flex tw-items-center\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\"\n [class.tw-text-blue-600]=\"sortDirection === 'desc'\"\n [class.tw-text-gray-400]=\"sortDirection !== 'desc'\">arrow_downward</cide-ele-icon>\n Descending\n </div>\n @if (sortDirection === 'desc') {\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n }\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 @let isGrouped = groupedColumns().includes(column.key);\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-transition-colors\"\n [class.tw-text-blue-700]=\"isGrouped\"\n [class.tw-bg-blue-50]=\"isGrouped\"\n [class.tw-text-gray-700]=\"!isGrouped\"\n [class.hover:tw-bg-gray-50]=\"!isGrouped\"\n (click)=\"onColumnGroupBy(column)\">\n <div class=\"tw-flex tw-items-center\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" \n [class.tw-text-blue-600]=\"isGrouped\"\n [class.tw-text-gray-400]=\"!isGrouped\">group_work</cide-ele-icon>\n Group By Column\n </div>\n @if (isGrouped) {\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n }\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-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 visibleColumns(); 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 [style.width]=\"getColumnWidthStyle(column.width)\"\n [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\">\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 @if (isGroupHeader(item)) {\n <!-- Group Header Row -->\n @let groupKey = getGroupKey(item);\n @let groupLevel = getGroupLevel(item);\n <tr class=\"data-grid-group-row tw-border-b-2 tw-border-gray-300 tw-font-semibold\"\n [class.tw-bg-gray-50]=\"groupLevel === 0\"\n [class.tw-bg-gray-100]=\"groupLevel === 1\"\n [class.tw-bg-gray-200]=\"groupLevel > 1\"\n (click)=\"toggleGroupExpansion(groupKey)\">\n <td class=\"tw-px-3 tw-py-1 tw-cursor-pointer tw-transition-colors\"\n [attr.colspan]=\"visibleColumns().length\">\n <div class=\"tw-flex tw-items-center tw-gap-2\" [style.padding-left.px]=\"groupLevel * 24\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-600 tw-cursor-pointer\">\n {{ isGroupExpanded(groupKey) ? 'expand_more' : 'chevron_right' }}\n </cide-ele-icon>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">group_work</cide-ele-icon>\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n {{ getGroupColumnHeader(item) }}: {{ getGroupValueDisplay(item) }}\n </span>\n <span class=\"tw-text-xs tw-text-gray-500 tw-ml-2 tw-bg-gray-200 tw-px-2 tw-py-0.5 tw-rounded-full\">\n {{ getGroupRowCount(item) }}\n </span>\n </div>\n </td>\n </tr>\n } @else {\n <!-- Regular Data Row -->\n <tr class=\"tw-group data-grid-row 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 visibleColumns(); 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.width]=\"getColumnWidthStyle(column.width)\"\n [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n [style.maxWidth]=\"getColumnMaxWidthStyle(column.width) || (getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : null)\"\n [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : (getColumnWidthStyle(column.width) ? null : '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 \n <!-- Empty State -->\n @if (displayedData.length === 0) {\n <tr class=\"tw-h-full\">\n <td [attr.colspan]=\"visibleColumns().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\n <!-- Manage Columns Modal -->\n @if (showManageColumnsModal()) {\n <div class=\"tw-fixed tw-inset-0 tw-z-50 tw-overflow-y-auto\" \n (click)=\"closeManageColumnsModal()\"\n style=\"background-color: rgba(0, 0, 0, 0.5);\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-min-h-screen tw-p-4\">\n <div class=\"tw-bg-white tw-rounded-lg tw-shadow-xl tw-max-w-md tw-w-full tw-max-h-[80vh] tw-overflow-hidden tw-flex tw-flex-col\"\n (click)=\"$event.stopPropagation()\">\n <!-- Modal Header -->\n <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n <h3 class=\"tw-text-lg tw-font-semibold tw-text-gray-900\">Manage Columns</h3>\n <button type=\"button\"\n class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\"\n (click)=\"closeManageColumnsModal()\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5\">close</cide-ele-icon>\n </button>\n </div>\n \n <!-- Modal Body -->\n <div class=\"tw-px-6 tw-py-4 tw-overflow-y-auto tw-flex-1\">\n <p class=\"tw-text-sm tw-text-gray-600 tw-mb-4\">Select columns to show or hide:</p>\n <div class=\"tw-space-y-2\">\n @for (column of mergedConfig().columns; track column.key) {\n <label class=\"tw-flex tw-items-center tw-px-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n <input type=\"checkbox\"\n class=\"tw-mr-3 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n [checked]=\"!isColumnHidden(column.key)\"\n (change)=\"toggleColumnVisibility(column.key); $event.stopPropagation()\">\n <span class=\"tw-text-sm tw-text-gray-700 tw-flex-1\">{{ column.header }}</span>\n @if (isColumnHidden(column.key)) {\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility_off</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility</cide-ele-icon>\n }\n </label>\n }\n </div>\n </div>\n \n <!-- Modal Footer -->\n <div class=\"tw-px-6 tw-py-4 tw-border-t tw-border-gray-200 tw-flex tw-items-center tw-justify-end tw-gap-3\">\n <button type=\"button\"\n class=\"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 tw-rounded-md hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"closeManageColumnsModal()\">\n Close\n </button>\n <button type=\"button\"\n class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-white tw-bg-blue-600 tw-border tw-border-transparent tw-rounded-md hover:tw-bg-blue-700 tw-transition-colors\"\n (click)=\"onColumnReset(); closeManageColumnsModal()\">\n Reset All\n </button>\n </div>\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:var(--cide-ele-text-primary);background-color:var(--cide-ele-grid-bg, var(--cide-ele-bg-primary, #ffffff));border-radius:0;overflow:hidden;box-shadow:var(--cide-ele-shadow-sm);-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:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #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:var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:var(--cide-ele-grid-bg)}.data-grid-container thead{background-color:var(--cide-ele-grid-bg-header);border-bottom:2px solid var(--cide-ele-grid-border-header);position:relative;z-index:100}.data-grid-container thead th{background:transparent;color:var(--cide-ele-grid-text-header);font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid var(--cide-ele-grid-border);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:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, var(--cide-ele-bg-hover)))}.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:var(--cide-ele-bg-tertiary)}.data-grid-container tbody{background-color:var(--cide-ele-grid-bg, #ffffff)}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid var(--cide-ele-grid-border, #e5e7eb);color:var(--cide-ele-grid-text, #1f2937);font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1);background-color:transparent}.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:var(--cide-ele-grid-bg, #ffffff);transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container tbody tr:hover,.data-grid-container tbody tr.data-grid-row:hover,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid transparent}.data-grid-container tbody tr:hover td,.data-grid-container tbody tr.data-grid-row:hover td,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td{background-color:transparent!important;border-bottom-color:var(--cide-ele-grid-border);color:var(--cide-ele-grid-text)!important}.data-grid-container tbody tr:active{background-color:var(--cide-ele-bg-active);transform:scale(.999)}.data-grid-container tbody tr:active td{color:var(--cide-ele-grid-text)}.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:var(--cide-ele-grid-bg-striped);border-left:1px solid transparent}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:var(--cide-ele-grid-bg-hover);border-left:2px solid var(--cide-ele-grid-border-hover)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n) td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row{background-color:var(--cide-ele-grid-bg-group)!important}.data-grid-container tbody tr.data-grid-group-row td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container tbody tr.data-grid-group-row:hover td{color:var(--cide-ele-grid-text)}.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:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.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:2px solid var(--cide-ele-grid-border-header);background-color:var(--cide-ele-grid-bg-header)}.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);position:absolute!important;z-index:9999!important}.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}}.data-grid-container :host .tw-bg-white{background-color:#fff!important}.data-grid-container :host .tw-bg-gray-50{background-color:#fafafa!important}.data-grid-container :host .tw-bg-gray-100{background-color:#f3f4f6!important}.data-grid-container :host thead{background-color:var(--cide-ele-grid-bg-header, #fafafa)!important}.data-grid-container :host thead th{background-color:transparent!important;color:var(--cide-ele-grid-text-header, #6b7280)!important}.data-grid-container :host thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, #f3f4f6))!important}.data-grid-container :host .data-grid-group-row{background-color:#f3f4f6!important}.data-grid-container :host tbody{background-color:#fff!important}.data-grid-container :host tbody tr{background-color:#fff!important}.data-grid-container :host tbody tr td{background-color:transparent}.data-grid-container :host.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}.data-grid-container :host .tw-text-gray-900{color:#1f2937!important}.data-grid-container :host .tw-text-gray-600{color:#4b5563!important}.data-grid-container :host .tw-text-gray-500{color:#6b7280!important}.data-grid-container :host .tw-text-gray-400{color:#9ca3af!important}.data-grid-container :host .tw-text-gray-700{color:#374151!important}.data-grid-container :host .tw-border-gray-200,.data-grid-container :host .tw-divide-gray-200{border-color:#e5e7eb!important}.data-grid-container :host .tw-border-gray-300{border-color:#d1d5db!important}.data-grid-container :host tbody tr:hover,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container :host tbody tr:hover td,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr:hover .tw-text-gray-900,.data-grid-container :host tbody tr:hover .tw-text-gray-700,.data-grid-container :host tbody tr:hover .tw-text-gray-600,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50{background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td{background-color:transparent}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900{color:#1f2937!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600{color:#4b5563!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500{color:#6b7280!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400{color:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700{color:#374151!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200{border-color:#e5e7eb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300{border-color:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}.data-grid-container :host-context(.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark]) .tw-bg-white,.data-grid-container :host-context(body.dark-mode) .tw-bg-white,.data-grid-container :host-context(html.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-white{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-50,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-50{background-color:var(--cide-ele-grid-bg-header, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-100,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-100{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark]) .data-grid-group-row,.data-grid-container :host-context(body.dark-mode) .data-grid-group-row,.data-grid-container :host-context(html.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] body) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] html) .data-grid-group-row{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark]) tbody,.data-grid-container :host-context(body.dark-mode) tbody,.data-grid-container :host-context(html.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark] body) tbody,.data-grid-container :host-context([data-theme=dark] html) tbody{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark]) tbody tr,.data-grid-container :host-context(body.dark-mode) tbody tr,.data-grid-container :host-context(html.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark] body) tbody tr,.data-grid-container :host-context([data-theme=dark] html) tbody tr{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark]) tbody tr td,.data-grid-container :host-context(body.dark-mode) tbody tr td,.data-grid-container :host-context(html.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark] body) tbody tr td,.data-grid-container :host-context([data-theme=dark] html) tbody tr td{background-color:transparent}.data-grid-container :host-context(.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark]).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(body.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(html.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] body).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] html).tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped, #111827)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-900{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-600{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-500,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-500,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-500{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-400,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-400,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-400{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-700{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-divide-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-divide-gray-200{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-300,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-300,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-300{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover,.data-grid-container :host-context(body.dark-mode) tbody tr:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context(html.dark-mode) tbody tr:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important;border-left:2px solid var(--cide-ele-grid-border-hover, #60a5fa)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb)}.data-grid-container.drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed var(--cide-ele-brand-primary, #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:var(--cide-ele-grid-bg-hover, #f9fafb);box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-grid-text, #1f2937)}.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:var(--cide-ele-bg-tertiary);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:var(--cide-ele-border-primary)}.tree-level-0{border-bottom:2px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-grid-bg)}.tree-level-0:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-grid-bg-striped)}.tree-level-1:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-bg-secondary)}.tree-level-2:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-bg-primary)}.tree-level-deep:hover{background-color:var(--cide-ele-bg-hover)!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", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
|
|
12597
|
+
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-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 with Dropdown -->\n <div class=\"tw-relative\">\n <button type=\"button\"\n class=\"filter-dropdown-trigger 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-blue-600 hover:tw-bg-blue-50 tw-transition-all tw-duration-200 tw-relative\"\n [class.tw-text-blue-600]=\"columnFilters().length > 0\"\n [class.tw-bg-blue-50]=\"columnFilters().length > 0\"\n title=\"Filter\"\n (click)=\"toggleFilterDropdown()\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">filter_list</cide-ele-icon>\n @if (columnFilters().length > 0) {\n <span class=\"tw-absolute -tw-top-1 -tw-right-1 tw-inline-flex tw-items-center tw-justify-center tw-w-4 tw-h-4 tw-text-xs tw-font-semibold tw-text-white tw-bg-blue-600 tw-rounded-full tw-border tw-border-white\">\n {{ columnFilters().length }}\n </span>\n }\n </button>\n \n <!-- Filter Dropdown Menu -->\n @if (showFilterDropdown()) {\n <div class=\"filter-dropdown tw-absolute tw-left-0 tw-mt-2 tw-w-80 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tw-py-1.5\">\n <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Active Filters</span>\n @if (columnFilters().length > 0) {\n <button type=\"button\" \n class=\"tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-font-medium\"\n (click)=\"clearAllFilters()\">\n Clear All\n </button>\n }\n </div>\n @if (columnFilters().length === 0) {\n <div class=\"tw-px-4 tw-py-6 tw-text-center\">\n <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-text-gray-300 tw-mx-auto tw-mb-2\">filter_list</cide-ele-icon>\n <p class=\"tw-text-sm tw-text-gray-500\">No filters applied</p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Use column filters to narrow down your results</p>\n </div>\n } @else {\n <div class=\"tw-max-h-96 tw-overflow-y-auto\">\n @for (filter of columnFilters(); track filter.columnKey) {\n <div class=\"tw-px-4 tw-py-3 hover:tw-bg-gray-50 tw-border-b tw-border-gray-100 last:tw-border-b-0\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <div class=\"tw-text-xs tw-font-semibold tw-text-gray-600 tw-mb-1\">{{ getColumnHeader(filter.columnKey) }}</div>\n <div class=\"tw-text-sm tw-text-gray-700 tw-flex tw-items-center tw-gap-1\">\n @if (filter.operator === 'in' && isArray(filter.value)) {\n <span class=\"tw-inline-flex tw-items-center tw-gap-1\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3\">check_circle</cide-ele-icon>\n {{ getArrayLength(filter.value) }} selected\n </span>\n } @else {\n <span>{{ $any(filter.value) }}</span>\n }\n </div>\n </div>\n <button type=\"button\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-5 tw-h-5 tw-rounded tw-text-gray-400 hover:tw-text-red-600 hover:tw-bg-red-50 tw-transition-colors\"\n (click)=\"removeFilter(filter.columnKey)\"\n title=\"Remove filter\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">close</cide-ele-icon>\n </button>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n \n <!-- Download/Export Button with Dropdown -->\n <div class=\"tw-relative\">\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=\"Export\"\n (click)=\"toggleExportMenu($event)\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">file_download</cide-ele-icon>\n </button>\n \n <!-- Export Dropdown Menu - Improved Design -->\n @if (showExportMenu()) {\n <div class=\"tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-bg-white tw-rounded-lg tw-shadow-xl tw-border tw-border-gray-200 tw-z-50 tw-overflow-hidden\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"tw-py-1.5\">\n <div class=\"tw-px-3 tw-py-2 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <span class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-tracking-wider\">Export Options</span>\n </div>\n <button type=\"button\"\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-green-50 hover:tw-text-green-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n (click)=\"exportData('csv')\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-green-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-green-600\">description</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-font-medium\">CSV</div>\n <div class=\"tw-text-xs tw-text-gray-500\">Comma separated values</div>\n </div>\n </button>\n <button type=\"button\"\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-blue-50 hover:tw-text-blue-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n (click)=\"exportData('excel')\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">table_chart</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-font-medium\">Excel</div>\n <div class=\"tw-text-xs tw-text-gray-500\">Microsoft Excel format</div>\n </div>\n </button>\n <button type=\"button\"\n class=\"tw-w-full tw-text-left tw-px-4 tw-py-3 tw-text-sm tw-text-gray-700 hover:tw-bg-red-50 hover:tw-text-red-700 tw-flex tw-items-center tw-transition-colors tw-duration-150\"\n (click)=\"exportData('pdf')\">\n <div class=\"tw-w-8 tw-h-8 tw-rounded tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-red-600\">picture_as_pdf</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-font-medium\">PDF</div>\n <div class=\"tw-text-xs tw-text-gray-500\">Portable document format</div>\n </div>\n </button>\n </div>\n </div>\n }\n </div>\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 [style.width]=\"getColumnWidthStyle(column.width)\"\n [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\"\n [title]=\"column.header\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-1\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-truncate tw-flex-1\">\n <span class=\"tw-truncate\">{{ column.header }}</span>\n @if (getColumnSortDirection(column.key) === 'asc') {\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\" title=\"Sorted Ascending\">arrow_upward</cide-ele-icon>\n }\n @if (getColumnSortDirection(column.key) === 'desc') {\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-text-blue-600 tw-flex-shrink-0\" title=\"Sorted Descending\">arrow_downward</cide-ele-icon>\n }\n </div>\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-[9999] 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 @let sortDirection = getColumnSortDirection(column.key);\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-transition-colors\"\n [class.tw-text-blue-700]=\"sortDirection === 'asc'\"\n [class.tw-bg-blue-50]=\"sortDirection === 'asc'\"\n [class.tw-text-gray-700]=\"sortDirection !== 'asc'\"\n [class.hover:tw-bg-gray-50]=\"sortDirection !== 'asc'\"\n (click)=\"onColumnSort(column, 'asc')\">\n <div class=\"tw-flex tw-items-center\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" \n [class.tw-text-blue-600]=\"sortDirection === 'asc'\"\n [class.tw-text-gray-400]=\"sortDirection !== 'asc'\">arrow_upward</cide-ele-icon>\n Ascending\n </div>\n @if (sortDirection === 'asc') {\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n }\n </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-transition-colors\"\n [class.tw-text-blue-700]=\"sortDirection === 'desc'\"\n [class.tw-bg-blue-50]=\"sortDirection === 'desc'\"\n [class.tw-text-gray-700]=\"sortDirection !== 'desc'\"\n [class.hover:tw-bg-gray-50]=\"sortDirection !== 'desc'\"\n (click)=\"onColumnSort(column, 'desc')\">\n <div class=\"tw-flex tw-items-center\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\"\n [class.tw-text-blue-600]=\"sortDirection === 'desc'\"\n [class.tw-text-gray-400]=\"sortDirection !== 'desc'\">arrow_downward</cide-ele-icon>\n Descending\n </div>\n @if (sortDirection === 'desc') {\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n }\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 @let isGrouped = groupedColumns().includes(column.key);\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-transition-colors\"\n [class.tw-text-blue-700]=\"isGrouped\"\n [class.tw-bg-blue-50]=\"isGrouped\"\n [class.tw-text-gray-700]=\"!isGrouped\"\n [class.hover:tw-bg-gray-50]=\"!isGrouped\"\n (click)=\"onColumnGroupBy(column)\">\n <div class=\"tw-flex tw-items-center\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-mr-3\" \n [class.tw-text-blue-600]=\"isGrouped\"\n [class.tw-text-gray-400]=\"!isGrouped\">group_work</cide-ele-icon>\n Group By Column\n </div>\n @if (isGrouped) {\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">check</cide-ele-icon>\n }\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-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 visibleColumns(); 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 [style.width]=\"getColumnWidthStyle(column.width)\"\n [style.maxWidth]=\"getColumnMaxWidthStyle(column.width)\">\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 @if (isGroupHeader(item)) {\n <!-- Group Header Row -->\n @let groupKey = getGroupKey(item);\n @let groupLevel = getGroupLevel(item);\n <tr class=\"data-grid-group-row tw-border-b-2 tw-border-gray-300 tw-font-semibold\"\n [class.tw-bg-gray-50]=\"groupLevel === 0\"\n [class.tw-bg-gray-100]=\"groupLevel === 1\"\n [class.tw-bg-gray-200]=\"groupLevel > 1\"\n (click)=\"toggleGroupExpansion(groupKey)\">\n <td class=\"tw-px-3 tw-py-1 tw-cursor-pointer tw-transition-colors\"\n [attr.colspan]=\"visibleColumns().length\">\n <div class=\"tw-flex tw-items-center tw-gap-2\" [style.padding-left.px]=\"groupLevel * 24\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-600 tw-cursor-pointer\">\n {{ isGroupExpanded(groupKey) ? 'expand_more' : 'chevron_right' }}\n </cide-ele-icon>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-blue-600\">group_work</cide-ele-icon>\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n {{ getGroupColumnHeader(item) }}: {{ getGroupValueDisplay(item) }}\n </span>\n <span class=\"tw-text-xs tw-text-gray-500 tw-ml-2 tw-bg-gray-200 tw-px-2 tw-py-0.5 tw-rounded-full\">\n {{ getGroupRowCount(item) }}\n </span>\n </div>\n </td>\n </tr>\n } @else {\n <!-- Regular Data Row -->\n <tr class=\"tw-group data-grid-row 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 visibleColumns(); 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.width]=\"getColumnWidthStyle(column.width)\"\n [style.paddingLeft]=\"isTreeEnabled() && $index === 0 ? getTreeIndentStyle(item) : '12px'\"\n [style.maxWidth]=\"getColumnMaxWidthStyle(column.width) || (getColumnMaxWidthClass(column.width) === 'tw-max-w-xs' ? '200px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-sm' ? '300px' : getColumnMaxWidthClass(column.width) === 'tw-max-w-md' ? '400px' : null)\"\n [style.minWidth]=\"isTreeEnabled() && $index === 0 ? '150px' : (getColumnWidthStyle(column.width) ? null : '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 \n <!-- Empty State -->\n @if (displayedData.length === 0) {\n <tr class=\"tw-h-full\">\n <td [attr.colspan]=\"visibleColumns().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\n <!-- Manage Columns Modal -->\n @if (showManageColumnsModal()) {\n <div class=\"tw-fixed tw-inset-0 tw-z-50 tw-overflow-y-auto\" \n (click)=\"closeManageColumnsModal()\"\n style=\"background-color: rgba(0, 0, 0, 0.5);\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-min-h-screen tw-p-4\">\n <div class=\"tw-bg-white tw-rounded-lg tw-shadow-xl tw-max-w-md tw-w-full tw-max-h-[80vh] tw-overflow-hidden tw-flex tw-flex-col\"\n (click)=\"$event.stopPropagation()\">\n <!-- Modal Header -->\n <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-flex tw-items-center tw-justify-between\">\n <h3 class=\"tw-text-lg tw-font-semibold tw-text-gray-900\">Manage Columns</h3>\n <button type=\"button\"\n class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\"\n (click)=\"closeManageColumnsModal()\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5\">close</cide-ele-icon>\n </button>\n </div>\n \n <!-- Modal Body -->\n <div class=\"tw-px-6 tw-py-4 tw-overflow-y-auto tw-flex-1\">\n <p class=\"tw-text-sm tw-text-gray-600 tw-mb-4\">Select columns to show or hide:</p>\n <div class=\"tw-space-y-2\">\n @for (column of mergedConfig().columns; track column.key) {\n <label class=\"tw-flex tw-items-center tw-px-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n <input type=\"checkbox\"\n class=\"tw-mr-3 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\n [checked]=\"!isColumnHidden(column.key)\"\n (change)=\"toggleColumnVisibility(column.key); $event.stopPropagation()\">\n <span class=\"tw-text-sm tw-text-gray-700 tw-flex-1\">{{ column.header }}</span>\n @if (isColumnHidden(column.key)) {\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility_off</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 tw-ml-2\">visibility</cide-ele-icon>\n }\n </label>\n }\n </div>\n </div>\n \n <!-- Modal Footer -->\n <div class=\"tw-px-6 tw-py-4 tw-border-t tw-border-gray-200 tw-flex tw-items-center tw-justify-end tw-gap-3\">\n <button type=\"button\"\n class=\"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 tw-rounded-md hover:tw-bg-gray-50 tw-transition-colors\"\n (click)=\"closeManageColumnsModal()\">\n Close\n </button>\n <button type=\"button\"\n class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-text-white tw-bg-blue-600 tw-border tw-border-transparent tw-rounded-md hover:tw-bg-blue-700 tw-transition-colors\"\n (click)=\"onColumnReset(); closeManageColumnsModal()\">\n Reset All\n </button>\n </div>\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:var(--cide-ele-text-primary);background-color:var(--cide-ele-grid-bg, var(--cide-ele-bg-primary, #ffffff));border-radius:0;overflow:hidden;box-shadow:var(--cide-ele-shadow-sm);-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:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #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:var(--cide-ele-scrollbar-track, #f9fafb)}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.data-grid-container table{min-height:300px;border-collapse:separate;border-spacing:0;width:100%;background-color:var(--cide-ele-grid-bg)}.data-grid-container thead{background-color:var(--cide-ele-grid-bg-header);border-bottom:2px solid var(--cide-ele-grid-border-header);position:relative;z-index:100}.data-grid-container thead th{background:transparent;color:var(--cide-ele-grid-text-header);font-weight:500;font-size:12px;text-transform:none;letter-spacing:-.01em;padding:4px 10px;border-bottom:1px solid var(--cide-ele-grid-border);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:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, var(--cide-ele-bg-hover)))}.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:var(--cide-ele-bg-tertiary)}.data-grid-container tbody{background-color:var(--cide-ele-grid-bg, #ffffff)}.data-grid-container tbody td{padding:6px 10px;border-bottom:1px solid var(--cide-ele-grid-border, #e5e7eb);color:var(--cide-ele-grid-text, #1f2937);font-size:13px;vertical-align:middle;line-height:1.5;transition:all .2s cubic-bezier(.4,0,.2,1);background-color:transparent}.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:var(--cide-ele-grid-bg, #ffffff);transition:all .2s cubic-bezier(.4,0,.2,1)}.data-grid-container tbody tr td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container tbody tr:hover,.data-grid-container tbody tr.data-grid-row:hover,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid transparent}.data-grid-container tbody tr:hover td,.data-grid-container tbody tr.data-grid-row:hover td,.data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td{background-color:transparent!important;border-bottom-color:var(--cide-ele-grid-border);color:var(--cide-ele-grid-text)!important}.data-grid-container tbody tr:active{background-color:var(--cide-ele-bg-active);transform:scale(.999)}.data-grid-container tbody tr:active td{color:var(--cide-ele-grid-text)}.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:var(--cide-ele-grid-bg-striped);border-left:1px solid transparent}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover{background-color:var(--cide-ele-grid-bg-hover);border-left:2px solid var(--cide-ele-grid-border-hover)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n):hover td{color:var(--cide-ele-grid-text)}.data-grid-container.tw-table-striped tbody tr:nth-child(2n) td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row{background-color:var(--cide-ele-grid-bg-group)!important}.data-grid-container tbody tr.data-grid-group-row td{color:var(--cide-ele-grid-text)}.data-grid-container tbody tr.data-grid-group-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container tbody tr.data-grid-group-row:hover td{color:var(--cide-ele-grid-text)}.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:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.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:2px solid var(--cide-ele-grid-border-header);background-color:var(--cide-ele-grid-bg-header)}.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);position:absolute!important;z-index:9999!important}.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}}.data-grid-container :host .tw-bg-white{background-color:#fff!important}.data-grid-container :host .tw-bg-gray-50{background-color:#fafafa!important}.data-grid-container :host .tw-bg-gray-100{background-color:#f3f4f6!important}.data-grid-container :host thead{background-color:var(--cide-ele-grid-bg-header, #fafafa)!important}.data-grid-container :host thead th{background-color:transparent!important;color:var(--cide-ele-grid-text-header, #6b7280)!important}.data-grid-container :host thead th:hover{background-color:var(--cide-ele-grid-bg-header-hover, var(--cide-ele-grid-bg-hover, #f3f4f6))!important}.data-grid-container :host .data-grid-group-row{background-color:#f3f4f6!important}.data-grid-container :host tbody{background-color:#fff!important}.data-grid-container :host tbody tr{background-color:#fff!important}.data-grid-container :host tbody tr td{background-color:transparent}.data-grid-container :host.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}.data-grid-container :host .tw-text-gray-900{color:#1f2937!important}.data-grid-container :host .tw-text-gray-600{color:#4b5563!important}.data-grid-container :host .tw-text-gray-500{color:#6b7280!important}.data-grid-container :host .tw-text-gray-400{color:#9ca3af!important}.data-grid-container :host .tw-text-gray-700{color:#374151!important}.data-grid-container :host .tw-border-gray-200,.data-grid-container :host .tw-divide-gray-200{border-color:#e5e7eb!important}.data-grid-container :host .tw-border-gray-300{border-color:#d1d5db!important}.data-grid-container :host tbody tr:hover,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.data-grid-container :host tbody tr:hover td,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr:hover .tw-text-gray-900,.data-grid-container :host tbody tr:hover .tw-text-gray-700,.data-grid-container :host tbody tr:hover .tw-text-gray-600,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}.data-grid-container :host tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}.data-grid-container :host .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}.data-grid-container :host .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-white{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-50{background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-bg-gray-100{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .data-grid-group-row{background-color:#f3f4f6!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr{background-color:#fff!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr td{background-color:transparent}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n),::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container.tw-table-striped tbody tr:nth-child(2n){background-color:#fafafa!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-900{color:#1f2937!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-600{color:#4b5563!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-500{color:#6b7280!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-400{color:#9ca3af!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-text-gray-700{color:#374151!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-200,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-divide-gray-200{border-color:#e5e7eb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-border-gray-300{border-color:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-900,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-700,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover)!important;border-left:2px solid var(--cide-ele-grid-border-hover)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-grid-text)!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto{scrollbar-width:thin;scrollbar-color:#d1d5db #f9fafb}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-track{background:#f9fafb!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb{background:#d1d5db!important}::ng-deep :root:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep html:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover,::ng-deep body:not([data-theme=dark]):not(.dark-mode) .data-grid-container .tw-overflow-x-auto::-webkit-scrollbar-thumb:hover{background:#9ca3af!important}.data-grid-container :host-context(.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark]) .tw-bg-white,.data-grid-container :host-context(body.dark-mode) .tw-bg-white,.data-grid-container :host-context(html.dark-mode) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-white,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-white{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-50,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-50,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-50{background-color:var(--cide-ele-grid-bg-header, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark]) .tw-bg-gray-100,.data-grid-container :host-context(body.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context(html.dark-mode) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] body) .tw-bg-gray-100,.data-grid-container :host-context([data-theme=dark] html) .tw-bg-gray-100{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark]) .data-grid-group-row,.data-grid-container :host-context(body.dark-mode) .data-grid-group-row,.data-grid-container :host-context(html.dark-mode) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] body) .data-grid-group-row,.data-grid-container :host-context([data-theme=dark] html) .data-grid-group-row{background-color:var(--cide-ele-grid-bg-group, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark]) tbody,.data-grid-container :host-context(body.dark-mode) tbody,.data-grid-container :host-context(html.dark-mode) tbody,.data-grid-container :host-context([data-theme=dark] body) tbody,.data-grid-container :host-context([data-theme=dark] html) tbody{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark]) tbody tr,.data-grid-container :host-context(body.dark-mode) tbody tr,.data-grid-container :host-context(html.dark-mode) tbody tr,.data-grid-container :host-context([data-theme=dark] body) tbody tr,.data-grid-container :host-context([data-theme=dark] html) tbody tr{background-color:var(--cide-ele-grid-bg, #1f2937)!important}.data-grid-container :host-context(.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark]) tbody tr td,.data-grid-container :host-context(body.dark-mode) tbody tr td,.data-grid-container :host-context(html.dark-mode) tbody tr td,.data-grid-container :host-context([data-theme=dark] body) tbody tr td,.data-grid-container :host-context([data-theme=dark] html) tbody tr td{background-color:transparent}.data-grid-container :host-context(.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark]).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(body.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context(html.dark-mode).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] body).tw-table-striped tbody tr:nth-child(2n),.data-grid-container :host-context([data-theme=dark] html).tw-table-striped tbody tr:nth-child(2n){background-color:var(--cide-ele-grid-bg-striped, #111827)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-900{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-600{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-500,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-500,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-500,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-500{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-400,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-400,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-400,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-400{color:var(--cide-ele-text-tertiary, #9ca3af)!important}.data-grid-container :host-context(.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) .tw-text-gray-700{color:var(--cide-ele-text-secondary, #d1d5db)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark]) .tw-divide-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(body.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-200,.data-grid-container :host-context(html.dark-mode) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] body) .tw-divide-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-200,.data-grid-container :host-context([data-theme=dark] html) .tw-divide-gray-200{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark]) .tw-border-gray-300,.data-grid-container :host-context(body.dark-mode) .tw-border-gray-300,.data-grid-container :host-context(html.dark-mode) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] body) .tw-border-gray-300,.data-grid-container :host-context([data-theme=dark] html) .tw-border-gray-300{border-color:var(--cide-ele-grid-border, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover,.data-grid-container :host-context(body.dark-mode) tbody tr:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context(html.dark-mode) tbody tr:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark]) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(body.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context(html.dark-mode) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] body) tbody tr.data-grid-row:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.hover\\:tw-bg-gray-50:hover .tw-text-gray-600,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-900,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-700,.data-grid-container :host-context([data-theme=dark] html) tbody tr.data-grid-row:hover .tw-text-gray-600{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important;border-left:2px solid var(--cide-ele-grid-border-hover, #60a5fa)!important}.data-grid-container :host-context(.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark]) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(body.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context(html.dark-mode) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] body) tbody tr.tw-cursor-pointer:hover td,.data-grid-container :host-context([data-theme=dark] html) tbody tr.tw-cursor-pointer:hover td{background-color:transparent!important;color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover{background-color:var(--cide-ele-grid-bg-hover, #374151)!important}.data-grid-container :host-context(.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark]).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(body.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context(html.dark-mode).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] body).drag-drop-enabled tbody tr[draggable=true]:hover td,.data-grid-container :host-context([data-theme=dark] html).drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-text-primary, #f9fafb)!important}.data-grid-container.drag-drop-enabled tbody tr{transition:all .2s ease}.data-grid-container.drag-drop-enabled tbody tr:hover{background-color:var(--cide-ele-grid-bg-hover, #f9fafb)}.data-grid-container.drag-drop-enabled tbody tr:hover td{color:var(--cide-ele-grid-text, #1f2937)}.data-grid-container.drag-drop-enabled tbody tr.tw-opacity-50{background-color:#dbeafecc;border:2px dashed var(--cide-ele-brand-primary, #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:var(--cide-ele-grid-bg-hover, #f9fafb);box-shadow:0 1px 3px #0000001a}.data-grid-container.drag-drop-enabled tbody tr[draggable=true]:hover td{color:var(--cide-ele-grid-text, #1f2937)}.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:var(--cide-ele-bg-tertiary);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:var(--cide-ele-border-primary)}.tree-level-0{border-bottom:2px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-grid-bg)}.tree-level-0:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-0 td:first-child{font-weight:600}.tree-level-1{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-grid-bg-striped)}.tree-level-1:hover{background-color:var(--cide-ele-grid-bg-hover)!important}.tree-level-1 td:first-child{font-weight:500}.tree-level-2{border-bottom:1px solid var(--cide-ele-border-secondary)!important;background-color:var(--cide-ele-bg-secondary)}.tree-level-2:hover{background-color:var(--cide-ele-bg-hover)!important}.tree-level-2 td:first-child{font-weight:400}.tree-level-deep{border-bottom:1px solid var(--cide-ele-border-primary)!important;background-color:var(--cide-ele-bg-primary)}.tree-level-deep:hover{background-color:var(--cide-ele-bg-hover)!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", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
|
|
12563
12598
|
}
|
|
12564
12599
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, decorators: [{
|
|
12565
12600
|
type: Component,
|
|
@@ -13661,6 +13696,8 @@ class FloatingContainerShortcutsService {
|
|
|
13661
13696
|
key: 'n',
|
|
13662
13697
|
altKey: true,
|
|
13663
13698
|
description: 'Create new floating container',
|
|
13699
|
+
title: 'New Container',
|
|
13700
|
+
category: 'Floating Containers',
|
|
13664
13701
|
action: () => this.openNewContainer(),
|
|
13665
13702
|
preventDefault: true
|
|
13666
13703
|
});
|
|
@@ -13670,6 +13707,8 @@ class FloatingContainerShortcutsService {
|
|
|
13670
13707
|
key: 'p',
|
|
13671
13708
|
altKey: true,
|
|
13672
13709
|
description: 'Focus previous container',
|
|
13710
|
+
title: 'Previous Container',
|
|
13711
|
+
category: 'Floating Containers',
|
|
13673
13712
|
action: () => this.focusPreviousContainer(),
|
|
13674
13713
|
preventDefault: true
|
|
13675
13714
|
});
|
|
@@ -13679,6 +13718,8 @@ class FloatingContainerShortcutsService {
|
|
|
13679
13718
|
key: 'h',
|
|
13680
13719
|
altKey: true,
|
|
13681
13720
|
description: 'Hide all containers',
|
|
13721
|
+
title: 'Hide All Containers',
|
|
13722
|
+
category: 'Floating Containers',
|
|
13682
13723
|
action: () => this.hideAllContainers(),
|
|
13683
13724
|
preventDefault: true
|
|
13684
13725
|
});
|
|
@@ -13688,6 +13729,8 @@ class FloatingContainerShortcutsService {
|
|
|
13688
13729
|
key: 's',
|
|
13689
13730
|
altKey: true,
|
|
13690
13731
|
description: 'Show all containers',
|
|
13732
|
+
title: 'Show All Containers',
|
|
13733
|
+
category: 'Floating Containers',
|
|
13691
13734
|
action: () => this.showAllContainers(),
|
|
13692
13735
|
preventDefault: true
|
|
13693
13736
|
});
|
|
@@ -13697,6 +13740,8 @@ class FloatingContainerShortcutsService {
|
|
|
13697
13740
|
key: 'm',
|
|
13698
13741
|
altKey: true,
|
|
13699
13742
|
description: 'Minimize all containers',
|
|
13743
|
+
title: 'Minimize All Containers',
|
|
13744
|
+
category: 'Floating Containers',
|
|
13700
13745
|
action: () => this.minimizeAllContainers(),
|
|
13701
13746
|
preventDefault: true
|
|
13702
13747
|
});
|
|
@@ -13706,6 +13751,8 @@ class FloatingContainerShortcutsService {
|
|
|
13706
13751
|
key: 'w',
|
|
13707
13752
|
altKey: true,
|
|
13708
13753
|
description: 'Close current container',
|
|
13754
|
+
title: 'Close Current Container',
|
|
13755
|
+
category: 'Floating Containers',
|
|
13709
13756
|
action: () => this.closeCurrentContainer(),
|
|
13710
13757
|
preventDefault: true
|
|
13711
13758
|
});
|
|
@@ -13715,6 +13762,8 @@ class FloatingContainerShortcutsService {
|
|
|
13715
13762
|
key: 'd',
|
|
13716
13763
|
altKey: true,
|
|
13717
13764
|
description: 'Duplicate current container',
|
|
13765
|
+
title: 'Duplicate Container',
|
|
13766
|
+
category: 'Floating Containers',
|
|
13718
13767
|
action: () => this.duplicateCurrentContainer(),
|
|
13719
13768
|
preventDefault: true
|
|
13720
13769
|
});
|
|
@@ -13724,6 +13773,8 @@ class FloatingContainerShortcutsService {
|
|
|
13724
13773
|
key: 't',
|
|
13725
13774
|
altKey: true,
|
|
13726
13775
|
description: 'Toggle container visibility',
|
|
13776
|
+
title: 'Toggle Container Visibility',
|
|
13777
|
+
category: 'Floating Containers',
|
|
13727
13778
|
action: () => this.toggleContainerVisibility(),
|
|
13728
13779
|
preventDefault: true
|
|
13729
13780
|
});
|
|
@@ -13733,6 +13784,8 @@ class FloatingContainerShortcutsService {
|
|
|
13733
13784
|
key: 'o',
|
|
13734
13785
|
altKey: true,
|
|
13735
13786
|
description: 'Open file uploader',
|
|
13787
|
+
title: 'Open File Uploader',
|
|
13788
|
+
category: 'Floating Containers',
|
|
13736
13789
|
action: () => this.openFileUploader(),
|
|
13737
13790
|
preventDefault: true
|
|
13738
13791
|
});
|
|
@@ -13742,6 +13795,8 @@ class FloatingContainerShortcutsService {
|
|
|
13742
13795
|
key: 'r',
|
|
13743
13796
|
altKey: true,
|
|
13744
13797
|
description: 'Open entity rights sharing',
|
|
13798
|
+
title: 'Open Entity Rights',
|
|
13799
|
+
category: 'Floating Containers',
|
|
13745
13800
|
action: () => this.openEntityRightsSharing(),
|
|
13746
13801
|
preventDefault: true
|
|
13747
13802
|
});
|
|
@@ -13757,6 +13812,8 @@ class FloatingContainerShortcutsService {
|
|
|
13757
13812
|
key: i.toString(),
|
|
13758
13813
|
altKey: true,
|
|
13759
13814
|
description: `Focus container ${i}`,
|
|
13815
|
+
title: `Focus Container ${i}`,
|
|
13816
|
+
category: 'Floating Containers',
|
|
13760
13817
|
action: () => this.focusContainerByIndex(i - 1),
|
|
13761
13818
|
preventDefault: true
|
|
13762
13819
|
});
|