cloud-ide-element 1.1.92 → 1.1.94
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.
- package/fesm2022/cloud-ide-element.mjs +147 -144
- package/fesm2022/cloud-ide-element.mjs.map +1 -1
- package/index.d.ts +3 -2
- package/package.json +1 -1
|
@@ -2797,7 +2797,7 @@ class CideSelectComponent {
|
|
|
2797
2797
|
multi: true,
|
|
2798
2798
|
useExisting: forwardRef(() => CideSelectComponent),
|
|
2799
2799
|
}
|
|
2800
|
-
], queries: [{ propertyName: "optionComponents", predicate: CideSelectOptionComponent }], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-select\" [ngClass]=\"{\n 'cide-element-size-xxs': (size() === '2xs'),\n 'cide-element-size-xs': (size() === 'xs'),\n 'cide-element-size-sm': (size() === 'sm'),\n 'cide-element-size-md': (size() === 'md'),\n 'cide-element-size-lg': (size() === 'lg'),\n 'cide-element-input-label-floating': (labelPlacement() === 'floating'),\n 'cide-element-input-label-start': (labelDir() === 'start'),\n 'cide-element-input-label-end': (labelDir() === 'end'),\n 'cide-element-input-label-fixed': (labelPlacement() === 'fixed'),\n 'cide-element-input-label-less': (!label() || labelHide()),\n 'cide-element-style-outline': (fill() === 'outline'),\n 'cide-element-style-solid': (fill() === 'solid'),\n 'cide-element-style-standard': (fill() === 'standard'),\n}\">\n @if (label() && !labelHide()) {\n <label [for]=\"id()\" class=\"cide-select-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n }\n </label>\n }\n\n <div class=\"cide-element-select-wrapper tw-relative\">\n <!-- Leading Icon -->\n @if (leadingIcon()) {\n <span class=\"cide-input-leading-icon-wrapper\">\n <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon()}}</span>\n </span>\n }\n\n <!-- Select Button -->\n <button type=\"button\" [id]=\"id()\" [disabled]=\"isDisabled()\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label() && labelPlacement() === 'fixed',\n 'tw-rounded-md': !(label() && labelPlacement() === 'fixed'),\n 'tw-pl-1': !leadingIcon(),\n 'tw-pr-8': trailingIcon() || clearInput() || loading(),\n 'tw-pr-1': !trailingIcon() && !clearInput() && !loading(),\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size() === 'md',\n 'tw-h-7': size() === 'sm',\n '!tw-mt-0': labelHide(),\n 'tw-opacity-50 tw-cursor-not-allowed': isDisabled(),\n 'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer': true\n }\" class=\"cide-select-button\">\n\n <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n {{ ngModel ? getSelectedOptionLabel() : placeholder() }}\n </span>\n </button>\n\n <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n @if (!clearInput() || !ngModel || loading()) {\n <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n <!-- Loading Spinner -->\n @if (loading()) {\n <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"tw-opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n </svg>\n </span>\n }\n <!-- Dropdown Arrow -->\n @if (!loading()) {\n <span\n class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n [ngClass]=\"{'tw-rotate-180': isOpen}\">\n expand_more\n </span>\n }\n </span>\n }\n\n <!-- Clear Button -->\n @if (clearInput() && ngModel) {\n <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n </button>\n }\n\n\n </div>\n\n <!-- Error/Helper Text -->\n @if ((errorText() || helperText()) && !isValid) {\n <span class=\"cide-select-help-error-text\">\n {{ errorText() || helperText() }}\n </span>\n }\n @if (helperText() && isValid) {\n <span class=\"cide-select-help-error-text\">\n {{ helperText() }}\n </span>\n }\n\n <!-- Portal Container -->\n <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n <div\n class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n <!-- Search Input (if searchable and showSearchInput is true) -->\n @if (context?.searchable && showSearchInput()) {\n <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n </div>\n }\n\n <!-- Options List -->\n <div class=\"tw-py-1\">\n <!-- Loading State -->\n @if (context?.loading) {\n <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n viewBox=\"0 0 24 24\">\n <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"tw-opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n </svg>\n <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n </div>\n </div>\n }\n <!-- Options -->\n @if (!context?.loading) {\n @for (option of context?.options; track $index) {\n <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n [disabled]=\"option.disabled\" [ngClass]=\"{\n 'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n 'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n 'tw-text-gray-400 tw-cursor-not-allowed': option.disabled,\n 'cide-select-tree-option': context?.treeView?.enabled\n }\" class=\"cide-select-option\" [style.white-space]=\"context?.treeView?.enabled ? 'pre' : 'normal'\" [style.font-family]=\"context?.treeView?.enabled ? 'monospace' : 'inherit'\">\n {{ context?.getOptionLabel(option) }}\n </button>\n }\n }\n\n <!-- No options message -->\n @if (!context?.loading && context?.options.length === 0) {\n <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n </div>\n }\n </div>\n </div>\n</ng-template>", styles: [".cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2800
|
+
], queries: [{ propertyName: "optionComponents", predicate: CideSelectOptionComponent }], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cide-select\" [ngClass]=\"{\n 'cide-element-size-xxs': (size() === '2xs'),\n 'cide-element-size-xs': (size() === 'xs'),\n 'cide-element-size-sm': (size() === 'sm'),\n 'cide-element-size-md': (size() === 'md'),\n 'cide-element-size-lg': (size() === 'lg'),\n 'cide-element-leading-icon': leadingIcon(),\n 'cide-element-input-label-floating': (labelPlacement() === 'floating'),\n 'cide-element-input-label-start': (labelDir() === 'start'),\n 'cide-element-input-label-end': (labelDir() === 'end'),\n 'cide-element-input-label-fixed': (labelPlacement() === 'fixed'),\n 'cide-element-input-label-less': (!label() || labelHide()),\n 'cide-element-style-outline': (fill() === 'outline'),\n 'cide-element-style-solid': (fill() === 'solid'),\n 'cide-element-style-standard': (fill() === 'standard'),\n}\">\n @if (label() && !labelHide()) {\n <label [for]=\"id()\" class=\"cide-select-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n }\n </label>\n }\n\n <div class=\"cide-element-select-wrapper tw-relative\">\n <!-- Leading Icon -->\n @if (leadingIcon()) {\n <span class=\"cide-input-leading-icon-wrapper\">\n <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon()}}</span>\n </span>\n }\n\n <!-- Select Button -->\n <button type=\"button\" [id]=\"id()\" [disabled]=\"isDisabled()\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label() && labelPlacement() === 'fixed',\n 'tw-rounded-md': !(label() && labelPlacement() === 'fixed'),\n 'tw-pl-1': !leadingIcon(),\n 'tw-pr-8': trailingIcon() || clearInput() || loading(),\n 'tw-pr-1': !trailingIcon() && !clearInput() && !loading(),\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size() === 'md',\n 'tw-h-7': size() === 'sm',\n '!tw-mt-0': labelHide(),\n 'tw-opacity-50 tw-cursor-not-allowed': isDisabled(),\n 'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer': true\n }\" class=\"cide-select-button\">\n\n <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n {{ ngModel ? getSelectedOptionLabel() : placeholder() }}\n </span>\n </button>\n\n <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n @if (!clearInput() || !ngModel || loading()) {\n <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n <!-- Loading Spinner -->\n @if (loading()) {\n <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"tw-opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n </svg>\n </span>\n }\n <!-- Dropdown Arrow -->\n @if (!loading()) {\n <span\n class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n [ngClass]=\"{'tw-rotate-180': isOpen}\">\n expand_more\n </span>\n }\n </span>\n }\n\n <!-- Clear Button -->\n @if (clearInput() && ngModel) {\n <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n </button>\n }\n\n\n </div>\n\n <!-- Error/Helper Text -->\n @if ((errorText() || helperText()) && !isValid) {\n <span class=\"cide-select-help-error-text\">\n {{ errorText() || helperText() }}\n </span>\n }\n @if (helperText() && isValid) {\n <span class=\"cide-select-help-error-text\">\n {{ helperText() }}\n </span>\n }\n\n <!-- Portal Container -->\n <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n <div\n class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n <!-- Search Input (if searchable and showSearchInput is true) -->\n @if (context?.searchable && showSearchInput()) {\n <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n </div>\n }\n\n <!-- Options List -->\n <div class=\"tw-py-1\">\n <!-- Loading State -->\n @if (context?.loading) {\n <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n viewBox=\"0 0 24 24\">\n <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"tw-opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n </svg>\n <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n </div>\n </div>\n }\n <!-- Options -->\n @if (!context?.loading) {\n @for (option of context?.options; track $index) {\n <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n [disabled]=\"option.disabled\" [ngClass]=\"{\n 'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n 'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n 'tw-text-gray-400 tw-cursor-not-allowed': option.disabled,\n 'cide-select-tree-option': context?.treeView?.enabled\n }\" class=\"cide-select-option\" [style.white-space]=\"context?.treeView?.enabled ? 'pre' : 'normal'\" [style.font-family]=\"context?.treeView?.enabled ? 'monospace' : 'inherit'\">\n {{ context?.getOptionLabel(option) }}\n </button>\n }\n }\n\n <!-- No options message -->\n @if (!context?.loading && context?.options.length === 0) {\n <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n </div>\n }\n </div>\n </div>\n</ng-template>", styles: [".cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2801
2801
|
}
|
|
2802
2802
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideSelectComponent, decorators: [{
|
|
2803
2803
|
type: Component,
|
|
@@ -2812,7 +2812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
2812
2812
|
multi: true,
|
|
2813
2813
|
useExisting: forwardRef(() => CideSelectComponent),
|
|
2814
2814
|
}
|
|
2815
|
-
], template: "<div class=\"cide-select\" [ngClass]=\"{\n 'cide-element-size-xxs': (size() === '2xs'),\n 'cide-element-size-xs': (size() === 'xs'),\n 'cide-element-size-sm': (size() === 'sm'),\n 'cide-element-size-md': (size() === 'md'),\n 'cide-element-size-lg': (size() === 'lg'),\n 'cide-element-input-label-floating': (labelPlacement() === 'floating'),\n 'cide-element-input-label-start': (labelDir() === 'start'),\n 'cide-element-input-label-end': (labelDir() === 'end'),\n 'cide-element-input-label-fixed': (labelPlacement() === 'fixed'),\n 'cide-element-input-label-less': (!label() || labelHide()),\n 'cide-element-style-outline': (fill() === 'outline'),\n 'cide-element-style-solid': (fill() === 'solid'),\n 'cide-element-style-standard': (fill() === 'standard'),\n}\">\n @if (label() && !labelHide()) {\n <label [for]=\"id()\" class=\"cide-select-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n }\n </label>\n }\n\n <div class=\"cide-element-select-wrapper tw-relative\">\n <!-- Leading Icon -->\n @if (leadingIcon()) {\n <span class=\"cide-input-leading-icon-wrapper\">\n <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon()}}</span>\n </span>\n }\n\n <!-- Select Button -->\n <button type=\"button\" [id]=\"id()\" [disabled]=\"isDisabled()\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label() && labelPlacement() === 'fixed',\n 'tw-rounded-md': !(label() && labelPlacement() === 'fixed'),\n 'tw-pl-1': !leadingIcon(),\n 'tw-pr-8': trailingIcon() || clearInput() || loading(),\n 'tw-pr-1': !trailingIcon() && !clearInput() && !loading(),\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size() === 'md',\n 'tw-h-7': size() === 'sm',\n '!tw-mt-0': labelHide(),\n 'tw-opacity-50 tw-cursor-not-allowed': isDisabled(),\n 'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer': true\n }\" class=\"cide-select-button\">\n\n <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n {{ ngModel ? getSelectedOptionLabel() : placeholder() }}\n </span>\n </button>\n\n <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n @if (!clearInput() || !ngModel || loading()) {\n <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n <!-- Loading Spinner -->\n @if (loading()) {\n <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"tw-opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n </svg>\n </span>\n }\n <!-- Dropdown Arrow -->\n @if (!loading()) {\n <span\n class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n [ngClass]=\"{'tw-rotate-180': isOpen}\">\n expand_more\n </span>\n }\n </span>\n }\n\n <!-- Clear Button -->\n @if (clearInput() && ngModel) {\n <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n </button>\n }\n\n\n </div>\n\n <!-- Error/Helper Text -->\n @if ((errorText() || helperText()) && !isValid) {\n <span class=\"cide-select-help-error-text\">\n {{ errorText() || helperText() }}\n </span>\n }\n @if (helperText() && isValid) {\n <span class=\"cide-select-help-error-text\">\n {{ helperText() }}\n </span>\n }\n\n <!-- Portal Container -->\n <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n <div\n class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n <!-- Search Input (if searchable and showSearchInput is true) -->\n @if (context?.searchable && showSearchInput()) {\n <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n </div>\n }\n\n <!-- Options List -->\n <div class=\"tw-py-1\">\n <!-- Loading State -->\n @if (context?.loading) {\n <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n viewBox=\"0 0 24 24\">\n <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"tw-opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n </svg>\n <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n </div>\n </div>\n }\n <!-- Options -->\n @if (!context?.loading) {\n @for (option of context?.options; track $index) {\n <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n [disabled]=\"option.disabled\" [ngClass]=\"{\n 'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n 'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n 'tw-text-gray-400 tw-cursor-not-allowed': option.disabled,\n 'cide-select-tree-option': context?.treeView?.enabled\n }\" class=\"cide-select-option\" [style.white-space]=\"context?.treeView?.enabled ? 'pre' : 'normal'\" [style.font-family]=\"context?.treeView?.enabled ? 'monospace' : 'inherit'\">\n {{ context?.getOptionLabel(option) }}\n </button>\n }\n }\n\n <!-- No options message -->\n @if (!context?.loading && context?.options.length === 0) {\n <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n </div>\n }\n </div>\n </div>\n</ng-template>", styles: [".cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
|
|
2815
|
+
], template: "<div class=\"cide-select\" [ngClass]=\"{\n 'cide-element-size-xxs': (size() === '2xs'),\n 'cide-element-size-xs': (size() === 'xs'),\n 'cide-element-size-sm': (size() === 'sm'),\n 'cide-element-size-md': (size() === 'md'),\n 'cide-element-size-lg': (size() === 'lg'),\n 'cide-element-leading-icon': leadingIcon(),\n 'cide-element-input-label-floating': (labelPlacement() === 'floating'),\n 'cide-element-input-label-start': (labelDir() === 'start'),\n 'cide-element-input-label-end': (labelDir() === 'end'),\n 'cide-element-input-label-fixed': (labelPlacement() === 'fixed'),\n 'cide-element-input-label-less': (!label() || labelHide()),\n 'cide-element-style-outline': (fill() === 'outline'),\n 'cide-element-style-solid': (fill() === 'solid'),\n 'cide-element-style-standard': (fill() === 'standard'),\n}\">\n @if (label() && !labelHide()) {\n <label [for]=\"id()\" class=\"cide-select-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"tw-text-red-500 tw-ml-1\">*</span>\n }\n </label>\n }\n\n <div class=\"cide-element-select-wrapper tw-relative\">\n <!-- Leading Icon -->\n @if (leadingIcon()) {\n <span class=\"cide-input-leading-icon-wrapper\">\n <span class=\"cide-input-leading-icon material-symbols-outlined tw-text-center\">{{leadingIcon()}}</span>\n </span>\n }\n\n <!-- Select Button -->\n <button type=\"button\" [id]=\"id()\" [disabled]=\"isDisabled()\" (click)=\"toggleDropdown()\" (blur)=\"onBlur()\" [ngClass]=\"{\n 'tw-rounded-e-md tw-rounded-es-md': label() && labelPlacement() === 'fixed',\n 'tw-rounded-md': !(label() && labelPlacement() === 'fixed'),\n 'tw-pl-1': !leadingIcon(),\n 'tw-pr-8': trailingIcon() || clearInput() || loading(),\n 'tw-pr-1': !trailingIcon() && !clearInput() && !loading(),\n 'tw-h-8 tw-pt-0.5 tw-pb-0': size() === 'md',\n 'tw-h-7': size() === 'sm',\n '!tw-mt-0': labelHide(),\n 'tw-opacity-50 tw-cursor-not-allowed': isDisabled(),\n 'cide-select-button tw-m-0 tw-w-full tw-bg-transparent tw-overflow-hidden tw-border-solid tw-p-0 tw-outline-none tw-text-left tw-cursor-pointer': true\n }\" class=\"cide-select-button\">\n\n <span class=\"cide-select-value\" [ngClass]=\"{'tw-text-gray-400': !ngModel}\">\n {{ ngModel ? getSelectedOptionLabel() : placeholder() }}\n </span>\n </button>\n\n <!-- Trailing Icon (Dropdown Arrow or Loading Spinner) -->\n @if (!clearInput() || !ngModel || loading()) {\n <span class=\"tw-absolute tw-top-1/2 tw-right-0 tw-transform -tw-translate-y-1/2 tw-select-none tw-z-10\">\n <!-- Loading Spinner -->\n @if (loading()) {\n <span class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n <svg class=\"tw-animate-spin tw-h-4 tw-w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"tw-opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n </svg>\n </span>\n }\n <!-- Dropdown Arrow -->\n @if (!loading()) {\n <span\n class=\"material-symbols-outlined tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center !tw-text-2xl tw-transition-transform tw-text-gray-500\"\n [ngClass]=\"{'tw-rotate-180': isOpen}\">\n expand_more\n </span>\n }\n </span>\n }\n\n <!-- Clear Button -->\n @if (clearInput() && ngModel) {\n <button class=\"cide-input-clear\" (click)=\"clearSelection()\" type=\"button\">\n <span class=\"cide-input-clear-icon material-symbols-outlined\">close</span>\n </button>\n }\n\n\n </div>\n\n <!-- Error/Helper Text -->\n @if ((errorText() || helperText()) && !isValid) {\n <span class=\"cide-select-help-error-text\">\n {{ errorText() || helperText() }}\n </span>\n }\n @if (helperText() && isValid) {\n <span class=\"cide-select-help-error-text\">\n {{ helperText() }}\n </span>\n }\n\n <!-- Portal Container -->\n <div #dropdownContainer></div>\n</div>\n\n<!-- Portal Template for Dropdown -->\n<ng-template #dropdownTemplate let-context=\"context\">\n <div\n class=\"cide-select-dropdown-portal tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-shadow-lg tw-max-h-60 tw-overflow-y-auto tw-z-50\">\n <!-- Search Input (if searchable and showSearchInput is true) -->\n @if (context?.searchable && showSearchInput()) {\n <div class=\"tw-p-2 tw-border-b tw-border-gray-200\">\n <input #searchInput type=\"text\" placeholder=\"Search options...\" [value]=\"context?.searchTerm\"\n (input)=\"context?.onSearchInput($event)\" (mousedown)=\"onDropdownMouseDown()\" (focus)=\"onDropdownMouseDown()\"\n (click)=\"$event.stopPropagation()\" (blur)=\"onSearchInputBlur($event)\"\n class=\"tw-w-full tw-px-2 tw-py-1 tw-text-sm tw-border tw-border-gray-300 tw-rounded tw-outline-none focus:tw-border-blue-500\">\n </div>\n }\n\n <!-- Options List -->\n <div class=\"tw-py-1\">\n <!-- Loading State -->\n @if (context?.loading) {\n <div class=\"tw-px-3 tw-py-4 tw-text-center\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-space-x-2\">\n <svg class=\"tw-animate-spin tw-h-4 tw-w-4 tw-text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n viewBox=\"0 0 24 24\">\n <circle class=\"tw-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"tw-opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n </svg>\n <span class=\"tw-text-sm tw-text-gray-500\">Loading...</span>\n </div>\n </div>\n }\n <!-- Options -->\n @if (!context?.loading) {\n @for (option of context?.options; track $index) {\n <button type=\"button\" (mousedown)=\"onDropdownMouseDown()\" (click)=\"context?.selectOption(option)\"\n (keyup.enter)=\"context?.selectOption(option)\" (keyup.space)=\"context?.selectOption(option)\"\n [disabled]=\"option.disabled\" [ngClass]=\"{\n 'cide-select-option tw-w-full tw-text-left tw-px-3 tw-py-2 tw-text-sm tw-cursor-pointer tw-transition-colors hover:tw-bg-gray-100 tw-border-none tw-bg-transparent tw-outline-none': true,\n 'tw-bg-blue-50 tw-text-blue-700': context?.isOptionSelected(option),\n 'tw-text-gray-400 tw-cursor-not-allowed': option.disabled,\n 'cide-select-tree-option': context?.treeView?.enabled\n }\" class=\"cide-select-option\" [style.white-space]=\"context?.treeView?.enabled ? 'pre' : 'normal'\" [style.font-family]=\"context?.treeView?.enabled ? 'monospace' : 'inherit'\">\n {{ context?.getOptionLabel(option) }}\n </button>\n }\n }\n\n <!-- No options message -->\n @if (!context?.loading && context?.options.length === 0) {\n <div class=\"tw-px-3 tw-py-2 tw-text-sm tw-text-gray-500 tw-italic\">\n {{ context?.searchable && context?.searchTerm ? 'No options found' : 'No options available' }}\n </div>\n }\n </div>\n </div>\n</ng-template>", styles: [".cide-select{position:relative;width:100%}.cide-select .cide-select-button{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:transparent;transition:all .2s ease-in-out;cursor:pointer;outline:none}.cide-select .cide-select-button:disabled{cursor:not-allowed}.cide-select .cide-select-value{flex:1;text-align:left}.cide-select .cide-select-dropdown{position:absolute;left:0;right:0;z-index:1000;background-color:#fff;border:1px solid var(--cide-input-border);border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-height:15rem;overflow-y:auto}.cide-select .cide-select-dropdown .cide-select-option{display:block;width:100%;text-align:left;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-in-out;border:none;background:transparent;outline:none}.cide-select .cide-select-dropdown .cide-select-option:hover:not(:disabled){background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:focus{background-color:#f3f4f6}.cide-select .cide-select-dropdown .cide-select-option:disabled{cursor:not-allowed}.cide-select-dropdown-portal{width:auto!important;min-width:200px;max-width:80vw;word-wrap:break-word;overflow-wrap:break-word}.cide-select-dropdown-portal .tw-py-1{min-width:0}.cide-select-dropdown-portal .cide-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
|
|
2816
2816
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { optionComponents: [{
|
|
2817
2817
|
type: ContentChildren,
|
|
2818
2818
|
args: [CideSelectOptionComponent]
|
|
@@ -9024,7 +9024,7 @@ class CideEleConfirmationModalComponent {
|
|
|
9024
9024
|
</button>
|
|
9025
9025
|
</div>
|
|
9026
9026
|
</div>
|
|
9027
|
-
`, isInline: true, styles: [".confirmation-backdrop{position:fixed;inset:0;background-color:#
|
|
9027
|
+
`, isInline: true, styles: [".confirmation-backdrop{position:fixed;inset:0;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000;display:flex;align-items:center;justify-content:center}[data-theme=dark] .confirmation-backdrop,.dark-mode .confirmation-backdrop{background-color:#000c}.confirmation-modal{background:var(--cide-ele-bg-primary, #ffffff);border-radius:12px;box-shadow:var(--cide-ele-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04));max-width:480px;width:90%;max-height:90vh;overflow:hidden;z-index:10001;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid var(--cide-ele-border-primary, #e5e7eb)}.modal-header{padding:24px 24px 16px;border-bottom:1px solid var(--cide-ele-border-primary, #e5e7eb)}.header-content{display:flex;align-items:center;gap:16px}.icon-container{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-container.danger{background-color:var(--cide-ele-error-light, #fef2f2);color:var(--cide-ele-error, #dc2626)}.icon-container.warning{background-color:var(--cide-ele-warning-light, #fffbeb);color:var(--cide-ele-warning, #d97706)}.icon-container.info{background-color:var(--cide-ele-info-light, #eff6ff);color:var(--cide-ele-info, #2563eb)}.icon-container.success{background-color:var(--cide-ele-success-light, #f0fdf4);color:var(--cide-ele-success, #16a34a)}.modal-title{margin:0;font-size:20px;font-weight:600;color:var(--cide-ele-text-primary, #111827);line-height:1.4}.modal-body{padding:16px 24px 24px}.modal-message{margin:0 0 16px;font-size:16px;line-height:1.5;color:var(--cide-ele-text-secondary, #6b7280)}.custom-content{margin-top:16px;padding-top:16px;border-top:1px solid var(--cide-ele-border-primary, #f3f4f6)}.modal-footer{padding:16px 24px 24px;display:flex;gap:12px;justify-content:flex-end;border-top:1px solid var(--cide-ele-border-primary, #e5e7eb)}.btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;min-width:80px}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-secondary{background-color:var(--cide-ele-bg-secondary, #f9fafb);color:var(--cide-ele-text-primary, #374151);border:1px solid var(--cide-ele-border-secondary, #d1d5db)}.btn-secondary:hover{background-color:var(--cide-ele-bg-hover, #f3f4f6);border-color:var(--cide-ele-border-hover, #9ca3af)}.btn-primary{background-color:var(--cide-ele-brand-primary, #2563eb);color:#fff}.btn-primary:hover{background-color:var(--cide-ele-brand-primary-hover, #1d4ed8)}.btn-danger{background-color:var(--cide-ele-error, #dc2626);color:#fff}.btn-danger:hover{background-color:#b91c1c}.btn-warning{background-color:var(--cide-ele-warning, #d97706);color:#fff}.btn-warning:hover{background-color:#b45309}.btn-success{background-color:var(--cide-ele-success, #16a34a);color:#fff}.btn-success:hover{background-color:#15803d}@media (max-width: 640px){.confirmation-modal{width:95%;margin:20px}.modal-header{padding:20px 20px 12px}.modal-body{padding:12px 20px 20px}.modal-footer{padding:12px 20px 20px;flex-direction:column-reverse}.btn{width:100%;justify-content:center}.header-content{flex-direction:column;text-align:center;gap:12px}.modal-title{font-size:18px}}.btn:focus{outline:2px solid var(--cide-ele-brand-primary, #2563eb);outline-offset:2px}.modal-enter{opacity:0;transform:scale(.95) translateY(-10px)}.modal-enter-active{opacity:1;transform:scale(1) translateY(0);transition:all .2s ease-out}.modal-exit{opacity:1;transform:scale(1) translateY(0)}.modal-exit-active{opacity:0;transform:scale(.95) translateY(-10px);transition:all .15s ease-in}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
9028
9028
|
}
|
|
9029
9029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleConfirmationModalComponent, decorators: [{
|
|
9030
9030
|
type: Component,
|
|
@@ -9085,7 +9085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
9085
9085
|
</button>
|
|
9086
9086
|
</div>
|
|
9087
9087
|
</div>
|
|
9088
|
-
`, styles: [".confirmation-backdrop{position:fixed;inset:0;background-color:#
|
|
9088
|
+
`, styles: [".confirmation-backdrop{position:fixed;inset:0;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000;display:flex;align-items:center;justify-content:center}[data-theme=dark] .confirmation-backdrop,.dark-mode .confirmation-backdrop{background-color:#000c}.confirmation-modal{background:var(--cide-ele-bg-primary, #ffffff);border-radius:12px;box-shadow:var(--cide-ele-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04));max-width:480px;width:90%;max-height:90vh;overflow:hidden;z-index:10001;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid var(--cide-ele-border-primary, #e5e7eb)}.modal-header{padding:24px 24px 16px;border-bottom:1px solid var(--cide-ele-border-primary, #e5e7eb)}.header-content{display:flex;align-items:center;gap:16px}.icon-container{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-container.danger{background-color:var(--cide-ele-error-light, #fef2f2);color:var(--cide-ele-error, #dc2626)}.icon-container.warning{background-color:var(--cide-ele-warning-light, #fffbeb);color:var(--cide-ele-warning, #d97706)}.icon-container.info{background-color:var(--cide-ele-info-light, #eff6ff);color:var(--cide-ele-info, #2563eb)}.icon-container.success{background-color:var(--cide-ele-success-light, #f0fdf4);color:var(--cide-ele-success, #16a34a)}.modal-title{margin:0;font-size:20px;font-weight:600;color:var(--cide-ele-text-primary, #111827);line-height:1.4}.modal-body{padding:16px 24px 24px}.modal-message{margin:0 0 16px;font-size:16px;line-height:1.5;color:var(--cide-ele-text-secondary, #6b7280)}.custom-content{margin-top:16px;padding-top:16px;border-top:1px solid var(--cide-ele-border-primary, #f3f4f6)}.modal-footer{padding:16px 24px 24px;display:flex;gap:12px;justify-content:flex-end;border-top:1px solid var(--cide-ele-border-primary, #e5e7eb)}.btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;min-width:80px}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-secondary{background-color:var(--cide-ele-bg-secondary, #f9fafb);color:var(--cide-ele-text-primary, #374151);border:1px solid var(--cide-ele-border-secondary, #d1d5db)}.btn-secondary:hover{background-color:var(--cide-ele-bg-hover, #f3f4f6);border-color:var(--cide-ele-border-hover, #9ca3af)}.btn-primary{background-color:var(--cide-ele-brand-primary, #2563eb);color:#fff}.btn-primary:hover{background-color:var(--cide-ele-brand-primary-hover, #1d4ed8)}.btn-danger{background-color:var(--cide-ele-error, #dc2626);color:#fff}.btn-danger:hover{background-color:#b91c1c}.btn-warning{background-color:var(--cide-ele-warning, #d97706);color:#fff}.btn-warning:hover{background-color:#b45309}.btn-success{background-color:var(--cide-ele-success, #16a34a);color:#fff}.btn-success:hover{background-color:#15803d}@media (max-width: 640px){.confirmation-modal{width:95%;margin:20px}.modal-header{padding:20px 20px 12px}.modal-body{padding:12px 20px 20px}.modal-footer{padding:12px 20px 20px;flex-direction:column-reverse}.btn{width:100%;justify-content:center}.header-content{flex-direction:column;text-align:center;gap:12px}.modal-title{font-size:18px}}.btn:focus{outline:2px solid var(--cide-ele-brand-primary, #2563eb);outline-offset:2px}.modal-enter{opacity:0;transform:scale(.95) translateY(-10px)}.modal-enter-active{opacity:1;transform:scale(1) translateY(0);transition:all .2s ease-out}.modal-exit{opacity:1;transform:scale(1) translateY(0)}.modal-exit-active{opacity:0;transform:scale(.95) translateY(-10px);transition:all .15s ease-in}\n"] }]
|
|
9089
9089
|
}] });
|
|
9090
9090
|
|
|
9091
9091
|
class CideEleToastNotificationComponent {
|
|
@@ -9109,73 +9109,73 @@ class CideEleToastNotificationComponent {
|
|
|
9109
9109
|
return notification.id;
|
|
9110
9110
|
}
|
|
9111
9111
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleToastNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9112
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideEleToastNotificationComponent, isStandalone: true, selector: "cide-ele-toast-notification", ngImport: i0, template: `
|
|
9113
|
-
<!-- Toast Container -->
|
|
9114
|
-
<div class="toast-container">
|
|
9115
|
-
<div
|
|
9116
|
-
*ngFor="let notification of activeNotifications(); trackBy: trackByNotification"
|
|
9117
|
-
class="toast-notification"
|
|
9118
|
-
[class]="getToastClass(notification)"
|
|
9119
|
-
[@toastAnimation]>
|
|
9120
|
-
|
|
9121
|
-
<!-- Toast Content -->
|
|
9122
|
-
<div class="toast-content">
|
|
9123
|
-
<!-- Icon -->
|
|
9124
|
-
<div class="toast-icon" [class]="getIconClass(notification.type)">
|
|
9125
|
-
<cide-ele-icon size="sm">
|
|
9126
|
-
{{ notification.icon }}
|
|
9127
|
-
</cide-ele-icon>
|
|
9128
|
-
</div>
|
|
9129
|
-
|
|
9130
|
-
<!-- Text Content -->
|
|
9131
|
-
<div class="toast-text">
|
|
9132
|
-
<div *ngIf="notification.title" class="toast-title">
|
|
9133
|
-
{{ notification.title }}
|
|
9134
|
-
</div>
|
|
9135
|
-
<div class="toast-message">
|
|
9136
|
-
{{ notification.message }}
|
|
9137
|
-
</div>
|
|
9138
|
-
</div>
|
|
9139
|
-
|
|
9140
|
-
<!-- Close Button -->
|
|
9141
|
-
<button
|
|
9142
|
-
type="button"
|
|
9143
|
-
class="toast-close"
|
|
9144
|
-
(click)="removeNotification(notification.id)"
|
|
9145
|
-
aria-label="Close notification">
|
|
9146
|
-
<cide-ele-icon size="xs">close</cide-ele-icon>
|
|
9147
|
-
</button>
|
|
9148
|
-
</div>
|
|
9149
|
-
|
|
9150
|
-
<!-- Undo Button -->
|
|
9151
|
-
<div *ngIf="notification.showUndo" class="toast-actions">
|
|
9152
|
-
<button
|
|
9153
|
-
type="button"
|
|
9154
|
-
class="toast-undo-btn"
|
|
9155
|
-
(click)="executeUndo(notification.id)">
|
|
9156
|
-
{{ notification.undoText }}
|
|
9157
|
-
</button>
|
|
9158
|
-
</div>
|
|
9159
|
-
|
|
9160
|
-
<!-- Progress Bar -->
|
|
9161
|
-
<div
|
|
9162
|
-
*ngIf="notification.duration > 0 && !notification.showProgress"
|
|
9163
|
-
class="toast-progress"
|
|
9164
|
-
[style.animation-duration]="notification.duration + 'ms'">
|
|
9165
|
-
</div>
|
|
9166
|
-
|
|
9167
|
-
<!-- Custom Progress Bar -->
|
|
9168
|
-
<div
|
|
9169
|
-
*ngIf="notification.showProgress"
|
|
9170
|
-
class="toast-custom-progress">
|
|
9171
|
-
<div
|
|
9172
|
-
class="toast-custom-progress-bar"
|
|
9173
|
-
[style.width.%]="notification.progress || 0">
|
|
9174
|
-
</div>
|
|
9175
|
-
</div>
|
|
9176
|
-
</div>
|
|
9177
|
-
</div>
|
|
9178
|
-
`, isInline: true, styles: [".toast-container{position:fixed;top:80px;right:20px;z-index:9990;display:flex;flex-direction:column;gap:12px;max-width:400px;width:100%}.toast-notification{background
|
|
9112
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideEleToastNotificationComponent, isStandalone: true, selector: "cide-ele-toast-notification", ngImport: i0, template: `
|
|
9113
|
+
<!-- Toast Container -->
|
|
9114
|
+
<div class="toast-container">
|
|
9115
|
+
<div
|
|
9116
|
+
*ngFor="let notification of activeNotifications(); trackBy: trackByNotification"
|
|
9117
|
+
class="toast-notification"
|
|
9118
|
+
[class]="getToastClass(notification)"
|
|
9119
|
+
[@toastAnimation]>
|
|
9120
|
+
|
|
9121
|
+
<!-- Toast Content -->
|
|
9122
|
+
<div class="toast-content">
|
|
9123
|
+
<!-- Icon -->
|
|
9124
|
+
<div class="toast-icon" [class]="getIconClass(notification.type)">
|
|
9125
|
+
<cide-ele-icon size="sm">
|
|
9126
|
+
{{ notification.icon }}
|
|
9127
|
+
</cide-ele-icon>
|
|
9128
|
+
</div>
|
|
9129
|
+
|
|
9130
|
+
<!-- Text Content -->
|
|
9131
|
+
<div class="toast-text">
|
|
9132
|
+
<div *ngIf="notification.title" class="toast-title">
|
|
9133
|
+
{{ notification.title }}
|
|
9134
|
+
</div>
|
|
9135
|
+
<div class="toast-message">
|
|
9136
|
+
{{ notification.message }}
|
|
9137
|
+
</div>
|
|
9138
|
+
</div>
|
|
9139
|
+
|
|
9140
|
+
<!-- Close Button -->
|
|
9141
|
+
<button
|
|
9142
|
+
type="button"
|
|
9143
|
+
class="toast-close"
|
|
9144
|
+
(click)="removeNotification(notification.id)"
|
|
9145
|
+
aria-label="Close notification">
|
|
9146
|
+
<cide-ele-icon size="xs">close</cide-ele-icon>
|
|
9147
|
+
</button>
|
|
9148
|
+
</div>
|
|
9149
|
+
|
|
9150
|
+
<!-- Undo Button -->
|
|
9151
|
+
<div *ngIf="notification.showUndo" class="toast-actions">
|
|
9152
|
+
<button
|
|
9153
|
+
type="button"
|
|
9154
|
+
class="toast-undo-btn"
|
|
9155
|
+
(click)="executeUndo(notification.id)">
|
|
9156
|
+
{{ notification.undoText }}
|
|
9157
|
+
</button>
|
|
9158
|
+
</div>
|
|
9159
|
+
|
|
9160
|
+
<!-- Progress Bar -->
|
|
9161
|
+
<div
|
|
9162
|
+
*ngIf="notification.duration > 0 && !notification.showProgress"
|
|
9163
|
+
class="toast-progress"
|
|
9164
|
+
[style.animation-duration]="notification.duration + 'ms'">
|
|
9165
|
+
</div>
|
|
9166
|
+
|
|
9167
|
+
<!-- Custom Progress Bar -->
|
|
9168
|
+
<div
|
|
9169
|
+
*ngIf="notification.showProgress"
|
|
9170
|
+
class="toast-custom-progress">
|
|
9171
|
+
<div
|
|
9172
|
+
class="toast-custom-progress-bar"
|
|
9173
|
+
[style.width.%]="notification.progress || 0">
|
|
9174
|
+
</div>
|
|
9175
|
+
</div>
|
|
9176
|
+
</div>
|
|
9177
|
+
</div>
|
|
9178
|
+
`, isInline: true, styles: [".toast-container{position:fixed;top:80px;right:20px;z-index:9990;display:flex;flex-direction:column;gap:12px;max-width:400px;width:100%}.toast-notification{background:var(--cide-ele-bg-primary, #ffffff);border-radius:8px;box-shadow:var(--cide-ele-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05));border:1px solid var(--cide-ele-border-primary, #e5e7eb);overflow:hidden;position:relative;animation:slideInRight .3s ease-out}.toast-notification.success{border-left:4px solid var(--cide-ele-success, #16a34a)}.toast-notification.error{border-left:4px solid var(--cide-ele-error, #dc2626)}.toast-notification.warning{border-left:4px solid var(--cide-ele-warning, #d97706)}.toast-notification.info{border-left:4px solid var(--cide-ele-info, #2563eb)}.toast-content{display:flex;align-items:flex-start;gap:12px;padding:16px}.toast-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.toast-icon.success{background-color:var(--cide-ele-success-light, #f0fdf4);color:var(--cide-ele-success, #16a34a)}.toast-icon.error{background-color:var(--cide-ele-error-light, #fef2f2);color:var(--cide-ele-error, #dc2626)}.toast-icon.warning{background-color:var(--cide-ele-warning-light, #fffbeb);color:var(--cide-ele-warning, #d97706)}.toast-icon.info{background-color:var(--cide-ele-info-light, #eff6ff);color:var(--cide-ele-info, #2563eb)}.toast-text{flex:1;min-width:0}.toast-title{font-size:14px;font-weight:600;color:var(--cide-ele-text-primary, #111827);margin-bottom:4px;line-height:1.4}.toast-message{font-size:14px;color:var(--cide-ele-text-secondary, #6b7280);line-height:1.4}.toast-close{background:none;border:none;color:var(--cide-ele-text-tertiary, #9ca3af);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.toast-close:hover{background-color:var(--cide-ele-bg-hover, #f3f4f6);color:var(--cide-ele-text-secondary, #6b7280)}.toast-actions{padding:0 16px 16px;display:flex;justify-content:flex-end}.toast-undo-btn{background:none;border:none;color:var(--cide-ele-brand-primary, #2563eb);font-size:14px;font-weight:500;cursor:pointer;padding:8px 12px;border-radius:6px;transition:all .2s ease}.toast-undo-btn:hover{background-color:var(--cide-ele-brand-primary-light, #eff6ff)}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background-color:var(--cide-ele-border-primary, #e5e7eb);animation:progressShrink linear forwards}.toast-notification.success .toast-progress{background-color:var(--cide-ele-success, #16a34a)}.toast-notification.error .toast-progress{background-color:var(--cide-ele-error, #dc2626)}.toast-notification.warning .toast-progress{background-color:var(--cide-ele-warning, #d97706)}.toast-notification.info .toast-progress{background-color:var(--cide-ele-info, #2563eb)}.toast-custom-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background-color:var(--cide-ele-border-primary, #e5e7eb);overflow:hidden}.toast-custom-progress-bar{height:100%;background-color:var(--cide-ele-info, #2563eb);transition:width .3s ease;border-radius:0 3px 0 0}.toast-notification.success .toast-custom-progress-bar{background-color:var(--cide-ele-success, #16a34a)}.toast-notification.error .toast-custom-progress-bar{background-color:var(--cide-ele-error, #dc2626)}.toast-notification.warning .toast-custom-progress-bar{background-color:var(--cide-ele-warning, #d97706)}.toast-notification.info .toast-custom-progress-bar{background-color:var(--cide-ele-info, #2563eb)}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes progressShrink{0%{width:100%}to{width:0%}}@media (max-width: 640px){.toast-container{top:80px;right:10px;left:10px;max-width:none}.toast-notification{border-radius:6px}.toast-content{padding:12px}.toast-actions{padding:0 12px 12px}}.toast-close:focus,.toast-undo-btn:focus{outline:2px solid var(--cide-ele-brand-primary, #2563eb);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }], animations: [
|
|
9179
9179
|
trigger('toastAnimation', [
|
|
9180
9180
|
state('void', style({
|
|
9181
9181
|
transform: 'translateX(100%)',
|
|
@@ -9192,72 +9192,72 @@ class CideEleToastNotificationComponent {
|
|
|
9192
9192
|
}
|
|
9193
9193
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleToastNotificationComponent, decorators: [{
|
|
9194
9194
|
type: Component,
|
|
9195
|
-
args: [{ selector: 'cide-ele-toast-notification', standalone: true, imports: [CommonModule, CideIconComponent], template: `
|
|
9196
|
-
<!-- Toast Container -->
|
|
9197
|
-
<div class="toast-container">
|
|
9198
|
-
<div
|
|
9199
|
-
*ngFor="let notification of activeNotifications(); trackBy: trackByNotification"
|
|
9200
|
-
class="toast-notification"
|
|
9201
|
-
[class]="getToastClass(notification)"
|
|
9202
|
-
[@toastAnimation]>
|
|
9203
|
-
|
|
9204
|
-
<!-- Toast Content -->
|
|
9205
|
-
<div class="toast-content">
|
|
9206
|
-
<!-- Icon -->
|
|
9207
|
-
<div class="toast-icon" [class]="getIconClass(notification.type)">
|
|
9208
|
-
<cide-ele-icon size="sm">
|
|
9209
|
-
{{ notification.icon }}
|
|
9210
|
-
</cide-ele-icon>
|
|
9211
|
-
</div>
|
|
9212
|
-
|
|
9213
|
-
<!-- Text Content -->
|
|
9214
|
-
<div class="toast-text">
|
|
9215
|
-
<div *ngIf="notification.title" class="toast-title">
|
|
9216
|
-
{{ notification.title }}
|
|
9217
|
-
</div>
|
|
9218
|
-
<div class="toast-message">
|
|
9219
|
-
{{ notification.message }}
|
|
9220
|
-
</div>
|
|
9221
|
-
</div>
|
|
9222
|
-
|
|
9223
|
-
<!-- Close Button -->
|
|
9224
|
-
<button
|
|
9225
|
-
type="button"
|
|
9226
|
-
class="toast-close"
|
|
9227
|
-
(click)="removeNotification(notification.id)"
|
|
9228
|
-
aria-label="Close notification">
|
|
9229
|
-
<cide-ele-icon size="xs">close</cide-ele-icon>
|
|
9230
|
-
</button>
|
|
9231
|
-
</div>
|
|
9232
|
-
|
|
9233
|
-
<!-- Undo Button -->
|
|
9234
|
-
<div *ngIf="notification.showUndo" class="toast-actions">
|
|
9235
|
-
<button
|
|
9236
|
-
type="button"
|
|
9237
|
-
class="toast-undo-btn"
|
|
9238
|
-
(click)="executeUndo(notification.id)">
|
|
9239
|
-
{{ notification.undoText }}
|
|
9240
|
-
</button>
|
|
9241
|
-
</div>
|
|
9242
|
-
|
|
9243
|
-
<!-- Progress Bar -->
|
|
9244
|
-
<div
|
|
9245
|
-
*ngIf="notification.duration > 0 && !notification.showProgress"
|
|
9246
|
-
class="toast-progress"
|
|
9247
|
-
[style.animation-duration]="notification.duration + 'ms'">
|
|
9248
|
-
</div>
|
|
9249
|
-
|
|
9250
|
-
<!-- Custom Progress Bar -->
|
|
9251
|
-
<div
|
|
9252
|
-
*ngIf="notification.showProgress"
|
|
9253
|
-
class="toast-custom-progress">
|
|
9254
|
-
<div
|
|
9255
|
-
class="toast-custom-progress-bar"
|
|
9256
|
-
[style.width.%]="notification.progress || 0">
|
|
9257
|
-
</div>
|
|
9258
|
-
</div>
|
|
9259
|
-
</div>
|
|
9260
|
-
</div>
|
|
9195
|
+
args: [{ selector: 'cide-ele-toast-notification', standalone: true, imports: [CommonModule, CideIconComponent], template: `
|
|
9196
|
+
<!-- Toast Container -->
|
|
9197
|
+
<div class="toast-container">
|
|
9198
|
+
<div
|
|
9199
|
+
*ngFor="let notification of activeNotifications(); trackBy: trackByNotification"
|
|
9200
|
+
class="toast-notification"
|
|
9201
|
+
[class]="getToastClass(notification)"
|
|
9202
|
+
[@toastAnimation]>
|
|
9203
|
+
|
|
9204
|
+
<!-- Toast Content -->
|
|
9205
|
+
<div class="toast-content">
|
|
9206
|
+
<!-- Icon -->
|
|
9207
|
+
<div class="toast-icon" [class]="getIconClass(notification.type)">
|
|
9208
|
+
<cide-ele-icon size="sm">
|
|
9209
|
+
{{ notification.icon }}
|
|
9210
|
+
</cide-ele-icon>
|
|
9211
|
+
</div>
|
|
9212
|
+
|
|
9213
|
+
<!-- Text Content -->
|
|
9214
|
+
<div class="toast-text">
|
|
9215
|
+
<div *ngIf="notification.title" class="toast-title">
|
|
9216
|
+
{{ notification.title }}
|
|
9217
|
+
</div>
|
|
9218
|
+
<div class="toast-message">
|
|
9219
|
+
{{ notification.message }}
|
|
9220
|
+
</div>
|
|
9221
|
+
</div>
|
|
9222
|
+
|
|
9223
|
+
<!-- Close Button -->
|
|
9224
|
+
<button
|
|
9225
|
+
type="button"
|
|
9226
|
+
class="toast-close"
|
|
9227
|
+
(click)="removeNotification(notification.id)"
|
|
9228
|
+
aria-label="Close notification">
|
|
9229
|
+
<cide-ele-icon size="xs">close</cide-ele-icon>
|
|
9230
|
+
</button>
|
|
9231
|
+
</div>
|
|
9232
|
+
|
|
9233
|
+
<!-- Undo Button -->
|
|
9234
|
+
<div *ngIf="notification.showUndo" class="toast-actions">
|
|
9235
|
+
<button
|
|
9236
|
+
type="button"
|
|
9237
|
+
class="toast-undo-btn"
|
|
9238
|
+
(click)="executeUndo(notification.id)">
|
|
9239
|
+
{{ notification.undoText }}
|
|
9240
|
+
</button>
|
|
9241
|
+
</div>
|
|
9242
|
+
|
|
9243
|
+
<!-- Progress Bar -->
|
|
9244
|
+
<div
|
|
9245
|
+
*ngIf="notification.duration > 0 && !notification.showProgress"
|
|
9246
|
+
class="toast-progress"
|
|
9247
|
+
[style.animation-duration]="notification.duration + 'ms'">
|
|
9248
|
+
</div>
|
|
9249
|
+
|
|
9250
|
+
<!-- Custom Progress Bar -->
|
|
9251
|
+
<div
|
|
9252
|
+
*ngIf="notification.showProgress"
|
|
9253
|
+
class="toast-custom-progress">
|
|
9254
|
+
<div
|
|
9255
|
+
class="toast-custom-progress-bar"
|
|
9256
|
+
[style.width.%]="notification.progress || 0">
|
|
9257
|
+
</div>
|
|
9258
|
+
</div>
|
|
9259
|
+
</div>
|
|
9260
|
+
</div>
|
|
9261
9261
|
`, animations: [
|
|
9262
9262
|
trigger('toastAnimation', [
|
|
9263
9263
|
state('void', style({
|
|
@@ -9271,7 +9271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
9271
9271
|
transition('void => *', animate('300ms ease-out')),
|
|
9272
9272
|
transition('* => void', animate('200ms ease-in'))
|
|
9273
9273
|
])
|
|
9274
|
-
], styles: [".toast-container{position:fixed;top:80px;right:20px;z-index:9990;display:flex;flex-direction:column;gap:12px;max-width:400px;width:100%}.toast-notification{background
|
|
9274
|
+
], styles: [".toast-container{position:fixed;top:80px;right:20px;z-index:9990;display:flex;flex-direction:column;gap:12px;max-width:400px;width:100%}.toast-notification{background:var(--cide-ele-bg-primary, #ffffff);border-radius:8px;box-shadow:var(--cide-ele-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05));border:1px solid var(--cide-ele-border-primary, #e5e7eb);overflow:hidden;position:relative;animation:slideInRight .3s ease-out}.toast-notification.success{border-left:4px solid var(--cide-ele-success, #16a34a)}.toast-notification.error{border-left:4px solid var(--cide-ele-error, #dc2626)}.toast-notification.warning{border-left:4px solid var(--cide-ele-warning, #d97706)}.toast-notification.info{border-left:4px solid var(--cide-ele-info, #2563eb)}.toast-content{display:flex;align-items:flex-start;gap:12px;padding:16px}.toast-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}.toast-icon.success{background-color:var(--cide-ele-success-light, #f0fdf4);color:var(--cide-ele-success, #16a34a)}.toast-icon.error{background-color:var(--cide-ele-error-light, #fef2f2);color:var(--cide-ele-error, #dc2626)}.toast-icon.warning{background-color:var(--cide-ele-warning-light, #fffbeb);color:var(--cide-ele-warning, #d97706)}.toast-icon.info{background-color:var(--cide-ele-info-light, #eff6ff);color:var(--cide-ele-info, #2563eb)}.toast-text{flex:1;min-width:0}.toast-title{font-size:14px;font-weight:600;color:var(--cide-ele-text-primary, #111827);margin-bottom:4px;line-height:1.4}.toast-message{font-size:14px;color:var(--cide-ele-text-secondary, #6b7280);line-height:1.4}.toast-close{background:none;border:none;color:var(--cide-ele-text-tertiary, #9ca3af);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.toast-close:hover{background-color:var(--cide-ele-bg-hover, #f3f4f6);color:var(--cide-ele-text-secondary, #6b7280)}.toast-actions{padding:0 16px 16px;display:flex;justify-content:flex-end}.toast-undo-btn{background:none;border:none;color:var(--cide-ele-brand-primary, #2563eb);font-size:14px;font-weight:500;cursor:pointer;padding:8px 12px;border-radius:6px;transition:all .2s ease}.toast-undo-btn:hover{background-color:var(--cide-ele-brand-primary-light, #eff6ff)}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background-color:var(--cide-ele-border-primary, #e5e7eb);animation:progressShrink linear forwards}.toast-notification.success .toast-progress{background-color:var(--cide-ele-success, #16a34a)}.toast-notification.error .toast-progress{background-color:var(--cide-ele-error, #dc2626)}.toast-notification.warning .toast-progress{background-color:var(--cide-ele-warning, #d97706)}.toast-notification.info .toast-progress{background-color:var(--cide-ele-info, #2563eb)}.toast-custom-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background-color:var(--cide-ele-border-primary, #e5e7eb);overflow:hidden}.toast-custom-progress-bar{height:100%;background-color:var(--cide-ele-info, #2563eb);transition:width .3s ease;border-radius:0 3px 0 0}.toast-notification.success .toast-custom-progress-bar{background-color:var(--cide-ele-success, #16a34a)}.toast-notification.error .toast-custom-progress-bar{background-color:var(--cide-ele-error, #dc2626)}.toast-notification.warning .toast-custom-progress-bar{background-color:var(--cide-ele-warning, #d97706)}.toast-notification.info .toast-custom-progress-bar{background-color:var(--cide-ele-info, #2563eb)}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes progressShrink{0%{width:100%}to{width:0%}}@media (max-width: 640px){.toast-container{top:80px;right:10px;left:10px;max-width:none}.toast-notification{border-radius:6px}.toast-content{padding:12px}.toast-actions{padding:0 12px 12px}}.toast-close:focus,.toast-undo-btn:focus{outline:2px solid var(--cide-ele-brand-primary, #2563eb);outline-offset:2px}\n"] }]
|
|
9275
9275
|
}] });
|
|
9276
9276
|
|
|
9277
9277
|
class CideEleGlobalNotificationsComponent {
|
|
@@ -9590,16 +9590,19 @@ class CideEleDataGridComponent {
|
|
|
9590
9590
|
}
|
|
9591
9591
|
/**
|
|
9592
9592
|
* Initialize default grouping for columns with groupable: true
|
|
9593
|
+
* Only groups visible columns (not hidden ones)
|
|
9593
9594
|
*/
|
|
9594
9595
|
initializeDefaultGrouping() {
|
|
9595
9596
|
// Only initialize if groupedColumns is empty (not already set)
|
|
9596
9597
|
if (this.groupedColumns().length === 0) {
|
|
9597
9598
|
const columns = this.mergedConfig().columns || [];
|
|
9599
|
+
const hidden = this.hiddenColumns();
|
|
9600
|
+
// Only auto-group visible columns that are groupable (exclude hidden columns)
|
|
9598
9601
|
const groupableColumns = columns
|
|
9599
|
-
.filter(col => col.groupable === true)
|
|
9602
|
+
.filter(col => col.groupable === true && !col.hidden && !hidden.includes(col.key))
|
|
9600
9603
|
.map(col => col.key);
|
|
9601
9604
|
if (groupableColumns.length > 0) {
|
|
9602
|
-
console.log('🔍 Auto-applying grouping for columns:', groupableColumns);
|
|
9605
|
+
console.log('🔍 Auto-applying grouping for visible columns:', groupableColumns);
|
|
9603
9606
|
this.groupedColumns.set(groupableColumns);
|
|
9604
9607
|
// Reset auto-expand flag so groups will be expanded on first render
|
|
9605
9608
|
this.hasAutoExpandedGroups = false;
|
|
@@ -12091,7 +12094,7 @@ class CideEleDataGridComponent {
|
|
|
12091
12094
|
return String(value);
|
|
12092
12095
|
}
|
|
12093
12096
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12094
|
-
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 columns; track column.key) {\n <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n [ngClass]=\"[\n getColumnWidthClass(column.width),\n getColumnMaxWidthClass(column.width)\n ]\"\n [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_less' : 'expand_more' }}\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 columns; track column.key) {\n <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n [ngClass]=\"[\n getColumnWidthClass(column.width),\n getColumnMaxWidthClass(column.width),\n mergedConfig().cellClass || '',\n column.align === 'center' ? 'tw-text-center' : '',\n column.align === 'right' ? 'tw-text-right' : '',\n column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n ]\"\n [style.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]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"></path>\n </svg>\n <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n @if (searchQuery()) {\n No results match your search criteria.\n } @else {\n There are no items to display.\n }\n </p>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n <!-- Pagination Section -->\n @if (paginationConfig.enabled && totalItems() > 0) {\n <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n [class.tw-opacity-60]=\"isRefreshing()\">\n \n <!-- Results Info and Page Size -->\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-1 sm:tw-space-y-0\">\n \n <!-- Results Info -->\n @if (paginationConfig.showPageInfo) {\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <p class=\"tw-text-sm tw-text-gray-700\">\n Showing {{ getItemRangeText() }} results\n </p>\n \n <!-- Page Size Selector -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-500\">view_list</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n <div class=\"tw-w-16 tw-relative\">\n <cide-ele-select\n [labelHide]=\"true\"\n [ngModel]=\"pageSize()\"\n (ngModelChange)=\"updatePageSize($event)\"\n [options]=\"getPageSizeOptions()\"\n [disabled]=\"isRefreshing()\"\n fill=\"outline\"\n size=\"xs\"\n class=\"tw-z-30\">\n </cide-ele-select>\n </div>\n </div>\n </div>\n }\n\n <!-- Pagination Controls -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n \n <!-- Previous/Next and Page Numbers -->\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n \n <!-- First Page -->\n <button\n type=\"button\"\n (click)=\"onPageChange(1)\"\n [disabled]=\"currentPage() === 1 || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"First page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">first_page</cide-ele-icon>\n </button>\n \n <!-- Previous Page -->\n <button\n type=\"button\"\n (click)=\"previousPage()\"\n [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Previous page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_left</cide-ele-icon>\n </button>\n \n <!-- Page Numbers -->\n @for (page of getEnhancedPageNumbers(); track page) {\n @if (page === '...') {\n <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n } @else {\n <button\n type=\"button\"\n (click)=\"onPageChange(page)\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n [ngClass]=\"{\n 'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700': currentPage() === page,\n 'tw-bg-white tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n }\"\n [title]=\"'Page ' + page\">\n {{ page }}\n </button>\n }\n }\n \n <!-- Next Page -->\n <button\n type=\"button\"\n (click)=\"nextPage()\"\n [disabled]=\"!hasNextPage() || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Next page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_right</cide-ele-icon>\n </button>\n \n <!-- Last Page -->\n <button\n type=\"button\"\n (click)=\"onPageChange(totalPages())\"\n [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Last page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">last_page</cide-ele-icon>\n </button>\n \n </div>\n\n <!-- Quick Jump and Refresh -->\n @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n <div class=\"tw-flex tw-items-center tw-space-x-1 tw-border-l tw-border-gray-200 tw-pl-2\">\n \n <!-- Quick Jump -->\n @if (paginationConfig.showQuickJump) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n <div class=\"tw-w-16\">\n <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n [disabled]=\"isRefreshing()\"\n size=\"xs\"\n (keydown.enter)=\"onJumpToPage()\">\n </cide-ele-input>\n </div>\n <button\n type=\"button\"\n (click)=\"onJumpToPage()\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-200 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Go to page\">\n Go\n </button>\n </div>\n }\n \n <!-- Refresh Button -->\n @if (paginationConfig.showRefresh) {\n <button\n type=\"button\"\n (click)=\"onRefresh()\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Refresh\">\n @if (isRefreshing()) {\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4 tw-animate-spin\">refresh</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">refresh</cide-ele-icon>\n }\n </button>\n }\n </div>\n }\n \n </div>\n </div>\n </div>\n }\n\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"] }] });
|
|
12097
|
+
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"] }] });
|
|
12095
12098
|
}
|
|
12096
12099
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleDataGridComponent, decorators: [{
|
|
12097
12100
|
type: Component,
|
|
@@ -12103,7 +12106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
12103
12106
|
CideSelectComponent,
|
|
12104
12107
|
CideIconComponent,
|
|
12105
12108
|
CideEleButtonComponent
|
|
12106
|
-
], 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 columns; track column.key) {\n <td class=\"tw-px-3 tw-py-2 tw-whitespace-nowrap\"\n [ngClass]=\"[\n getColumnWidthClass(column.width),\n getColumnMaxWidthClass(column.width)\n ]\"\n [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_less' : 'expand_more' }}\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 columns; track column.key) {\n <td class=\"tw-pr-3 tw-py-1 tw-relative\"\n [ngClass]=\"[\n getColumnWidthClass(column.width),\n getColumnMaxWidthClass(column.width),\n mergedConfig().cellClass || '',\n column.align === 'center' ? 'tw-text-center' : '',\n column.align === 'right' ? 'tw-text-right' : '',\n column.truncate !== false ? 'tw-whitespace-nowrap' : 'tw-whitespace-normal'\n ]\"\n [style.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]=\"columns.length\" class=\"tw-px-6 tw-py-22 tw-text-center tw-h-full tw-align-middle\">\n <div class=\"tw-text-gray-500 tw-flex tw-flex-col tw-items-center tw-justify-center tw-min-h-[300px]\">\n <svg class=\"tw-mx-auto tw-h-12 tw-w-12 tw-text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"></path>\n </svg>\n <h3 class=\"tw-mt-2 tw-text-sm tw-font-medium tw-text-gray-900\">No data found</h3>\n <p class=\"tw-mt-1 tw-text-sm tw-text-gray-500\">\n @if (searchQuery()) {\n No results match your search criteria.\n } @else {\n There are no items to display.\n }\n </p>\n </div>\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n </div>\n\n <!-- Pagination Section -->\n @if (paginationConfig.enabled && totalItems() > 0) {\n <div class=\"tw-px-3 tw-py-0 tw-border-t tw-border-gray-200 tw-bg-white tw-relative tw-z-20\"\n [class.tw-opacity-60]=\"isRefreshing()\">\n \n <!-- Results Info and Page Size -->\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-1 sm:tw-space-y-0\">\n \n <!-- Results Info -->\n @if (paginationConfig.showPageInfo) {\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <p class=\"tw-text-sm tw-text-gray-700\">\n Showing {{ getItemRangeText() }} results\n </p>\n \n <!-- Page Size Selector -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-500\">view_list</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-gray-700\">Per page:</span>\n <div class=\"tw-w-16 tw-relative\">\n <cide-ele-select\n [labelHide]=\"true\"\n [ngModel]=\"pageSize()\"\n (ngModelChange)=\"updatePageSize($event)\"\n [options]=\"getPageSizeOptions()\"\n [disabled]=\"isRefreshing()\"\n fill=\"outline\"\n size=\"xs\"\n class=\"tw-z-30\">\n </cide-ele-select>\n </div>\n </div>\n </div>\n }\n\n <!-- Pagination Controls -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n \n <!-- Previous/Next and Page Numbers -->\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n \n <!-- First Page -->\n <button\n type=\"button\"\n (click)=\"onPageChange(1)\"\n [disabled]=\"currentPage() === 1 || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"First page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">first_page</cide-ele-icon>\n </button>\n \n <!-- Previous Page -->\n <button\n type=\"button\"\n (click)=\"previousPage()\"\n [disabled]=\"!hasPreviousPage() || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Previous page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_left</cide-ele-icon>\n </button>\n \n <!-- Page Numbers -->\n @for (page of getEnhancedPageNumbers(); track page) {\n @if (page === '...') {\n <span class=\"tw-px-2 tw-py-2 tw-text-sm tw-text-gray-500\">...</span>\n } @else {\n <button\n type=\"button\"\n (click)=\"onPageChange(page)\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n [ngClass]=\"{\n 'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700': currentPage() === page,\n 'tw-bg-white tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-50': currentPage() !== page\n }\"\n [title]=\"'Page ' + page\">\n {{ page }}\n </button>\n }\n }\n \n <!-- Next Page -->\n <button\n type=\"button\"\n (click)=\"nextPage()\"\n [disabled]=\"!hasNextPage() || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Next page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">chevron_right</cide-ele-icon>\n </button>\n \n <!-- Last Page -->\n <button\n type=\"button\"\n (click)=\"onPageChange(totalPages())\"\n [disabled]=\"currentPage() === totalPages() || isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Last page\">\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">last_page</cide-ele-icon>\n </button>\n \n </div>\n\n <!-- Quick Jump and Refresh -->\n @if (paginationConfig.showQuickJump || paginationConfig.showRefresh) {\n <div class=\"tw-flex tw-items-center tw-space-x-1 tw-border-l tw-border-gray-200 tw-pl-2\">\n \n <!-- Quick Jump -->\n @if (paginationConfig.showQuickJump) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <span class=\"tw-text-sm tw-text-gray-700\">Go to:</span>\n <div class=\"tw-w-16\">\n <cide-ele-input id=\"jump-to-page-input\" type=\"number\" [labelHide]=\"true\" [hideHelperAndErrorText]=\"true\"\n [(ngModel)]=\"jumpToPage\" [min]=\"1\" [max]=\"totalPages()\"\n [disabled]=\"isRefreshing()\"\n size=\"xs\"\n (keydown.enter)=\"onJumpToPage()\">\n </cide-ele-input>\n </div>\n <button\n type=\"button\"\n (click)=\"onJumpToPage()\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-p-0 tw-rounded tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-700 tw-border tw-border-gray-300 hover:tw-bg-gray-200 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Go to page\">\n Go\n </button>\n </div>\n }\n \n <!-- Refresh Button -->\n @if (paginationConfig.showRefresh) {\n <button\n type=\"button\"\n (click)=\"onRefresh()\"\n [disabled]=\"isRefreshing()\"\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-w-7 tw-h-7 tw-p-0 tw-rounded-md tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-100 tw-transition-all tw-duration-200 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\n title=\"Refresh\">\n @if (isRefreshing()) {\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4 tw-animate-spin\">refresh</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-w-[22px] tw-h-4\">refresh</cide-ele-icon>\n }\n </button>\n }\n </div>\n }\n \n </div>\n </div>\n </div>\n }\n\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"] }]
|
|
12109
|
+
], 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"] }]
|
|
12107
12110
|
}], propDecorators: { config: [{
|
|
12108
12111
|
type: Input
|
|
12109
12112
|
}], templateRenderers: [{
|
|
@@ -12919,7 +12922,7 @@ class CideEleFloatingContainerComponent {
|
|
|
12919
12922
|
</div>
|
|
12920
12923
|
}
|
|
12921
12924
|
</div>
|
|
12922
|
-
`, isInline: true, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color
|
|
12925
|
+
`, isInline: true, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb);position:relative;flex:1;display:flex;flex-direction:column}.floating-container-content::-webkit-scrollbar{width:8px}.floating-container-content::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb);border-radius:4px;margin:4px}.floating-container-content::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px;transition:background-color .2s ease;border:1px solid var(--cide-ele-border-primary, #e5e7eb)}.floating-container-content::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);border-color:var(--cide-ele-border-secondary, #d1d5db)}.floating-container-content::-webkit-scrollbar-thumb:active{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }] });
|
|
12923
12926
|
}
|
|
12924
12927
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideEleFloatingContainerComponent, decorators: [{
|
|
12925
12928
|
type: Component,
|
|
@@ -13029,7 +13032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
13029
13032
|
</div>
|
|
13030
13033
|
}
|
|
13031
13034
|
</div>
|
|
13032
|
-
`, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color
|
|
13035
|
+
`, styles: [".tw-cursor-move{cursor:move!important}.tw-cursor-se-resize{cursor:se-resize!important}.floating-container-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, #f9fafb);position:relative;flex:1;display:flex;flex-direction:column}.floating-container-content::-webkit-scrollbar{width:8px}.floating-container-content::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, #f9fafb);border-radius:4px;margin:4px}.floating-container-content::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px;transition:background-color .2s ease;border:1px solid var(--cide-ele-border-primary, #e5e7eb)}.floating-container-content::-webkit-scrollbar-thumb:hover{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);border-color:var(--cide-ele-border-secondary, #d1d5db)}.floating-container-content::-webkit-scrollbar-thumb:active{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}\n"] }]
|
|
13033
13036
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
13034
13037
|
type: Input
|
|
13035
13038
|
}], isMinimized: [{
|