intelica-library-ui 0.1.43 → 0.1.45

package/fesm2022/intelica-library-ui.mjs

@@ -2,33 +2,37 @@ import * as i0 from '@angular/core';
 import { inject, Injectable, signal, Pipe, Component, TemplateRef, ContentChild, Input, Directive, EventEmitter, forwardRef, Output, HostListener, ContentChildren, ViewChild } from '@angular/core';
 import { getCookie, Cookies, setCookie } from 'typescript-cookie';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { BehaviorSubject, catchError, throwError, from, switchMap, Subject } from 'rxjs';
+import { BehaviorSubject, catchError, throwError, from, switchMap, Subject, Subscription } from 'rxjs';
 import Swal from 'sweetalert2';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$2 from 'primeng/table';
+import * as i2$1 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import { BadgeModule } from 'primeng/badge';
 import * as i4 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import * as i1 from '@angular/forms';
 import { FormBuilder, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i2 from 'primeng/radiobutton';
+import * as i3 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
-import { Popover } from 'primeng/popover';
+import * as i1$2 from 'primeng/popover';
+import { Popover, PopoverModule } from 'primeng/popover';
 import { InputText } from 'primeng/inputtext';
-import * as i2$1 from 'primeng/button';
+import * as i2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import moment from 'moment';
 import * as _ from 'lodash';
-import * as i3 from 'primeng/api';
+import * as i3$1 from 'primeng/api';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
-import * as i3$1 from 'primeng/ripple';
+import * as i3$2 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
+import { Dialog } from 'primeng/dialog';
 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 +422,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 +452,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 +696,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)\" *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" }] });
+        ], 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: i3.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,
@@ -745,7 +819,7 @@ class PaginatorComponent {
         this.EmitPageChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: PaginatorComponent, isStandalone: true, selector: "intelica-paginator", inputs: { TotalItems: "TotalItems", CurrentPage: "CurrentPage", ItemsPerPage: "ItemsPerPage" }, outputs: { PageChange: "PageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"prPaginator\">\r\n\t<span class=\"prPaginator__info\">{{ TotalItems }} {{ \"Records\" | term : GlobalTermService.languageCode }}</span>\r\n\t<div class=\"prPaginator__controls\">\r\n\t\t<button pButton type=\"button\" class=\"prPaginator__btn prPaginator__btn--first\" [disabled]=\"CurrentPage === 1\" (click)=\"GoToFirstPage()\"></button>\r\n\t\t<button pButton type=\"button\" class=\"prPaginator__btn prPaginator__btn--previous\" [disabled]=\"CurrentPage === 1\" (click)=\"GoToPreviousPage()\"></button>\r\n\t\t<input pInputText type=\"text\" (keydown.enter)=\"$event.preventDefault()\" [(ngModel)]=\"CurrentPage\" positiveNumber class=\"prPaginator__input\" (keyup.enter)=\"onKeyUp($event)\" />\r\n\t\t<span class=\"prPaginator__total\">{{ \"Of\" | term : GlobalTermService.languageCode }} {{ TotalPages }}</span>\r\n\t\t<button pButton type=\"button\" class=\"prPaginator__btn prPaginator__btn--next\" [disabled]=\"CurrentPage === TotalPages\" (click)=\"GoToNextPage()\"></button>\r\n\t\t<button pButton type=\"button\" class=\"prPaginator__btn prPaginator__btn--last\" [disabled]=\"CurrentPage === TotalPages\" (click)=\"GoToLastPage()\"></button>\r\n\t</div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: PositiveNumberDirective, selector: "[positiveNumber]" }, { kind: "pipe", type: TermPipe, name: "term" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: PaginatorComponent, isStandalone: true, selector: "intelica-paginator", inputs: { TotalItems: "TotalItems", CurrentPage: "CurrentPage", ItemsPerPage: "ItemsPerPage" }, outputs: { PageChange: "PageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"prPaginator\">\r\n\t<span class=\"prPaginator__info\">{{ TotalItems }} {{ \"Records\" | term : GlobalTermService.languageCode }}</span>\r\n\t<div class=\"prPaginator__controls\">\r\n\t\t<button pButton type=\"button\" class=\"prPaginator__btn prPaginator__btn--first\" [disabled]=\"CurrentPage === 1\" (click)=\"GoToFirstPage()\"></button>\r\n\t\t<button pButton type=\"button\" class=\"prPaginator__btn prPaginator__btn--previous\" [disabled]=\"CurrentPage === 1\" (click)=\"GoToPreviousPage()\"></button>\r\n\t\t<input pInputText type=\"text\" (keydown.enter)=\"$event.preventDefault()\" [(ngModel)]=\"CurrentPage\" positiveNumber class=\"prPaginator__input\" (keyup.enter)=\"onKeyUp($event)\" />\r\n\t\t<span class=\"prPaginator__total\">{{ \"Of\" | term : GlobalTermService.languageCode }} {{ TotalPages }}</span>\r\n\t\t<button pButton type=\"button\" class=\"prPaginator__btn prPaginator__btn--next\" [disabled]=\"CurrentPage === TotalPages\" (click)=\"GoToNextPage()\"></button>\r\n\t\t<button pButton type=\"button\" class=\"prPaginator__btn prPaginator__btn--last\" [disabled]=\"CurrentPage === TotalPages\" (click)=\"GoToLastPage()\"></button>\r\n\t</div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: PositiveNumberDirective, selector: "[positiveNumber]" }, { kind: "pipe", type: TermPipe, name: "term" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -1359,10 +1433,13 @@ class TableComponent {
     ShowPagination = false;
     RowsPerPage = 10;
     ShowCheckbox = false;
+    ShowIndex = false;
     ListDataSelected = [];
     SelectedIdentifier = null;
     AdditionalTemplate;
     ColumnList = [];
+    ColumnGroupList = [];
+    RowResumenList = [];
     ListDataFilter = [];
     ListDataTable = [];
     ListDataSelectedFilter = [];
@@ -1376,14 +1453,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 +1573,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$1.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$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i2$1.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 +1592,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 +1612,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 {
@@ -1791,7 +1882,7 @@ class ActionsMenuComponent {
         this.ShowSelectActions = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ActionsMenuComponent, deps: [{ token: TermPipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: ActionsMenuComponent, isStandalone: true, selector: "intelica-actions-menu", host: { listeners: { "mousedown": "onMouseDown($event)", "window:mousedown": "onMouseDownOutsideBody($event)", "mouseup": "onMouseUp($event)", "document:click": "closeAll($event)" } }, queries: [{ propertyName: "actions", predicate: ActionDirective }], viewQueries: [{ propertyName: "Popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "MenuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "PopoverContainer", first: true, predicate: ["popoverContainer"], descendants: true }], ngImport: i0, template: "<div #popoverContainer class=\"grPopoverContainer\">\r\n\t<button #menuButton class=\"grMenuAction\" (click)=\"togglePopover($event)\">\r\n\t\t<i class=\"icon icon-bars\"></i>\r\n\t</button>\r\n\t<div class=\"grPopover\" #popover>\r\n\t\t<!-- Men\u00FA -->\r\n\t\t<div class=\"grPopoverMenu\" *ngIf=\"ShowActionsMenu\" [ngClass]=\"{ hidden: !ShowSelectActions }\">\r\n\t\t\t<div class=\"grPopoverHeader\">\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t<span>{{ \"SelectAction\" | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</h3>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"grPopoverBody\">\r\n\t\t\t\t<button pRipple class=\"grButtonActions\" *ngFor=\"let item of actions; let $index = index\" (click)=\"showTemplate(item)\">\r\n\t\t\t\t\t<span class=\"formRowInputNumber\">{{ $index + 1 }}</span>\r\n\t\t\t\t\t<span class=\"grButtonActionName\">{{ item.name | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<!-- Sub Men\u00FA -->\r\n\t\t<div class=\"grPopoverSubMenu\" [ngClass]=\"{ hidden: !item.active }\" *ngFor=\"let item of actions\">\r\n\t\t\t<div class=\"grPopoverHeader\">\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t<button class=\"backButton\" (click)=\"returnSelectActions(item)\">\r\n\t\t\t\t\t\t<i class=\"icon icon-arrow-left\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<span>{{ item.name | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</h3>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"grPopoverBody\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { 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: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$1.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: TermPipe, name: "term" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: ActionsMenuComponent, isStandalone: true, selector: "intelica-actions-menu", host: { listeners: { "mousedown": "onMouseDown($event)", "window:mousedown": "onMouseDownOutsideBody($event)", "mouseup": "onMouseUp($event)", "document:click": "closeAll($event)" } }, queries: [{ propertyName: "actions", predicate: ActionDirective }], viewQueries: [{ propertyName: "Popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "MenuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "PopoverContainer", first: true, predicate: ["popoverContainer"], descendants: true }], ngImport: i0, template: "<div #popoverContainer class=\"grPopoverContainer\">\r\n\t<button #menuButton class=\"grMenuAction\" (click)=\"togglePopover($event)\">\r\n\t\t<i class=\"icon icon-bars\"></i>\r\n\t</button>\r\n\t<div class=\"grPopover\" #popover>\r\n\t\t<!-- Men\u00FA -->\r\n\t\t<div class=\"grPopoverMenu\" *ngIf=\"ShowActionsMenu\" [ngClass]=\"{ hidden: !ShowSelectActions }\">\r\n\t\t\t<div class=\"grPopoverHeader\">\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t<span>{{ \"SelectAction\" | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</h3>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"grPopoverBody\">\r\n\t\t\t\t<button pRipple class=\"grButtonActions\" *ngFor=\"let item of actions; let $index = index\" (click)=\"showTemplate(item)\">\r\n\t\t\t\t\t<span class=\"formRowInputNumber\">{{ $index + 1 }}</span>\r\n\t\t\t\t\t<span class=\"grButtonActionName\">{{ item.name | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<!-- Sub Men\u00FA -->\r\n\t\t<div class=\"grPopoverSubMenu\" [ngClass]=\"{ hidden: !item.active }\" *ngFor=\"let item of actions\">\r\n\t\t\t<div class=\"grPopoverHeader\">\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t<button class=\"backButton\" (click)=\"returnSelectActions(item)\">\r\n\t\t\t\t\t\t<i class=\"icon icon-arrow-left\"></i>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<span>{{ item.name | term : GlobalTermService.languageCode }}</span>\r\n\t\t\t\t</h3>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"grPopoverBody\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputGroupAddonModule }, { 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: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$2.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: TermPipe, name: "term" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ActionsMenuComponent, decorators: [{
             type: Component,
@@ -1822,6 +1913,418 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: [ActionDirective]
             }] } });
 
+class ModalDialogComponent {
+    /**
+     * Título del cuadro de diálogo.
+     * @type {string}
+     */
+    Title = "";
+    /**
+     * Tamaño del cuadro de diálogo.
+     * @type {string}
+     */
+    Size = "lg";
+    /**
+     * Controlar el arrastre del cuadro de diálogo.
+     * @type {boolean}
+     */
+    Draggable = false;
+    /**
+     * Controlar el cierre del cuadro de diálogo.
+     * @type {boolean}
+     */
+    DisableMaskClose = false;
+    /**
+     * Evento emitido al cerrar el cuadro de diálogo.
+     * @type {EventEmitter<boolean>}
+     */
+    EmmitCloseModal = new EventEmitter();
+    /**
+     * Visibilidad del cuadro de diálogo.
+     * @type {string}
+     */
+    Visible = false;
+    showDialog() {
+        this.Visible = true;
+    }
+    closeDialog() {
+        this.Visible = false;
+        this.EmmitCloseModal.emit(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ModalDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: ModalDialogComponent, isStandalone: true, selector: "intelica-modal-dialog", inputs: { Title: "Title", Size: "Size", Draggable: "Draggable", DisableMaskClose: "DisableMaskClose" }, outputs: { EmmitCloseModal: "EmmitCloseModal" }, ngImport: i0, template: "<p-dialog class=\"prDialog prDialog--{{ Size }}\" [modal]=\"true\" [(visible)]=\"Visible\" [draggable]=\"Draggable\" [dismissableMask]=\"!DisableMaskClose\">\r\n\t<ng-template pTemplate=\"header\">\r\n\t\t<div class=\"custom-header\">\r\n\t\t\t<h2>\r\n\t\t\t\t<ng-content select=\"[titleHeaderMenu]\"></ng-content>\r\n\t\t\t</h2>\r\n\t\t\t<button class=\"grButton--icon-close-modal\" (click)=\"closeDialog()\">\r\n\t\t\t\t<i class=\"icon-close1\"></i>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</ng-template>\r\n\t<div class=\"prDialog__content\">\r\n\t\t<ng-content select=\"[content]\"></ng-content>\r\n\t</div>\r\n</p-dialog>\r\n", styles: [""], dependencies: [{ kind: "component", type: Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ModalDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "intelica-modal-dialog", imports: [Dialog, ButtonModule], template: "<p-dialog class=\"prDialog prDialog--{{ Size }}\" [modal]=\"true\" [(visible)]=\"Visible\" [draggable]=\"Draggable\" [dismissableMask]=\"!DisableMaskClose\">\r\n\t<ng-template pTemplate=\"header\">\r\n\t\t<div class=\"custom-header\">\r\n\t\t\t<h2>\r\n\t\t\t\t<ng-content select=\"[titleHeaderMenu]\"></ng-content>\r\n\t\t\t</h2>\r\n\t\t\t<button class=\"grButton--icon-close-modal\" (click)=\"closeDialog()\">\r\n\t\t\t\t<i class=\"icon-close1\"></i>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</ng-template>\r\n\t<div class=\"prDialog__content\">\r\n\t\t<ng-content select=\"[content]\"></ng-content>\r\n\t</div>\r\n</p-dialog>\r\n" }]
+        }], propDecorators: { Title: [{
+                type: Input
+            }], Size: [{
+                type: Input
+            }], Draggable: [{
+                type: Input
+            }], DisableMaskClose: [{
+                type: Input
+            }], EmmitCloseModal: [{
+                type: Output
+            }] } });
+
+class ItemSplitDirective {
+    /**
+     * Nombre de la acción.
+     * @type {string}
+     */
+    name = "";
+    /**
+     * Indica si los botones asociados a la acción deben ocultarse.
+     * @type {boolean}
+     * @default false
+     */
+    hideButtons = false;
+    /**
+     * Indica si detener la propagación de eventos al hacer clic en la acción.
+     * @type {boolean}
+     * @default false
+     */
+    stopPropagation = false;
+    /**
+     * Evento emitido cuando se hace clic en la acción.
+     * @type {EventEmitter<any>}
+     */
+    onClick = new EventEmitter();
+    /**
+     * Referencia al contenido proporcionado por la plantilla.
+     * @type {any}
+     */
+    template;
+    /**
+     * Indica si la acción está activa o no.
+     * @type {boolean}
+     * @default false
+     */
+    active = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ItemSplitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: ItemSplitDirective, isStandalone: true, selector: "itemsplit", inputs: { name: "name", hideButtons: "hideButtons", stopPropagation: "stopPropagation" }, outputs: { onClick: "onClick" }, queries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ItemSplitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "itemsplit",
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], hideButtons: [{
+                type: Input
+            }], stopPropagation: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], template: [{
+                type: ContentChild,
+                args: ["template"]
+            }] } });
+
+class ButtonSplitComponent {
+    /**
+     * Directiva que representa una colección de elementos hijos del tipo `ItemSplitDirective`.
+     * Se utiliza para acceder a las instancias de la directiva `ItemSplitDirective` dentro de un componente.
+     * @type {QueryList<ItemSplitDirective>}
+     */
+    itemsSplit;
+    /**
+     * Muestra la plantilla asociada a una acción si se proporciona un manejador de eventos `onClick`.
+     * - Emite el evento `onClick` de la acción si está definido.
+     * - Detiene la propagación del evento si la propiedad `stopPropagation` de la acción está establecida.
+     * - Activa la acción.
+     * - Oculta el menú de selección de acciones si se cumplen ciertas condiciones.
+     *
+     * @param {ItemSplitDirective} item - La acción para la cual mostrar la plantilla.
+     */
+    showTemplate(item) {
+        // Emite el evento onClick de la acción si está definido.
+        if (item.onClick) {
+            item.onClick.emit();
+        }
+        // Detiene la propagación del evento si la propiedad stopPropagation del item está establecida.
+        if (item.stopPropagation) {
+            return;
+        }
+        // Activa el item.
+        item.active = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ButtonSplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: ButtonSplitComponent, isStandalone: true, selector: "intelica-button-split", queries: [{ propertyName: "itemsSplit", predicate: ItemSplitDirective }], ngImport: i0, template: "<button class=\"grButton grButton--icon grButton--select-popover\" (click)=\"op.toggle($event)\"><i class=\"icon icon-list-options\"></i></button>\r\n<p-popover #op>\r\n\t<div class=\"prPopoverV3 prPopoverV3--contentLeft\">\r\n\t\t<ul>\r\n\t\t\t<li [ngClass]=\"{ hidden: !item.active }\" *ngFor=\"let item of itemsSplit\" (click)=\"showTemplate(item)\">{{ item.name }}</li>\r\n\t\t</ul>\r\n\t</div>\r\n</p-popover>\r\n", dependencies: [{ kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i1$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ButtonSplitComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "intelica-button-split", imports: [PopoverModule, CommonModule], template: "<button class=\"grButton grButton--icon grButton--select-popover\" (click)=\"op.toggle($event)\"><i class=\"icon icon-list-options\"></i></button>\r\n<p-popover #op>\r\n\t<div class=\"prPopoverV3 prPopoverV3--contentLeft\">\r\n\t\t<ul>\r\n\t\t\t<li [ngClass]=\"{ hidden: !item.active }\" *ngFor=\"let item of itemsSplit\" (click)=\"showTemplate(item)\">{{ item.name }}</li>\r\n\t\t</ul>\r\n\t</div>\r\n</p-popover>\r\n" }]
+        }], propDecorators: { itemsSplit: [{
+                type: ContentChildren,
+                args: [ItemSplitDirective]
+            }] } });
+
+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: i3.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 OrderConstants {
+    //DESCRIPTION
+    static ORDER_BY_DESC = "desc";
+    static ORDER_BY_ASC = "asc";
+    //VALUES
+    static ORDER_BY_DESC_VALUE = "1";
+    static ORDER_BY_ASC_VALUE = "0";
+}
+
+class SortingComponent {
+    /**
+     * Suscripción a un observable.
+     * @type {Subscription}
+     */
+    subscription = new Subscription();
+    /**
+     * Términos utilizados en el componente.
+     * @type {any}
+     */
+    terms;
+    /**
+     * Lista de modelos de filtro en cascada.
+     * @type {CascadeFilterModel[]}
+     * @default []
+     */
+    LCascadefilter = [];
+    /**
+     * Número máximo de ordenamiento.
+     * @type {number}
+     * @default 4
+     */
+    NumMaxSorting = 4;
+    /**
+     * Lista de objetos de ordenamiento.
+     * @type {any}
+     * @default []
+     */
+    Sorters = [];
+    /**
+     * Objeto que indica el ordenamiento actual.
+     * @type {any}
+     */
+    OrderBy;
+    /**
+     * Objeto que indica el ordenamiento predeterminado.
+     * @type {any}
+     * @default {}
+     */
+    OrderByDefault = {};
+    /**
+     * Indica si se debe realizar un solo renderizado.
+     * @type {boolean}
+     * @default false
+     */
+    OneRender = false;
+    /**
+     * Evento emitido al realizar un retorno de datos.
+     * @type {EventEmitter<any>}
+     */
+    ReturnSorting = new EventEmitter();
+    /**
+     * Evento emitido al alertar sobre una ordenación.
+     * @type {EventEmitter<any>}
+     */
+    AlertOrder = new EventEmitter();
+    /**
+     * Objeto que contiene constantes de ordenación.
+     * @type {OrderConstants}
+     */
+    Order = OrderConstants;
+    constructor() { }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    ngOnInit() {
+        // this.subscription = this.sharedService.isLoadingPageInfo.subscribe({
+        // 	next: isLoadingPageInfo => {
+        // 		if (!isLoadingPageInfo) this.terms = this.globals.languageTerms;
+        // 	},
+        // });
+    }
+    ngOnChanges(changes) {
+        if (changes.OrderBy && this.Sorters.length > 0)
+            this.GetInfoSorting();
+        if (changes.Sorters && this.Sorters.length > 0)
+            this.GetInfoSorting();
+        // this.terms = this.globals.languageTerms;
+    }
+    /**
+     * Obtiene información sobre la ordenación y la asigna a la lista de modelos de filtro en cascada.
+     * - Si no hay información de ordenación (`orderBy`), la función sale.
+     * - Crea una lista de modelos de filtro en cascada con una longitud determinada.
+     * - Filtra las propiedades de ordenación que coinciden con los campos existentes.
+     * - Asigna las propiedades de ordenación a los modelos de filtro en cascada.
+     */
+    GetInfoSorting() {
+        // Si no hay información de ordenación (orderBy), la función sale temprano.
+        if (!this.OrderBy)
+            return;
+        // Crea una lista de modelos de filtro en cascada con una longitud determinada.
+        this.LCascadefilter = this.PushCascade(this.Sorters.length);
+        // Filtra las propiedades de ordenación que coinciden con los campos existentes.
+        this.OrderBy = Object.fromEntries(Object.entries(this.OrderBy).filter(([key]) => this.Sorters.find((y) => y.field === key)));
+        // Obtiene las columnas y el orden de la ordenación.
+        const columns = Object.keys(this.OrderBy).map(x => x);
+        const order = columns.map(x => this.OrderBy[x]);
+        // Asigna las propiedades de ordenación a los modelos de filtro en cascada.
+        columns.forEach((f, i) => {
+            this.LCascadefilter[i].id = f;
+            this.LCascadefilter[i].order = order[i];
+        });
+    }
+    /**
+     * Función que genera una lista de modelos de filtro en cascada con una cantidad determinada.
+     *
+     * @param {number} cant - Cantidad de modelos de filtro en cascada a generar.
+     * @returns {Array} - Lista de modelos de filtro en cascada.
+     */
+    PushCascade(cant) {
+        let Lcascadefilter = [];
+        for (let i = 0; i < cant; i++) {
+            Lcascadefilter.push({ id: "0", index: i, order: OrderConstants.ORDER_BY_ASC });
+        }
+        return Lcascadefilter;
+    }
+    /**
+     * Verifica y procesa la ordenación en cascada.
+     * - Si algún modelo de filtro en cascada tiene un ID diferente de '0', se realiza la ordenación.
+     * - De lo contrario, se emite una alerta indicando que no hay columna seleccionada para ordenar.
+     */
+    CheckCascadeOrder() {
+        this.OrderBy = {};
+        if (this.LCascadefilter.some(s => s.id !== "0")) {
+            this.CascadeOrder();
+        }
+        else {
+            return this.AlertOrder.emit({ ValidMessage: "Select at least one column to sort" }); //this.sharedService.getTermTextByCode("MSG_NO_COLUMN_ORDER") });
+        }
+    }
+    /**
+     * Procesa la ordenación en cascada y emite el resultado.
+     */
+    CascadeOrder() {
+        this.LCascadefilter.forEach(element => {
+            if (element.id !== "0") {
+                this.OrderBy[element.id] = element.order;
+            }
+        });
+        this.ReturnSorting.emit(this.OrderBy);
+    }
+    /**
+     * Restaura la ordenación en cascada a la configuración predeterminada y obtiene la información de ordenación.
+     */
+    ClearCascadeOrder() {
+        this.OrderBy = { ...this.OrderByDefault };
+        this.GetInfoSorting();
+    }
+    /**
+     * Verifica si un modelo de filtro en cascada está deshabilitado basándose en su ID.
+     *
+     * @param {string} id - ID del modelo de filtro en cascada.
+     * @param {number} index - Índice del modelo de filtro en cascada.
+     * @returns {boolean} - Indica si el modelo de filtro en cascada está deshabilitado.
+     */
+    CheckCascadeDisabled(id, index) {
+        return this.LCascadefilter.some(e => e.id == id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SortingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SortingComponent, isStandalone: true, selector: "intelica-sorting", inputs: { Sorters: "Sorters", OrderBy: "OrderBy", OrderByDefault: "OrderByDefault", OneRender: "OneRender" }, outputs: { ReturnSorting: "ReturnSorting", AlertOrder: "AlertOrder" }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\r\n\t<div class=\"sortingAnalytics\">\r\n\t\t<div class=\"sortingCtr\">\r\n\t\t\t<div></div>\r\n\t\t\t<div class=\"triangle-top\"></div>\r\n\t\t\t<div class=\"triangle-down\"></div>\r\n\t\t\t<ng-container *ngIf=\"OneRender; else multiple_render\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"one_render; context: { Sorters: Sorters }\"></ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"sortingBtnCtr\">\r\n\t\t\t<button class=\"grButton grButton--primary applySortAnalytics\" (click)=\"CheckCascadeOrder()\">\r\n\t\t\t\t<!-- <span>{{'BTN_APPLY_SORT' | term : terms}}</span> -->\r\n\t\t\t\t<span>Apply sort</span>\r\n\t\t\t</button>\r\n\t\t\t<button class=\"grButton grButton--secundary clearSortAnalytics\" (click)=\"ClearCascadeOrder()\">\r\n\t\t\t\t<!-- <span>{{'BTN_CLEAR_SORT' | term : terms}}</span> -->\r\n\t\t\t\t<span>Clear sort</span>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</div>\r\n</ng-container>\r\n\r\n<ng-template #one_render let-Sorters=\"Sorters\">\r\n\t<ng-container *ngFor=\"let row of Sorters; let i = index\">\r\n\t\t<ng-container *ngIf=\"LCascadefilter.length > 0 && i <= NumMaxSorting\">\r\n\t\t\t<ng-container *ngIf=\"OneRender && i == 0\">\r\n\t\t\t\t<div class=\"idx-select\" *ngIf=\"i < LCascadefilter.length\">\r\n\t\t\t\t\t<span class=\"numOrder\">{{ i + 1 }}</span>\r\n\t\t\t\t\t<select class=\"form-select\" [(ngModel)]=\"LCascadefilter[i].id\">\r\n\t\t\t\t\t\t<option *ngIf=\"i === 0\" [value]=\"0\">\r\n\t\t\t\t\t\t\t--\r\n\t\t\t\t\t\t\t<!-- <span>{{ \"LBL_SORT_BY\" | term : terms }}</span> -->\r\n\t\t\t\t\t\t\t<span>Sort By</span>\r\n\t\t\t\t\t\t\t--\r\n\t\t\t\t\t\t</option>\r\n\t\t\t\t\t\t<option *ngFor=\"let sort of Sorters\" [ngValue]=\"sort.field\" [disabled]=\"CheckCascadeDisabled(sort.field, i)\">\r\n\t\t\t\t\t\t\t{{ sort.headerText }}\r\n\t\t\t\t\t\t</option>\r\n\t\t\t\t\t</select>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div class=\"form-check\" *ngIf=\"i < LCascadefilter.length\">\r\n\t\t\t\t\t<p-radiobutton class=\"prRadioButton\" name=\"optSort{{ i }}\" [value]=\"Order.ORDER_BY_ASC\" [inputId]=\"'test{{ i + i + 1 }}'\" [(ngModel)]=\"LCascadefilter[i].order\" tabindex=\"0\" />\r\n\t\t\t\t\t<label for=\"test{{ i + i + 1 }}\"></label>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div class=\"form-check\" *ngIf=\"i < LCascadefilter.length\">\r\n\t\t\t\t\t<p-radiobutton class=\"prRadioButton\" name=\"optSort{{ i }}\" [value]=\"Order.ORDER_BY_DESC\" [inputId]=\"'test{{ i + i + 2 }}'\" [(ngModel)]=\"LCascadefilter[i].order\" tabindex=\"0\" />\r\n\t\t\t\t\t<label for=\"test{{ i + i + 2 }}\"></label>\r\n\t\t\t\t</div>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</ng-template>\r\n\r\n<ng-template #multiple_render>\r\n\t<ng-container *ngFor=\"let row of Sorters; let i = index\">\r\n\t\t<ng-container *ngIf=\"LCascadefilter.length > 0 && i <= NumMaxSorting\">\r\n\t\t\t<div class=\"idx-select\" *ngIf=\"i < LCascadefilter.length\">\r\n\t\t\t\t<span class=\"numOrder\">{{ i + 1 }}</span>\r\n\t\t\t\t<select class=\"form-select\" [(ngModel)]=\"LCascadefilter[i].id\">\r\n\t\t\t\t\t<option *ngIf=\"i === 0\" [value]=\"0\">\r\n\t\t\t\t\t\t--\r\n\t\t\t\t\t\t<!-- <span>{{ \"LBL_SORT_BY\" | term : terms }}</span> -->\r\n\t\t\t\t\t\t<span>Sort By</span>\r\n\t\t\t\t\t\t--\r\n\t\t\t\t\t</option>\r\n\t\t\t\t\t<option *ngIf=\"i > 0\" [value]=\"0\">\r\n\t\t\t\t\t\t--\r\n\t\t\t\t\t\t<!-- <span>{{ \"LBL_SORT_THEN\" | term : terms }}</span> -->\r\n\t\t\t\t\t\t<span>Then by</span>\r\n\t\t\t\t\t\t--\r\n\t\t\t\t\t</option>\r\n\t\t\t\t\t<option *ngFor=\"let sort of Sorters\" [ngValue]=\"sort.field\" [disabled]=\"CheckCascadeDisabled(sort.field, i)\">\r\n\t\t\t\t\t\t{{ sort.headerText }}\r\n\t\t\t\t\t</option>\r\n\t\t\t\t</select>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"form-check\" *ngIf=\"i < LCascadefilter.length\">\r\n\t\t\t\t<p-radiobutton class=\"prRadioButton\" name=\"optSort{{ i }}\" [value]=\"Order.ORDER_BY_ASC\" [inputId]=\"'test{{ i + i + 1 }}'\" [(ngModel)]=\"LCascadefilter[i].order\" tabindex=\"0\" />\r\n\t\t\t\t<label for=\"test{{ i + i + 1 }}\"></label>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"form-check\" *ngIf=\"i < LCascadefilter.length\">\r\n\t\t\t\t<p-radiobutton class=\"prRadioButton\" name=\"optSort{{ i }}\" [value]=\"Order.ORDER_BY_DESC\" [inputId]=\"'test{{ i + i + 2 }}'\" [(ngModel)]=\"LCascadefilter[i].order\" tabindex=\"0\" />\r\n\t\t\t\t<label for=\"test{{ i + i + 2 }}\"></label>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: i3.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: SortingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "intelica-sorting", imports: [CommonModule, FormsModule, RadioButtonModule], template: "<ng-container>\r\n\t<div class=\"sortingAnalytics\">\r\n\t\t<div class=\"sortingCtr\">\r\n\t\t\t<div></div>\r\n\t\t\t<div class=\"triangle-top\"></div>\r\n\t\t\t<div class=\"triangle-down\"></div>\r\n\t\t\t<ng-container *ngIf=\"OneRender; else multiple_render\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"one_render; context: { Sorters: Sorters }\"></ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"sortingBtnCtr\">\r\n\t\t\t<button class=\"grButton grButton--primary applySortAnalytics\" (click)=\"CheckCascadeOrder()\">\r\n\t\t\t\t<!-- <span>{{'BTN_APPLY_SORT' | term : terms}}</span> -->\r\n\t\t\t\t<span>Apply sort</span>\r\n\t\t\t</button>\r\n\t\t\t<button class=\"grButton grButton--secundary clearSortAnalytics\" (click)=\"ClearCascadeOrder()\">\r\n\t\t\t\t<!-- <span>{{'BTN_CLEAR_SORT' | term : terms}}</span> -->\r\n\t\t\t\t<span>Clear sort</span>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</div>\r\n</ng-container>\r\n\r\n<ng-template #one_render let-Sorters=\"Sorters\">\r\n\t<ng-container *ngFor=\"let row of Sorters; let i = index\">\r\n\t\t<ng-container *ngIf=\"LCascadefilter.length > 0 && i <= NumMaxSorting\">\r\n\t\t\t<ng-container *ngIf=\"OneRender && i == 0\">\r\n\t\t\t\t<div class=\"idx-select\" *ngIf=\"i < LCascadefilter.length\">\r\n\t\t\t\t\t<span class=\"numOrder\">{{ i + 1 }}</span>\r\n\t\t\t\t\t<select class=\"form-select\" [(ngModel)]=\"LCascadefilter[i].id\">\r\n\t\t\t\t\t\t<option *ngIf=\"i === 0\" [value]=\"0\">\r\n\t\t\t\t\t\t\t--\r\n\t\t\t\t\t\t\t<!-- <span>{{ \"LBL_SORT_BY\" | term : terms }}</span> -->\r\n\t\t\t\t\t\t\t<span>Sort By</span>\r\n\t\t\t\t\t\t\t--\r\n\t\t\t\t\t\t</option>\r\n\t\t\t\t\t\t<option *ngFor=\"let sort of Sorters\" [ngValue]=\"sort.field\" [disabled]=\"CheckCascadeDisabled(sort.field, i)\">\r\n\t\t\t\t\t\t\t{{ sort.headerText }}\r\n\t\t\t\t\t\t</option>\r\n\t\t\t\t\t</select>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div class=\"form-check\" *ngIf=\"i < LCascadefilter.length\">\r\n\t\t\t\t\t<p-radiobutton class=\"prRadioButton\" name=\"optSort{{ i }}\" [value]=\"Order.ORDER_BY_ASC\" [inputId]=\"'test{{ i + i + 1 }}'\" [(ngModel)]=\"LCascadefilter[i].order\" tabindex=\"0\" />\r\n\t\t\t\t\t<label for=\"test{{ i + i + 1 }}\"></label>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div class=\"form-check\" *ngIf=\"i < LCascadefilter.length\">\r\n\t\t\t\t\t<p-radiobutton class=\"prRadioButton\" name=\"optSort{{ i }}\" [value]=\"Order.ORDER_BY_DESC\" [inputId]=\"'test{{ i + i + 2 }}'\" [(ngModel)]=\"LCascadefilter[i].order\" tabindex=\"0\" />\r\n\t\t\t\t\t<label for=\"test{{ i + i + 2 }}\"></label>\r\n\t\t\t\t</div>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</ng-template>\r\n\r\n<ng-template #multiple_render>\r\n\t<ng-container *ngFor=\"let row of Sorters; let i = index\">\r\n\t\t<ng-container *ngIf=\"LCascadefilter.length > 0 && i <= NumMaxSorting\">\r\n\t\t\t<div class=\"idx-select\" *ngIf=\"i < LCascadefilter.length\">\r\n\t\t\t\t<span class=\"numOrder\">{{ i + 1 }}</span>\r\n\t\t\t\t<select class=\"form-select\" [(ngModel)]=\"LCascadefilter[i].id\">\r\n\t\t\t\t\t<option *ngIf=\"i === 0\" [value]=\"0\">\r\n\t\t\t\t\t\t--\r\n\t\t\t\t\t\t<!-- <span>{{ \"LBL_SORT_BY\" | term : terms }}</span> -->\r\n\t\t\t\t\t\t<span>Sort By</span>\r\n\t\t\t\t\t\t--\r\n\t\t\t\t\t</option>\r\n\t\t\t\t\t<option *ngIf=\"i > 0\" [value]=\"0\">\r\n\t\t\t\t\t\t--\r\n\t\t\t\t\t\t<!-- <span>{{ \"LBL_SORT_THEN\" | term : terms }}</span> -->\r\n\t\t\t\t\t\t<span>Then by</span>\r\n\t\t\t\t\t\t--\r\n\t\t\t\t\t</option>\r\n\t\t\t\t\t<option *ngFor=\"let sort of Sorters\" [ngValue]=\"sort.field\" [disabled]=\"CheckCascadeDisabled(sort.field, i)\">\r\n\t\t\t\t\t\t{{ sort.headerText }}\r\n\t\t\t\t\t</option>\r\n\t\t\t\t</select>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"form-check\" *ngIf=\"i < LCascadefilter.length\">\r\n\t\t\t\t<p-radiobutton class=\"prRadioButton\" name=\"optSort{{ i }}\" [value]=\"Order.ORDER_BY_ASC\" [inputId]=\"'test{{ i + i + 1 }}'\" [(ngModel)]=\"LCascadefilter[i].order\" tabindex=\"0\" />\r\n\t\t\t\t<label for=\"test{{ i + i + 1 }}\"></label>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"form-check\" *ngIf=\"i < LCascadefilter.length\">\r\n\t\t\t\t<p-radiobutton class=\"prRadioButton\" name=\"optSort{{ i }}\" [value]=\"Order.ORDER_BY_DESC\" [inputId]=\"'test{{ i + i + 2 }}'\" [(ngModel)]=\"LCascadefilter[i].order\" tabindex=\"0\" />\r\n\t\t\t\t<label for=\"test{{ i + i + 2 }}\"></label>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { Sorters: [{
+                type: Input
+            }], OrderBy: [{
+                type: Input
+            }], OrderByDefault: [{
+                type: Input
+            }], OneRender: [{
+                type: Input
+            }], ReturnSorting: [{
+                type: Output
+            }], AlertOrder: [{
+                type: Output
+            }] } });
+
 class HtmlToExcelService {
     ExportTOExcel(idTabla, html, filename, tabname, extension) {
         let Table = document.getElementById(idTabla);
@@ -2113,9 +2616,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, ButtonSplitComponent, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DynamicInputValidation, EmailInputValidation, ErrorInterceptor, FeatureFlagService, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaTheme, ItemSplitDirective, LanguageService, ModalDialogComponent, OrderConstants, PaginatorComponent, Patterns, RecordPerPageComponent, RefreshTokenInterceptor, RowResumenComponent, SearchComponent, SharedService, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TermGuard, TermPipe, TermService, encryptData };
 //# sourceMappingURL=intelica-library-ui.mjs.map