intelica-library-ui 0.1.42 → 0.1.44

package/fesm2022/intelica-library-ui.mjs

@@ -29,6 +29,8 @@ import * as XLSX from 'xlsx';
 import { Workbook } from 'exceljs';
 import { saveAs } from 'file-saver';
 import JSEncrypt from 'jsencrypt';
+import Aura from '@primeng/themes/aura';
+import { definePreset } from '@primeng/themes';
 
 class ConfigService {
     Http = inject(HttpClient);
@@ -418,9 +420,12 @@ class ColumnComponent {
     tooltip = "";
     tooltipPosition = "top";
     showIndex = false;
+    showHeader = true;
+    //@Input() isGrouped: boolean = false;
+    //@Input() isGroup: boolean = false;
     templateRef;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ColumnComponent, isStandalone: true, selector: "column", inputs: { field: "field", header: "header", sortable: "sortable", width: "width", className: "className", headerTooltip: "headerTooltip", headerTooltipPosition: "headerTooltipPosition", tooltip: "tooltip", tooltipPosition: "tooltipPosition", showIndex: "showIndex" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ColumnComponent, isStandalone: true, selector: "column", inputs: { field: "field", header: "header", sortable: "sortable", width: "width", className: "className", headerTooltip: "headerTooltip", headerTooltipPosition: "headerTooltipPosition", tooltip: "tooltip", tooltipPosition: "tooltipPosition", showIndex: "showIndex", showHeader: "showHeader" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ColumnComponent, decorators: [{
             type: Directive,
@@ -445,6 +450,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Input
             }], showIndex: [{
                 type: Input
+            }], showHeader: [{
+                type: Input
+            }], templateRef: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }] } });
+class ColumnGroupComponent {
+    field;
+    header;
+    sortable = false;
+    // @Input() width?: string;
+    // @Input() className?: string;
+    // @Input() headerTooltip: string = "";
+    // @Input() headerTooltipPosition: "top" | "bottom" | "left" | "right" = "top";
+    // @Input() tooltip: string = "";
+    // @Input() tooltipPosition: "top" | "bottom" | "left" | "right" = "top";
+    // @Input() showIndex: boolean = false;
+    // @Input() isGrouped: boolean = false;
+    // @Input() isGroup: boolean = false;
+    colspan = 1;
+    rowspan = 1;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ColumnGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ColumnGroupComponent, isStandalone: true, selector: "columnGroup", inputs: { field: "field", header: "header", sortable: "sortable", colspan: "colspan", rowspan: "rowspan" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ColumnGroupComponent, decorators: [{
+            type: Directive,
+            args: [{ selector: "columnGroup" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], colspan: [{
+                type: Input
+            }], rowspan: [{
+                type: Input
+            }] } });
+class RowResumenComponent {
+    field;
+    className;
+    // @Input() width?: string;
+    // @Input() className?: string;
+    // @Input() headerTooltip: string = "";
+    // @Input() headerTooltipPosition: "top" | "bottom" | "left" | "right" = "top";
+    // @Input() tooltip: string = "";
+    // @Input() tooltipPosition: "top" | "bottom" | "left" | "right" = "top";
+    // @Input() showIndex: boolean = false;
+    // @Input() isGrouped: boolean = false;
+    // @Input() isGroup: boolean = false;
+    colspan = 1;
+    rowspan = 1;
+    templateRef;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RowResumenComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: RowResumenComponent, isStandalone: true, selector: "rowResumenComponent", inputs: { field: "field", className: "className", colspan: "colspan", rowspan: "rowspan" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RowResumenComponent, decorators: [{
+            type: Directive,
+            args: [{ selector: "rowResumenComponent" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], colspan: [{
+                type: Input
+            }], rowspan: [{
+                type: Input
             }], templateRef: [{
                 type: ContentChild,
                 args: [TemplateRef]
@@ -622,7 +694,7 @@ class SearchComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SearchComponent),
             },
-        ], ngImport: i0, template: "<form [formGroup]=\"SearchForm\">\r\n\t<div class=\"prSearchBar\">\r\n\t\t<div class=\"prSearchBar__dropdown\" (click)=\"op.toggle($event)\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"prSearchBar__dropdown--label\"\r\n\t\t\t\t[pTooltip]=\"(GetSelectedOperatorValue() | term : GlobalTermService.languageCode) + ', ' + (GetSelectedFieldValue() | term : GlobalTermService.languageCode)\"\r\n\t\t\t\ttooltipPosition=\"top\"\r\n\t\t\t>\r\n\t\t\t\t{{ GetSelectedFieldValue() | term : GlobalTermService.languageCode }}\r\n\t\t\t</div>\r\n\t\t\t<div class=\"prSearchBar__dropdown--icon\">\r\n\t\t\t\t<i [ngClass]=\"IsDropdownOpen ? 'icon-arrow-up' : 'icon-arrow-down'\"></i>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<p-popover #op (onShow)=\"DropDownChange(true)\" (onHide)=\"DropDownChange(false)\" class=\"prSearchBar__popover\">\r\n\t\t\t<div class=\"searchDropDown\">\r\n\t\t\t\t<div class=\"searchDropDown__group\">\r\n\t\t\t\t\t<div class=\"searchDropDown__title\">{{ \"Selectoperator\" | term : GlobalTermService.languageCode }}</div>\r\n\t\t\t\t\t<div class=\"searchDropDown__listOption\">\r\n\t\t\t\t\t\t@for ( option of SearchOperatorOptions ; track option.id; let index = $index){\r\n\t\t\t\t\t\t<div class=\"searchDropDown__option\">\r\n\t\t\t\t\t\t\t<p-radiobutton [inputId]=\"ComponentId + option.id\" class=\"prRadioButton\" [value]=\"option.id\" formControlName=\"operatorId\" (change)=\"OnSearchKeyup()\" />\r\n\t\t\t\t\t\t\t<label [for]=\"ComponentId + option.id\" class=\"prRadioButton--label\">{{ option.value | term : GlobalTermService.languageCode }}</label>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<hr />\r\n\t\t\t\t<div class=\"searchDropDown__group\">\r\n\t\t\t\t\t<div class=\"searchDropDown__title\">{{ \"Selectfield\" | term : GlobalTermService.languageCode }}</div>\r\n\t\t\t\t\t@for ( option of SearchFieldOptions ; track option.id; let index = $index){\r\n\t\t\t\t\t<div class=\"searchDropDown__option\">\r\n\t\t\t\t\t\t<p-radiobutton [inputId]=\"ComponentId + 'fieldId_' + option.id\" class=\"prRadioButton\" [value]=\"option.id\" formControlName=\"fieldId\" (change)=\"OnSearchKeyup()\" />\r\n\t\t\t\t\t\t<label [for]=\"ComponentId + 'fieldId_' + option.id\" class=\"prRadioButton--label\">{{ option.value | term : GlobalTermService.languageCode }}</label>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</p-popover>\r\n\t\t<div class=\"prSearchBar__content\">\r\n\t\t\t<div class=\"prSearchBar__btn\">\r\n\t\t\t\t<button pButton type=\"button\" class=\"prSearchBar__btn-action\" (click)=\"ClearSearchText()\" *ngIf=\"HasSearchText\">\r\n\t\t\t\t\t<i class=\"icon-times\"></i>\r\n\t\t\t\t</button>\r\n\t\t\t\t<button pButton type=\"button\" class=\"prSearchBar__btn-action\" (click)=\"OnSearch()\">\r\n\t\t\t\t\t<i class=\"icon-search\"></i>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t\t<input\r\n\t\t\t\tpInputText\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\tclass=\"prSearchBar__input\"\r\n\t\t\t\tformControlName=\"searchText\"\r\n\t\t\t\t[placeholder]=\"Placeholder | term : GlobalTermService.languageCode\"\r\n\t\t\t\t(keyup.enter)=\"OnSearchEnter()\"\r\n\t\t\t\t(keyup)=\"OnSearchKeyup()\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n</form>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i2.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TermPipe, name: "term" }] });
+        ], ngImport: i0, template: "<form [formGroup]=\"SearchForm\">\r\n\t<div class=\"prSearchBar\">\r\n\t\t<div class=\"prSearchBar__dropdown\" (click)=\"op.toggle($event)\" *ngIf=\"!SimpleSearchInput\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"prSearchBar__dropdown--label\"\r\n\t\t\t\t[pTooltip]=\"(GetSelectedOperatorValue() | term : GlobalTermService.languageCode) + ', ' + (GetSelectedFieldValue() | term : GlobalTermService.languageCode)\"\r\n\t\t\t\ttooltipPosition=\"top\"\r\n\t\t\t>\r\n\t\t\t\t{{ GetSelectedFieldValue() | term : GlobalTermService.languageCode }}\r\n\t\t\t</div>\r\n\t\t\t<div class=\"prSearchBar__dropdown--icon\">\r\n\t\t\t\t<i [ngClass]=\"IsDropdownOpen ? 'icon-arrow-up' : 'icon-arrow-down'\"></i>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<p-popover #op (onShow)=\"DropDownChange(true)\" (onHide)=\"DropDownChange(false)\" class=\"prSearchBar__popover\">\r\n\t\t\t<div class=\"searchDropDown\">\r\n\t\t\t\t<div class=\"searchDropDown__group\">\r\n\t\t\t\t\t<div class=\"searchDropDown__title\">{{ \"Selectoperator\" | term : GlobalTermService.languageCode }}</div>\r\n\t\t\t\t\t<div class=\"searchDropDown__listOption\">\r\n\t\t\t\t\t\t@for ( option of SearchOperatorOptions ; track option.id; let index = $index){\r\n\t\t\t\t\t\t<div class=\"searchDropDown__option\">\r\n\t\t\t\t\t\t\t<p-radiobutton [inputId]=\"ComponentId + option.id\" class=\"prRadioButton\" [value]=\"option.id\" formControlName=\"operatorId\" (change)=\"OnSearchKeyup()\" />\r\n\t\t\t\t\t\t\t<label [for]=\"ComponentId + option.id\" class=\"prRadioButton--label\">{{ option.value | term : GlobalTermService.languageCode }}</label>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<hr />\r\n\t\t\t\t<div class=\"searchDropDown__group\">\r\n\t\t\t\t\t<div class=\"searchDropDown__title\">{{ \"Selectfield\" | term : GlobalTermService.languageCode }}</div>\r\n\t\t\t\t\t@for ( option of SearchFieldOptions ; track option.id; let index = $index){\r\n\t\t\t\t\t<div class=\"searchDropDown__option\">\r\n\t\t\t\t\t\t<p-radiobutton [inputId]=\"ComponentId + 'fieldId_' + option.id\" class=\"prRadioButton\" [value]=\"option.id\" formControlName=\"fieldId\" (change)=\"OnSearchKeyup()\" />\r\n\t\t\t\t\t\t<label [for]=\"ComponentId + 'fieldId_' + option.id\" class=\"prRadioButton--label\">{{ option.value | term : GlobalTermService.languageCode }}</label>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</p-popover>\r\n\t\t<div class=\"prSearchBar__content\">\r\n\t\t\t<div class=\"prSearchBar__btn\">\r\n\t\t\t\t<button pButton type=\"button\" class=\"prSearchBar__btn-action\" (click)=\"ClearSearchText()\" *ngIf=\"HasSearchText\">\r\n\t\t\t\t\t<i class=\"icon-times\"></i>\r\n\t\t\t\t</button>\r\n\t\t\t\t<button pButton type=\"button\" class=\"prSearchBar__btn-action\" (click)=\"OnSearch()\">\r\n\t\t\t\t\t<i class=\"icon-search\"></i>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t\t<input\r\n\t\t\t\tpInputText\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\tclass=\"prSearchBar__input\"\r\n\t\t\t\tformControlName=\"searchText\"\r\n\t\t\t\t[placeholder]=\"Placeholder | term : GlobalTermService.languageCode\"\r\n\t\t\t\t(keyup.enter)=\"OnSearchEnter()\"\r\n\t\t\t\t(keyup)=\"OnSearchKeyup()\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n</form>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i2.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TermPipe, name: "term" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
@@ -631,7 +703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SearchComponent),
                         },
-                    ], template: "<form [formGroup]=\"SearchForm\">\r\n\t<div class=\"prSearchBar\">\r\n\t\t<div class=\"prSearchBar__dropdown\" (click)=\"op.toggle($event)\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"prSearchBar__dropdown--label\"\r\n\t\t\t\t[pTooltip]=\"(GetSelectedOperatorValue() | term : GlobalTermService.languageCode) + ', ' + (GetSelectedFieldValue() | term : GlobalTermService.languageCode)\"\r\n\t\t\t\ttooltipPosition=\"top\"\r\n\t\t\t>\r\n\t\t\t\t{{ GetSelectedFieldValue() | term : GlobalTermService.languageCode }}\r\n\t\t\t</div>\r\n\t\t\t<div class=\"prSearchBar__dropdown--icon\">\r\n\t\t\t\t<i [ngClass]=\"IsDropdownOpen ? 'icon-arrow-up' : 'icon-arrow-down'\"></i>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<p-popover #op (onShow)=\"DropDownChange(true)\" (onHide)=\"DropDownChange(false)\" class=\"prSearchBar__popover\">\r\n\t\t\t<div class=\"searchDropDown\">\r\n\t\t\t\t<div class=\"searchDropDown__group\">\r\n\t\t\t\t\t<div class=\"searchDropDown__title\">{{ \"Selectoperator\" | term : GlobalTermService.languageCode }}</div>\r\n\t\t\t\t\t<div class=\"searchDropDown__listOption\">\r\n\t\t\t\t\t\t@for ( option of SearchOperatorOptions ; track option.id; let index = $index){\r\n\t\t\t\t\t\t<div class=\"searchDropDown__option\">\r\n\t\t\t\t\t\t\t<p-radiobutton [inputId]=\"ComponentId + option.id\" class=\"prRadioButton\" [value]=\"option.id\" formControlName=\"operatorId\" (change)=\"OnSearchKeyup()\" />\r\n\t\t\t\t\t\t\t<label [for]=\"ComponentId + option.id\" class=\"prRadioButton--label\">{{ option.value | term : GlobalTermService.languageCode }}</label>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<hr />\r\n\t\t\t\t<div class=\"searchDropDown__group\">\r\n\t\t\t\t\t<div class=\"searchDropDown__title\">{{ \"Selectfield\" | term : GlobalTermService.languageCode }}</div>\r\n\t\t\t\t\t@for ( option of SearchFieldOptions ; track option.id; let index = $index){\r\n\t\t\t\t\t<div class=\"searchDropDown__option\">\r\n\t\t\t\t\t\t<p-radiobutton [inputId]=\"ComponentId + 'fieldId_' + option.id\" class=\"prRadioButton\" [value]=\"option.id\" formControlName=\"fieldId\" (change)=\"OnSearchKeyup()\" />\r\n\t\t\t\t\t\t<label [for]=\"ComponentId + 'fieldId_' + option.id\" class=\"prRadioButton--label\">{{ option.value | term : GlobalTermService.languageCode }}</label>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</p-popover>\r\n\t\t<div class=\"prSearchBar__content\">\r\n\t\t\t<div class=\"prSearchBar__btn\">\r\n\t\t\t\t<button pButton type=\"button\" class=\"prSearchBar__btn-action\" (click)=\"ClearSearchText()\" *ngIf=\"HasSearchText\">\r\n\t\t\t\t\t<i class=\"icon-times\"></i>\r\n\t\t\t\t</button>\r\n\t\t\t\t<button pButton type=\"button\" class=\"prSearchBar__btn-action\" (click)=\"OnSearch()\">\r\n\t\t\t\t\t<i class=\"icon-search\"></i>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t\t<input\r\n\t\t\t\tpInputText\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\tclass=\"prSearchBar__input\"\r\n\t\t\t\tformControlName=\"searchText\"\r\n\t\t\t\t[placeholder]=\"Placeholder | term : GlobalTermService.languageCode\"\r\n\t\t\t\t(keyup.enter)=\"OnSearchEnter()\"\r\n\t\t\t\t(keyup)=\"OnSearchKeyup()\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n</form>\r\n" }]
+                    ], template: "<form [formGroup]=\"SearchForm\">\r\n\t<div class=\"prSearchBar\">\r\n\t\t<div class=\"prSearchBar__dropdown\" (click)=\"op.toggle($event)\" *ngIf=\"!SimpleSearchInput\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"prSearchBar__dropdown--label\"\r\n\t\t\t\t[pTooltip]=\"(GetSelectedOperatorValue() | term : GlobalTermService.languageCode) + ', ' + (GetSelectedFieldValue() | term : GlobalTermService.languageCode)\"\r\n\t\t\t\ttooltipPosition=\"top\"\r\n\t\t\t>\r\n\t\t\t\t{{ GetSelectedFieldValue() | term : GlobalTermService.languageCode }}\r\n\t\t\t</div>\r\n\t\t\t<div class=\"prSearchBar__dropdown--icon\">\r\n\t\t\t\t<i [ngClass]=\"IsDropdownOpen ? 'icon-arrow-up' : 'icon-arrow-down'\"></i>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<p-popover #op (onShow)=\"DropDownChange(true)\" (onHide)=\"DropDownChange(false)\" class=\"prSearchBar__popover\">\r\n\t\t\t<div class=\"searchDropDown\">\r\n\t\t\t\t<div class=\"searchDropDown__group\">\r\n\t\t\t\t\t<div class=\"searchDropDown__title\">{{ \"Selectoperator\" | term : GlobalTermService.languageCode }}</div>\r\n\t\t\t\t\t<div class=\"searchDropDown__listOption\">\r\n\t\t\t\t\t\t@for ( option of SearchOperatorOptions ; track option.id; let index = $index){\r\n\t\t\t\t\t\t<div class=\"searchDropDown__option\">\r\n\t\t\t\t\t\t\t<p-radiobutton [inputId]=\"ComponentId + option.id\" class=\"prRadioButton\" [value]=\"option.id\" formControlName=\"operatorId\" (change)=\"OnSearchKeyup()\" />\r\n\t\t\t\t\t\t\t<label [for]=\"ComponentId + option.id\" class=\"prRadioButton--label\">{{ option.value | term : GlobalTermService.languageCode }}</label>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<hr />\r\n\t\t\t\t<div class=\"searchDropDown__group\">\r\n\t\t\t\t\t<div class=\"searchDropDown__title\">{{ \"Selectfield\" | term : GlobalTermService.languageCode }}</div>\r\n\t\t\t\t\t@for ( option of SearchFieldOptions ; track option.id; let index = $index){\r\n\t\t\t\t\t<div class=\"searchDropDown__option\">\r\n\t\t\t\t\t\t<p-radiobutton [inputId]=\"ComponentId + 'fieldId_' + option.id\" class=\"prRadioButton\" [value]=\"option.id\" formControlName=\"fieldId\" (change)=\"OnSearchKeyup()\" />\r\n\t\t\t\t\t\t<label [for]=\"ComponentId + 'fieldId_' + option.id\" class=\"prRadioButton--label\">{{ option.value | term : GlobalTermService.languageCode }}</label>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</p-popover>\r\n\t\t<div class=\"prSearchBar__content\">\r\n\t\t\t<div class=\"prSearchBar__btn\">\r\n\t\t\t\t<button pButton type=\"button\" class=\"prSearchBar__btn-action\" (click)=\"ClearSearchText()\" *ngIf=\"HasSearchText\">\r\n\t\t\t\t\t<i class=\"icon-times\"></i>\r\n\t\t\t\t</button>\r\n\t\t\t\t<button pButton type=\"button\" class=\"prSearchBar__btn-action\" (click)=\"OnSearch()\">\r\n\t\t\t\t\t<i class=\"icon-search\"></i>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t\t<input\r\n\t\t\t\tpInputText\r\n\t\t\t\ttype=\"text\"\r\n\t\t\t\tclass=\"prSearchBar__input\"\r\n\t\t\t\tformControlName=\"searchText\"\r\n\t\t\t\t[placeholder]=\"Placeholder | term : GlobalTermService.languageCode\"\r\n\t\t\t\t(keyup.enter)=\"OnSearchEnter()\"\r\n\t\t\t\t(keyup)=\"OnSearchKeyup()\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n</form>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { ComponentId: [{
                 type: Input
             }], SearchFieldOptions: [{
@@ -1359,10 +1431,13 @@ class TableComponent {
     ShowPagination = false;
     RowsPerPage = 10;
     ShowCheckbox = false;
+    ShowIndex = false;
     ListDataSelected = [];
     SelectedIdentifier = null;
     AdditionalTemplate;
     ColumnList = [];
+    ColumnGroupList = [];
+    RowResumenList = [];
     ListDataFilter = [];
     ListDataTable = [];
     ListDataSelectedFilter = [];
@@ -1376,14 +1451,20 @@ class TableComponent {
     PaginatorTable;
     SearchTable;
     Columns;
+    ColumnGroups;
+    RowResumenGroups;
     constructor() { }
-    ngOnChanges(changes) {
+    ngOnChanges() {
         this.LoadSearchOptions();
         this.ExecuteSearch({});
         this.ValidateSelect();
     }
     ngAfterContentInit() {
         this.ColumnList = this.Columns.toArray();
+        this.ColumnGroupList = this.ColumnGroups.toArray();
+        this.RowResumenList = this.RowResumenGroups.toArray();
+        console.log(this.ColumnList);
+        console.log(this.RowResumenList);
     }
     LoadSearchOptions() {
         this.ListSearchOptionsSimple = this.ListSearchOptions.map(item => ({
@@ -1490,11 +1571,11 @@ class TableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: TableComponent, isStandalone: true, selector: "intelica-table", inputs: { ComponentId: "ComponentId", ListData: "ListData", ShowSearch: "ShowSearch", ListSearchOptions: "ListSearchOptions", ShowPagination: "ShowPagination", RowsPerPage: "RowsPerPage", ShowCheckbox: "ShowCheckbox", ListDataSelected: "ListDataSelected", SelectedIdentifier: "SelectedIdentifier" }, outputs: { EmmitSelectedItem: "EmmitSelectedItem" }, queries: [{ propertyName: "AdditionalTemplate", first: true, predicate: ["additionalTemplate"], descendants: true }, { propertyName: "Columns", predicate: ColumnComponent }], viewQueries: [{ propertyName: "PaginatorTable", first: true, predicate: ["paginatorTable"], descendants: true }, { propertyName: "SearchTable", first: true, predicate: ["searchTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"prTable\">\r\n\t<div class=\"prTableTools\">\r\n\t\t<div class=\"prTableTools__additional\">\r\n\t\t\t<div class=\"prTableTools__additional\" *ngIf=\"AdditionalTemplate\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"AdditionalTemplate\"></ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<intelica-search\r\n\t\t\t#searchTable\r\n\t\t\t*ngIf=\"ShowSearch\"\r\n\t\t\t[ComponentId]=\"ComponentId + 'Search'\"\r\n\t\t\t(OnSearch)=\"ExecuteSearch($event)\"\r\n\t\t\t[SearchFieldOptions]=\"ListSearchOptionsSimple\"\r\n\t\t\t[SearchOnKeyup]=\"false\"\r\n\t\t\t[SimpleSearchInput]=\"false\"\r\n\t\t></intelica-search>\r\n\t\t<intelica-paginator #paginatorTable *ngIf=\"ShowPagination\" [TotalItems]=\"ListDataFilter.length\" [ItemsPerPage]=\"RowsPerPage\" (PageChange)=\"OnPageChange($event)\"></intelica-paginator>\r\n\t</div>\r\n\t<p-table\r\n\t\tclass=\"prTableBasic\"\r\n\t\t[value]=\"ListDataTable\"\r\n\t\tresponsiveLayout=\"scroll\"\r\n\t\t[(selection)]=\"ListDataSelectedFilter\"\r\n\t\t(onHeaderCheckboxToggle)=\"SelectAll($event)\"\r\n\t\t(onRowSelect)=\"OnRowSelect($event)\"\r\n\t\t(onRowUnselect)=\"OnRowUnselect($event)\"\r\n\t>\r\n\t\t<!-- Encabezados -->\r\n\t\t<ng-template pTemplate=\"header\">\r\n\t\t\t<tr>\r\n\t\t\t\t<th *ngFor=\"let col of ColumnList\" [class]=\"col.className\" [pSortableColumn]=\"col.sortable ? col.field : ''\" [style.width]=\"col.width\" (click)=\"OnSort(col.field)\">\r\n\t\t\t\t\t<span pTooltip=\"{{ col.headerTooltip }}\" tooltipPosition=\"{{ col.headerTooltipPosition }}\">{{ col.header }}</span>\r\n\t\t\t\t\t<p-sortIcon *ngIf=\"col.sortable\" [field]=\"col.field\"></p-sortIcon>\r\n\t\t\t\t</th>\r\n\t\t\t\t<th *ngIf=\"ShowCheckbox\" class=\"text-center\" style=\"width: 4%\">\r\n\t\t\t\t\t<p-tableHeaderCheckbox class=\"prCheckbox\" [ngClass]=\"{ 'prCheckbox--indeterminate': ListDataSelectedTemp.length > 0 && ListDataSelectedTemp.length < ListDataFilter.length }\" />\r\n\t\t\t\t</th>\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\r\n\t\t<!-- Cuerpo de la tabla -->\r\n\t\t<ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\r\n\t\t\t<tr>\r\n\t\t\t\t<td *ngFor=\"let col of ColumnList; let i = index\" [ngClass]=\"col.className\">\r\n\t\t\t\t\t<ng-container *ngIf=\"col.showIndex; else columnContent\">\r\n\t\t\t\t\t\t{{ rowIndex + 1 + (CurrentPage - 1) * RowsPerPage }}\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<ng-template #columnContent>\r\n\t\t\t\t\t\t<ng-container *ngIf=\"col.templateRef; else defaultContent\">\r\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"col.templateRef; context: { $implicit: rowData }\"></ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<ng-template #defaultContent>\r\n\t\t\t\t\t\t\t<span class=\"text-breakWord\" pTooltip=\"{{ rowData[col.tooltip] }}\" tooltipPosition=\"{{ col.tooltipPosition }}\">\r\n\t\t\t\t\t\t\t\t{{ rowData[col.field] }}\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t</td>\r\n\t\t\t\t<td *ngIf=\"ShowCheckbox\" class=\"text-center\">\r\n\t\t\t\t\t<p-tableCheckbox [value]=\"rowData\" class=\"prCheckbox\" />\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t</p-table>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchComponent, selector: "intelica-search", inputs: ["ComponentId", "SearchFieldOptions", "SearchOnKeyup", "SimpleSearchInput", "Placeholder"], outputs: ["OnSearch"] }, { kind: "component", type: PaginatorComponent, selector: "intelica-paginator", inputs: ["TotalItems", "CurrentPage", "ItemsPerPage"], outputs: ["PageChange"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: TableComponent, isStandalone: true, selector: "intelica-table", inputs: { ComponentId: "ComponentId", ListData: "ListData", ShowSearch: "ShowSearch", ListSearchOptions: "ListSearchOptions", ShowPagination: "ShowPagination", RowsPerPage: "RowsPerPage", ShowCheckbox: "ShowCheckbox", ShowIndex: "ShowIndex", ListDataSelected: "ListDataSelected", SelectedIdentifier: "SelectedIdentifier" }, outputs: { EmmitSelectedItem: "EmmitSelectedItem" }, queries: [{ propertyName: "AdditionalTemplate", first: true, predicate: ["additionalTemplate"], descendants: true }, { propertyName: "Columns", predicate: ColumnComponent }, { propertyName: "ColumnGroups", predicate: ColumnGroupComponent }, { propertyName: "RowResumenGroups", predicate: RowResumenComponent }], viewQueries: [{ propertyName: "PaginatorTable", first: true, predicate: ["paginatorTable"], descendants: true }, { propertyName: "SearchTable", first: true, predicate: ["searchTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"prTable\">\r\n\t<div class=\"prTableTools\">\r\n\t\t<div class=\"prTableTools__additional\">\r\n\t\t\t<div class=\"prTableTools__additional\" *ngIf=\"AdditionalTemplate\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"AdditionalTemplate\"></ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<intelica-search\r\n\t\t\t#searchTable\r\n\t\t\t*ngIf=\"ShowSearch\"\r\n\t\t\t[ComponentId]=\"ComponentId + 'Search'\"\r\n\t\t\t(OnSearch)=\"ExecuteSearch($event)\"\r\n\t\t\t[SearchFieldOptions]=\"ListSearchOptionsSimple\"\r\n\t\t\t[SearchOnKeyup]=\"false\"\r\n\t\t\t[SimpleSearchInput]=\"false\"\r\n\t\t></intelica-search>\r\n\t\t<intelica-paginator #paginatorTable *ngIf=\"ShowPagination\" [TotalItems]=\"ListDataFilter.length\" [ItemsPerPage]=\"RowsPerPage\" (PageChange)=\"OnPageChange($event)\"></intelica-paginator>\r\n\t</div>\r\n\t<p-table\r\n\t\tclass=\"prTableBasic\"\r\n\t\t[value]=\"ListDataTable\"\r\n\t\tresponsiveLayout=\"scroll\"\r\n\t\t[(selection)]=\"ListDataSelectedFilter\"\r\n\t\t(onHeaderCheckboxToggle)=\"SelectAll($event)\"\r\n\t\t(onRowSelect)=\"OnRowSelect($event)\"\r\n\t\t(onRowUnselect)=\"OnRowUnselect($event)\"\r\n\t>\r\n\t\t<!-- Encabezados -->\r\n\t\t<ng-template pTemplate=\"header\">\r\n\t\t\t<tr>\r\n\t\t\t\t<th *ngFor=\"let col of ColumnGroupList\" [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\" [pSortableColumn]=\"col.sortable ? col.field : ''\" (click)=\"OnSort(col.field)\">\r\n\t\t\t\t\t<span pTooltip=\"{{ col.header }}\">{{ col.header }}</span>\r\n\t\t\t\t\t<p-sortIcon *ngIf=\"col.sortable\" [field]=\"col.field\"></p-sortIcon>\r\n\t\t\t\t</th>\r\n\t\t\t\t<th *ngIf=\"ShowCheckbox && ColumnGroupList.length != 0\" class=\"text-center\" style=\"width: 4%\" rowspan=\"2\">\r\n\t\t\t\t\t<p-tableHeaderCheckbox class=\"prCheckbox\" [ngClass]=\"{ 'prCheckbox--indeterminate': ListDataSelectedTemp.length > 0 && ListDataSelectedTemp.length < ListDataFilter.length }\" />\r\n\t\t\t\t</th>\r\n\t\t\t</tr>\r\n\t\t\t<tr>\r\n\t\t\t\t@for (col of ColumnList; track $index) { @if(col.showHeader ){\r\n\t\t\t\t<th [class]=\"col.className\" [pSortableColumn]=\"col.sortable ? col.field : ''\" [style.width]=\"col.width\" (click)=\"OnSort(col.field)\">\r\n\t\t\t\t\t<span pTooltip=\"{{ col.headerTooltip }}\" tooltipPosition=\"{{ col.headerTooltipPosition }}\">{{ col.header }}</span>\r\n\t\t\t\t\t<p-sortIcon *ngIf=\"col.sortable\" [field]=\"col.field\"></p-sortIcon>\r\n\t\t\t\t</th>\r\n\t\t\t\t} } @if(ShowCheckbox && ColumnGroupList.length == 0 ){\r\n\t\t\t\t<th class=\"text-center\" style=\"width: 4%\">\r\n\t\t\t\t\t<p-tableHeaderCheckbox class=\"prCheckbox\" [ngClass]=\"{ 'prCheckbox--indeterminate': ListDataSelectedTemp.length > 0 && ListDataSelectedTemp.length < ListDataFilter.length }\" />\r\n\t\t\t\t</th>\r\n\t\t\t\t}\r\n\t\t\t</tr>\r\n\t\t\t<tr>\r\n\t\t\t\t<td *ngFor=\"let col of RowResumenList\" [ngClass]=\"col.className\" [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\">\r\n\t\t\t\t\t<ng-container *ngIf=\"col.templateRef; else defaultContent\">\r\n\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"col.templateRef\"></ng-container>\r\n\t\t\t\t\t\t</span>\t\t\t\t\t\t\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<ng-template #defaultContent></ng-template>\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t\t<!-- Cuerpo de la tabla -->\r\n\t\t<ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\r\n\t\t\t<tr>\r\n\t\t\t\t<td *ngFor=\"let col of ColumnList; let i = index\" [ngClass]=\"col.className\">\r\n\t\t\t\t\t<ng-container *ngIf=\"col.showIndex; else columnContent\">\r\n\t\t\t\t\t\t{{ rowIndex + 1 + (CurrentPage - 1) * RowsPerPage }}\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<ng-template #columnContent>\r\n\t\t\t\t\t\t<ng-container *ngIf=\"col.templateRef; else defaultContent\">\r\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"col.templateRef; context: { $implicit: rowData }\"></ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<ng-template #defaultContent>\r\n\t\t\t\t\t\t\t<span class=\"text-breakWord\" pTooltip=\"{{ rowData[col.tooltip] }}\" tooltipPosition=\"{{ col.tooltipPosition }}\">\r\n\t\t\t\t\t\t\t\t{{ rowData[col.field] }}\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t</td>\r\n\t\t\t\t<td *ngIf=\"ShowCheckbox\" class=\"text-center\">\r\n\t\t\t\t\t<p-tableCheckbox [value]=\"rowData\" class=\"prCheckbox\" />\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t</p-table>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SearchComponent, selector: "intelica-search", inputs: ["ComponentId", "SearchFieldOptions", "SearchOnKeyup", "SimpleSearchInput", "Placeholder"], outputs: ["OnSearch"] }, { kind: "component", type: PaginatorComponent, selector: "intelica-paginator", inputs: ["TotalItems", "CurrentPage", "ItemsPerPage"], outputs: ["PageChange"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i2$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: "intelica-table", standalone: true, imports: [CommonModule, SearchComponent, PaginatorComponent, TableModule, BadgeModule, TooltipModule], template: "<div class=\"prTable\">\r\n\t<div class=\"prTableTools\">\r\n\t\t<div class=\"prTableTools__additional\">\r\n\t\t\t<div class=\"prTableTools__additional\" *ngIf=\"AdditionalTemplate\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"AdditionalTemplate\"></ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<intelica-search\r\n\t\t\t#searchTable\r\n\t\t\t*ngIf=\"ShowSearch\"\r\n\t\t\t[ComponentId]=\"ComponentId + 'Search'\"\r\n\t\t\t(OnSearch)=\"ExecuteSearch($event)\"\r\n\t\t\t[SearchFieldOptions]=\"ListSearchOptionsSimple\"\r\n\t\t\t[SearchOnKeyup]=\"false\"\r\n\t\t\t[SimpleSearchInput]=\"false\"\r\n\t\t></intelica-search>\r\n\t\t<intelica-paginator #paginatorTable *ngIf=\"ShowPagination\" [TotalItems]=\"ListDataFilter.length\" [ItemsPerPage]=\"RowsPerPage\" (PageChange)=\"OnPageChange($event)\"></intelica-paginator>\r\n\t</div>\r\n\t<p-table\r\n\t\tclass=\"prTableBasic\"\r\n\t\t[value]=\"ListDataTable\"\r\n\t\tresponsiveLayout=\"scroll\"\r\n\t\t[(selection)]=\"ListDataSelectedFilter\"\r\n\t\t(onHeaderCheckboxToggle)=\"SelectAll($event)\"\r\n\t\t(onRowSelect)=\"OnRowSelect($event)\"\r\n\t\t(onRowUnselect)=\"OnRowUnselect($event)\"\r\n\t>\r\n\t\t<!-- Encabezados -->\r\n\t\t<ng-template pTemplate=\"header\">\r\n\t\t\t<tr>\r\n\t\t\t\t<th *ngFor=\"let col of ColumnList\" [class]=\"col.className\" [pSortableColumn]=\"col.sortable ? col.field : ''\" [style.width]=\"col.width\" (click)=\"OnSort(col.field)\">\r\n\t\t\t\t\t<span pTooltip=\"{{ col.headerTooltip }}\" tooltipPosition=\"{{ col.headerTooltipPosition }}\">{{ col.header }}</span>\r\n\t\t\t\t\t<p-sortIcon *ngIf=\"col.sortable\" [field]=\"col.field\"></p-sortIcon>\r\n\t\t\t\t</th>\r\n\t\t\t\t<th *ngIf=\"ShowCheckbox\" class=\"text-center\" style=\"width: 4%\">\r\n\t\t\t\t\t<p-tableHeaderCheckbox class=\"prCheckbox\" [ngClass]=\"{ 'prCheckbox--indeterminate': ListDataSelectedTemp.length > 0 && ListDataSelectedTemp.length < ListDataFilter.length }\" />\r\n\t\t\t\t</th>\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\r\n\t\t<!-- Cuerpo de la tabla -->\r\n\t\t<ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\r\n\t\t\t<tr>\r\n\t\t\t\t<td *ngFor=\"let col of ColumnList; let i = index\" [ngClass]=\"col.className\">\r\n\t\t\t\t\t<ng-container *ngIf=\"col.showIndex; else columnContent\">\r\n\t\t\t\t\t\t{{ rowIndex + 1 + (CurrentPage - 1) * RowsPerPage }}\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<ng-template #columnContent>\r\n\t\t\t\t\t\t<ng-container *ngIf=\"col.templateRef; else defaultContent\">\r\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"col.templateRef; context: { $implicit: rowData }\"></ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<ng-template #defaultContent>\r\n\t\t\t\t\t\t\t<span class=\"text-breakWord\" pTooltip=\"{{ rowData[col.tooltip] }}\" tooltipPosition=\"{{ col.tooltipPosition }}\">\r\n\t\t\t\t\t\t\t\t{{ rowData[col.field] }}\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t</td>\r\n\t\t\t\t<td *ngIf=\"ShowCheckbox\" class=\"text-center\">\r\n\t\t\t\t\t<p-tableCheckbox [value]=\"rowData\" class=\"prCheckbox\" />\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t</p-table>\r\n</div>\r\n" }]
+            args: [{ selector: "intelica-table", standalone: true, imports: [CommonModule, SearchComponent, PaginatorComponent, TableModule, BadgeModule, TooltipModule], template: "<div class=\"prTable\">\r\n\t<div class=\"prTableTools\">\r\n\t\t<div class=\"prTableTools__additional\">\r\n\t\t\t<div class=\"prTableTools__additional\" *ngIf=\"AdditionalTemplate\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"AdditionalTemplate\"></ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<intelica-search\r\n\t\t\t#searchTable\r\n\t\t\t*ngIf=\"ShowSearch\"\r\n\t\t\t[ComponentId]=\"ComponentId + 'Search'\"\r\n\t\t\t(OnSearch)=\"ExecuteSearch($event)\"\r\n\t\t\t[SearchFieldOptions]=\"ListSearchOptionsSimple\"\r\n\t\t\t[SearchOnKeyup]=\"false\"\r\n\t\t\t[SimpleSearchInput]=\"false\"\r\n\t\t></intelica-search>\r\n\t\t<intelica-paginator #paginatorTable *ngIf=\"ShowPagination\" [TotalItems]=\"ListDataFilter.length\" [ItemsPerPage]=\"RowsPerPage\" (PageChange)=\"OnPageChange($event)\"></intelica-paginator>\r\n\t</div>\r\n\t<p-table\r\n\t\tclass=\"prTableBasic\"\r\n\t\t[value]=\"ListDataTable\"\r\n\t\tresponsiveLayout=\"scroll\"\r\n\t\t[(selection)]=\"ListDataSelectedFilter\"\r\n\t\t(onHeaderCheckboxToggle)=\"SelectAll($event)\"\r\n\t\t(onRowSelect)=\"OnRowSelect($event)\"\r\n\t\t(onRowUnselect)=\"OnRowUnselect($event)\"\r\n\t>\r\n\t\t<!-- Encabezados -->\r\n\t\t<ng-template pTemplate=\"header\">\r\n\t\t\t<tr>\r\n\t\t\t\t<th *ngFor=\"let col of ColumnGroupList\" [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\" [pSortableColumn]=\"col.sortable ? col.field : ''\" (click)=\"OnSort(col.field)\">\r\n\t\t\t\t\t<span pTooltip=\"{{ col.header }}\">{{ col.header }}</span>\r\n\t\t\t\t\t<p-sortIcon *ngIf=\"col.sortable\" [field]=\"col.field\"></p-sortIcon>\r\n\t\t\t\t</th>\r\n\t\t\t\t<th *ngIf=\"ShowCheckbox && ColumnGroupList.length != 0\" class=\"text-center\" style=\"width: 4%\" rowspan=\"2\">\r\n\t\t\t\t\t<p-tableHeaderCheckbox class=\"prCheckbox\" [ngClass]=\"{ 'prCheckbox--indeterminate': ListDataSelectedTemp.length > 0 && ListDataSelectedTemp.length < ListDataFilter.length }\" />\r\n\t\t\t\t</th>\r\n\t\t\t</tr>\r\n\t\t\t<tr>\r\n\t\t\t\t@for (col of ColumnList; track $index) { @if(col.showHeader ){\r\n\t\t\t\t<th [class]=\"col.className\" [pSortableColumn]=\"col.sortable ? col.field : ''\" [style.width]=\"col.width\" (click)=\"OnSort(col.field)\">\r\n\t\t\t\t\t<span pTooltip=\"{{ col.headerTooltip }}\" tooltipPosition=\"{{ col.headerTooltipPosition }}\">{{ col.header }}</span>\r\n\t\t\t\t\t<p-sortIcon *ngIf=\"col.sortable\" [field]=\"col.field\"></p-sortIcon>\r\n\t\t\t\t</th>\r\n\t\t\t\t} } @if(ShowCheckbox && ColumnGroupList.length == 0 ){\r\n\t\t\t\t<th class=\"text-center\" style=\"width: 4%\">\r\n\t\t\t\t\t<p-tableHeaderCheckbox class=\"prCheckbox\" [ngClass]=\"{ 'prCheckbox--indeterminate': ListDataSelectedTemp.length > 0 && ListDataSelectedTemp.length < ListDataFilter.length }\" />\r\n\t\t\t\t</th>\r\n\t\t\t\t}\r\n\t\t\t</tr>\r\n\t\t\t<tr>\r\n\t\t\t\t<td *ngFor=\"let col of RowResumenList\" [ngClass]=\"col.className\" [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\">\r\n\t\t\t\t\t<ng-container *ngIf=\"col.templateRef; else defaultContent\">\r\n\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"col.templateRef\"></ng-container>\r\n\t\t\t\t\t\t</span>\t\t\t\t\t\t\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<ng-template #defaultContent></ng-template>\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t\t<!-- Cuerpo de la tabla -->\r\n\t\t<ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\r\n\t\t\t<tr>\r\n\t\t\t\t<td *ngFor=\"let col of ColumnList; let i = index\" [ngClass]=\"col.className\">\r\n\t\t\t\t\t<ng-container *ngIf=\"col.showIndex; else columnContent\">\r\n\t\t\t\t\t\t{{ rowIndex + 1 + (CurrentPage - 1) * RowsPerPage }}\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<ng-template #columnContent>\r\n\t\t\t\t\t\t<ng-container *ngIf=\"col.templateRef; else defaultContent\">\r\n\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"col.templateRef; context: { $implicit: rowData }\"></ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<ng-template #defaultContent>\r\n\t\t\t\t\t\t\t<span class=\"text-breakWord\" pTooltip=\"{{ rowData[col.tooltip] }}\" tooltipPosition=\"{{ col.tooltipPosition }}\">\r\n\t\t\t\t\t\t\t\t{{ rowData[col.field] }}\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t</td>\r\n\t\t\t\t<td *ngIf=\"ShowCheckbox\" class=\"text-center\">\r\n\t\t\t\t\t<p-tableCheckbox [value]=\"rowData\" class=\"prCheckbox\" />\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t</p-table>\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { ComponentId: [{
                 type: Input
             }], ListData: [{
@@ -1509,6 +1590,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Input
             }], ShowCheckbox: [{
                 type: Input
+            }], ShowIndex: [{
+                type: Input
             }], ListDataSelected: [{
                 type: Input
             }], SelectedIdentifier: [{
@@ -1527,6 +1610,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             }], Columns: [{
                 type: ContentChildren,
                 args: [ColumnComponent]
+            }], ColumnGroups: [{
+                type: ContentChildren,
+                args: [ColumnGroupComponent]
+            }], RowResumenGroups: [{
+                type: ContentChildren,
+                args: [RowResumenComponent]
             }] } });
 
 class ActionDirective {
@@ -1822,6 +1911,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: [ActionDirective]
             }] } });
 
+class RecordPerPageComponent {
+    /**
+     * Lista de propiedades del modelo `PropertiesModel`.
+     * @type {PropertiesModel[]}
+     * @default []
+     */
+    Properties = [];
+    /**
+     * Evento emitido al realizar un cambio de pagina, envia el pageSize a los componentes.
+     * @type {EventEmitter<any>}
+     */
+    ReturnPage = new EventEmitter();
+    /**
+     * Términos utilizados en el componente.
+     * @type {any}
+     */
+    Terms;
+    /**
+     * Lista de registros.
+     * @type {number[]}
+     * @default []
+     */
+    Records = [];
+    /**
+     * Tamaño de página predeterminado.
+     * @type {number}
+     * @default 20
+     * @private
+     */
+    PageSize = 20;
+    constructor() { }
+    ngOnChanges(changes) {
+        if (changes.Properties && changes.Properties.currentValue.length > 0)
+            this.FillRecordperPage();
+    }
+    ngOnDestroy() { }
+    ngOnInit() {
+        this.FillRecordperPage();
+    }
+    ChangePageSize() {
+        this.ReturnPage.emit(this.PageSize);
+    }
+    /**
+     * Rellena la lista de registros por página basándose en las propiedades del modelo.
+     * - Utiliza el término de idioma global para la configuración.
+     * - Filtra las propiedades para obtener la propiedad 'RP' (Registros por Página).
+     * - Si la propiedad no existe, la función sale.
+     * - Divide el valor de la propiedad 'RP' en una lista de números.
+     * - Establece el tamaño de página predeterminado como el primer elemento de la lista.
+     */
+    FillRecordperPage() {
+        // Utiliza el término de idioma global para la configuración.
+        // this.terms = this.globals.languageTerms;
+        // Filtra las propiedades para obtener la propiedad 'RP' (Registros por Página).
+        var rpProperty = this.Properties.filter(x => x.code === "RP");
+        // Si la propiedad no existe, la función sale temprano.
+        if (rpProperty.length === 0)
+            return;
+        // Divide el valor de la propiedad 'RP' en una lista de números.
+        this.Records = rpProperty[0].value.split(",").map(x => parseInt(x));
+        // Establece el tamaño de página predeterminado como el primer elemento de la lista.
+        this.PageSize = this.Records[0];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RecordPerPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: RecordPerPageComponent, isStandalone: true, selector: "intelica-record-per-page", inputs: { Properties: "Properties" }, outputs: { ReturnPage: "ReturnPage" }, usesOnChanges: true, ngImport: i0, template: "<div style=\"width: 400px\">\r\n\t<div class=\"recordsPerPageCtr\">\r\n\t\t<ng-container *ngFor=\"let record of Records; let i = index\">\r\n\t\t\t<div class=\"form-check form-check-inline\">\r\n\t\t\t\t<p-radiobutton class=\"prRadioButton\" [inputId]=\"'radio-' + i\" name=\"optSortRP1\" [(ngModel)]=\"PageSize\" [value]=\"record\" [tabindex]=\"i\" />\r\n\t\t\t\t<label [for]=\"'radio-' + i\">{{ record }}</label>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"recordsPerPageBtnCtr\">\r\n\t\t<button class=\"grButton grButton--primary applyAnalytics\" (click)=\"ChangePageSize()\">\r\n\t\t\t<span>Apply</span>\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i2.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: RecordPerPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "intelica-record-per-page", imports: [CommonModule, FormsModule, RadioButtonModule], template: "<div style=\"width: 400px\">\r\n\t<div class=\"recordsPerPageCtr\">\r\n\t\t<ng-container *ngFor=\"let record of Records; let i = index\">\r\n\t\t\t<div class=\"form-check form-check-inline\">\r\n\t\t\t\t<p-radiobutton class=\"prRadioButton\" [inputId]=\"'radio-' + i\" name=\"optSortRP1\" [(ngModel)]=\"PageSize\" [value]=\"record\" [tabindex]=\"i\" />\r\n\t\t\t\t<label [for]=\"'radio-' + i\">{{ record }}</label>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</div>\r\n\t<div class=\"recordsPerPageBtnCtr\">\r\n\t\t<button class=\"grButton grButton--primary applyAnalytics\" (click)=\"ChangePageSize()\">\r\n\t\t\t<span>Apply</span>\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { Properties: [{
+                type: Input
+            }], ReturnPage: [{
+                type: Output
+            }] } });
+
 class HtmlToExcelService {
     ExportTOExcel(idTabla, html, filename, tabname, extension) {
         let Table = document.getElementById(idTabla);
@@ -2113,9 +2277,2294 @@ function EmailInputValidation(event) {
     }
 }
 
+const IntelicaTheme = definePreset(Aura, {
+    primitive: {
+        blue: {
+            0: "#FFFFFF",
+            100: "#DFF0FF",
+            200: "#AED9FF",
+            300: "#71BDFF",
+            400: "#348AD5",
+            500: "#2567A1",
+            600: "#1B5180",
+            700: "#17375E", // Azul Intelica
+        },
+        orange: {
+            0: "#FFFFFF",
+            100: "#FCE8DD",
+            200: "#FCD3BD",
+            300: "#FFB48B",
+            400: "#FF9053",
+            500: "#FF7F00", // Orange Intelica
+            600: "#FF7B31",
+            700: "#CC4900",
+        },
+        brown: {
+            100: "#F1E7E1",
+            200: "#F1DDD1",
+            300: "#E2C6B4",
+            400: "#C4AC9D",
+            500: "#A18D80",
+            600: "#837267",
+        },
+        beige: {
+            100: "#EEE7E1",
+            200: "#F1E3D7",
+            300: "#ECD2BB",
+            400: "#ECC098",
+            500: "#EBA869",
+            600: "#C48B56",
+        },
+        gray: {
+            0: "#FFFFFF",
+            100: "#F3F3F3",
+            200: "#E9E9E9",
+            300: "#D9D9D9",
+            400: "#BFBFBF",
+            500: "#A6A5A1",
+        },
+        neutral: {
+            950: "#081423",
+        },
+        red: {
+            50: "#fef2f2",
+            100: "#fee2e2",
+            200: "#fecaca",
+            300: "#fca5a5",
+            400: "#f87171",
+            500: "#ef4444",
+            600: "#dc2626",
+            700: "#b91c1c",
+            800: "#991b1b",
+            900: "#7f1d1d",
+            950: "#450a0a",
+        },
+        green: {
+            50: "#f0fdf4",
+            100: "#dcfce7",
+            200: "#bbf7d0",
+            300: "#86efac",
+            400: "#4ade80",
+            500: "#22c55e",
+            600: "#16a34a",
+            700: "#15803d",
+            800: "#166534",
+            900: "#14532d",
+            950: "#052e16",
+        },
+        transitionDuration: "0.2s",
+        iconSize: "1rem",
+        anchorGutter: "2px",
+        list: {
+            padding: "0rem",
+            gap: "2px",
+            header: {
+                padding: "0.5rem 1rem 0.25rem 1rem",
+            },
+            option: {
+                padding: "0.5rem 0.75rem",
+                borderRadius: "{border.radius.sm}",
+            },
+            optionGroup: {
+                padding: "0.5rem 0.75rem",
+                fontWeight: "600",
+            },
+        },
+        content: {
+            borderRadius: "{border.radius.md}",
+        },
+        mask: {
+            transitionDuration: "0.15s",
+        },
+        navigation: {
+            list: {
+                padding: "0.25rem 0.25rem",
+                gap: "2px",
+            },
+            item: {
+                padding: "0.5rem 0.75rem",
+                borderRadius: "{border.radius.sm}",
+                gap: "0.5rem",
+            },
+            submenuLabel: {
+                padding: "0.5rem 0.75rem",
+                fontWeight: "600",
+            },
+            submenuIcon: {
+                size: "0.875rem",
+            },
+        },
+    },
+    semantic: {
+        transparent: "transparent",
+        primary: {
+            0: "{blue.0}",
+            100: "{blue.100}",
+            200: "{blue.200}",
+            300: "{blue.300}",
+            400: "{blue.400}",
+            500: "{blue.500}",
+            600: "{blue.600}",
+            700: "var(--main-blue)",
+        },
+        secondary: {
+            0: "{orange.0}",
+            100: "{orange.100}",
+            200: "{orange.200}",
+            300: "{orange.300}",
+            400: "{orange.400}",
+            500: "var(--main-orange)",
+            600: "{orange.600}",
+            700: "var(--main-orange-dark)",
+        },
+        colorScheme: {
+            light: {
+                surface: {
+                    0: "#ffffff",
+                    50: "#f8fafc",
+                    100: "#f1f5f9",
+                    200: "#e2e8f0",
+                    300: "#cbd5e1",
+                    400: "#94a3b8",
+                    500: "#64748b",
+                    600: "#475569",
+                    700: "#334155",
+                    800: "#1e293b",
+                    900: "#0f172a",
+                    950: "#020617",
+                },
+                primary: {
+                    color: "{primary.700}",
+                    contrastColor: "#ffffff",
+                    hoverColor: "{primary.600}",
+                    activeColor: "{primary.700}",
+                },
+                secondary: {
+                    color: "{secondary.500}",
+                },
+                highlight: {
+                    background: "var(--main-orange)",
+                    focusBackground: "var(--main-orange)",
+                    color: "{orange.0}",
+                    focusColor: "{orange.0}",
+                },
+                mask: {
+                    background: "rgba(23, 55, 94, 0.8)",
+                    color: "{surface.200}",
+                },
+                formField: {
+                    paddingX: "1.0rem", // added by CA
+                    paddingY: "0.6rem", // added by CA
+                    background: "var(--main-light)",
+                    disabledBackground: "{gray.100}",
+                    filledBackground: "{surface.50}",
+                    filledHoverBackground: "{surface.50}",
+                    filledFocusBackground: "{surface.50}",
+                    borderColor: "{gray.300}",
+                    hoverBorderColor: "{primary.color}", // modify by CA
+                    focusBorderColor: "{primary.color}",
+                    invalidBorderColor: "{red.400}",
+                    color: "{surface.700}",
+                    disabledColor: "{gray.500}",
+                    placeholderColor: "{gray.500}",
+                    invalidPlaceholderColor: "{red.600}",
+                    floatLabelColor: "{surface.500}",
+                    floatLabelFocusColor: "{primary.600}",
+                    floatLabelActiveColor: "{surface.500}",
+                    floatLabelInvalidColor: "{form.field.invalid.placeholder.color}",
+                    iconColor: "{primary.color}",
+                    shadow: "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)",
+                    borderRadius: "{border.radius.sm}",
+                },
+                text: {
+                    color: "var(--main-blue)",
+                    hoverColor: "var(--main-orange)",
+                    mutedColor: "var(--main-orange)",
+                    hoverMutedColor: "orange.700}",
+                },
+                content: {
+                    background: "{gray.0}",
+                    hoverBackground: "{surface.100}",
+                    borderColor: "var(--main-blue)",
+                    color: "{text.color}",
+                    hoverColor: "{text.hover.color}",
+                },
+                overlay: {
+                    select: {
+                        borderRadius: "{border.radius.md}",
+                        shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+                        background: "var(--main-light)",
+                        borderColor: "{surface.200}",
+                        color: "{text.color}",
+                    },
+                    popover: {
+                        background: "var(--main-light)",
+                        borderColor: "{surface.200}",
+                        color: "{text.color}",
+                        borderRadius: "{border.radius.md}",
+                        padding: "0",
+                        shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+                    },
+                    modal: {
+                        borderColor: "#bfbfbf",
+                        color: "{text.color}",
+                        borderRadius: "{border.radius.xl}",
+                        padding: "1.5rem",
+                        shadow: "none",
+                    },
+                    navigation: {
+                        shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+                    },
+                },
+                focusRing: {
+                    width: "1px",
+                    style: "solid",
+                    color: "{primary.color}",
+                    offset: "-.1rem",
+                    shadow: "none",
+                },
+                borderRadius: {
+                    none: "0",
+                    xs: "0.2rem",
+                    sm: "0.4rem",
+                    md: "0.6rem",
+                    lg: "0.8rem",
+                    xl: "1.2rem",
+                },
+                disabledOpacity: "1",
+                list: {
+                    padding: "0rem",
+                    gap: "0rem",
+                    option: {
+                        borderRadius: "0rem",
+                        focusBackground: "var(--main-orange)",
+                        selectedBackground: "{highlight.background}",
+                        selectedFocusBackground: "{highlight.focus.background}",
+                        color: "var(--main-blue)",
+                        focusColor: "var(--main-light)",
+                        selectedColor: "{highlight.color}",
+                        selectedFocusColor: "{highlight.focus.color}",
+                        icon: {
+                            color: "{surface.400}",
+                            focusColor: "{surface.500}",
+                        },
+                    },
+                    optionGroup: {
+                        background: "transparent",
+                        color: "{text.muted.color}",
+                    },
+                },
+                navigation: {
+                    item: {
+                        focusBackground: "{surface.100}",
+                        activeBackground: "{surface.100}",
+                        color: "{text.color}",
+                        focusColor: "{text.hover.color}",
+                        activeColor: "{text.hover.color}",
+                        icon: {
+                            color: "{surface.400}",
+                            focusColor: "{surface.500}",
+                            activeColor: "{surface.500}",
+                        },
+                    },
+                    submenuLabel: {
+                        background: "transparent",
+                        color: "{text.muted.color}",
+                    },
+                    submenuIcon: {
+                        color: "{surface.400}",
+                        focusColor: "{surface.500}",
+                        activeColor: "{surface.500}",
+                    },
+                },
+            },
+            dark: {
+                surface: {
+                    0: "#ffffff",
+                    50: "#f8fafc",
+                    100: "#f1f5f9",
+                    200: "#e2e8f0",
+                    300: "#cbd5e1",
+                    400: "#94a3b8",
+                    500: "#64748b",
+                    600: "#475569",
+                    700: "#334155",
+                    800: "#1e293b",
+                    900: "#0f172a",
+                    950: "#020617",
+                },
+                primary: {
+                    color: "{primary.700}",
+                    contrastColor: "#ffffff",
+                    hoverColor: "{primary.600}",
+                    activeColor: "{primary.700}",
+                },
+                secondary: {
+                    color: "{secondary.500}",
+                },
+                highlight: {
+                    background: "var(--main-orange)",
+                    focusBackground: "var(--main-orange)",
+                    color: "{orange.0}",
+                    focusColor: "{orange.0}",
+                },
+                mask: {
+                    background: "rgba(23, 55, 94, 0.8)",
+                    color: "{surface.200}",
+                },
+                formField: {
+                    paddingX: "1.0rem", // added by CA
+                    paddingY: "0.6rem", // added by CA
+                    background: "var(--main-light)",
+                    disabledBackground: "{gray.100}",
+                    filledBackground: "{surface.50}",
+                    filledHoverBackground: "{surface.50}",
+                    filledFocusBackground: "{surface.50}",
+                    borderColor: "{gray.300}",
+                    hoverBorderColor: "{primary.color}", // modify by CA
+                    focusBorderColor: "{primary.color}",
+                    invalidBorderColor: "{red.400}",
+                    color: "{surface.700}",
+                    disabledColor: "{gray.500}",
+                    placeholderColor: "{gray.500}",
+                    invalidPlaceholderColor: "{red.600}",
+                    floatLabelColor: "{surface.500}",
+                    floatLabelFocusColor: "{primary.600}",
+                    floatLabelActiveColor: "{surface.500}",
+                    floatLabelInvalidColor: "{form.field.invalid.placeholder.color}",
+                    iconColor: "{primary.color}",
+                    shadow: "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)",
+                    borderRadius: "{border.radius.sm}",
+                },
+                text: {
+                    color: "var(--main-blue)",
+                    hoverColor: "var(--main-orange)",
+                    mutedColor: "var(--main-orange)",
+                    hoverMutedColor: "orange.700}",
+                },
+                content: {
+                    background: "{gray.0}",
+                    hoverBackground: "{surface.100}",
+                    borderColor: "var(--main-blue)",
+                    color: "{text.color}",
+                    hoverColor: "{text.hover.color}",
+                },
+                overlay: {
+                    select: {
+                        borderRadius: "{border.radius.md}",
+                        shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+                        background: "var(--main-light)",
+                        borderColor: "{surface.200}",
+                        color: "{text.color}",
+                    },
+                    popover: {
+                        background: "var(--main-light)",
+                        borderColor: "{surface.200}",
+                        color: "{text.color}",
+                        borderRadius: "{border.radius.md}",
+                        padding: "0",
+                        shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+                    },
+                    modal: {
+                        borderColor: "#bfbfbf",
+                        color: "{text.color}",
+                        borderRadius: "{border.radius.xl}",
+                        padding: "1.5rem",
+                        shadow: "none",
+                    },
+                    navigation: {
+                        shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+                    },
+                },
+                focusRing: {
+                    width: "1px",
+                    style: "solid",
+                    color: "{primary.color}",
+                    offset: "-.1rem",
+                    shadow: "none",
+                },
+                borderRadius: {
+                    none: "0",
+                    xs: "0.2rem",
+                    sm: "0.4rem",
+                    md: "0.6rem",
+                    lg: "0.8rem",
+                    xl: "1.2rem",
+                },
+                disabledOpacity: "1",
+                list: {
+                    padding: "0rem",
+                    gap: "0rem",
+                    option: {
+                        borderRadius: "0rem",
+                        focusBackground: "var(--main-orange)",
+                        selectedBackground: "{highlight.background}",
+                        selectedFocusBackground: "{highlight.focus.background}",
+                        color: "var(--main-blue)",
+                        focusColor: "var(--main-light)",
+                        selectedColor: "{highlight.color}",
+                        selectedFocusColor: "{highlight.focus.color}",
+                        icon: {
+                            color: "{surface.400}",
+                            focusColor: "{surface.500}",
+                        },
+                    },
+                    optionGroup: {
+                        background: "transparent",
+                        color: "{text.muted.color}",
+                    },
+                },
+                navigation: {
+                    item: {
+                        focusBackground: "{surface.100}",
+                        activeBackground: "{surface.100}",
+                        color: "{text.color}",
+                        focusColor: "{text.hover.color}",
+                        activeColor: "{text.hover.color}",
+                        icon: {
+                            color: "{surface.400}",
+                            focusColor: "{surface.500}",
+                            activeColor: "{surface.500}",
+                        },
+                    },
+                    submenuLabel: {
+                        background: "transparent",
+                        color: "{text.muted.color}",
+                    },
+                    submenuIcon: {
+                        color: "{surface.400}",
+                        focusColor: "{surface.500}",
+                        activeColor: "{surface.500}",
+                    },
+                },
+            },
+        },
+    },
+    components: {
+        accordion: {
+            root: {
+                transitionDuration: "{transition.duration}",
+            },
+            panel: {
+                borderWidth: "0 0 1px 0",
+                borderColor: "{content.border.color}",
+            },
+            header: {
+                color: "{text.muted.color}",
+                hoverColor: "{text.color}",
+                activeColor: "{text.color}",
+                padding: "1.125rem",
+                fontWeight: "600",
+                borderRadius: "0",
+                borderWidth: "0",
+                borderColor: "{content.border.color}",
+                background: "{content.background}",
+                hoverBackground: "{content.background}",
+                activeBackground: "{content.background}",
+                activeHoverBackground: "{content.background}",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "-1px",
+                    shadow: "{focus.ring.shadow}",
+                },
+                toggleIcon: {
+                    color: "{text.muted.color}",
+                    hoverColor: "{text.color}",
+                    activeColor: "{text.color}",
+                    activeHoverColor: "{text.color}",
+                },
+                first: {
+                    topBorderRadius: "{content.border.radius}",
+                    borderWidth: "0",
+                },
+                last: {
+                    bottomBorderRadius: "{content.border.radius}",
+                    activeBottomBorderRadius: "0",
+                },
+            },
+            content: {
+                borderWidth: "0",
+                borderColor: "{content.border.color}",
+                background: "{content.background}",
+                color: "{text.color}",
+                padding: "0 1.125rem 1.125rem 1.125rem",
+            },
+            colorScheme: {
+                light: {
+                    text: {
+                        color: "red",
+                    },
+                },
+                dark: {
+                    text: {
+                        color: "red",
+                    },
+                },
+            },
+        },
+        autocomplete: {
+            root: {
+                background: "{form.field.background}",
+                disabledBackground: "{form.field.disabled.background}",
+                filledBackground: "{form.field.filled.background}",
+                filledHoverBackground: "{form.field.filled.hover.background}",
+                filledFocusBackground: "{form.field.filled.focus.background}",
+                borderColor: "{form.field.border.color}",
+                hoverBorderColor: "{form.field.hover.border.color}",
+                focusBorderColor: "{form.field.focus.border.color}",
+                invalidBorderColor: "{form.field.invalid.border.color}",
+                color: "{form.field.color}",
+                disabledColor: "{form.field.disabled.color}",
+                placeholderColor: "{form.field.placeholder.color}",
+                invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+                shadow: "{form.field.shadow}",
+                paddingX: "{form.field.padding.x}",
+                paddingY: "{form.field.padding.y}",
+                borderRadius: "{form.field.border.radius}",
+                focusRing: {
+                    width: "{form.field.focus.ring.width}",
+                    style: "{form.field.focus.ring.style}",
+                    color: "{form.field.focus.ring.color}",
+                    offset: "{form.field.focus.ring.offset}",
+                    shadow: "{form.field.focus.ring.shadow}",
+                },
+                transitionDuration: "{form.field.transition.duration}",
+            },
+            overlay: {
+                background: "{overlay.select.background}",
+                borderColor: "{overlay.select.border.color}",
+                borderRadius: "{overlay.select.border.radius}",
+                color: "{overlay.select.color}",
+                shadow: "{overlay.select.shadow}",
+            },
+            list: {
+                padding: "{list.padding}", // var(--p-autocomplete-list-padding)
+                gap: "{list.gap}", // var(--p-autocomplete-list-gap)
+            },
+            option: {
+                focusBackground: "{list.option.focus.background}",
+                selectedBackground: "{list.option.selected.background}",
+                selectedFocusBackground: "{list.option.selected.focus.background}",
+                color: "{list.option.color}",
+                focusColor: "{list.option.focus.color}", // var(--p-autocomplete-option-focus-color)
+                selectedColor: "{list.option.selected.color}",
+                selectedFocusColor: "{list.option.selected.focus.color}",
+                padding: "{list.option.padding}",
+                borderRadius: "{list.option.border.radius}", // var(--p-autocomplete-option-border-radius)
+            },
+            optionGroup: {
+                background: "{list.option.group.background}",
+                color: "{list.option.group.color}",
+                fontWeight: "{list.option.group.font.weight}",
+                padding: "{list.option.group.padding}",
+            },
+            dropdown: {
+                width: "2.5rem",
+                sm: {
+                    width: "2rem",
+                },
+                lg: {
+                    width: "3rem",
+                },
+                background: "red",
+                borderColor: "{form.field.border.color}",
+                hoverBorderColor: "{form.field.border.color}",
+                activeBorderColor: "{form.field.border.color}",
+                borderRadius: "{form.field.border.radius}",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "{focus.ring.offset}", //var(--p-autocomplete-dropdown-focus-ring-offset)
+                    shadow: "{focus.ring.shadow}",
+                },
+            },
+            chip: {
+                borderRadius: "{border.radius.sm}",
+            },
+            emptyMessage: {
+                padding: "{list.option.padding}",
+            },
+            colorScheme: {
+                light: {
+                    chip: {
+                        focusBackground: "{surface.200}",
+                        focusColor: "{surface.800}",
+                    },
+                    dropdown: {
+                        background: "{primary.0}",
+                        hoverBackground: "{primary.0}",
+                        activeBackground: "{primary.0}",
+                        color: "{surface.600}",
+                        hoverColor: "{surface.700}",
+                        activeColor: "{surface.800}",
+                    },
+                },
+                dark: {
+                    chip: {
+                        focusBackground: "{surface.200}",
+                        focusColor: "{surface.800}",
+                    },
+                    dropdown: {
+                        background: "{primary.0}",
+                        hoverBackground: "{primary.0}",
+                        activeBackground: "{primary.0}",
+                        color: "{surface.600}",
+                        hoverColor: "{surface.700}",
+                        activeColor: "{surface.800}",
+                    },
+                },
+            },
+        },
+        badge: {
+            root: {
+                borderRadius: "{border.radius.xl}",
+                padding: "0 1rem",
+                fontSize: "1rem",
+                fontWeight: "400",
+                minWidth: "6.8rem",
+                height: "1.8rem",
+            },
+            dot: {
+                size: "0.5rem",
+            },
+            sm: {
+                fontSize: "0.625rem",
+                minWidth: "1.25rem",
+                height: "1.25rem",
+            },
+            lg: {
+                fontSize: "0.875rem",
+                minWidth: "1.75rem",
+                height: "1.75rem",
+            },
+            xl: {
+                fontSize: "1rem",
+                minWidth: "2rem",
+                height: "2rem",
+            },
+            colorScheme: {
+                light: {
+                    primary: {
+                        background: "{green.500}",
+                        color: "var(--main-light)",
+                    },
+                    success: {
+                        background: "{green.500}",
+                        color: "var(--main-light)",
+                    },
+                    danger: {
+                        background: "{red.500}",
+                        color: "var(--main-light)",
+                    },
+                },
+                dark: {
+                    primary: {
+                        background: "{green.500}",
+                        color: "var(--main-light)",
+                    },
+                    success: {
+                        background: "{green.500}",
+                        color: "var(--main-light)",
+                    },
+                    danger: {
+                        background: "{red.500}",
+                        color: "var(--main-light)",
+                    },
+                },
+            },
+        },
+        button: {
+            root: {
+                borderRadius: "{border.radius.sm}",
+                roundedBorderRadius: "2rem",
+                gap: "0.25em",
+                paddingX: "1rem",
+                paddingY: "0.4rem",
+                iconOnlyWidth: "2.5rem",
+                sm: {
+                    fontSize: "{form.field.sm.font.size}",
+                    paddingX: "{form.field.sm.padding.x}",
+                    paddingY: "{form.field.sm.padding.y}",
+                },
+                lg: {
+                    fontSize: "{form.field.lg.font.size}",
+                    paddingX: "{form.field.lg.padding.x}",
+                    paddingY: "{form.field.lg.padding.y}",
+                },
+                label: {
+                    fontWeight: "500",
+                },
+                raisedShadow: "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    offset: "{focus.ring.offset}",
+                },
+                badgeSize: "1rem",
+                transitionDuration: "{form.field.transition.duration}",
+            },
+            colorScheme: {
+                light: {
+                    root: {
+                        primary: {
+                            background: "var(--main-orange)",
+                            hoverBackground: "var(--main-orange-dark)",
+                            activeBackground: "var(--main-orange-dark)",
+                            borderColor: "var(--main-orange)",
+                            hoverBorderColor: "var(--main-orange-dark)",
+                            activeBorderColor: "var(--main-orange-dark)",
+                            color: "var(--main-light)",
+                            hoverColor: "var(--main-light)",
+                            activeColor: "var(--main-light)",
+                            focusRing: {
+                                color: "{primary.color}",
+                                shadow: "none",
+                            },
+                        },
+                        secondary: {
+                            background: "var(--main-light)",
+                            hoverBackground: "var(--main-light)",
+                            activeBackground: "var(--main-orange-dark)",
+                            borderColor: "var(--main-orange)",
+                            hoverBorderColor: "var(--main-orange-dark)",
+                            activeBorderColor: "var(--main-orange-dark)",
+                            color: "var(--main-orange)",
+                            hoverColor: "var(--main-orange-dark)",
+                            activeColor: "var(--main-light)",
+                            focusRing: {
+                                color: "{surface.600}",
+                                shadow: "none",
+                            },
+                        },
+                        info: {
+                            background: "{sky.500}",
+                            hoverBackground: "{sky.600}",
+                            activeBackground: "{sky.700}",
+                            borderColor: "{sky.500}",
+                            hoverBorderColor: "{sky.600}",
+                            activeBorderColor: "{sky.700}",
+                            color: "#ffffff",
+                            hoverColor: "#ffffff",
+                            activeColor: "#ffffff",
+                            focusRing: {
+                                color: "{sky.500}",
+                                shadow: "none",
+                            },
+                        },
+                        success: {
+                            background: "var(--main-light)",
+                            hoverBackground: "{gray.400}",
+                            activeBackground: "{gray.400}",
+                            borderColor: "{gray.400}",
+                            hoverBorderColor: "{gray.400}",
+                            activeBorderColor: "{gray.400}",
+                            color: "var(--main-blue)",
+                            hoverColor: "#ffffff",
+                            activeColor: "#ffffff",
+                            focusRing: {
+                                color: "{green.500}",
+                                shadow: "none",
+                            },
+                        },
+                        warn: {
+                            background: "var(--main-orange)",
+                            hoverBackground: "{orange.600}",
+                            activeBackground: "var(--main-orange-dark)",
+                            borderColor: "var(--main-orange)",
+                            hoverBorderColor: "{orange.600}",
+                            activeBorderColor: "var(--main-orange-dark)",
+                            color: "#ffffff",
+                            hoverColor: "#ffffff",
+                            activeColor: "#ffffff",
+                            focusRing: {
+                                color: "var(--main-orange)",
+                                shadow: "none",
+                            },
+                        },
+                        help: {
+                            background: "{purple.500}",
+                            hoverBackground: "{purple.600}",
+                            activeBackground: "{purple.700}",
+                            borderColor: "{purple.500}",
+                            hoverBorderColor: "{purple.600}",
+                            activeBorderColor: "{purple.700}",
+                            color: "#ffffff",
+                            hoverColor: "#ffffff",
+                            activeColor: "#ffffff",
+                            focusRing: {
+                                color: "{purple.500}",
+                                shadow: "none",
+                            },
+                        },
+                        danger: {
+                            background: "{red.500}",
+                            hoverBackground: "{red.600}",
+                            activeBackground: "{red.700}",
+                            borderColor: "{red.500}",
+                            hoverBorderColor: "{red.600}",
+                            activeBorderColor: "{red.700}",
+                            color: "#ffffff",
+                            hoverColor: "#ffffff",
+                            activeColor: "#ffffff",
+                            focusRing: {
+                                color: "{red.500}",
+                                shadow: "none",
+                            },
+                        },
+                        contrast: {
+                            background: "{surface.950}",
+                            hoverBackground: "{surface.900}",
+                            activeBackground: "{surface.800}",
+                            borderColor: "{surface.950}",
+                            hoverBorderColor: "{surface.900}",
+                            activeBorderColor: "{surface.800}",
+                            color: "var(--main-light)",
+                            hoverColor: "var(--main-light)",
+                            activeColor: "var(--main-light)",
+                            focusRing: {
+                                color: "{surface.950}",
+                                shadow: "none",
+                            },
+                        },
+                    },
+                    outlined: {
+                        primary: {
+                            hoverBackground: "{transparent}",
+                            activeBackground: "{transparent}",
+                            borderColor: "{transparent}",
+                            color: "{primary.color}",
+                        },
+                        secondary: {
+                            hoverBackground: "{transparent}",
+                            activeBackground: "{transparent}",
+                            borderColor: "{transparent}",
+                            color: "var(--main-orange)",
+                        },
+                        success: {
+                            background: "{surface.0}",
+                            hoverBackground: "{gray.400}",
+                            activeBackground: "{gray.400}",
+                            borderColor: "{gray.400}",
+                            hoverBorderColor: "{gray.400}",
+                            activeBorderColor: "{gray.400}",
+                            color: "{blue.700}",
+                            hoverColor: "#ffffff",
+                            activeColor: "#ffffff",
+                            focusRing: {
+                                color: "{green.500}",
+                                shadow: "none",
+                            },
+                        },
+                        info: {
+                            hoverBackground: "{sky.50}",
+                            activeBackground: "{sky.100}",
+                            borderColor: "{sky.200}",
+                            color: "{sky.500}",
+                        },
+                        warn: {
+                            hoverBackground: "{orange.50}",
+                            activeBackground: "{orange.100}",
+                            borderColor: "{orange.200}",
+                            color: "var(--main-orange)",
+                        },
+                        help: {
+                            hoverBackground: "{purple.50}",
+                            activeBackground: "{purple.100}",
+                            borderColor: "{purple.200}",
+                            color: "{purple.500}",
+                        },
+                        danger: {
+                            hoverBackground: "{red.50}",
+                            activeBackground: "{red.100}",
+                            borderColor: "{red.200}",
+                            color: "{red.500}",
+                        },
+                        contrast: {
+                            hoverBackground: "{surface.50}",
+                            activeBackground: "{surface.100}",
+                            borderColor: "{surface.700}",
+                            color: "{surface.950}",
+                        },
+                        plain: {
+                            hoverBackground: "{surface.50}",
+                            activeBackground: "{surface.100}",
+                            borderColor: "{surface.200}",
+                            color: "{surface.700}",
+                        },
+                    },
+                    text: {
+                        primary: {
+                            hoverBackground: "{transparent}",
+                            activeBackground: "{transparent}",
+                            color: "var(--main-blue)",
+                        },
+                        secondary: {
+                            hoverBackground: "{transparent}",
+                            activeBackground: "{transparent}",
+                            color: "var(--main-orange)",
+                        },
+                        success: {
+                            hoverBackground: "{green.50}",
+                            activeBackground: "{green.100}",
+                            color: "{green.500}",
+                        },
+                        info: {
+                            hoverBackground: "{sky.50}",
+                            activeBackground: "{sky.100}",
+                            color: "{sky.500}",
+                        },
+                        warn: {
+                            hoverBackground: "{orange.50}",
+                            activeBackground: "{orange.100}",
+                            color: "var(--main-orange)",
+                        },
+                        help: {
+                            hoverBackground: "{purple.50}",
+                            activeBackground: "{purple.100}",
+                            color: "{purple.500}",
+                        },
+                        danger: {
+                            hoverBackground: "{red.50}",
+                            activeBackground: "{red.100}",
+                            color: "{red.500}",
+                        },
+                        contrast: {
+                            hoverBackground: "{surface.50}",
+                            activeBackground: "{surface.100}",
+                            color: "{surface.950}",
+                        },
+                        plain: {
+                            hoverBackground: "{surface.50}",
+                            activeBackground: "{surface.100}",
+                            color: "{surface.700}",
+                        },
+                    },
+                    link: {
+                        color: "{primary.color}",
+                        hoverColor: "{primary.color}",
+                        activeColor: "{primary.color}",
+                    },
+                },
+                dark: {
+                    root: {
+                        primary: {
+                            background: "var(--main-orange)",
+                            hoverBackground: "var(--main-orange-dark)",
+                            activeBackground: "var(--main-orange-dark)",
+                            borderColor: "var(--main-orange)",
+                            hoverBorderColor: "var(--main-orange-dark)",
+                            activeBorderColor: "var(--main-orange-dark)",
+                            color: "var(--main-light)",
+                            hoverColor: "var(--main-light)",
+                            activeColor: "var(--main-light)",
+                            focusRing: {
+                                color: "{primary.color}",
+                                shadow: "none",
+                            },
+                        },
+                        secondary: {
+                            background: "var(--main-light)",
+                            hoverBackground: "var(--main-light)",
+                            activeBackground: "var(--main-orange-dark)",
+                            borderColor: "var(--main-orange)",
+                            hoverBorderColor: "var(--main-orange-dark)",
+                            activeBorderColor: "var(--main-orange-dark)",
+                            color: "var(--main-orange)",
+                            hoverColor: "var(--main-orange-dark)",
+                            activeColor: "var(--main-light)",
+                            focusRing: {
+                                color: "{surface.600}",
+                                shadow: "none",
+                            },
+                        },
+                        info: {
+                            background: "{sky.500}",
+                            hoverBackground: "{sky.600}",
+                            activeBackground: "{sky.700}",
+                            borderColor: "{sky.500}",
+                            hoverBorderColor: "{sky.600}",
+                            activeBorderColor: "{sky.700}",
+                            color: "#ffffff",
+                            hoverColor: "#ffffff",
+                            activeColor: "#ffffff",
+                            focusRing: {
+                                color: "{sky.500}",
+                                shadow: "none",
+                            },
+                        },
+                        success: {
+                            background: "var(--main-light)",
+                            hoverBackground: "{gray.400}",
+                            activeBackground: "{gray.400}",
+                            borderColor: "{gray.400}",
+                            hoverBorderColor: "{gray.400}",
+                            activeBorderColor: "{gray.400}",
+                            color: "var(--main-blue)",
+                            hoverColor: "#ffffff",
+                            activeColor: "#ffffff",
+                            focusRing: {
+                                color: "{green.500}",
+                                shadow: "none",
+                            },
+                        },
+                        warn: {
+                            background: "var(--main-orange)",
+                            hoverBackground: "{orange.600}",
+                            activeBackground: "var(--main-orange-dark)",
+                            borderColor: "var(--main-orange)",
+                            hoverBorderColor: "{orange.600}",
+                            activeBorderColor: "var(--main-orange-dark)",
+                            color: "#ffffff",
+                            hoverColor: "#ffffff",
+                            activeColor: "#ffffff",
+                            focusRing: {
+                                color: "var(--main-orange)",
+                                shadow: "none",
+                            },
+                        },
+                        help: {
+                            background: "{purple.500}",
+                            hoverBackground: "{purple.600}",
+                            activeBackground: "{purple.700}",
+                            borderColor: "{purple.500}",
+                            hoverBorderColor: "{purple.600}",
+                            activeBorderColor: "{purple.700}",
+                            color: "#ffffff",
+                            hoverColor: "#ffffff",
+                            activeColor: "#ffffff",
+                            focusRing: {
+                                color: "{purple.500}",
+                                shadow: "none",
+                            },
+                        },
+                        danger: {
+                            background: "{red.500}",
+                            hoverBackground: "{red.600}",
+                            activeBackground: "{red.700}",
+                            borderColor: "{red.500}",
+                            hoverBorderColor: "{red.600}",
+                            activeBorderColor: "{red.700}",
+                            color: "#ffffff",
+                            hoverColor: "#ffffff",
+                            activeColor: "#ffffff",
+                            focusRing: {
+                                color: "{red.500}",
+                                shadow: "none",
+                            },
+                        },
+                        contrast: {
+                            background: "{surface.950}",
+                            hoverBackground: "{surface.900}",
+                            activeBackground: "{surface.800}",
+                            borderColor: "{surface.950}",
+                            hoverBorderColor: "{surface.900}",
+                            activeBorderColor: "{surface.800}",
+                            color: "var(--main-light)",
+                            hoverColor: "var(--main-light)",
+                            activeColor: "var(--main-light)",
+                            focusRing: {
+                                color: "{surface.950}",
+                                shadow: "none",
+                            },
+                        },
+                    },
+                    outlined: {
+                        primary: {
+                            hoverBackground: "{transparent}",
+                            activeBackground: "{transparent}",
+                            borderColor: "{transparent}",
+                            color: "{primary.color}",
+                        },
+                        secondary: {
+                            hoverBackground: "{transparent}",
+                            activeBackground: "{transparent}",
+                            borderColor: "{transparent}",
+                            color: "var(--main-orange)",
+                        },
+                        success: {
+                            hoverBackground: "{green.50}",
+                            activeBackground: "{green.100}",
+                            borderColor: "{green.200}",
+                            color: "{green.500}",
+                        },
+                        info: {
+                            hoverBackground: "{sky.50}",
+                            activeBackground: "{sky.100}",
+                            borderColor: "{sky.200}",
+                            color: "{sky.500}",
+                        },
+                        warn: {
+                            hoverBackground: "{orange.50}",
+                            activeBackground: "{orange.100}",
+                            borderColor: "{orange.200}",
+                            color: "var(--main-orange)",
+                        },
+                        help: {
+                            hoverBackground: "{purple.50}",
+                            activeBackground: "{purple.100}",
+                            borderColor: "{purple.200}",
+                            color: "{purple.500}",
+                        },
+                        danger: {
+                            hoverBackground: "{red.50}",
+                            activeBackground: "{red.100}",
+                            borderColor: "{red.200}",
+                            color: "{red.500}",
+                        },
+                        contrast: {
+                            hoverBackground: "{surface.50}",
+                            activeBackground: "{surface.100}",
+                            borderColor: "{surface.700}",
+                            color: "{surface.950}",
+                        },
+                        plain: {
+                            hoverBackground: "{surface.50}",
+                            activeBackground: "{surface.100}",
+                            borderColor: "{surface.200}",
+                            color: "{surface.700}",
+                        },
+                    },
+                    text: {
+                        primary: {
+                            hoverBackground: "{transparent}",
+                            activeBackground: "{transparent}",
+                            color: "var(--main-blue)",
+                        },
+                        secondary: {
+                            hoverBackground: "{transparent}",
+                            activeBackground: "{transparent}",
+                            color: "var(--main-orange)",
+                        },
+                        success: {
+                            hoverBackground: "{green.50}",
+                            activeBackground: "{green.100}",
+                            color: "{green.500}",
+                        },
+                        info: {
+                            hoverBackground: "{sky.50}",
+                            activeBackground: "{sky.100}",
+                            color: "{sky.500}",
+                        },
+                        warn: {
+                            hoverBackground: "{orange.50}",
+                            activeBackground: "{orange.100}",
+                            color: "var(--main-orange)",
+                        },
+                        help: {
+                            hoverBackground: "{purple.50}",
+                            activeBackground: "{purple.100}",
+                            color: "{purple.500}",
+                        },
+                        danger: {
+                            hoverBackground: "{red.50}",
+                            activeBackground: "{red.100}",
+                            color: "{red.500}",
+                        },
+                        contrast: {
+                            hoverBackground: "{surface.50}",
+                            activeBackground: "{surface.100}",
+                            color: "{surface.950}",
+                        },
+                        plain: {
+                            hoverBackground: "{surface.50}",
+                            activeBackground: "{surface.100}",
+                            color: "{surface.700}",
+                        },
+                    },
+                    link: {
+                        color: "{primary.color}",
+                        hoverColor: "{primary.color}",
+                        activeColor: "{primary.color}",
+                    },
+                },
+            },
+        },
+        carousel: {
+            root: {
+                transitionDuration: "{transition.duration}",
+            },
+            content: {
+                gap: "0.25rem",
+            },
+            indicatorList: {
+                padding: "1rem",
+                gap: "0.5rem",
+            },
+            indicator: {
+                width: "0.8rem",
+                height: "0.8rem",
+                borderRadius: "{content.border.radius}",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "{focus.ring.offset}",
+                    shadow: "{focus.ring.shadow}",
+                },
+            },
+            colorScheme: {
+                light: {
+                    indicator: {
+                        background: "var(--main-blue)",
+                        hoverBackground: "var(--main-blue)",
+                        activeBackground: "{primary.color}",
+                    },
+                },
+                dark: {
+                    indicator: {
+                        background: "var(--main-blue)",
+                        hoverBackground: "var(--main-blue)",
+                        activeBackground: "{primary.color}",
+                    },
+                },
+            },
+        },
+        checkbox: {
+            root: {
+                borderRadius: "{border.radius.sm}",
+                width: "1.2rem",
+                height: "1.2rem",
+                background: "{form.field.background}",
+                checkedBackground: "var(--main-orange)",
+                checkedHoverBackground: "var(--main-orange)",
+                disabledBackground: "{form.field.disabled.background}",
+                filledBackground: "{form.field.filled.background}",
+                borderColor: "{gray.500}",
+                hoverBorderColor: "var(--main-orange)",
+                focusBorderColor: "var(--main-blue)",
+                checkedBorderColor: "var(--main-orange)",
+                checkedHoverBorderColor: "var(--main-orange)",
+                checkedFocusBorderColor: "{primary.color}",
+                checkedDisabledBorderColor: "{form.field.border.color}",
+                invalidBorderColor: "{form.field.invalid.border.color}",
+                shadow: "{form.field.shadow}",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "{focus.ring.offset}",
+                    shadow: "{focus.ring.shadow}",
+                },
+                transitionDuration: "{form.field.transition.duration}",
+                sm: {
+                    width: "1rem",
+                    height: "1rem",
+                },
+                lg: {
+                    width: "1.5rem",
+                    height: "1.5rem",
+                },
+            },
+            icon: {
+                size: "0.875rem",
+                color: "{form.field.color}",
+                checkedColor: "{primary.contrast.color}",
+                checkedHoverColor: "{primary.contrast.color}",
+                disabledColor: "{form.field.disabled.color}",
+                sm: {
+                    size: "0.75rem",
+                },
+                lg: {
+                    size: "1rem",
+                },
+            },
+        },
+        datatable: {
+            root: {
+                transitionDuration: "{transition.duration}",
+            },
+            header: {
+                background: "{content.background}",
+                borderColor: "{datatable.border.color}",
+                color: "{content.color}",
+                borderWidth: "0 0 1px 0",
+                padding: "0.75rem 1rem",
+            },
+            headerCell: {
+                background: "var(--main-blue)",
+                hoverBackground: "var(--main-blue)",
+                selectedBackground: "var(--main-blue)",
+                color: "var(--main-light)",
+                hoverColor: "var(--main-light)",
+                selectedColor: "var(--main-light)",
+                gap: "0.5rem",
+                padding: "1.3rem 0.5rem",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "-1px",
+                    shadow: "{focus.ring.shadow}",
+                },
+            },
+            columnTitle: {
+                fontWeight: "400",
+            },
+            row: {
+                background: "{content.background}",
+                hoverBackground: "#cbd9ea",
+                selectedBackground: "{highlight.background}",
+                color: "{content.color}",
+                hoverColor: "var(--main-blue)",
+                selectedColor: "{highlight.color}",
+                borderWidth: "0px",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "-1px",
+                    shadow: "{focus.ring.shadow}",
+                },
+            },
+            bodyCell: {
+                borderColor: "transparent",
+                padding: "0.75rem 1rem",
+            },
+            footerCell: {
+                background: "{content.background}",
+                borderColor: "{datatable.border.color}",
+                color: "{content.color}",
+                padding: "0.75rem 1rem",
+            },
+            columnFooter: {
+                fontWeight: "600",
+            },
+            footer: {
+                background: "{content.background}",
+                borderColor: "{datatable.border.color}",
+                color: "{content.color}",
+                borderWidth: "0 0 1px 0",
+                padding: "0.75rem 1rem",
+            },
+            dropPoint: {
+                color: "{primary.color}",
+            },
+            columnResizerWidth: "0.5rem",
+            resizeIndicator: {
+                width: "1px",
+                color: "{primary.color}",
+            },
+            sortIcon: {
+                color: "{text.muted.color}",
+                hoverColor: "{text.hover.muted.color}",
+                size: "0.875rem",
+            },
+            loadingIcon: {
+                size: "2rem",
+            },
+            rowToggleButton: {
+                hoverBackground: "{content.hover.background}",
+                selectedHoverBackground: "{content.background}",
+                color: "{text.muted.color}",
+                hoverColor: "{text.color}",
+                selectedHoverColor: "{primary.color}",
+                size: "1.75rem",
+                borderRadius: "50%",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "{focus.ring.offset}",
+                    shadow: "{focus.ring.shadow}",
+                },
+            },
+            filter: {
+                inlineGap: "0.5rem",
+                overlaySelect: {
+                    background: "{overlay.select.background}",
+                    borderColor: "{overlay.select.border.color}",
+                    borderRadius: "{overlay.select.border.radius}",
+                    color: "{overlay.select.color}",
+                    shadow: "{overlay.select.shadow}",
+                },
+                overlayPopover: {
+                    background: "{overlay.popover.background}",
+                    borderColor: "{overlay.popover.border.color}",
+                    borderRadius: "{overlay.popover.border.radius}",
+                    color: "{overlay.popover.color}",
+                    shadow: "{overlay.popover.shadow}",
+                    padding: "{overlay.popover.padding}",
+                    gap: "0.5rem",
+                },
+                rule: {
+                    borderColor: "{content.border.color}",
+                },
+                constraintList: {
+                    padding: "{list.padding}",
+                    gap: "{list.gap}",
+                },
+                constraint: {
+                    focusBackground: "{list.option.focus.background}",
+                    selectedBackground: "{list.option.selected.background}",
+                    selectedFocusBackground: "{list.option.selected.focus.background}",
+                    color: "{list.option.color}",
+                    focusColor: "{list.option.focus.color}",
+                    selectedColor: "{list.option.selected.color}",
+                    selectedFocusColor: "{list.option.selected.focus.color}",
+                    separator: {
+                        borderColor: "{content.border.color}",
+                    },
+                    padding: "{list.option.padding}",
+                    borderRadius: "{list.option.border.radius}",
+                },
+            },
+            paginatorTop: {
+                borderColor: "{datatable.border.color}",
+                borderWidth: "0 0 1px 0",
+            },
+            paginatorBottom: {
+                borderColor: "{datatable.border.color}",
+                borderWidth: "0 0 1px 0",
+            },
+            colorScheme: {
+                light: {
+                    root: {
+                        borderColor: "{content.border.color}",
+                    },
+                    row: {
+                        stripedBackground: "{surface.50}",
+                    },
+                    bodyCell: {
+                        selectedBorderColor: "{primary.100}",
+                    },
+                },
+                dark: {
+                    root: {
+                        borderColor: "{content.border.color}",
+                    },
+                    row: {
+                        stripedBackground: "{surface.50}",
+                    },
+                    bodyCell: {
+                        selectedBorderColor: "{primary.100}",
+                    },
+                },
+            },
+        },
+        dialog: {
+            root: {
+                background: "var(--main-light)",
+                color: "{overlay.modal.color}",
+                borderRadius: "{overlay.modal.border.radius}",
+                shadow: "none",
+            },
+            header: {
+                gap: "0.5rem",
+            },
+            title: {
+                fontSize: "1.25rem",
+                fontWeight: "600",
+            },
+            content: {
+                padding: " {overlay.modal.padding}",
+            },
+            footer: {
+                padding: "0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}",
+            },
+        },
+        fileupload: {
+            root: {
+                background: "{content.background}",
+                borderColor: "{content.border.color}",
+                color: "{content.color}",
+                borderRadius: "{content.border.radius}",
+                transitionDuration: "{transition.duration}",
+            },
+            header: {
+                background: "transparent",
+                color: "{text.color}",
+                padding: "1.125rem",
+                borderColor: "unset",
+                borderWidth: "0",
+                borderRadius: "0",
+                gap: "0.5rem",
+            },
+            content: {
+                highlightBorderColor: "{primary.color}",
+                padding: "0 1.125rem 1.125rem 1.125rem",
+                gap: "1rem",
+            },
+            file: {
+                padding: "1rem",
+                gap: "1rem",
+                borderColor: "{content.border.color}",
+                info: {
+                    gap: "0.5rem",
+                },
+            },
+            fileList: {
+                gap: "0.5rem",
+            },
+            progressbar: {
+                height: "0.25rem",
+            },
+            basic: {
+                gap: "0.5rem",
+            },
+        },
+        inputtext: {
+            root: {
+                background: "{form.field.background}",
+                disabledBackground: "{form.field.disabled.background}", // var(--p-inputtext-disabled-background)
+                filledBackground: "{form.field.filled.background}",
+                filledHoverBackground: "{form.field.filled.hover.background}",
+                filledFocusBackground: "{form.field.filled.focus.background}",
+                borderColor: "{form.field.border.color}",
+                hoverBorderColor: "{form.field.hover.border.color}",
+                focusBorderColor: "{form.field.focus.border.color}",
+                invalidBorderColor: "{form.field.invalid.border.color}",
+                color: "{form.field.color}",
+                disabledColor: "{form.field.disabled.color}",
+                placeholderColor: "{form.field.placeholder.color}",
+                invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+                shadow: "{form.field.shadow}",
+                paddingX: "{form.field.padding.x}",
+                paddingY: "{form.field.padding.y}",
+                borderRadius: "{form.field.border.radius}", // var(--p-inputtext-border-radius)
+                focusRing: {
+                    width: "{form.field.focus.ring.width}",
+                    style: "{form.field.focus.ring.style}",
+                    color: "{form.field.focus.ring.color}",
+                    offset: "{form.field.focus.ring.offset}", // var(--p-inputtext-focus-ring-offset)
+                    shadow: "{form.field.focus.ring.shadow}",
+                },
+                transitionDuration: "{form.field.transition.duration}",
+                sm: {
+                    fontSize: "{form.field.sm.font.size}",
+                    paddingX: "{form.field.sm.padding.x}",
+                    paddingY: "{form.field.sm.padding.y}",
+                },
+                lg: {
+                    fontSize: "{form.field.lg.font.size}",
+                    paddingX: "{form.field.lg.padding.x}",
+                    paddingY: "{form.field.lg.padding.y}",
+                },
+            },
+        },
+        inputgroup: {
+            addon: {
+                background: "{form.field.background}",
+                borderColor: "{form.field.border.color}",
+                color: "{form.field.icon.color}",
+                borderRadius: "{form.field.border.radius}",
+                padding: "0.5rem",
+                minWidth: "2.5rem",
+            },
+        },
+        listbox: {
+            root: {
+                background: "{form.field.background}",
+                disabledBackground: "{form.field.disabled.background}",
+                borderColor: "{form.field.border.color}",
+                invalidBorderColor: "{form.field.invalid.border.color}",
+                color: "{form.field.color}",
+                disabledColor: "{form.field.disabled.color}",
+                shadow: "{form.field.shadow}",
+                borderRadius: "{form.field.border.radius}",
+                transitionDuration: "{form.field.transition.duration}",
+            },
+            list: {
+                padding: "{list.padding}",
+                gap: "{list.gap}",
+                header: {
+                    padding: "{list.header.padding}",
+                },
+            },
+            option: {
+                focusBackground: "{list.option.focus.background}",
+                selectedBackground: "{list.option.selected.background}",
+                selectedFocusBackground: "{list.option.selected.focus.background}",
+                color: "{list.option.color}",
+                focusColor: "{list.option.focus.color}",
+                selectedColor: "{list.option.selected.color}",
+                selectedFocusColor: "{list.option.selected.focus.color}",
+                padding: "{list.option.padding}",
+                borderRadius: "{list.option.border.radius}",
+            },
+            optionGroup: {
+                background: "{list.option.group.background}",
+                color: "{list.option.group.color}",
+                fontWeight: "{list.option.group.font.weight}",
+                padding: "{list.option.group.padding}",
+            },
+            checkmark: {
+                color: "{list.option.color}",
+                gutterStart: "-0.375rem",
+                gutterEnd: "0.375rem",
+            },
+            emptyMessage: {
+                padding: "{list.option.padding}",
+            },
+            colorScheme: {
+                light: {
+                    option: {
+                        stripedBackground: "{surface.50}",
+                    },
+                },
+                dark: {
+                    option: {
+                        stripedBackground: "{surface.900}",
+                    },
+                },
+            },
+        },
+        multiselect: {
+            root: {
+                background: "{form.field.background}",
+                disabledBackground: "{form.field.disabled.background}",
+                filledBackground: "{form.field.filled.background}",
+                filledHoverBackground: "{form.field.filled.hover.background}",
+                filledFocusBackground: "{form.field.filled.focus.background}",
+                borderColor: "{form.field.border.color}",
+                hoverBorderColor: "{form.field.hover.border.color}",
+                focusBorderColor: "{form.field.focus.border.color}",
+                invalidBorderColor: "{form.field.invalid.border.color}",
+                color: "{form.field.color}",
+                disabledColor: "{form.field.disabled.color}",
+                placeholderColor: "{form.field.placeholder.color}",
+                invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+                shadow: "{form.field.shadow}",
+                paddingX: "{form.field.padding.x}",
+                paddingY: "{form.field.padding.y}",
+                borderRadius: "{form.field.border.radius}",
+                focusRing: {
+                    width: "{form.field.focus.ring.width}",
+                    style: "{form.field.focus.ring.style}",
+                    color: "{form.field.focus.ring.color}",
+                    offset: "{form.field.focus.ring.offset}",
+                    shadow: "{form.field.focus.ring.shadow}",
+                },
+                transitionDuration: "{form.field.transition.duration}",
+                sm: {
+                    fontSize: "{form.field.sm.font.size}",
+                    paddingX: "{form.field.sm.padding.x}",
+                    paddingY: "{form.field.sm.padding.y}",
+                },
+                lg: {
+                    fontSize: "{form.field.lg.font.size}",
+                    paddingX: "{form.field.lg.padding.x}",
+                    paddingY: "{form.field.lg.padding.y}",
+                },
+            },
+            dropdown: {
+                width: "2.5rem",
+                color: "{form.field.icon.color}",
+            },
+            overlay: {
+                background: "{overlay.select.background}",
+                borderColor: "{overlay.select.border.color}",
+                borderRadius: "{overlay.select.border.radius}",
+                color: "{overlay.select.color}",
+                shadow: "{overlay.select.shadow}",
+            },
+            list: {
+                padding: "{list.padding}",
+                gap: "{list.gap}",
+                header: {
+                    padding: "{list.header.padding}",
+                },
+            },
+            option: {
+                focusBackground: "{list.option.focus.background}",
+                selectedBackground: "{list.option.selected.background}",
+                selectedFocusBackground: "{list.option.selected.focus.background}",
+                color: "{list.option.color}",
+                focusColor: "{list.option.focus.color}",
+                selectedColor: "{list.option.selected.color}",
+                selectedFocusColor: "{list.option.selected.focus.color}",
+                padding: "{list.option.padding}",
+                borderRadius: "{list.option.border.radius}",
+                gap: "0.5rem",
+            },
+            optionGroup: {
+                background: "{list.option.group.background}",
+                color: "{list.option.group.color}",
+                fontWeight: "{list.option.group.font.weight}",
+                padding: "{list.option.group.padding}",
+            },
+            clearIcon: {
+                color: "{form.field.icon.color}",
+            },
+            chip: {
+                borderRadius: "{border.radius.sm}",
+            },
+            emptyMessage: {
+                padding: "{list.option.padding}",
+            },
+        },
+        picklist: {
+            root: {
+                gap: "1.125rem",
+            },
+            controls: {
+                gap: "0.5rem",
+            },
+        },
+        popover: {
+            root: {
+                background: "{overlay.popover.background}",
+                borderColor: "{overlay.popover.border.color}",
+                color: "{overlay.popover.color}",
+                borderRadius: "{overlay.popover.border.radius}",
+                shadow: "{overlay.popover.shadow}",
+                gutter: "0",
+                arrowOffset: "1.25rem",
+            },
+            content: {
+                padding: "0",
+            },
+        },
+        radiobutton: {
+            root: {
+                width: "1.2rem",
+                height: "1.2rem",
+                background: "{form.field.background}",
+                checkedBackground: "var(--main-orange)",
+                checkedHoverBackground: "var(--main-orange)",
+                disabledBackground: "{form.field.disabled.background}",
+                filledBackground: "{form.field.filled.background}",
+                borderColor: "{gray.500}",
+                hoverBorderColor: "var(--main-orange)",
+                focusBorderColor: "var(--main-blue)",
+                checkedBorderColor: "var(--main-orange)",
+                checkedHoverBorderColor: "var(--main-orange)",
+                checkedFocusBorderColor: "{primary.color}",
+                checkedDisabledBorderColor: "{form.field.border.color}",
+                invalidBorderColor: "{form.field.invalid.border.color}",
+                shadow: "{form.field.shadow}",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "{focus.ring.offset}",
+                    shadow: "{focus.ring.shadow}",
+                },
+                transitionDuration: "{form.field.transition.duration}",
+                sm: {
+                    width: "1rem",
+                    height: "1rem",
+                },
+                lg: {
+                    width: "1.5rem",
+                    height: "1.5rem",
+                },
+            },
+            icon: {
+                size: "0.75rem",
+                checkedColor: "{primary.contrast.color}",
+                checkedHoverColor: "{primary.contrast.color}",
+                disabledColor: "{form.field.disabled.color}",
+                sm: {
+                    size: "0.5rem",
+                },
+                lg: {
+                    size: "1rem",
+                },
+            },
+        },
+        select: {
+            root: {
+                background: "{form.field.background}",
+                disabledBackground: "{form.field.disabled.background}",
+                filledBackground: "{form.field.filled.background}",
+                filledHoverBackground: "{form.field.filled.hover.background}",
+                filledFocusBackground: "{form.field.filled.focus.background}",
+                borderColor: "{form.field.border.color}",
+                hoverBorderColor: "{form.field.hover.border.color}",
+                focusBorderColor: "{form.field.focus.border.color}",
+                invalidBorderColor: "{form.field.invalid.border.color}",
+                color: "{form.field.color}",
+                disabledColor: "{form.field.disabled.color}",
+                placeholderColor: "{form.field.placeholder.color}",
+                invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+                shadow: "{form.field.shadow}",
+                paddingX: "{form.field.padding.x}",
+                paddingY: "{form.field.padding.y}",
+                borderRadius: "{form.field.border.radius}",
+                focusRing: {
+                    width: "{form.field.focus.ring.width}",
+                    style: "{form.field.focus.ring.style}",
+                    color: "{form.field.focus.ring.color}",
+                    offset: "{form.field.focus.ring.offset}",
+                    shadow: "{form.field.focus.ring.shadow}",
+                },
+                transitionDuration: "{form.field.transition.duration}",
+                sm: {
+                    fontSize: "{form.field.sm.font.size}",
+                    paddingX: "{form.field.sm.padding.x}",
+                    paddingY: "{form.field.sm.padding.y}",
+                },
+                lg: {
+                    fontSize: "{form.field.lg.font.size}",
+                    paddingX: "{form.field.lg.padding.x}",
+                    paddingY: "{form.field.lg.padding.y}",
+                },
+            },
+            dropdown: {
+                width: "2.5rem",
+                color: "{form.field.icon.color}",
+            },
+            overlay: {
+                background: "{overlay.select.background}",
+                borderColor: "{overlay.select.border.color}",
+                borderRadius: "{overlay.select.border.radius}",
+                color: "{overlay.select.color}",
+                shadow: "{overlay.select.shadow}",
+            },
+            list: {
+                padding: "{list.padding}",
+                gap: "{list.gap}",
+                header: {
+                    padding: "{list.header.padding}",
+                },
+            },
+            option: {
+                focusBackground: "{list.option.focus.background}",
+                selectedBackground: "{list.option.selected.background}",
+                selectedFocusBackground: "{list.option.selected.focus.background}",
+                color: "{list.option.color}",
+                focusColor: "{list.option.focus.color}",
+                selectedColor: "{list.option.selected.color}",
+                selectedFocusColor: "{list.option.selected.focus.color}",
+                padding: "{list.option.padding}",
+                borderRadius: "{list.option.border.radius}",
+            },
+            optionGroup: {
+                background: "{list.option.group.background}",
+                color: "{list.option.group.color}",
+                fontWeight: "{list.option.group.font.weight}",
+                padding: "{list.option.group.padding}",
+            },
+            clearIcon: {
+                color: "{form.field.icon.color}",
+            },
+            checkmark: {
+                color: "{list.option.color}",
+                gutterStart: "-0.375rem",
+                gutterEnd: "0.375rem",
+            },
+            emptyMessage: {
+                padding: "{list.option.padding}",
+            },
+        },
+        stepper: {
+            root: {
+                transitionDuration: "{transition.duration}",
+            },
+            separator: {
+                background: "var(--main-gray)", // var(--p-stepper-separator-background)
+                activeBackground: "var(--main-orange)",
+                margin: "0 0 0 1.625rem",
+                size: "2px",
+            },
+            step: {
+                padding: "0.5rem",
+                gap: "1rem",
+            },
+            stepHeader: {
+                padding: "0",
+                borderRadius: "{content.border.radius}",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "{focus.ring.offset}",
+                    shadow: "{focus.ring.shadow}",
+                },
+                gap: "0.5rem",
+            },
+            stepTitle: {
+                color: "{text.color}",
+                activeColor: "{secondary.color}",
+                fontWeight: "500",
+            },
+            stepNumber: {
+                background: "{content.background}",
+                activeBackground: "{content.background}",
+                borderColor: "{primary.color}",
+                activeBorderColor: "{secondary.color}",
+                color: "{text.color}",
+                activeColor: "{secondary.color}",
+                size: "2rem",
+                fontSize: "1.143rem",
+                fontWeight: "500",
+                borderRadius: "50%",
+                shadow: "0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)",
+            },
+            stepIcon: {
+                background: "{primary.color}",
+                activeBackground: "{content.background}",
+                borderColor: "{primary.color}",
+                activeBorderColor: "{secondary.color}",
+                color: "{text.color}",
+                activeColor: "{secondary.color}",
+                size: "2rem",
+                fontSize: "1.143rem",
+                fontWeight: "500",
+                borderRadius: "50%",
+                shadow: "0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)",
+            },
+            steppanels: {
+                padding: "0.875rem 0.5rem 1.125rem 0.5rem",
+            },
+            steppanel: {
+                background: "{content.background}",
+                color: "{content.color}",
+                padding: "0",
+                indent: "1rem",
+            },
+        },
+        slider: {
+            root: {
+                borderRadius: "1rem",
+                transitionDuration: "{transition.duration}",
+            },
+            track: {
+                background: "{gray.200}",
+                size: "0.4rem",
+            },
+            range: {
+                background: "{primary.color}",
+            },
+            handle: {
+                width: "1.1rem",
+                height: "1.1rem",
+                borderRadius: "50%",
+                background: "{content.border.color}",
+                hoverBackground: "{content.border.color}",
+                content: {
+                    borderRadius: "50%",
+                    hoverBackground: "{content.background}",
+                    width: "16px",
+                    height: "16px",
+                    shadow: "0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)",
+                },
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "{focus.ring.offset}",
+                    shadow: "{focus.ring.shadow}",
+                },
+            },
+            colorScheme: {
+                light: {
+                    handle: {
+                        contentBackground: "{content.border.color}",
+                        range: {
+                            background: "{content.border.color}",
+                        },
+                    },
+                },
+                dark: {
+                    handle: {
+                        contentBackground: "{content.border.color} ",
+                    },
+                    range: {
+                        background: "{content.border.color}",
+                    },
+                },
+            },
+        },
+        tabs: {
+            root: {
+                transitionDuration: "{transition.duration}",
+            },
+            tablist: {
+                borderWidth: "0 0 0 0",
+                background: "var(--main-blue)",
+                borderColor: "#fff",
+            },
+            tab: {
+                background: "transparent",
+                hoverBackground: "transparent",
+                activeBackground: "#fff",
+                borderWidth: "0 0 0 0",
+                borderColor: "{content.border.color}",
+                hoverBorderColor: "{content.border.color}",
+                activeBorderColor: "#fff",
+                color: "#fff",
+                hoverColor: "#d9d9d9",
+                activeColor: "var(--main-orange)",
+                padding: "1rem 1.125rem",
+                fontWeight: "400",
+                margin: "0",
+                gap: "0.5rem",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "-1px",
+                    shadow: "{focus.ring.shadow}",
+                },
+            },
+            tabpanel: {
+                background: "{content.background}",
+                color: "{content.color}",
+                padding: "2rem",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "{focus.ring.offset}",
+                    shadow: "inset {focus.ring.shadow}",
+                },
+            },
+            navButton: {
+                background: "{content.background}",
+                color: "{text.muted.color}",
+                hoverColor: "{text.color}",
+                width: "2.5rem",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "-1px",
+                    shadow: "{focus.ring.shadow}",
+                },
+            },
+            activeBar: {
+                height: "1px",
+                bottom: "-1px",
+                background: "{primary.color}",
+            },
+            colorScheme: {
+                light: {
+                    navButton: {
+                        shadow: "0px 0px 10px 50px rgba(255, 255, 255, 0.6)",
+                    },
+                },
+                dark: {
+                    navButton: {
+                        shadow: "0px 0px 10px 50px rgba(255, 255, 255, 0.6)",
+                    },
+                },
+            },
+        },
+        tag: {
+            // Pills
+            root: {
+                fontSize: "0.875rem",
+                fontWeight: "700",
+                padding: "0.25rem 0.5rem",
+                gap: "0.25rem",
+                borderRadius: "{content.border.radius}",
+                roundedBorderRadius: "{border.radius.xl}",
+            },
+            icon: {
+                size: "0.75rem",
+            },
+            colorScheme: {
+                light: {
+                    primary: {
+                        background: "{primary.100}",
+                        color: "{primary.700}",
+                    },
+                    secondary: {
+                        background: "{surface.100}",
+                        color: "{surface.600}",
+                    },
+                    success: {
+                        background: "{green.100}",
+                        color: "{green.700}",
+                    },
+                    info: {
+                        background: "{sky.100}",
+                        color: "{sky.700}",
+                    },
+                    warn: {
+                        background: "{orange.100}",
+                        color: "var(--main-orange-dark)",
+                    },
+                    danger: {
+                        background: "{red.100}",
+                        color: "{red.700}",
+                    },
+                    contrast: {
+                        background: "{surface.950}",
+                        color: "var(--main-light)",
+                    },
+                },
+                dark: {
+                    primary: {
+                        background: "{primary.100}",
+                        color: "{primary.700}",
+                    },
+                    secondary: {
+                        background: "{surface.100}",
+                        color: "{surface.600}",
+                    },
+                    success: {
+                        background: "{green.100}",
+                        color: "{green.700}",
+                    },
+                    info: {
+                        background: "{sky.100}",
+                        color: "{sky.700}",
+                    },
+                    warn: {
+                        background: "{orange.100}",
+                        color: "var(--main-orange-dark)",
+                    },
+                    danger: {
+                        background: "{red.100}",
+                        color: "{red.700}",
+                    },
+                    contrast: {
+                        background: "{surface.950}",
+                        color: "var(--main-light)",
+                    },
+                },
+            },
+        },
+        toggleswitch: {
+            root: {
+                width: "2.9rem",
+                height: "1.5rem",
+                borderRadius: "3rem",
+                gap: "0.25rem",
+                shadow: "{form.field.shadow}",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "{focus.ring.offset}",
+                    shadow: "{focus.ring.shadow}",
+                },
+                borderWidth: "1px",
+                borderColor: "transparent",
+                hoverBorderColor: "transparent",
+                checkedBorderColor: "transparent",
+                checkedHoverBorderColor: "transparent",
+                invalidBorderColor: "{form.field.invalid.border.color}",
+                transitionDuration: "{form.field.transition.duration}",
+                slideDuration: "0.2s",
+            },
+            handle: {
+                borderRadius: "50%",
+                size: "1rem",
+            },
+            colorScheme: {
+                light: {
+                    root: {
+                        background: "{gray.400}",
+                        disabledBackground: "{gray.300}",
+                        hoverBackground: "{gray.400}",
+                        checkedBackground: "var(--main-orange)",
+                        checkedHoverBackground: "var(--main-orange-dark)",
+                    },
+                    handle: {
+                        background: "var(--main-light)",
+                        disabledBackground: "{gray.400}",
+                        hoverBackground: "var(--main-light)",
+                        checkedBackground: "var(--main-light)",
+                        checkedHoverBackground: "var(--main-light)",
+                    },
+                },
+                dark: {
+                    root: {
+                        background: "{gray.400}",
+                        disabledBackground: "{gray.300}",
+                        hoverBackground: "{gray.400}",
+                        checkedBackground: "var(--main-orange)",
+                        checkedHoverBackground: "var(--main-orange-dark)",
+                    },
+                    handle: {
+                        background: "var(--main-light)",
+                        disabledBackground: "{gray.400}",
+                        hoverBackground: "var(--main-light)",
+                        checkedBackground: "var(--main-light)",
+                        checkedHoverBackground: "var(--main-light)",
+                    },
+                },
+            },
+        },
+        tooltip: {
+            root: {
+                maxWidth: "60rem",
+                gutter: "0.25rem",
+                shadow: "{overlay.popover.shadow}",
+                padding: "0.5rem 0.75rem",
+                borderRadius: "{overlay.popover.border.radius}",
+            },
+            colorScheme: {
+                light: {
+                    root: {
+                        background: "var(--main-blue)",
+                        color: "var(--main-light)",
+                    },
+                },
+                dark: {
+                    root: {
+                        background: "var(--main-blue)",
+                        color: "var(--main-light)",
+                    },
+                },
+            },
+        },
+        tree: {
+            root: {
+                background: "transparent",
+                color: "{content.color}",
+                padding: "0",
+                gap: "0.2rem",
+                indent: "1rem",
+                transitionDuration: "{transition.duration}",
+            },
+            node: {
+                padding: "0.25rem 0.5rem",
+                borderRadius: "{content.border.radius}",
+                hoverBackground: "{content.hover.background}",
+                selectedBackground: "{highlight.background}",
+                color: "{text.color}",
+                hoverColor: "{text.hover.color}",
+                selectedColor: "{highlight.color}",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "-1px",
+                    shadow: "{focus.ring.shadow}",
+                },
+                gap: "0.25rem",
+            },
+            nodeIcon: {
+                color: "{text.muted.color}",
+                hoverColor: "{text.hover.muted.color}",
+                selectedColor: "{highlight.color}",
+            },
+            nodeToggleButton: {
+                borderRadius: "0",
+                size: "1em",
+                hoverBackground: "{content.hover.background}",
+                selectedHoverBackground: "{content.background}",
+                color: "blue.700",
+                hoverColor: "{text.hover.muted.color}",
+                selectedHoverColor: "{primary.color}",
+                focusRing: {
+                    width: "{focus.ring.width}",
+                    style: "{focus.ring.style}",
+                    color: "{focus.ring.color}",
+                    offset: "{focus.ring.offset}",
+                    shadow: "{focus.ring.shadow}",
+                },
+            },
+            loadingIcon: {
+                size: "2rem",
+            },
+            filter: {
+                margin: "0 0 0.5rem 0",
+            },
+        },
+    },
+});
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ActionDirective, ActionsMenuComponent, ColumnComponent, CompareByField, ConfigService, CookieAttributesGeneral, DynamicInputValidation, EmailInputValidation, ErrorInterceptor, FeatureFlagService, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, LanguageService, PaginatorComponent, Patterns, RefreshTokenInterceptor, SearchComponent, SharedService, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TermGuard, TermPipe, TermService, encryptData };
+export { ActionDirective, ActionsMenuComponent, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DynamicInputValidation, EmailInputValidation, ErrorInterceptor, FeatureFlagService, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaTheme, LanguageService, PaginatorComponent, Patterns, RecordPerPageComponent, RefreshTokenInterceptor, RowResumenComponent, SearchComponent, SharedService, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TermGuard, TermPipe, TermService, encryptData };
 //# sourceMappingURL=intelica-library-ui.mjs.map