npm - ngx-vector-components - Versions diffs - 5.4.2 → 5.5.1 - Mend

ngx-vector-components 5.4.2 → 5.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (177) hide show

package/fesm2022/ngx-vector-components.mjs CHANGED Viewed

@@ -508,6 +508,9 @@ var ProfileModuleActionType;
     ProfileModuleActionType["SAVE_DRIVER_DOCUMENTS"] = "Save Driver Documents";
     ProfileModuleActionType["SHOW_DRIVER_DOCUMENTS"] = "Show Driver Documents";
     ProfileModuleActionType["DRIVER_VALIDATE_DOCUMENTS"] = "Driver Validate Documents";
+    ProfileModuleActionType["ONLY_SHOW_PROFILE_PETROBRAS"] = "Only Show Profile Petrobras";
+    ProfileModuleActionType["SHOW_PARAMETERS_CARRIER"] = "Show Parameters Carrier";
+    ProfileModuleActionType["SAVE_CARRIERS_DOCUMENTS"] = "Save Carriers Documents";
 })(ProfileModuleActionType || (ProfileModuleActionType = {}));
 var Role;
@@ -549,11 +552,11 @@ class BadgeComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: BadgeComponent, selector: "vector-badge", inputs: { type: "type", label: "label", customColor: "customColor", customBackgroundColor: "customBackgroundColor", tooltip: "tooltip" }, ngImport: i0, template: "<div\r\n  class=\"badge\"\r\n  [class]=\"getStatusColor()\"\r\n  [ngStyle]=\"{ 'background-color': customBackgroundColor, color: customColor }\"\r\n  [pTooltip]=\"tooltip || ''\"\r\n  tooltipPosition=\"top\"\r\n>\r\n  {{ label }}\r\n</div>\r\n", styles: [".badge{padding:4px 12px;border-radius:8px;color:#fff}.badge-success{background-color:var(--success-color)}.badge-error{background-color:var(--error-color)}.badge-warning{background-color:var(--warning-color)}.badge-info{background-color:var(--theme-light)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: BadgeComponent, selector: "vector-badge", inputs: { type: "type", label: "label", customColor: "customColor", customBackgroundColor: "customBackgroundColor", tooltip: "tooltip" }, ngImport: i0, template: "<div\n  class=\"badge\"\n  [class]=\"getStatusColor()\"\n  [ngStyle]=\"{ 'background-color': customBackgroundColor, color: customColor }\"\n  [pTooltip]=\"tooltip || ''\"\n  tooltipPosition=\"top\"\n>\n  {{ label }}\n</div>\n", styles: [".badge{padding:4px 12px;border-radius:8px;color:#fff}.badge-success{background-color:var(--success-color)}.badge-error{background-color:var(--error-color)}.badge-warning{background-color:var(--warning-color)}.badge-info{background-color:var(--theme-light)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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: "17.1.0", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-badge', template: "<div\r\n  class=\"badge\"\r\n  [class]=\"getStatusColor()\"\r\n  [ngStyle]=\"{ 'background-color': customBackgroundColor, color: customColor }\"\r\n  [pTooltip]=\"tooltip || ''\"\r\n  tooltipPosition=\"top\"\r\n>\r\n  {{ label }}\r\n</div>\r\n", styles: [".badge{padding:4px 12px;border-radius:8px;color:#fff}.badge-success{background-color:var(--success-color)}.badge-error{background-color:var(--error-color)}.badge-warning{background-color:var(--warning-color)}.badge-info{background-color:var(--theme-light)}\n"] }]
+            args: [{ selector: 'vector-badge', template: "<div\n  class=\"badge\"\n  [class]=\"getStatusColor()\"\n  [ngStyle]=\"{ 'background-color': customBackgroundColor, color: customColor }\"\n  [pTooltip]=\"tooltip || ''\"\n  tooltipPosition=\"top\"\n>\n  {{ label }}\n</div>\n", styles: [".badge{padding:4px 12px;border-radius:8px;color:#fff}.badge-success{background-color:var(--success-color)}.badge-error{background-color:var(--error-color)}.badge-warning{background-color:var(--warning-color)}.badge-info{background-color:var(--theme-light)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], label: [{
@@ -1316,11 +1319,11 @@ class BreadcrumbComponent {
         return foundItem;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1$1.Router }, { token: ENVIRONMENT }, { token: MENU_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: BreadcrumbComponent, selector: "vector-breadcrumb", ngImport: i0, template: "<div class=\"breadcrumb-container\" *ngIf=\"routeFragments?.length\">\r\n  <div class=\"route-path\">\r\n    <span class=\"app-name\">{{ appName }}</span>\r\n    <div *ngIf=\"routeFragments.length < 2\" class=\"chevron\"></div>\r\n    <span\r\n      class=\"route-fragment\"\r\n      [ngClass]=\"{ clickable: fragment.route }\"\r\n      *ngFor=\"let fragment of routeFragments | removeLastChild\"\r\n      (click)=\"navigateToFragment(fragment)\"\r\n      ><div class=\"chevron\"></div>\r\n      {{ fragment.label }}</span\r\n    >\r\n  </div>\r\n  <span class=\"last-route\">\r\n    {{ routeFragments[routeFragments.length - 1].label }}\r\n  </span>\r\n</div>\r\n", styles: [".breadcrumb-container{display:flex;flex-direction:column;margin-bottom:15px}.breadcrumb-container .route-path{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;color:var(--gray-dark)}.breadcrumb-container .app-name,.breadcrumb-container .last-route,.breadcrumb-container .route-path .route-fragment{font-weight:700;letter-spacing:.75px;display:flex;flex-direction:row;align-items:center;margin:2.5px}.breadcrumb-container .clickable{cursor:pointer}.breadcrumb-container .chevron{margin:0 5px;background-image:url(../../../../assets/icons/chevron_down_icon.svg);background-repeat:no-repeat;background-position:center;transform:rotate(-90deg);width:20px;height:20px;filter:invert(53%) sepia(13%) saturate(450%) hue-rotate(156deg) brightness(89%) contrast(85%)}.breadcrumb-container .last-route{font-size:1.5em;color:var(--success-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: RemoveLastChildPipe, name: "removeLastChild" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: BreadcrumbComponent, selector: "vector-breadcrumb", ngImport: i0, template: "<div class=\"breadcrumb-container\" *ngIf=\"routeFragments?.length\">\n  <div class=\"route-path\">\n    <span class=\"app-name\">{{ appName }}</span>\n    <div *ngIf=\"routeFragments.length < 2\" class=\"chevron\"></div>\n    <span\n      class=\"route-fragment\"\n      [ngClass]=\"{ clickable: fragment.route }\"\n      *ngFor=\"let fragment of routeFragments | removeLastChild\"\n      (click)=\"navigateToFragment(fragment)\"\n      ><div class=\"chevron\"></div>\n      {{ fragment.label }}</span\n    >\n  </div>\n  <span class=\"last-route\">\n    {{ routeFragments[routeFragments.length - 1].label }}\n  </span>\n</div>\n", styles: [".breadcrumb-container{display:flex;flex-direction:column;margin-bottom:15px}.breadcrumb-container .route-path{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;color:var(--gray-dark)}.breadcrumb-container .app-name,.breadcrumb-container .last-route,.breadcrumb-container .route-path .route-fragment{font-weight:700;letter-spacing:.75px;display:flex;flex-direction:row;align-items:center;margin:2.5px}.breadcrumb-container .clickable{cursor:pointer}.breadcrumb-container .chevron{margin:0 5px;background-image:url(../../../../assets/icons/chevron_down_icon.svg);background-repeat:no-repeat;background-position:center;transform:rotate(-90deg);width:20px;height:20px;filter:invert(53%) sepia(13%) saturate(450%) hue-rotate(156deg) brightness(89%) contrast(85%)}.breadcrumb-container .last-route{font-size:1.5em;color:var(--success-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: RemoveLastChildPipe, name: "removeLastChild" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-breadcrumb', template: "<div class=\"breadcrumb-container\" *ngIf=\"routeFragments?.length\">\r\n  <div class=\"route-path\">\r\n    <span class=\"app-name\">{{ appName }}</span>\r\n    <div *ngIf=\"routeFragments.length < 2\" class=\"chevron\"></div>\r\n    <span\r\n      class=\"route-fragment\"\r\n      [ngClass]=\"{ clickable: fragment.route }\"\r\n      *ngFor=\"let fragment of routeFragments | removeLastChild\"\r\n      (click)=\"navigateToFragment(fragment)\"\r\n      ><div class=\"chevron\"></div>\r\n      {{ fragment.label }}</span\r\n    >\r\n  </div>\r\n  <span class=\"last-route\">\r\n    {{ routeFragments[routeFragments.length - 1].label }}\r\n  </span>\r\n</div>\r\n", styles: [".breadcrumb-container{display:flex;flex-direction:column;margin-bottom:15px}.breadcrumb-container .route-path{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;color:var(--gray-dark)}.breadcrumb-container .app-name,.breadcrumb-container .last-route,.breadcrumb-container .route-path .route-fragment{font-weight:700;letter-spacing:.75px;display:flex;flex-direction:row;align-items:center;margin:2.5px}.breadcrumb-container .clickable{cursor:pointer}.breadcrumb-container .chevron{margin:0 5px;background-image:url(../../../../assets/icons/chevron_down_icon.svg);background-repeat:no-repeat;background-position:center;transform:rotate(-90deg);width:20px;height:20px;filter:invert(53%) sepia(13%) saturate(450%) hue-rotate(156deg) brightness(89%) contrast(85%)}.breadcrumb-container .last-route{font-size:1.5em;color:var(--success-color)}\n"] }]
+            args: [{ selector: 'vector-breadcrumb', template: "<div class=\"breadcrumb-container\" *ngIf=\"routeFragments?.length\">\n  <div class=\"route-path\">\n    <span class=\"app-name\">{{ appName }}</span>\n    <div *ngIf=\"routeFragments.length < 2\" class=\"chevron\"></div>\n    <span\n      class=\"route-fragment\"\n      [ngClass]=\"{ clickable: fragment.route }\"\n      *ngFor=\"let fragment of routeFragments | removeLastChild\"\n      (click)=\"navigateToFragment(fragment)\"\n      ><div class=\"chevron\"></div>\n      {{ fragment.label }}</span\n    >\n  </div>\n  <span class=\"last-route\">\n    {{ routeFragments[routeFragments.length - 1].label }}\n  </span>\n</div>\n", styles: [".breadcrumb-container{display:flex;flex-direction:column;margin-bottom:15px}.breadcrumb-container .route-path{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;color:var(--gray-dark)}.breadcrumb-container .app-name,.breadcrumb-container .last-route,.breadcrumb-container .route-path .route-fragment{font-weight:700;letter-spacing:.75px;display:flex;flex-direction:row;align-items:center;margin:2.5px}.breadcrumb-container .clickable{cursor:pointer}.breadcrumb-container .chevron{margin:0 5px;background-image:url(../../../../assets/icons/chevron_down_icon.svg);background-repeat:no-repeat;background-position:center;transform:rotate(-90deg);width:20px;height:20px;filter:invert(53%) sepia(13%) saturate(450%) hue-rotate(156deg) brightness(89%) contrast(85%)}.breadcrumb-container .last-route{font-size:1.5em;color:var(--success-color)}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -1399,11 +1402,11 @@ class ButtonComponent {
         return `button shadow-3 ${this.type} ${this.noShadow && 'no-shadow'}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: ButtonComponent, selector: "vector-button", inputs: { disabled: "disabled", label: "label", type: "type", leftIcon: "leftIcon", rightIcon: "rightIcon", noShadow: "noShadow", style: "style" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<p-button\r\n  [styleClass]=\"styleClass\"\r\n  [label]=\"label\"\r\n  [disabled]=\"disabled\"\r\n  [icon]=\"leftIcon || rightIcon\"\r\n  [iconPos]=\"rightIcon ? 'right' : 'left'\"\r\n  [style]=\"style\"\r\n  (onClick)=\"onClick.emit($event)\"\r\n></p-button>\r\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "size", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: ButtonComponent, selector: "vector-button", inputs: { disabled: "disabled", label: "label", type: "type", leftIcon: "leftIcon", rightIcon: "rightIcon", noShadow: "noShadow", style: "style" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<p-button\n  [styleClass]=\"styleClass\"\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [icon]=\"leftIcon || rightIcon\"\n  [iconPos]=\"rightIcon ? 'right' : 'left'\"\n  [style]=\"style\"\n  (onClick)=\"onClick.emit($event)\"\n></p-button>\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "size", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-button', template: "<p-button\r\n  [styleClass]=\"styleClass\"\r\n  [label]=\"label\"\r\n  [disabled]=\"disabled\"\r\n  [icon]=\"leftIcon || rightIcon\"\r\n  [iconPos]=\"rightIcon ? 'right' : 'left'\"\r\n  [style]=\"style\"\r\n  (onClick)=\"onClick.emit($event)\"\r\n></p-button>\r\n" }]
+            args: [{ selector: 'vector-button', template: "<p-button\n  [styleClass]=\"styleClass\"\n  [label]=\"label\"\n  [disabled]=\"disabled\"\n  [icon]=\"leftIcon || rightIcon\"\n  [iconPos]=\"rightIcon ? 'right' : 'left'\"\n  [style]=\"style\"\n  (onClick)=\"onClick.emit($event)\"\n></p-button>\n" }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], label: [{
@@ -1432,11 +1435,11 @@ class CrudFooterComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CrudFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CrudFooterComponent, selector: "vector-crud-footer", inputs: { submitDisabled: "submitDisabled", submitHidden: "submitHidden", goBackHidden: "goBackHidden", labelGoBack: "labelGoBack", typeGoBack: "typeGoBack", labelGoSubmit: "labelGoSubmit", typeGoSubmit: "typeGoSubmit" }, outputs: { onGoBack: "onGoBack", onSubmit: "onSubmit" }, ngImport: i0, template: "<div class=\"footer-container shadow-3\">\r\n  <div class=\"button\" *ngIf=\"!goBackHidden\">\r\n    <vector-button\r\n      [label]=\"labelGoBack ? labelGoBack : ('enums.Options.GO_BACK' | translate)\"\r\n      [type]=\"typeGoBack ? typeGoBack : 'default'\"\r\n      (onClick)=\"onGoBack.emit()\"\r\n    >\r\n    </vector-button>\r\n  </div>\r\n\r\n  <div class=\"button\" *ngIf=\"!submitHidden\">\r\n    <vector-button\r\n      [label]=\"labelGoSubmit ? labelGoSubmit : ('enums.Options.SAVE' | translate)\"\r\n      [type]=\"typeGoSubmit ? typeGoSubmit : 'success'\"\r\n      (onClick)=\"onSubmit.emit()\"\r\n      [disabled]=\"submitDisabled\"\r\n    ></vector-button>\r\n  </div>\r\n</div>\r\n", styles: [".footer-container{position:fixed;bottom:0;left:0;background-color:#f5f5f5;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;height:60px}.footer-container .button{margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CrudFooterComponent, selector: "vector-crud-footer", inputs: { submitDisabled: "submitDisabled", submitHidden: "submitHidden", goBackHidden: "goBackHidden", labelGoBack: "labelGoBack", typeGoBack: "typeGoBack", labelGoSubmit: "labelGoSubmit", typeGoSubmit: "typeGoSubmit" }, outputs: { onGoBack: "onGoBack", onSubmit: "onSubmit" }, ngImport: i0, template: "<div class=\"footer-container shadow-3\">\n  <div class=\"button\" *ngIf=\"!goBackHidden\">\n    <vector-button\n      [label]=\"labelGoBack ? labelGoBack : ('enums.Options.GO_BACK' | translate)\"\n      [type]=\"typeGoBack ? typeGoBack : 'default'\"\n      (onClick)=\"onGoBack.emit()\"\n    >\n    </vector-button>\n  </div>\n\n  <div class=\"button\" *ngIf=\"!submitHidden\">\n    <vector-button\n      [label]=\"labelGoSubmit ? labelGoSubmit : ('enums.Options.SAVE' | translate)\"\n      [type]=\"typeGoSubmit ? typeGoSubmit : 'success'\"\n      (onClick)=\"onSubmit.emit()\"\n      [disabled]=\"submitDisabled\"\n    ></vector-button>\n  </div>\n</div>\n", styles: [".footer-container{position:fixed;bottom:0;left:0;background-color:#f5f5f5;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;height:60px}.footer-container .button{margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CrudFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-crud-footer', template: "<div class=\"footer-container shadow-3\">\r\n  <div class=\"button\" *ngIf=\"!goBackHidden\">\r\n    <vector-button\r\n      [label]=\"labelGoBack ? labelGoBack : ('enums.Options.GO_BACK' | translate)\"\r\n      [type]=\"typeGoBack ? typeGoBack : 'default'\"\r\n      (onClick)=\"onGoBack.emit()\"\r\n    >\r\n    </vector-button>\r\n  </div>\r\n\r\n  <div class=\"button\" *ngIf=\"!submitHidden\">\r\n    <vector-button\r\n      [label]=\"labelGoSubmit ? labelGoSubmit : ('enums.Options.SAVE' | translate)\"\r\n      [type]=\"typeGoSubmit ? typeGoSubmit : 'success'\"\r\n      (onClick)=\"onSubmit.emit()\"\r\n      [disabled]=\"submitDisabled\"\r\n    ></vector-button>\r\n  </div>\r\n</div>\r\n", styles: [".footer-container{position:fixed;bottom:0;left:0;background-color:#f5f5f5;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;height:60px}.footer-container .button{margin-right:10px}\n"] }]
+            args: [{ selector: 'vector-crud-footer', template: "<div class=\"footer-container shadow-3\">\n  <div class=\"button\" *ngIf=\"!goBackHidden\">\n    <vector-button\n      [label]=\"labelGoBack ? labelGoBack : ('enums.Options.GO_BACK' | translate)\"\n      [type]=\"typeGoBack ? typeGoBack : 'default'\"\n      (onClick)=\"onGoBack.emit()\"\n    >\n    </vector-button>\n  </div>\n\n  <div class=\"button\" *ngIf=\"!submitHidden\">\n    <vector-button\n      [label]=\"labelGoSubmit ? labelGoSubmit : ('enums.Options.SAVE' | translate)\"\n      [type]=\"typeGoSubmit ? typeGoSubmit : 'success'\"\n      (onClick)=\"onSubmit.emit()\"\n      [disabled]=\"submitDisabled\"\n    ></vector-button>\n  </div>\n</div>\n", styles: [".footer-container{position:fixed;bottom:0;left:0;background-color:#f5f5f5;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;height:60px}.footer-container .button{margin-right:10px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { submitDisabled: [{
                 type: Input
             }], submitHidden: [{
@@ -1461,11 +1464,11 @@ class PanelComponent {
     constructor() { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: PanelComponent, selector: "vector-panel", ngImport: i0, template: "<p-panel [showHeader]=\"false\">\r\n  <ng-template pTemplate=\"content\">\r\n    <div class=\"shadow-3\"><ng-content></ng-content></div></ng-template\r\n></p-panel>\r\n", styles: [""], dependencies: [{ kind: "component", type: i1$4.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: PanelComponent, selector: "vector-panel", ngImport: i0, template: "<p-panel [showHeader]=\"false\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"shadow-3\"><ng-content></ng-content></div></ng-template\n></p-panel>\n", styles: [""], dependencies: [{ kind: "component", type: i1$4.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-panel', template: "<p-panel [showHeader]=\"false\">\r\n  <ng-template pTemplate=\"content\">\r\n    <div class=\"shadow-3\"><ng-content></ng-content></div></ng-template\r\n></p-panel>\r\n" }]
+            args: [{ selector: 'vector-panel', template: "<p-panel [showHeader]=\"false\">\n  <ng-template pTemplate=\"content\">\n    <div class=\"shadow-3\"><ng-content></ng-content></div></ng-template\n></p-panel>\n" }]
         }], ctorParameters: () => [] });
 class PanelModule {
@@ -1488,11 +1491,11 @@ class ScoreComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ScoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: ScoreComponent, selector: "vector-score", inputs: { score: "score" }, ngImport: i0, template: "<div class=\"container\">\r\n  <span class=\"score\">{{ score }}</span>\r\n  <em class=\"fas fa-star star\"></em>\r\n</div>\r\n", styles: [".container{display:flex;align-items:center;gap:5px}.container .star{color:var(--theme-primary)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: ScoreComponent, selector: "vector-score", inputs: { score: "score" }, ngImport: i0, template: "<div class=\"container\">\n  <span class=\"score\">{{ score }}</span>\n  <em class=\"fas fa-star star\"></em>\n</div>\n", styles: [".container{display:flex;align-items:center;gap:5px}.container .star{color:var(--theme-primary)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: ScoreComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-score', template: "<div class=\"container\">\r\n  <span class=\"score\">{{ score }}</span>\r\n  <em class=\"fas fa-star star\"></em>\r\n</div>\r\n", styles: [".container{display:flex;align-items:center;gap:5px}.container .star{color:var(--theme-primary)}\n"] }]
+            args: [{ selector: 'vector-score', template: "<div class=\"container\">\n  <span class=\"score\">{{ score }}</span>\n  <em class=\"fas fa-star star\"></em>\n</div>\n", styles: [".container{display:flex;align-items:center;gap:5px}.container .star{color:var(--theme-primary)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { score: [{
                 type: Input
             }] } });
@@ -2118,11 +2121,11 @@ class FieldErrorMessageComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FieldErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: { control: "control" }, ngImport: i0, template: "<span class=\"input-error\">{{ fieldErrorLabel() }}</span>\r\n", styles: [".input-error{font-size:.7em;color:var(--error-color);position:absolute;width:max-content}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: { control: "control" }, ngImport: i0, template: "<span class=\"input-error\">{{ fieldErrorLabel() }}</span>\n", styles: [".input-error{font-size:.7em;color:var(--error-color);position:absolute;width:max-content}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FieldErrorMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-field-error-message', template: "<span class=\"input-error\">{{ fieldErrorLabel() }}</span>\r\n", styles: [".input-error{font-size:.7em;color:var(--error-color);position:absolute;width:max-content}\n"] }]
+            args: [{ selector: 'vector-field-error-message', template: "<span class=\"input-error\">{{ fieldErrorLabel() }}</span>\n", styles: [".input-error{font-size:.7em;color:var(--error-color);position:absolute;width:max-content}\n"] }]
         }], ctorParameters: () => [], propDecorators: { control: [{
                 type: Input
             }] } });
@@ -2166,11 +2169,11 @@ class CalendarComponent {
         this.modalService.showModalBackground$.next(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CalendarComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CalendarComponent, selector: "vector-calendar-field", inputs: { isRequired: "isRequired", control: "control", label: "label", showCalendarOnFocus: "showCalendarOnFocus", min: "min", max: "max", disabledDates: "disabledDates", disabled: "disabled", defaultDate: "defaultDate", hiddenErrorMessage: "hiddenErrorMessage" }, ngImport: i0, template: "<div class=\"relative\">\r\n  <div class=\"input-container\">\r\n    <p-calendar\r\n      appendTo=\"body\"\r\n      [formControl]=\"control\"\r\n      [showOnFocus]=\"showCalendarOnFocus\"\r\n      [minDate]=\"min\"\r\n      [maxDate]=\"max\"\r\n      icon=\"fas fa-calendar-day\"\r\n      [showIcon]=\"true\"\r\n      [disabledDates]=\"disabledDates\"\r\n      [readonlyInput]=\"false\"\r\n      (onShow)=\"onShowCalendar()\"\r\n      (onClose)=\"onHideCalendar()\"\r\n      [disabled]=\"disabled\"\r\n      [defaultDate]=\"defaultDate\"\r\n    ></p-calendar>\r\n  </div>\r\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\r\n</div>\r\n", styles: [".input-container{display:block}.input-container input{transition:border-width ease-in-out .08s;border:1px solid rgba(0,0,0,.6);width:100%;padding:6px 30px 6px 12px;font-size:14px;line-height:1.5em;border-radius:var(--border-radius);height:40px}.input-container input:disabled{cursor:not-allowed;background-color:var(--disabled-background);opacity:1}.input-container input:focus{outline:0;box-shadow:none;border-width:2px}.input-container input::placeholder{color:var(--placeholder-color);font-size:12px}.input-container input.ng-touched.ng-invalid{border-color:var(--error-color)!important}.input-container .input-error{font-size:.7em;color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CalendarComponent, selector: "vector-calendar-field", inputs: { isRequired: "isRequired", control: "control", label: "label", showCalendarOnFocus: "showCalendarOnFocus", min: "min", max: "max", disabledDates: "disabledDates", disabled: "disabled", defaultDate: "defaultDate", hiddenErrorMessage: "hiddenErrorMessage" }, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"input-container\">\n    <p-calendar\n      appendTo=\"body\"\n      [formControl]=\"control\"\n      [showOnFocus]=\"showCalendarOnFocus\"\n      [minDate]=\"min\"\n      [maxDate]=\"max\"\n      icon=\"fas fa-calendar-day\"\n      [showIcon]=\"true\"\n      [disabledDates]=\"disabledDates\"\n      [readonlyInput]=\"false\"\n      (onShow)=\"onShowCalendar()\"\n      (onClose)=\"onHideCalendar()\"\n      [disabled]=\"disabled\"\n      [defaultDate]=\"defaultDate\"\n    ></p-calendar>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n</div>\n", styles: [".input-container{display:block}.input-container input{transition:border-width ease-in-out .08s;border:1px solid rgba(0,0,0,.6);width:100%;padding:6px 30px 6px 12px;font-size:14px;line-height:1.5em;border-radius:var(--border-radius);height:40px}.input-container input:disabled{cursor:not-allowed;background-color:var(--disabled-background);opacity:1}.input-container input:focus{outline:0;box-shadow:none;border-width:2px}.input-container input::placeholder{color:var(--placeholder-color);font-size:12px}.input-container input.ng-touched.ng-invalid{border-color:var(--error-color)!important}.input-container .input-error{font-size:.7em;color:var(--error-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-calendar-field', template: "<div class=\"relative\">\r\n  <div class=\"input-container\">\r\n    <p-calendar\r\n      appendTo=\"body\"\r\n      [formControl]=\"control\"\r\n      [showOnFocus]=\"showCalendarOnFocus\"\r\n      [minDate]=\"min\"\r\n      [maxDate]=\"max\"\r\n      icon=\"fas fa-calendar-day\"\r\n      [showIcon]=\"true\"\r\n      [disabledDates]=\"disabledDates\"\r\n      [readonlyInput]=\"false\"\r\n      (onShow)=\"onShowCalendar()\"\r\n      (onClose)=\"onHideCalendar()\"\r\n      [disabled]=\"disabled\"\r\n      [defaultDate]=\"defaultDate\"\r\n    ></p-calendar>\r\n  </div>\r\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\r\n</div>\r\n", styles: [".input-container{display:block}.input-container input{transition:border-width ease-in-out .08s;border:1px solid rgba(0,0,0,.6);width:100%;padding:6px 30px 6px 12px;font-size:14px;line-height:1.5em;border-radius:var(--border-radius);height:40px}.input-container input:disabled{cursor:not-allowed;background-color:var(--disabled-background);opacity:1}.input-container input:focus{outline:0;box-shadow:none;border-width:2px}.input-container input::placeholder{color:var(--placeholder-color);font-size:12px}.input-container input.ng-touched.ng-invalid{border-color:var(--error-color)!important}.input-container .input-error{font-size:.7em;color:var(--error-color)}\n"] }]
+            args: [{ selector: 'vector-calendar-field', template: "<div class=\"relative\">\n  <div class=\"input-container\">\n    <p-calendar\n      appendTo=\"body\"\n      [formControl]=\"control\"\n      [showOnFocus]=\"showCalendarOnFocus\"\n      [minDate]=\"min\"\n      [maxDate]=\"max\"\n      icon=\"fas fa-calendar-day\"\n      [showIcon]=\"true\"\n      [disabledDates]=\"disabledDates\"\n      [readonlyInput]=\"false\"\n      (onShow)=\"onShowCalendar()\"\n      (onClose)=\"onHideCalendar()\"\n      [disabled]=\"disabled\"\n      [defaultDate]=\"defaultDate\"\n    ></p-calendar>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n</div>\n", styles: [".input-container{display:block}.input-container input{transition:border-width ease-in-out .08s;border:1px solid rgba(0,0,0,.6);width:100%;padding:6px 30px 6px 12px;font-size:14px;line-height:1.5em;border-radius:var(--border-radius);height:40px}.input-container input:disabled{cursor:not-allowed;background-color:var(--disabled-background);opacity:1}.input-container input:focus{outline:0;box-shadow:none;border-width:2px}.input-container input::placeholder{color:var(--placeholder-color);font-size:12px}.input-container input.ng-touched.ng-invalid{border-color:var(--error-color)!important}.input-container .input-error{font-size:.7em;color:var(--error-color)}\n"] }]
         }], ctorParameters: () => [{ type: ModalService }], propDecorators: { isRequired: [{
                 type: Input
             }], control: [{
@@ -2207,11 +2210,11 @@ class CheckboxFieldComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CheckboxFieldComponent, selector: "vector-checkbox-field", inputs: { isRequired: "isRequired", control: "control", label: "label", rounded: "rounded", labelSize: "labelSize", value: "value", groupName: "groupName", options: "options", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"checkbox-container flex-wrap\">\r\n  <ng-container *ngIf=\"control && groupName; else elseBlock\">\r\n    <div class=\"checkbox-item mb-3 mr-3\" *ngFor=\"let option of options\">\r\n      <p-checkbox\r\n        [name]=\"groupName\"\r\n        [formControl]=\"control\"\r\n        [value]=\"option\"\r\n        checkboxIcon=\"fas fa-check\"\r\n        [class.rounded-checkbox]=\"rounded\"\r\n        [inputId]=\"option.code\"\r\n      ></p-checkbox>\r\n      <label [for]=\"option.code\"> {{ option.name }}</label>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #elseBlock>\r\n    <p-checkbox\r\n      *ngIf=\"control && !groupName\"\r\n      [formControl]=\"control\"\r\n      checkboxIcon=\"fas fa-check\"\r\n      [binary]=\"true\"\r\n      [class.rounded-checkbox]=\"rounded\"\r\n      [disabled]=\"disabled\"\r\n    ></p-checkbox>\r\n    <p-checkbox\r\n      *ngIf=\"!control && !groupName\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"value = $event; valueChange.emit($event)\"\r\n      checkboxIcon=\"fas fa-check\"\r\n      [binary]=\"true\"\r\n      [class.rounded-checkbox]=\"rounded\"\r\n      [disabled]=\"disabled\"\r\n    ></p-checkbox>\r\n    <label *ngIf=\"label\" [class.large-label]=\"labelSize === 'large'\" (click)=\"control.setValue(!control.value)\"\r\n      >{{ label }}\r\n      <span class=\"red-label\" *ngIf=\"isRequired\"> (*)</span>\r\n    </label>\r\n  </ng-template>\r\n</div>\r\n", styles: [".checkbox-container{display:flex;align-items:center}.checkbox-container label{margin-left:10px}.checkbox-container .large-label{font-size:1em}.checkbox-container .checkbox-item{min-width:80px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CheckboxFieldComponent, selector: "vector-checkbox-field", inputs: { isRequired: "isRequired", control: "control", label: "label", rounded: "rounded", labelSize: "labelSize", value: "value", groupName: "groupName", options: "options", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"checkbox-container flex-wrap\">\n  <ng-container *ngIf=\"control && groupName; else elseBlock\">\n    <div class=\"checkbox-item mb-3 mr-3\" *ngFor=\"let option of options\">\n      <p-checkbox\n        [name]=\"groupName\"\n        [formControl]=\"control\"\n        [value]=\"option\"\n        checkboxIcon=\"fas fa-check\"\n        [class.rounded-checkbox]=\"rounded\"\n        [inputId]=\"option.code\"\n      ></p-checkbox>\n      <label [for]=\"option.code\"> {{ option.name }}</label>\n    </div>\n  </ng-container>\n\n  <ng-template #elseBlock>\n    <p-checkbox\n      *ngIf=\"control && !groupName\"\n      [formControl]=\"control\"\n      checkboxIcon=\"fas fa-check\"\n      [binary]=\"true\"\n      [class.rounded-checkbox]=\"rounded\"\n      [disabled]=\"disabled\"\n    ></p-checkbox>\n    <p-checkbox\n      *ngIf=\"!control && !groupName\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"value = $event; valueChange.emit($event)\"\n      checkboxIcon=\"fas fa-check\"\n      [binary]=\"true\"\n      [class.rounded-checkbox]=\"rounded\"\n      [disabled]=\"disabled\"\n    ></p-checkbox>\n    <label *ngIf=\"label\" [class.large-label]=\"labelSize === 'large'\" (click)=\"control.setValue(!control.value)\"\n      >{{ label }}\n      <span class=\"red-label\" *ngIf=\"isRequired\"> (*)</span>\n    </label>\n  </ng-template>\n</div>\n", styles: [".checkbox-container{display:flex;align-items:center}.checkbox-container label{margin-left:10px}.checkbox-container .large-label{font-size:1em}.checkbox-container .checkbox-item{min-width:80px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-checkbox-field', template: "<div class=\"checkbox-container flex-wrap\">\r\n  <ng-container *ngIf=\"control && groupName; else elseBlock\">\r\n    <div class=\"checkbox-item mb-3 mr-3\" *ngFor=\"let option of options\">\r\n      <p-checkbox\r\n        [name]=\"groupName\"\r\n        [formControl]=\"control\"\r\n        [value]=\"option\"\r\n        checkboxIcon=\"fas fa-check\"\r\n        [class.rounded-checkbox]=\"rounded\"\r\n        [inputId]=\"option.code\"\r\n      ></p-checkbox>\r\n      <label [for]=\"option.code\"> {{ option.name }}</label>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #elseBlock>\r\n    <p-checkbox\r\n      *ngIf=\"control && !groupName\"\r\n      [formControl]=\"control\"\r\n      checkboxIcon=\"fas fa-check\"\r\n      [binary]=\"true\"\r\n      [class.rounded-checkbox]=\"rounded\"\r\n      [disabled]=\"disabled\"\r\n    ></p-checkbox>\r\n    <p-checkbox\r\n      *ngIf=\"!control && !groupName\"\r\n      [ngModel]=\"value\"\r\n      (ngModelChange)=\"value = $event; valueChange.emit($event)\"\r\n      checkboxIcon=\"fas fa-check\"\r\n      [binary]=\"true\"\r\n      [class.rounded-checkbox]=\"rounded\"\r\n      [disabled]=\"disabled\"\r\n    ></p-checkbox>\r\n    <label *ngIf=\"label\" [class.large-label]=\"labelSize === 'large'\" (click)=\"control.setValue(!control.value)\"\r\n      >{{ label }}\r\n      <span class=\"red-label\" *ngIf=\"isRequired\"> (*)</span>\r\n    </label>\r\n  </ng-template>\r\n</div>\r\n", styles: [".checkbox-container{display:flex;align-items:center}.checkbox-container label{margin-left:10px}.checkbox-container .large-label{font-size:1em}.checkbox-container .checkbox-item{min-width:80px}\n"] }]
+            args: [{ selector: 'vector-checkbox-field', template: "<div class=\"checkbox-container flex-wrap\">\n  <ng-container *ngIf=\"control && groupName; else elseBlock\">\n    <div class=\"checkbox-item mb-3 mr-3\" *ngFor=\"let option of options\">\n      <p-checkbox\n        [name]=\"groupName\"\n        [formControl]=\"control\"\n        [value]=\"option\"\n        checkboxIcon=\"fas fa-check\"\n        [class.rounded-checkbox]=\"rounded\"\n        [inputId]=\"option.code\"\n      ></p-checkbox>\n      <label [for]=\"option.code\"> {{ option.name }}</label>\n    </div>\n  </ng-container>\n\n  <ng-template #elseBlock>\n    <p-checkbox\n      *ngIf=\"control && !groupName\"\n      [formControl]=\"control\"\n      checkboxIcon=\"fas fa-check\"\n      [binary]=\"true\"\n      [class.rounded-checkbox]=\"rounded\"\n      [disabled]=\"disabled\"\n    ></p-checkbox>\n    <p-checkbox\n      *ngIf=\"!control && !groupName\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"value = $event; valueChange.emit($event)\"\n      checkboxIcon=\"fas fa-check\"\n      [binary]=\"true\"\n      [class.rounded-checkbox]=\"rounded\"\n      [disabled]=\"disabled\"\n    ></p-checkbox>\n    <label *ngIf=\"label\" [class.large-label]=\"labelSize === 'large'\" (click)=\"control.setValue(!control.value)\"\n      >{{ label }}\n      <span class=\"red-label\" *ngIf=\"isRequired\"> (*)</span>\n    </label>\n  </ng-template>\n</div>\n", styles: [".checkbox-container{display:flex;align-items:center}.checkbox-container label{margin-left:10px}.checkbox-container .large-label{font-size:1em}.checkbox-container .checkbox-item{min-width:80px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isRequired: [{
                 type: Input
             }], control: [{
@@ -2300,11 +2303,11 @@ class CurrencyFieldComponent {
         this.control.setValue(0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CurrencyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: { minValue: "minValue", maxValue: "maxValue", placeholder: "placeholder", numberOfDecimals: "numberOfDecimals", control: "control", outlined: "outlined", rounded: "rounded", label: "label", isBankingField: "isBankingField", inputClassName: "inputClassName", localePrefix: "localePrefix", currencyPrefix: "currencyPrefix", disabled: "disabled", centered: "centered" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: InputNumber, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'input-container': outlined, 'value-input-container': !outlined, rounded: rounded }\">\r\n  <div class=\"inner-container\">\r\n    <label *ngIf=\"label\">{{ label }}</label>\r\n    <div class=\"input\">\r\n      <span *ngIf=\"!outlined\">{{ currencyPrefix }} </span>\r\n      <div class=\"value-input\">\r\n        <p-inputNumber\r\n          class=\"currency-input\"\r\n          [ngClass]=\"getInputNgClass()\"\r\n          [styleClass]=\"centered ? 'text-centered' : ''\"\r\n          [formControl]=\"control\"\r\n          mode=\"decimal\"\r\n          [minFractionDigits]=\"2\"\r\n          [maxFractionDigits]=\"numberOfDecimals\"\r\n          [min]=\"minValue\"\r\n          [max]=\"maxValue\"\r\n          [prefix]=\"outlined ? currencyPrefix : ''\"\r\n          [disabled]=\"disabled\"\r\n          [locale]=\"localePrefix ? localePrefix : 'pt-BR'\"\r\n          (click)=\"isBankingField ? focusLastIndex($event) : null\"\r\n          (onKeyDown)=\"isBankingField ? inputNextChar($event) : null\"\r\n        ></p-inputNumber>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span *ngIf=\"rounded\" class=\"clear-value\" (click)=\"clearValue()\"><i class=\"pi pi-times\"></i></span>\r\n</div>\r\n", styles: [".value-input-container{padding:5px 20px;display:flex;align-items:center;justify-content:space-between}.value-input-container:focus-within{border:2px solid var(--theme-dark)}.value-input-container:not(.rounded) span{font-size:2em}.value-input-container label{color:var(--gray-dark);font-size:13px}.value-input-container span{font-weight:700;color:var(--theme-dark)}.value-input-container .input{display:flex;align-items:center}.value-input-container .input .value-input{margin:0 4px;flex:1}.input-container{display:block}.rounded:not(.currency-input){padding:0 25px;background-color:#fff;border-radius:16px}.rounded span{font-size:1em}.rounded input{font-size:1rem}.rounded .clear-value{padding:5px 5px 0;border-radius:20px}.rounded .clear-value:hover{background-color:var(--gray-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: { minValue: "minValue", maxValue: "maxValue", placeholder: "placeholder", numberOfDecimals: "numberOfDecimals", control: "control", outlined: "outlined", rounded: "rounded", label: "label", isBankingField: "isBankingField", inputClassName: "inputClassName", localePrefix: "localePrefix", currencyPrefix: "currencyPrefix", disabled: "disabled", centered: "centered" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: InputNumber, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'input-container': outlined, 'value-input-container': !outlined, rounded: rounded }\">\n  <div class=\"inner-container\">\n    <label *ngIf=\"label\">{{ label }}</label>\n    <div class=\"input\">\n      <span *ngIf=\"!outlined\">{{ currencyPrefix }} </span>\n      <div class=\"value-input\">\n        <p-inputNumber\n          class=\"currency-input\"\n          [ngClass]=\"getInputNgClass()\"\n          [styleClass]=\"centered ? 'text-centered' : ''\"\n          [formControl]=\"control\"\n          mode=\"decimal\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"numberOfDecimals\"\n          [min]=\"minValue\"\n          [max]=\"maxValue\"\n          [prefix]=\"outlined ? currencyPrefix : ''\"\n          [disabled]=\"disabled\"\n          [locale]=\"localePrefix ? localePrefix : 'pt-BR'\"\n          (click)=\"isBankingField ? focusLastIndex($event) : null\"\n          (onKeyDown)=\"isBankingField ? inputNextChar($event) : null\"\n        ></p-inputNumber>\n      </div>\n    </div>\n  </div>\n  <span *ngIf=\"rounded\" class=\"clear-value\" (click)=\"clearValue()\"><i class=\"pi pi-times\"></i></span>\n</div>\n", styles: [".value-input-container{padding:5px 20px;display:flex;align-items:center;justify-content:space-between}.value-input-container:focus-within{border:2px solid var(--theme-dark)}.value-input-container:not(.rounded) span{font-size:2em}.value-input-container label{color:var(--gray-dark);font-size:13px}.value-input-container span{font-weight:700;color:var(--theme-dark)}.value-input-container .input{display:flex;align-items:center}.value-input-container .input .value-input{margin:0 4px;flex:1}.input-container{display:block}.rounded:not(.currency-input){padding:0 25px;background-color:#fff;border-radius:16px}.rounded span{font-size:1em}.rounded input{font-size:1rem}.rounded .clear-value{padding:5px 5px 0;border-radius:20px}.rounded .clear-value:hover{background-color:var(--gray-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-currency-field', template: "<div [ngClass]=\"{ 'input-container': outlined, 'value-input-container': !outlined, rounded: rounded }\">\r\n  <div class=\"inner-container\">\r\n    <label *ngIf=\"label\">{{ label }}</label>\r\n    <div class=\"input\">\r\n      <span *ngIf=\"!outlined\">{{ currencyPrefix }} </span>\r\n      <div class=\"value-input\">\r\n        <p-inputNumber\r\n          class=\"currency-input\"\r\n          [ngClass]=\"getInputNgClass()\"\r\n          [styleClass]=\"centered ? 'text-centered' : ''\"\r\n          [formControl]=\"control\"\r\n          mode=\"decimal\"\r\n          [minFractionDigits]=\"2\"\r\n          [maxFractionDigits]=\"numberOfDecimals\"\r\n          [min]=\"minValue\"\r\n          [max]=\"maxValue\"\r\n          [prefix]=\"outlined ? currencyPrefix : ''\"\r\n          [disabled]=\"disabled\"\r\n          [locale]=\"localePrefix ? localePrefix : 'pt-BR'\"\r\n          (click)=\"isBankingField ? focusLastIndex($event) : null\"\r\n          (onKeyDown)=\"isBankingField ? inputNextChar($event) : null\"\r\n        ></p-inputNumber>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span *ngIf=\"rounded\" class=\"clear-value\" (click)=\"clearValue()\"><i class=\"pi pi-times\"></i></span>\r\n</div>\r\n", styles: [".value-input-container{padding:5px 20px;display:flex;align-items:center;justify-content:space-between}.value-input-container:focus-within{border:2px solid var(--theme-dark)}.value-input-container:not(.rounded) span{font-size:2em}.value-input-container label{color:var(--gray-dark);font-size:13px}.value-input-container span{font-weight:700;color:var(--theme-dark)}.value-input-container .input{display:flex;align-items:center}.value-input-container .input .value-input{margin:0 4px;flex:1}.input-container{display:block}.rounded:not(.currency-input){padding:0 25px;background-color:#fff;border-radius:16px}.rounded span{font-size:1em}.rounded input{font-size:1rem}.rounded .clear-value{padding:5px 5px 0;border-radius:20px}.rounded .clear-value:hover{background-color:var(--gray-medium)}\n"] }]
+            args: [{ selector: 'vector-currency-field', template: "<div [ngClass]=\"{ 'input-container': outlined, 'value-input-container': !outlined, rounded: rounded }\">\n  <div class=\"inner-container\">\n    <label *ngIf=\"label\">{{ label }}</label>\n    <div class=\"input\">\n      <span *ngIf=\"!outlined\">{{ currencyPrefix }} </span>\n      <div class=\"value-input\">\n        <p-inputNumber\n          class=\"currency-input\"\n          [ngClass]=\"getInputNgClass()\"\n          [styleClass]=\"centered ? 'text-centered' : ''\"\n          [formControl]=\"control\"\n          mode=\"decimal\"\n          [minFractionDigits]=\"2\"\n          [maxFractionDigits]=\"numberOfDecimals\"\n          [min]=\"minValue\"\n          [max]=\"maxValue\"\n          [prefix]=\"outlined ? currencyPrefix : ''\"\n          [disabled]=\"disabled\"\n          [locale]=\"localePrefix ? localePrefix : 'pt-BR'\"\n          (click)=\"isBankingField ? focusLastIndex($event) : null\"\n          (onKeyDown)=\"isBankingField ? inputNextChar($event) : null\"\n        ></p-inputNumber>\n      </div>\n    </div>\n  </div>\n  <span *ngIf=\"rounded\" class=\"clear-value\" (click)=\"clearValue()\"><i class=\"pi pi-times\"></i></span>\n</div>\n", styles: [".value-input-container{padding:5px 20px;display:flex;align-items:center;justify-content:space-between}.value-input-container:focus-within{border:2px solid var(--theme-dark)}.value-input-container:not(.rounded) span{font-size:2em}.value-input-container label{color:var(--gray-dark);font-size:13px}.value-input-container span{font-weight:700;color:var(--theme-dark)}.value-input-container .input{display:flex;align-items:center}.value-input-container .input .value-input{margin:0 4px;flex:1}.input-container{display:block}.rounded:not(.currency-input){padding:0 25px;background-color:#fff;border-radius:16px}.rounded span{font-size:1em}.rounded input{font-size:1rem}.rounded .clear-value{padding:5px 5px 0;border-radius:20px}.rounded .clear-value:hover{background-color:var(--gray-medium)}\n"] }]
         }], propDecorators: { minValue: [{
                 type: Input
             }], maxValue: [{
@@ -2505,11 +2508,11 @@ class TextFieldComponent {
         this.onDocumentTypeChange.emit(this.selectedDocumentType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: TextFieldComponent, selector: "vector-text-field", inputs: { isRequired: "isRequired", label: "label", maxlength: "maxlength", isPassword: "isPassword", numeric: "numeric", numericPositive: "numericPositive", decimal: "decimal", onlyText: "onlyText", alphaNumeric: "alphaNumeric", alphaNumericAndWhitespace: "alphaNumericAndWhitespace", mask: "mask", autoClear: "autoClear", readonly: "readonly", rightIcon: "rightIcon", centered: "centered", enableDocumentTypeChoice: "enableDocumentTypeChoice", hiddenErrorMessage: "hiddenErrorMessage", leftLabel: "leftLabel", control: "control", inputId: "inputId", slotChar: "slotChar" }, outputs: { blurEvent: "blurEvent", enterKeyPress: "enterKeyPress", backSpaceKeyPress: "backSpaceKeyPress", focusEvent: "focusEvent", onDocumentTypeChange: "onDocumentTypeChange" }, ngImport: i0, template: "<form class=\"input-container p-input-icon-right\">\r\n  <i *ngIf=\"rightIcon\" [class]=\"rightIcon\"></i>\r\n  <i *ngIf=\"isPassword\" class=\"show-password-icon {{ showPasswordIcon }}\" (click)=\"toggleShowPassword()\"></i>\r\n  <div class=\"p-inputgroup\">\r\n    <vector-button\r\n      *ngIf=\"enableDocumentTypeChoice\"\r\n      leftIcon=\"fas fa-exchange-alt\"\r\n      type=\"success\"\r\n      [label]=\"selectedDocumentType.name\"\r\n      [disabled]=\"control.disabled\"\r\n      [noShadow]=\"true\"\r\n      (onClick)=\"handleDocumentTypeChange()\"\r\n    ></vector-button>\r\n\r\n    <span *ngIf=\"leftLabel\" class=\"left-label\">\r\n      {{ leftLabel }}\r\n    </span>\r\n\r\n    <input\r\n      *ngIf=\"!mask\"\r\n      [id]=\"inputId\"\r\n      pInputText\r\n      type=\"text\"\r\n      [formControl]=\"control\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [placeholder]=\"placeholder\"\r\n      [pValidateOnly]=\"validateOnly\"\r\n      [pKeyFilter]=\"keyfilter\"\r\n      [ngClass]=\"{ 'password-field': isPassword && !isPasswordVisible, 'text-centered': centered }\"\r\n      (blur)=\"onBlur()\"\r\n      (keydown.enter)=\"onEnterPress()\"\r\n      (keydown.backspace)=\"onBackSpacePress()\"\r\n      (click)=\"onFocus($event)\"\r\n      [readonly]=\"readonly ? true : null\"\r\n    />\r\n    <p-inputMask\r\n      *ngIf=\"mask\"\r\n      type=\"text\"\r\n      [inputId]=\"inputId || 'mask-field'\"\r\n      [formControl]=\"control\"\r\n      [mask]=\"mask\"\r\n      [placeholder]=\"placeholder\"\r\n      (onBlur)=\"onBlur()\"\r\n      (keydown.enter)=\"onEnterPress()\"\r\n      (keydown.backspace)=\"onBackSpacePress()\"\r\n      [autoClear]=\"autoClear\"\r\n      [unmask]=\"true\"\r\n      [styleClass]=\"centered ? 'text-centered' : ''\"\r\n      [slotChar]=\"slotChar\"\r\n      (click)=\"onFocus($event)\"\r\n    ></p-inputMask>\r\n  </div>\r\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\r\n</form>\r\n", styles: [".input-container{width:100%;display:block!important}.input-container .password-field{-webkit-text-security:disc}.input-container .input-error{font-size:.7em;color:var(--error-color);position:absolute;width:max-content}.input-container .show-password-icon{font-size:1.4em;margin-right:5px;cursor:pointer}.input-container .text-centered{text-align:center}.input-container .left-label{min-height:100%;display:flex;align-items:center;justify-content:center;padding:0 10px;white-space:nowrap;font-size:13px;background-color:var(--gray-light);color:var(--theme-primary)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]" }, { kind: "component", type: i5.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaLabelledBy", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { kind: "component", type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: TextFieldComponent, selector: "vector-text-field", inputs: { isRequired: "isRequired", label: "label", maxlength: "maxlength", isPassword: "isPassword", numeric: "numeric", numericPositive: "numericPositive", decimal: "decimal", onlyText: "onlyText", alphaNumeric: "alphaNumeric", alphaNumericAndWhitespace: "alphaNumericAndWhitespace", mask: "mask", autoClear: "autoClear", readonly: "readonly", rightIcon: "rightIcon", centered: "centered", enableDocumentTypeChoice: "enableDocumentTypeChoice", hiddenErrorMessage: "hiddenErrorMessage", leftLabel: "leftLabel", control: "control", inputId: "inputId", slotChar: "slotChar" }, outputs: { blurEvent: "blurEvent", enterKeyPress: "enterKeyPress", backSpaceKeyPress: "backSpaceKeyPress", focusEvent: "focusEvent", onDocumentTypeChange: "onDocumentTypeChange" }, ngImport: i0, template: "<form class=\"input-container p-input-icon-right\">\n  <i *ngIf=\"rightIcon\" [class]=\"rightIcon\"></i>\n  <i *ngIf=\"isPassword\" class=\"show-password-icon {{ showPasswordIcon }}\" (click)=\"toggleShowPassword()\"></i>\n  <div class=\"p-inputgroup\">\n    <vector-button\n      *ngIf=\"enableDocumentTypeChoice\"\n      leftIcon=\"fas fa-exchange-alt\"\n      type=\"success\"\n      [label]=\"selectedDocumentType.name\"\n      [disabled]=\"control.disabled\"\n      [noShadow]=\"true\"\n      (onClick)=\"handleDocumentTypeChange()\"\n    ></vector-button>\n\n    <span *ngIf=\"leftLabel\" class=\"left-label\">\n      {{ leftLabel }}\n    </span>\n\n    <input\n      *ngIf=\"!mask\"\n      [id]=\"inputId\"\n      pInputText\n      type=\"text\"\n      [formControl]=\"control\"\n      [attr.maxlength]=\"maxlength\"\n      [placeholder]=\"placeholder\"\n      [pValidateOnly]=\"validateOnly\"\n      [pKeyFilter]=\"keyfilter\"\n      [ngClass]=\"{ 'password-field': isPassword && !isPasswordVisible, 'text-centered': centered }\"\n      (blur)=\"onBlur()\"\n      (keydown.enter)=\"onEnterPress()\"\n      (keydown.backspace)=\"onBackSpacePress()\"\n      (click)=\"onFocus($event)\"\n      [readonly]=\"readonly ? true : null\"\n    />\n    <p-inputMask\n      *ngIf=\"mask\"\n      type=\"text\"\n      [inputId]=\"inputId || 'mask-field'\"\n      [formControl]=\"control\"\n      [mask]=\"mask\"\n      [placeholder]=\"placeholder\"\n      (onBlur)=\"onBlur()\"\n      (keydown.enter)=\"onEnterPress()\"\n      (keydown.backspace)=\"onBackSpacePress()\"\n      [autoClear]=\"autoClear\"\n      [unmask]=\"true\"\n      [styleClass]=\"centered ? 'text-centered' : ''\"\n      [slotChar]=\"slotChar\"\n      (click)=\"onFocus($event)\"\n    ></p-inputMask>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n</form>\n", styles: [".input-container{width:100%;display:block!important}.input-container .password-field{-webkit-text-security:disc}.input-container .input-error{font-size:.7em;color:var(--error-color);position:absolute;width:max-content}.input-container .show-password-icon{font-size:1.4em;margin-right:5px;cursor:pointer}.input-container .text-centered{text-align:center}.input-container .left-label{min-height:100%;display:flex;align-items:center;justify-content:center;padding:0 10px;white-space:nowrap;font-size:13px;background-color:var(--gray-light);color:var(--theme-primary)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]" }, { kind: "component", type: i5.InputMask, selector: "p-inputMask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabel", "ariaLabelledBy", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autoFocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { kind: "component", type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-text-field', template: "<form class=\"input-container p-input-icon-right\">\r\n  <i *ngIf=\"rightIcon\" [class]=\"rightIcon\"></i>\r\n  <i *ngIf=\"isPassword\" class=\"show-password-icon {{ showPasswordIcon }}\" (click)=\"toggleShowPassword()\"></i>\r\n  <div class=\"p-inputgroup\">\r\n    <vector-button\r\n      *ngIf=\"enableDocumentTypeChoice\"\r\n      leftIcon=\"fas fa-exchange-alt\"\r\n      type=\"success\"\r\n      [label]=\"selectedDocumentType.name\"\r\n      [disabled]=\"control.disabled\"\r\n      [noShadow]=\"true\"\r\n      (onClick)=\"handleDocumentTypeChange()\"\r\n    ></vector-button>\r\n\r\n    <span *ngIf=\"leftLabel\" class=\"left-label\">\r\n      {{ leftLabel }}\r\n    </span>\r\n\r\n    <input\r\n      *ngIf=\"!mask\"\r\n      [id]=\"inputId\"\r\n      pInputText\r\n      type=\"text\"\r\n      [formControl]=\"control\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [placeholder]=\"placeholder\"\r\n      [pValidateOnly]=\"validateOnly\"\r\n      [pKeyFilter]=\"keyfilter\"\r\n      [ngClass]=\"{ 'password-field': isPassword && !isPasswordVisible, 'text-centered': centered }\"\r\n      (blur)=\"onBlur()\"\r\n      (keydown.enter)=\"onEnterPress()\"\r\n      (keydown.backspace)=\"onBackSpacePress()\"\r\n      (click)=\"onFocus($event)\"\r\n      [readonly]=\"readonly ? true : null\"\r\n    />\r\n    <p-inputMask\r\n      *ngIf=\"mask\"\r\n      type=\"text\"\r\n      [inputId]=\"inputId || 'mask-field'\"\r\n      [formControl]=\"control\"\r\n      [mask]=\"mask\"\r\n      [placeholder]=\"placeholder\"\r\n      (onBlur)=\"onBlur()\"\r\n      (keydown.enter)=\"onEnterPress()\"\r\n      (keydown.backspace)=\"onBackSpacePress()\"\r\n      [autoClear]=\"autoClear\"\r\n      [unmask]=\"true\"\r\n      [styleClass]=\"centered ? 'text-centered' : ''\"\r\n      [slotChar]=\"slotChar\"\r\n      (click)=\"onFocus($event)\"\r\n    ></p-inputMask>\r\n  </div>\r\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\r\n</form>\r\n", styles: [".input-container{width:100%;display:block!important}.input-container .password-field{-webkit-text-security:disc}.input-container .input-error{font-size:.7em;color:var(--error-color);position:absolute;width:max-content}.input-container .show-password-icon{font-size:1.4em;margin-right:5px;cursor:pointer}.input-container .text-centered{text-align:center}.input-container .left-label{min-height:100%;display:flex;align-items:center;justify-content:center;padding:0 10px;white-space:nowrap;font-size:13px;background-color:var(--gray-light);color:var(--theme-primary)}\n"] }]
+            args: [{ selector: 'vector-text-field', template: "<form class=\"input-container p-input-icon-right\">\n  <i *ngIf=\"rightIcon\" [class]=\"rightIcon\"></i>\n  <i *ngIf=\"isPassword\" class=\"show-password-icon {{ showPasswordIcon }}\" (click)=\"toggleShowPassword()\"></i>\n  <div class=\"p-inputgroup\">\n    <vector-button\n      *ngIf=\"enableDocumentTypeChoice\"\n      leftIcon=\"fas fa-exchange-alt\"\n      type=\"success\"\n      [label]=\"selectedDocumentType.name\"\n      [disabled]=\"control.disabled\"\n      [noShadow]=\"true\"\n      (onClick)=\"handleDocumentTypeChange()\"\n    ></vector-button>\n\n    <span *ngIf=\"leftLabel\" class=\"left-label\">\n      {{ leftLabel }}\n    </span>\n\n    <input\n      *ngIf=\"!mask\"\n      [id]=\"inputId\"\n      pInputText\n      type=\"text\"\n      [formControl]=\"control\"\n      [attr.maxlength]=\"maxlength\"\n      [placeholder]=\"placeholder\"\n      [pValidateOnly]=\"validateOnly\"\n      [pKeyFilter]=\"keyfilter\"\n      [ngClass]=\"{ 'password-field': isPassword && !isPasswordVisible, 'text-centered': centered }\"\n      (blur)=\"onBlur()\"\n      (keydown.enter)=\"onEnterPress()\"\n      (keydown.backspace)=\"onBackSpacePress()\"\n      (click)=\"onFocus($event)\"\n      [readonly]=\"readonly ? true : null\"\n    />\n    <p-inputMask\n      *ngIf=\"mask\"\n      type=\"text\"\n      [inputId]=\"inputId || 'mask-field'\"\n      [formControl]=\"control\"\n      [mask]=\"mask\"\n      [placeholder]=\"placeholder\"\n      (onBlur)=\"onBlur()\"\n      (keydown.enter)=\"onEnterPress()\"\n      (keydown.backspace)=\"onBackSpacePress()\"\n      [autoClear]=\"autoClear\"\n      [unmask]=\"true\"\n      [styleClass]=\"centered ? 'text-centered' : ''\"\n      [slotChar]=\"slotChar\"\n      (click)=\"onFocus($event)\"\n    ></p-inputMask>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n</form>\n", styles: [".input-container{width:100%;display:block!important}.input-container .password-field{-webkit-text-security:disc}.input-container .input-error{font-size:.7em;color:var(--error-color);position:absolute;width:max-content}.input-container .show-password-icon{font-size:1.4em;margin-right:5px;cursor:pointer}.input-container .text-centered{text-align:center}.input-container .left-label{min-height:100%;display:flex;align-items:center;justify-content:center;padding:0 10px;white-space:nowrap;font-size:13px;background-color:var(--gray-light);color:var(--theme-primary)}\n"] }]
         }], propDecorators: { isRequired: [{
                 type: Input
             }], label: [{
@@ -2676,11 +2679,11 @@ class MultiselectFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MultiselectFieldComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: MultiselectFieldComponent, selector: "vector-multiselect-field", inputs: { pagedSugestion: "pagedSugestion", isRequired: "isRequired", control: "control", label: "label", options: "options", filter: "filter", showSelectAllOption: "showSelectAllOption", display: "display", paged: "paged", disabled: "disabled", minLengthToService: "minLengthToService", initialLoad: "initialLoad", service: "service", filterVirtualScrool: "filterVirtualScrool" }, outputs: { onChange: "onChange", onClosePanel: "onClosePanel" }, ngImport: i0, template: "<div class=\"multiselect-field-input-container\">\r\n  <p-multiSelect\r\n    *ngIf=\"!filterVirtualScrool\"\r\n    #multiselect\r\n    appendTo=\"body\"\r\n    optionLabel=\"name\"\r\n    optionValue=\"code\"\r\n    dropdownIcon=\"fas fa-sort-down\"\r\n    selectedItemsLabel=\"Selecionar todos\"\r\n    [panelStyleClass]=\"filter ? 'has-filter' : ''\"\r\n    [options]=\"options\"\r\n    [formControl]=\"control\"\r\n    [placeholder]=\"placeholder\"\r\n    [filter]=\"filter\"\r\n    [maxSelectedLabels]=\"options.length - 1\"\r\n    [showHeader]=\"true\"\r\n    [showToggleAll]=\"showSelectAllOption\"\r\n    [dropdownIcon]=\"'pi pi-chevron-down'\"\r\n    [display]=\"display\"\r\n    (onChange)=\"onChange.emit($event)\"\r\n    (onPanelHide)=\"onClosePanel.emit($event)\"\r\n    [disabled]=\"disabled\"\r\n  >\r\n  </p-multiSelect>\r\n  <p-multiSelect\r\n    *ngIf=\"filterVirtualScrool\"\r\n    #multiselect\r\n    appendTo=\"body\"\r\n    optionLabel=\"name\"\r\n    optionValue=\"code\"\r\n    dropdownIcon=\"fas fa-sort-down\"\r\n    selectedItemsLabel=\"Selecionar todos\"\r\n    [panelStyleClass]=\"filter ? 'has-filter' : ''\"\r\n    [options]=\"options\"\r\n    [formControl]=\"control\"\r\n    [placeholder]=\"placeholder\"\r\n    [filter]=\"filter\"\r\n    [maxSelectedLabels]=\"options.length - 1\"\r\n    [showHeader]=\"true\"\r\n    [showToggleAll]=\"showSelectAllOption\"\r\n    [dropdownIcon]=\"'pi pi-chevron-down'\"\r\n    [display]=\"display\"\r\n    (onChange)=\"onChange.emit($event)\"\r\n    (onFilter)=\"search($event)\"\r\n    (onPanelShow)=\"onOpenAutocompletePanel()\"\r\n    (onPanelHide)=\"onHideAutocompletePanel()\"\r\n    [disabled]=\"disabled\"\r\n  >\r\n  </p-multiSelect>\r\n  <p-multiSelect\r\n    *ngIf=\"filterVirtualScrool\"\r\n    #multiselect\r\n    appendTo=\"body\"\r\n    optionLabel=\"name\"\r\n    optionValue=\"code\"\r\n    dropdownIcon=\"fas fa-sort-down\"\r\n    selectedItemsLabel=\"Selecionar todos\"\r\n    [panelStyleClass]=\"filter ? 'has-filter' : ''\"\r\n    [options]=\"options\"\r\n    [formControl]=\"control\"\r\n    [placeholder]=\"placeholder\"\r\n    [filter]=\"filter\"\r\n    [maxSelectedLabels]=\"options.length - 1\"\r\n    [showHeader]=\"true\"\r\n    [showToggleAll]=\"showSelectAllOption\"\r\n    [dropdownIcon]=\"'pi pi-chevron-down'\"\r\n    [display]=\"display\"\r\n    (onChange)=\"onChange.emit($event)\"\r\n    (onFilter)=\"search($event)\"\r\n    (onPanelShow)=\"onOpenAutocompletePanel()\"\r\n    (onPanelHide)=\"onHideAutocompletePanel()\"\r\n    [disabled]=\"disabled\"\r\n  >\r\n  </p-multiSelect>\r\n  <span class=\"input-error\">{{ fieldErrorLabel() }}</span>\r\n</div>\r\n", styles: [".multiselect-field-input-container{height:62px}.multiselect-field-input-container .input-error{font-size:.7em;color:var(--error-color)}.multiselect-field-input-container div.p-multiselect-token{padding:auto 1em!important;background:#eff0f6!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: MultiselectFieldComponent, selector: "vector-multiselect-field", inputs: { pagedSugestion: "pagedSugestion", isRequired: "isRequired", control: "control", label: "label", options: "options", filter: "filter", showSelectAllOption: "showSelectAllOption", display: "display", paged: "paged", disabled: "disabled", minLengthToService: "minLengthToService", initialLoad: "initialLoad", service: "service", filterVirtualScrool: "filterVirtualScrool" }, outputs: { onChange: "onChange", onClosePanel: "onClosePanel" }, ngImport: i0, template: "<div class=\"multiselect-field-input-container\">\n  <p-multiSelect\n    *ngIf=\"!filterVirtualScrool\"\n    #multiselect\n    appendTo=\"body\"\n    optionLabel=\"name\"\n    optionValue=\"code\"\n    dropdownIcon=\"fas fa-sort-down\"\n    selectedItemsLabel=\"Selecionar todos\"\n    [panelStyleClass]=\"filter ? 'has-filter' : ''\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [filter]=\"filter\"\n    [maxSelectedLabels]=\"options.length - 1\"\n    [showHeader]=\"true\"\n    [showToggleAll]=\"showSelectAllOption\"\n    [dropdownIcon]=\"'pi pi-chevron-down'\"\n    [display]=\"display\"\n    (onChange)=\"onChange.emit($event)\"\n    (onPanelHide)=\"onClosePanel.emit($event)\"\n    [disabled]=\"disabled\"\n  >\n  </p-multiSelect>\n  <p-multiSelect\n    *ngIf=\"filterVirtualScrool\"\n    #multiselect\n    appendTo=\"body\"\n    optionLabel=\"name\"\n    optionValue=\"code\"\n    dropdownIcon=\"fas fa-sort-down\"\n    selectedItemsLabel=\"Selecionar todos\"\n    [panelStyleClass]=\"filter ? 'has-filter' : ''\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [filter]=\"filter\"\n    [maxSelectedLabels]=\"options.length - 1\"\n    [showHeader]=\"true\"\n    [showToggleAll]=\"showSelectAllOption\"\n    [dropdownIcon]=\"'pi pi-chevron-down'\"\n    [display]=\"display\"\n    (onChange)=\"onChange.emit($event)\"\n    (onFilter)=\"search($event)\"\n    (onPanelShow)=\"onOpenAutocompletePanel()\"\n    (onPanelHide)=\"onHideAutocompletePanel()\"\n    [disabled]=\"disabled\"\n  >\n  </p-multiSelect>\n  <p-multiSelect\n    *ngIf=\"filterVirtualScrool\"\n    #multiselect\n    appendTo=\"body\"\n    optionLabel=\"name\"\n    optionValue=\"code\"\n    dropdownIcon=\"fas fa-sort-down\"\n    selectedItemsLabel=\"Selecionar todos\"\n    [panelStyleClass]=\"filter ? 'has-filter' : ''\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [filter]=\"filter\"\n    [maxSelectedLabels]=\"options.length - 1\"\n    [showHeader]=\"true\"\n    [showToggleAll]=\"showSelectAllOption\"\n    [dropdownIcon]=\"'pi pi-chevron-down'\"\n    [display]=\"display\"\n    (onChange)=\"onChange.emit($event)\"\n    (onFilter)=\"search($event)\"\n    (onPanelShow)=\"onOpenAutocompletePanel()\"\n    (onPanelHide)=\"onHideAutocompletePanel()\"\n    [disabled]=\"disabled\"\n  >\n  </p-multiSelect>\n  <span class=\"input-error\">{{ fieldErrorLabel() }}</span>\n</div>\n", styles: [".multiselect-field-input-container{height:62px}.multiselect-field-input-container .input-error{font-size:.7em;color:var(--error-color)}.multiselect-field-input-container div.p-multiselect-token{padding:auto 1em!important;background:#eff0f6!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MultiselectFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-multiselect-field', template: "<div class=\"multiselect-field-input-container\">\r\n  <p-multiSelect\r\n    *ngIf=\"!filterVirtualScrool\"\r\n    #multiselect\r\n    appendTo=\"body\"\r\n    optionLabel=\"name\"\r\n    optionValue=\"code\"\r\n    dropdownIcon=\"fas fa-sort-down\"\r\n    selectedItemsLabel=\"Selecionar todos\"\r\n    [panelStyleClass]=\"filter ? 'has-filter' : ''\"\r\n    [options]=\"options\"\r\n    [formControl]=\"control\"\r\n    [placeholder]=\"placeholder\"\r\n    [filter]=\"filter\"\r\n    [maxSelectedLabels]=\"options.length - 1\"\r\n    [showHeader]=\"true\"\r\n    [showToggleAll]=\"showSelectAllOption\"\r\n    [dropdownIcon]=\"'pi pi-chevron-down'\"\r\n    [display]=\"display\"\r\n    (onChange)=\"onChange.emit($event)\"\r\n    (onPanelHide)=\"onClosePanel.emit($event)\"\r\n    [disabled]=\"disabled\"\r\n  >\r\n  </p-multiSelect>\r\n  <p-multiSelect\r\n    *ngIf=\"filterVirtualScrool\"\r\n    #multiselect\r\n    appendTo=\"body\"\r\n    optionLabel=\"name\"\r\n    optionValue=\"code\"\r\n    dropdownIcon=\"fas fa-sort-down\"\r\n    selectedItemsLabel=\"Selecionar todos\"\r\n    [panelStyleClass]=\"filter ? 'has-filter' : ''\"\r\n    [options]=\"options\"\r\n    [formControl]=\"control\"\r\n    [placeholder]=\"placeholder\"\r\n    [filter]=\"filter\"\r\n    [maxSelectedLabels]=\"options.length - 1\"\r\n    [showHeader]=\"true\"\r\n    [showToggleAll]=\"showSelectAllOption\"\r\n    [dropdownIcon]=\"'pi pi-chevron-down'\"\r\n    [display]=\"display\"\r\n    (onChange)=\"onChange.emit($event)\"\r\n    (onFilter)=\"search($event)\"\r\n    (onPanelShow)=\"onOpenAutocompletePanel()\"\r\n    (onPanelHide)=\"onHideAutocompletePanel()\"\r\n    [disabled]=\"disabled\"\r\n  >\r\n  </p-multiSelect>\r\n  <p-multiSelect\r\n    *ngIf=\"filterVirtualScrool\"\r\n    #multiselect\r\n    appendTo=\"body\"\r\n    optionLabel=\"name\"\r\n    optionValue=\"code\"\r\n    dropdownIcon=\"fas fa-sort-down\"\r\n    selectedItemsLabel=\"Selecionar todos\"\r\n    [panelStyleClass]=\"filter ? 'has-filter' : ''\"\r\n    [options]=\"options\"\r\n    [formControl]=\"control\"\r\n    [placeholder]=\"placeholder\"\r\n    [filter]=\"filter\"\r\n    [maxSelectedLabels]=\"options.length - 1\"\r\n    [showHeader]=\"true\"\r\n    [showToggleAll]=\"showSelectAllOption\"\r\n    [dropdownIcon]=\"'pi pi-chevron-down'\"\r\n    [display]=\"display\"\r\n    (onChange)=\"onChange.emit($event)\"\r\n    (onFilter)=\"search($event)\"\r\n    (onPanelShow)=\"onOpenAutocompletePanel()\"\r\n    (onPanelHide)=\"onHideAutocompletePanel()\"\r\n    [disabled]=\"disabled\"\r\n  >\r\n  </p-multiSelect>\r\n  <span class=\"input-error\">{{ fieldErrorLabel() }}</span>\r\n</div>\r\n", styles: [".multiselect-field-input-container{height:62px}.multiselect-field-input-container .input-error{font-size:.7em;color:var(--error-color)}.multiselect-field-input-container div.p-multiselect-token{padding:auto 1em!important;background:#eff0f6!important}\n"] }]
+            args: [{ selector: 'vector-multiselect-field', template: "<div class=\"multiselect-field-input-container\">\n  <p-multiSelect\n    *ngIf=\"!filterVirtualScrool\"\n    #multiselect\n    appendTo=\"body\"\n    optionLabel=\"name\"\n    optionValue=\"code\"\n    dropdownIcon=\"fas fa-sort-down\"\n    selectedItemsLabel=\"Selecionar todos\"\n    [panelStyleClass]=\"filter ? 'has-filter' : ''\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [filter]=\"filter\"\n    [maxSelectedLabels]=\"options.length - 1\"\n    [showHeader]=\"true\"\n    [showToggleAll]=\"showSelectAllOption\"\n    [dropdownIcon]=\"'pi pi-chevron-down'\"\n    [display]=\"display\"\n    (onChange)=\"onChange.emit($event)\"\n    (onPanelHide)=\"onClosePanel.emit($event)\"\n    [disabled]=\"disabled\"\n  >\n  </p-multiSelect>\n  <p-multiSelect\n    *ngIf=\"filterVirtualScrool\"\n    #multiselect\n    appendTo=\"body\"\n    optionLabel=\"name\"\n    optionValue=\"code\"\n    dropdownIcon=\"fas fa-sort-down\"\n    selectedItemsLabel=\"Selecionar todos\"\n    [panelStyleClass]=\"filter ? 'has-filter' : ''\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [filter]=\"filter\"\n    [maxSelectedLabels]=\"options.length - 1\"\n    [showHeader]=\"true\"\n    [showToggleAll]=\"showSelectAllOption\"\n    [dropdownIcon]=\"'pi pi-chevron-down'\"\n    [display]=\"display\"\n    (onChange)=\"onChange.emit($event)\"\n    (onFilter)=\"search($event)\"\n    (onPanelShow)=\"onOpenAutocompletePanel()\"\n    (onPanelHide)=\"onHideAutocompletePanel()\"\n    [disabled]=\"disabled\"\n  >\n  </p-multiSelect>\n  <p-multiSelect\n    *ngIf=\"filterVirtualScrool\"\n    #multiselect\n    appendTo=\"body\"\n    optionLabel=\"name\"\n    optionValue=\"code\"\n    dropdownIcon=\"fas fa-sort-down\"\n    selectedItemsLabel=\"Selecionar todos\"\n    [panelStyleClass]=\"filter ? 'has-filter' : ''\"\n    [options]=\"options\"\n    [formControl]=\"control\"\n    [placeholder]=\"placeholder\"\n    [filter]=\"filter\"\n    [maxSelectedLabels]=\"options.length - 1\"\n    [showHeader]=\"true\"\n    [showToggleAll]=\"showSelectAllOption\"\n    [dropdownIcon]=\"'pi pi-chevron-down'\"\n    [display]=\"display\"\n    (onChange)=\"onChange.emit($event)\"\n    (onFilter)=\"search($event)\"\n    (onPanelShow)=\"onOpenAutocompletePanel()\"\n    (onPanelHide)=\"onHideAutocompletePanel()\"\n    [disabled]=\"disabled\"\n  >\n  </p-multiSelect>\n  <span class=\"input-error\">{{ fieldErrorLabel() }}</span>\n</div>\n", styles: [".multiselect-field-input-container{height:62px}.multiselect-field-input-container .input-error{font-size:.7em;color:var(--error-color)}.multiselect-field-input-container div.p-multiselect-token{padding:auto 1em!important;background:#eff0f6!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { pagedSugestion: [{
                 type: Input
             }], isRequired: [{
@@ -2750,6 +2753,7 @@ class DropdownFieldComponent {
         this.minLengthToService = 0;
         this.initialLoad = true;
         this.disabled = false;
+        this.limitScrollPage = 20;
         this.onFocus = new EventEmitter();
         this.onChange = new EventEmitter();
         this.pagedSuggestions = [];
@@ -2820,7 +2824,7 @@ class DropdownFieldComponent {
         if (this.service) {
             this.currentScrollPage++;
             this.service
-                .getPaged(encodeURIComponent(this.currentSearchQuery), this.currentScrollPage, 20, this.dependencies)
+                .getPaged(encodeURIComponent(this.currentSearchQuery), this.currentScrollPage, this.limitScrollPage, this.dependencies)
                 .subscribe({
                 next: (response) => {
                     this.pagedSuggestions = this.currentScrollPage === 0 ? response : this.pagedSuggestions?.concat(response);
@@ -2835,9 +2839,9 @@ class DropdownFieldComponent {
         }
         else {
             const filteredOptions = this.filterListByQuery(this.options, this.currentSearchQuery.toUpperCase());
-            this.pagedSuggestions = filteredOptions.slice(0, this.currentScrollIndex + 20);
-            if (this.options?.length && this.options.length > 20) {
-                this.currentScrollIndex = this.currentScrollIndex + 20;
+            this.pagedSuggestions = filteredOptions.slice(0, this.currentScrollIndex + this.limitScrollPage);
+            if (this.options?.length && this.options.length > this.limitScrollPage) {
+                this.currentScrollIndex = this.currentScrollIndex + this.limitScrollPage;
             }
             this.setControlValueFromSuggestions();
             this.handleSearchErrors();
@@ -2878,11 +2882,11 @@ class DropdownFieldComponent {
         return list.filter((opt) => String(opt.code).toUpperCase().includes(query) || opt.name.toUpperCase().includes(query));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DropdownFieldComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: DropdownFieldComponent, selector: "vector-dropdown-field", inputs: { options: "options", isNgContent: "isNgContent", isRequired: "isRequired", control: "control", label: "label", service: "service", paged: "paged", buttonAction: "buttonAction", dependencies: "dependencies", hiddenErrorMessage: "hiddenErrorMessage", dynamicFilters: "dynamicFilters", minLengthToService: "minLengthToService", initialLoad: "initialLoad", disabled: "disabled" }, outputs: { onFocus: "onFocus", onChange: "onChange" }, ngImport: i0, template: "<div class=\"relative\">\r\n  <div class=\"input-container\">\r\n    <div class=\"input-inner-container\" *ngIf=\"!isNgContent\">\r\n      <p-dropdown\r\n        *ngIf=\"dynamicFilters\"\r\n        appendTo=\"body\"\r\n        optionLabel=\"name\"\r\n        optionValue=\"code\"\r\n        [(ngModel)]=\"selectedDynamicFilter\"\r\n        [options]=\"dynamicFilters\"\r\n        [disabled]=\"disabled\"\r\n      >\r\n      </p-dropdown>\r\n      <p-autoComplete\r\n        appendTo=\"body\"\r\n        field=\"name\"\r\n        [forceSelection]=\"true\"\r\n        [dropdown]=\"true\"\r\n        [formControl]=\"control\"\r\n        [placeholder]=\"placeholder\"\r\n        [suggestions]=\"pagedSuggestions\"\r\n        [dropdownIcon]=\"dynamicFilters ? 'pi pi-search' : 'pi pi-chevron-down'\"\r\n        (completeMethod)=\"search($event)\"\r\n        (onShow)=\"onOpenAutocompletePanel()\"\r\n        (onHide)=\"onHideAutocompletePanel()\"\r\n        (onFocus)=\"onFocus.emit($event)\"\r\n        (onChange)=\"onChange.emit($event)\"\r\n        [disabled]=\"disabled\"\r\n      >\r\n      </p-autoComplete>\r\n    </div>\r\n\r\n    <div class=\"input-inner-container\" *ngIf=\"isNgContent\">\r\n      <p-autoComplete\r\n        appendTo=\"body\"\r\n        field=\"name\"\r\n        [forceSelection]=\"true\"\r\n        [dropdown]=\"true\"\r\n        [formControl]=\"control\"\r\n        [placeholder]=\"placeholder\"\r\n        [suggestions]=\"pagedSuggestions\"\r\n        [dropdownIcon]=\"dynamicFilters ? 'pi pi-search' : 'pi pi-chevron-down'\"\r\n        (completeMethod)=\"search($event)\"\r\n        (onShow)=\"onOpenAutocompletePanel()\"\r\n        (onHide)=\"onHideAutocompletePanel()\"\r\n        (onFocus)=\"onFocus.emit($event)\"\r\n        (onChange)=\"onChange.emit($event)\"\r\n        [disabled]=\"disabled\"\r\n      >\r\n        <ng-template let-option pTemplate=\"item\">\r\n          <div class=\"option-content\">\r\n            <span class=\"option-label\">{{ option.name }}</span>\r\n            <br />\r\n            <span class=\"option-sublabel\">{{ option.code }}</span>\r\n          </div>\r\n        </ng-template>\r\n      </p-autoComplete>\r\n    </div>\r\n\r\n    <vector-button\r\n      *ngIf=\"buttonAction\"\r\n      [label]=\"buttonAction.label\"\r\n      [disabled]=\"disabled\"\r\n      (onClick)=\"buttonAction.onClick(control.value)\"\r\n    ></vector-button>\r\n  </div>\r\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\r\n</div>\r\n", styles: [".input-container{display:flex;align-items:flex-end;width:100%}@media (max-width: 575px){.input-container{align-items:flex-start;flex-direction:column}}.input-container p-autoComplete{flex:1}@media (max-width: 575px){.input-container p-autoComplete{width:100%}}.input-container vector-button{margin-left:15px}@media (max-width: 575px){.input-container vector-button{margin-left:0;margin-top:10px;width:100%}}.input-container p-dropdown{margin-right:-5px;width:150px}@media (max-width: 575px){.input-container p-dropdown{width:100px}}.input-container .input-inner-container{display:flex;width:100%}.p-dropdown-panel,.p-autocomplete-panel,.p-multiselect-panel{max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { kind: "component", type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: DropdownFieldComponent, selector: "vector-dropdown-field", inputs: { options: "options", isNgContent: "isNgContent", isRequired: "isRequired", control: "control", label: "label", service: "service", paged: "paged", buttonAction: "buttonAction", dependencies: "dependencies", hiddenErrorMessage: "hiddenErrorMessage", dynamicFilters: "dynamicFilters", minLengthToService: "minLengthToService", initialLoad: "initialLoad", disabled: "disabled", limitScrollPage: "limitScrollPage" }, outputs: { onFocus: "onFocus", onChange: "onChange" }, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"input-container\">\n    <div class=\"input-inner-container\" *ngIf=\"!isNgContent\">\n      <p-dropdown\n        *ngIf=\"dynamicFilters\"\n        appendTo=\"body\"\n        optionLabel=\"name\"\n        optionValue=\"code\"\n        [(ngModel)]=\"selectedDynamicFilter\"\n        [options]=\"dynamicFilters\"\n        [disabled]=\"disabled\"\n      >\n      </p-dropdown>\n      <p-autoComplete\n        appendTo=\"body\"\n        field=\"name\"\n        [forceSelection]=\"true\"\n        [dropdown]=\"true\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [suggestions]=\"pagedSuggestions\"\n        [dropdownIcon]=\"dynamicFilters ? 'pi pi-search' : 'pi pi-chevron-down'\"\n        (completeMethod)=\"search($event)\"\n        (onShow)=\"onOpenAutocompletePanel()\"\n        (onHide)=\"onHideAutocompletePanel()\"\n        (onFocus)=\"onFocus.emit($event)\"\n        (onChange)=\"onChange.emit($event)\"\n        [disabled]=\"disabled\"\n      >\n      </p-autoComplete>\n    </div>\n\n    <div class=\"input-inner-container\" *ngIf=\"isNgContent\">\n      <p-autoComplete\n        appendTo=\"body\"\n        field=\"name\"\n        [forceSelection]=\"true\"\n        [dropdown]=\"true\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [suggestions]=\"pagedSuggestions\"\n        [dropdownIcon]=\"dynamicFilters ? 'pi pi-search' : 'pi pi-chevron-down'\"\n        (completeMethod)=\"search($event)\"\n        (onShow)=\"onOpenAutocompletePanel()\"\n        (onHide)=\"onHideAutocompletePanel()\"\n        (onFocus)=\"onFocus.emit($event)\"\n        (onChange)=\"onChange.emit($event)\"\n        [disabled]=\"disabled\"\n      >\n        <ng-template let-option pTemplate=\"item\">\n          <div class=\"option-content\">\n            <span class=\"option-label\">{{ option.name }}</span>\n            <br />\n            <span class=\"option-sublabel\">{{ option.code }}</span>\n          </div>\n        </ng-template>\n      </p-autoComplete>\n    </div>\n\n    <vector-button\n      *ngIf=\"buttonAction\"\n      [label]=\"buttonAction.label\"\n      [disabled]=\"disabled\"\n      (onClick)=\"buttonAction.onClick(control.value)\"\n    ></vector-button>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n</div>\n", styles: [".input-container{display:flex;align-items:flex-end;width:100%}@media (max-width: 575px){.input-container{align-items:flex-start;flex-direction:column}}.input-container p-autoComplete{flex:1}@media (max-width: 575px){.input-container p-autoComplete{width:100%}}.input-container vector-button{margin-left:15px}@media (max-width: 575px){.input-container vector-button{margin-left:0;margin-top:10px;width:100%}}.input-container p-dropdown{margin-right:-5px;width:150px}@media (max-width: 575px){.input-container p-dropdown{width:100px}}.input-container .input-inner-container{display:flex;width:100%}.p-dropdown-panel,.p-autocomplete-panel,.p-multiselect-panel{max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { kind: "component", type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DropdownFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-dropdown-field', encapsulation: ViewEncapsulation.None, template: "<div class=\"relative\">\r\n  <div class=\"input-container\">\r\n    <div class=\"input-inner-container\" *ngIf=\"!isNgContent\">\r\n      <p-dropdown\r\n        *ngIf=\"dynamicFilters\"\r\n        appendTo=\"body\"\r\n        optionLabel=\"name\"\r\n        optionValue=\"code\"\r\n        [(ngModel)]=\"selectedDynamicFilter\"\r\n        [options]=\"dynamicFilters\"\r\n        [disabled]=\"disabled\"\r\n      >\r\n      </p-dropdown>\r\n      <p-autoComplete\r\n        appendTo=\"body\"\r\n        field=\"name\"\r\n        [forceSelection]=\"true\"\r\n        [dropdown]=\"true\"\r\n        [formControl]=\"control\"\r\n        [placeholder]=\"placeholder\"\r\n        [suggestions]=\"pagedSuggestions\"\r\n        [dropdownIcon]=\"dynamicFilters ? 'pi pi-search' : 'pi pi-chevron-down'\"\r\n        (completeMethod)=\"search($event)\"\r\n        (onShow)=\"onOpenAutocompletePanel()\"\r\n        (onHide)=\"onHideAutocompletePanel()\"\r\n        (onFocus)=\"onFocus.emit($event)\"\r\n        (onChange)=\"onChange.emit($event)\"\r\n        [disabled]=\"disabled\"\r\n      >\r\n      </p-autoComplete>\r\n    </div>\r\n\r\n    <div class=\"input-inner-container\" *ngIf=\"isNgContent\">\r\n      <p-autoComplete\r\n        appendTo=\"body\"\r\n        field=\"name\"\r\n        [forceSelection]=\"true\"\r\n        [dropdown]=\"true\"\r\n        [formControl]=\"control\"\r\n        [placeholder]=\"placeholder\"\r\n        [suggestions]=\"pagedSuggestions\"\r\n        [dropdownIcon]=\"dynamicFilters ? 'pi pi-search' : 'pi pi-chevron-down'\"\r\n        (completeMethod)=\"search($event)\"\r\n        (onShow)=\"onOpenAutocompletePanel()\"\r\n        (onHide)=\"onHideAutocompletePanel()\"\r\n        (onFocus)=\"onFocus.emit($event)\"\r\n        (onChange)=\"onChange.emit($event)\"\r\n        [disabled]=\"disabled\"\r\n      >\r\n        <ng-template let-option pTemplate=\"item\">\r\n          <div class=\"option-content\">\r\n            <span class=\"option-label\">{{ option.name }}</span>\r\n            <br />\r\n            <span class=\"option-sublabel\">{{ option.code }}</span>\r\n          </div>\r\n        </ng-template>\r\n      </p-autoComplete>\r\n    </div>\r\n\r\n    <vector-button\r\n      *ngIf=\"buttonAction\"\r\n      [label]=\"buttonAction.label\"\r\n      [disabled]=\"disabled\"\r\n      (onClick)=\"buttonAction.onClick(control.value)\"\r\n    ></vector-button>\r\n  </div>\r\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\r\n</div>\r\n", styles: [".input-container{display:flex;align-items:flex-end;width:100%}@media (max-width: 575px){.input-container{align-items:flex-start;flex-direction:column}}.input-container p-autoComplete{flex:1}@media (max-width: 575px){.input-container p-autoComplete{width:100%}}.input-container vector-button{margin-left:15px}@media (max-width: 575px){.input-container vector-button{margin-left:0;margin-top:10px;width:100%}}.input-container p-dropdown{margin-right:-5px;width:150px}@media (max-width: 575px){.input-container p-dropdown{width:100px}}.input-container .input-inner-container{display:flex;width:100%}.p-dropdown-panel,.p-autocomplete-panel,.p-multiselect-panel{max-width:100%!important}\n"] }]
+            args: [{ selector: 'vector-dropdown-field', encapsulation: ViewEncapsulation.None, template: "<div class=\"relative\">\n  <div class=\"input-container\">\n    <div class=\"input-inner-container\" *ngIf=\"!isNgContent\">\n      <p-dropdown\n        *ngIf=\"dynamicFilters\"\n        appendTo=\"body\"\n        optionLabel=\"name\"\n        optionValue=\"code\"\n        [(ngModel)]=\"selectedDynamicFilter\"\n        [options]=\"dynamicFilters\"\n        [disabled]=\"disabled\"\n      >\n      </p-dropdown>\n      <p-autoComplete\n        appendTo=\"body\"\n        field=\"name\"\n        [forceSelection]=\"true\"\n        [dropdown]=\"true\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [suggestions]=\"pagedSuggestions\"\n        [dropdownIcon]=\"dynamicFilters ? 'pi pi-search' : 'pi pi-chevron-down'\"\n        (completeMethod)=\"search($event)\"\n        (onShow)=\"onOpenAutocompletePanel()\"\n        (onHide)=\"onHideAutocompletePanel()\"\n        (onFocus)=\"onFocus.emit($event)\"\n        (onChange)=\"onChange.emit($event)\"\n        [disabled]=\"disabled\"\n      >\n      </p-autoComplete>\n    </div>\n\n    <div class=\"input-inner-container\" *ngIf=\"isNgContent\">\n      <p-autoComplete\n        appendTo=\"body\"\n        field=\"name\"\n        [forceSelection]=\"true\"\n        [dropdown]=\"true\"\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [suggestions]=\"pagedSuggestions\"\n        [dropdownIcon]=\"dynamicFilters ? 'pi pi-search' : 'pi pi-chevron-down'\"\n        (completeMethod)=\"search($event)\"\n        (onShow)=\"onOpenAutocompletePanel()\"\n        (onHide)=\"onHideAutocompletePanel()\"\n        (onFocus)=\"onFocus.emit($event)\"\n        (onChange)=\"onChange.emit($event)\"\n        [disabled]=\"disabled\"\n      >\n        <ng-template let-option pTemplate=\"item\">\n          <div class=\"option-content\">\n            <span class=\"option-label\">{{ option.name }}</span>\n            <br />\n            <span class=\"option-sublabel\">{{ option.code }}</span>\n          </div>\n        </ng-template>\n      </p-autoComplete>\n    </div>\n\n    <vector-button\n      *ngIf=\"buttonAction\"\n      [label]=\"buttonAction.label\"\n      [disabled]=\"disabled\"\n      (onClick)=\"buttonAction.onClick(control.value)\"\n    ></vector-button>\n  </div>\n  <vector-field-error-message *ngIf=\"!hiddenErrorMessage\" [control]=\"control\"></vector-field-error-message>\n</div>\n", styles: [".input-container{display:flex;align-items:flex-end;width:100%}@media (max-width: 575px){.input-container{align-items:flex-start;flex-direction:column}}.input-container p-autoComplete{flex:1}@media (max-width: 575px){.input-container p-autoComplete{width:100%}}.input-container vector-button{margin-left:15px}@media (max-width: 575px){.input-container vector-button{margin-left:0;margin-top:10px;width:100%}}.input-container p-dropdown{margin-right:-5px;width:150px}@media (max-width: 575px){.input-container p-dropdown{width:100px}}.input-container .input-inner-container{display:flex;width:100%}.p-dropdown-panel,.p-autocomplete-panel,.p-multiselect-panel{max-width:100%!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { options: [{
                 type: Input
             }], isNgContent: [{
@@ -2911,6 +2915,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], limitScrollPage: [{
+                type: Input
             }], onFocus: [{
                 type: Output
             }], onChange: [{
@@ -2923,11 +2929,11 @@ class SelectButtonFieldComponent {
         this.disabled = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SelectButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SelectButtonFieldComponent, selector: "vector-select-button-field", inputs: { options: "options", control: "control", disabled: "disabled" }, ngImport: i0, template: "<div class=\"input-container p-input-icon-right\">\r\n  <p-selectButton\r\n    [options]=\"options\"\r\n    [formControl]=\"control\"\r\n    optionLabel=\"name\"\r\n    optionValue=\"code\"\r\n    [disabled]=\"disabled\"\r\n  ></p-selectButton>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$3.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], outputs: ["onOptionClick", "onChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SelectButtonFieldComponent, selector: "vector-select-button-field", inputs: { options: "options", control: "control", disabled: "disabled" }, ngImport: i0, template: "<div class=\"input-container p-input-icon-right\">\n  <p-selectButton\n    [options]=\"options\"\n    [formControl]=\"control\"\n    optionLabel=\"name\"\n    optionValue=\"code\"\n    [disabled]=\"disabled\"\n  ></p-selectButton>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$3.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], outputs: ["onOptionClick", "onChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SelectButtonFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-select-button-field', template: "<div class=\"input-container p-input-icon-right\">\r\n  <p-selectButton\r\n    [options]=\"options\"\r\n    [formControl]=\"control\"\r\n    optionLabel=\"name\"\r\n    optionValue=\"code\"\r\n    [disabled]=\"disabled\"\r\n  ></p-selectButton>\r\n</div>\r\n" }]
+            args: [{ selector: 'vector-select-button-field', template: "<div class=\"input-container p-input-icon-right\">\n  <p-selectButton\n    [options]=\"options\"\n    [formControl]=\"control\"\n    optionLabel=\"name\"\n    optionValue=\"code\"\n    [disabled]=\"disabled\"\n  ></p-selectButton>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { options: [{
                 type: Input
             }], control: [{
@@ -3114,11 +3120,11 @@ class FiltersComponent {
         return validators;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FiltersComponent, deps: [{ token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: FiltersComponent, selector: "vector-filters", inputs: { fields: "fields" }, outputs: { onSearch: "onSearch", formBuilded: "formBuilded" }, ngImport: i0, template: "<div class=\"grid filter-container\" [ngClass]=\"{ 'display-none': hideFilters }\" [formGroup]=\"formGroup\">\r\n  <div *ngFor=\"let field of fields | notHidden\" class=\"field col-12 sm:col-8 {{ getGridClass(field) }}\">\r\n    <label\r\n      >{{ field.label }}\r\n      <i\r\n        *ngIf=\"field.tooltip\"\r\n        class=\"fas fa-info-circle mt-1 pl-2 ch\"\r\n        pTooltip=\"{{ field.tooltip }}\"\r\n        tooltipPosition=\"bottom\"\r\n      ></i\r\n    ></label>\r\n    <vector-text-field\r\n      *ngIf=\"isTextFieldType(field)\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [mask]=\"field.mask\"\r\n      [label]=\"field.placeholder\"\r\n      [isRequired]=\"field.required\"\r\n      [numeric]=\"field.type === fieldTypes.NUMBER\"\r\n    ></vector-text-field>\r\n    <vector-dropdown-field\r\n      *ngIf=\"[fieldTypes.DYNAMIC_DROPDOWN, fieldTypes.DROPDOWN].includes(field.type)\"\r\n      [dynamicFilters]=\"field.filterTypes\"\r\n      [disabled]=\"field.disabled\"\r\n      [options]=\"field.options || []\"\r\n      [service]=\"field.service\"\r\n      [isRequired]=\"field.required\"\r\n      [minLengthToService]=\"field.minLengthToService || 0\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [paged]=\"false\"\r\n      [dependencies]=\"getFieldDependencies(field)\"\r\n      [initialLoad]=\"field.initiateValue\"\r\n    ></vector-dropdown-field>\r\n    <vector-currency-field\r\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [outlined]=\"true\"\r\n      [disabled]=\"field.disabled\"\r\n    ></vector-currency-field>\r\n    <vector-calendar-field\r\n      *ngIf=\"field.type === fieldTypes.DATE\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [isRequired]=\"field.required\"\r\n      [label]=\"field.placeholder || ''\"\r\n      [disabled]=\"field.disabled\"\r\n    ></vector-calendar-field>\r\n    <vector-select-button-field\r\n      *ngIf=\"field.type === fieldTypes.SELECT_BUTTON\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [options]=\"field.options\"\r\n      (click)=\"search()\"\r\n      [disabled]=\"field.disabled\"\r\n    >\r\n    </vector-select-button-field>\r\n    <div *ngIf=\"field.type === fieldTypes.DATE_RANGE\" class=\"range-date-container\">\r\n      <vector-calendar-field\r\n        [control]=\"formGroup.get(field.name + '.startDate')\"\r\n        [isRequired]=\"field.required\"\r\n        [label]=\"field.placeholder || ''\"\r\n        [disabled]=\"field.disabled\"\r\n      ></vector-calendar-field>\r\n      At\u00E9\r\n      <vector-calendar-field\r\n        [control]=\"formGroup.get(field.name + '.endDate')\"\r\n        [isRequired]=\"field.required\"\r\n        [label]=\"field.placeholder || ''\"\r\n        [disabled]=\"field.disabled\"\r\n      ></vector-calendar-field>\r\n    </div>\r\n    <vector-multiselect-field\r\n      *ngIf=\"field.type === fieldTypes.MULTISELECT\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [options]=\"field.options || []\"\r\n      [disabled]=\"field.disabled\"\r\n    >\r\n    </vector-multiselect-field>\r\n  </div>\r\n  <div class=\"search-button sm:col-4\">\r\n    <vector-button\r\n      [label]=\"'app.label.search' | translate\"\r\n      (click)=\"search()\"\r\n      [disabled]=\"!formGroup.valid\"\r\n    ></vector-button>\r\n  </div>\r\n</div>\r\n", styles: [".filter-container{align-items:center}.filter-container .field{display:flex;flex-direction:column}.filter-container .search-button{flex:1;padding-right:7px;display:flex;justify-content:flex-end}@media (min-width: 768px){.filter-container .search-button{padding-top:36px}}.filter-container .range-date-container{display:flex;align-items:center;gap:10px}.display-none{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TextFieldComponent, selector: "vector-text-field", inputs: ["isRequired", "label", "maxlength", "isPassword", "numeric", "numericPositive", "decimal", "onlyText", "alphaNumeric", "alphaNumericAndWhitespace", "mask", "autoClear", "readonly", "rightIcon", "centered", "enableDocumentTypeChoice", "hiddenErrorMessage", "leftLabel", "control", "inputId", "slotChar"], outputs: ["blurEvent", "enterKeyPress", "backSpaceKeyPress", "focusEvent", "onDocumentTypeChange"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { kind: "component", type: CalendarComponent, selector: "vector-calendar-field", inputs: ["isRequired", "control", "label", "showCalendarOnFocus", "min", "max", "disabledDates", "disabled", "defaultDate", "hiddenErrorMessage"] }, { kind: "component", type: MultiselectFieldComponent, selector: "vector-multiselect-field", inputs: ["pagedSugestion", "isRequired", "control", "label", "options", "filter", "showSelectAllOption", "display", "paged", "disabled", "minLengthToService", "initialLoad", "service", "filterVirtualScrool"], outputs: ["onChange", "onClosePanel"] }, { kind: "component", type: DropdownFieldComponent, selector: "vector-dropdown-field", inputs: ["options", "isNgContent", "isRequired", "control", "label", "service", "paged", "buttonAction", "dependencies", "hiddenErrorMessage", "dynamicFilters", "minLengthToService", "initialLoad", "disabled"], outputs: ["onFocus", "onChange"] }, { kind: "component", type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: ["minValue", "maxValue", "placeholder", "numberOfDecimals", "control", "outlined", "rounded", "label", "isBankingField", "inputClassName", "localePrefix", "currencyPrefix", "disabled", "centered"] }, { kind: "component", type: SelectButtonFieldComponent, selector: "vector-select-button-field", inputs: ["options", "control", "disabled"] }, { kind: "pipe", type: NotHiddenPipe, name: "notHidden" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: FiltersComponent, selector: "vector-filters", inputs: { fields: "fields" }, outputs: { onSearch: "onSearch", formBuilded: "formBuilded" }, ngImport: i0, template: "<div class=\"grid filter-container\" [ngClass]=\"{ 'display-none': hideFilters }\" [formGroup]=\"formGroup\">\n  <div *ngFor=\"let field of fields | notHidden\" class=\"field col-12 sm:col-8 {{ getGridClass(field) }}\">\n    <label\n      >{{ field.label }}\n      <i\n        *ngIf=\"field.tooltip\"\n        class=\"fas fa-info-circle mt-1 pl-2 ch\"\n        pTooltip=\"{{ field.tooltip }}\"\n        tooltipPosition=\"bottom\"\n      ></i\n    ></label>\n    <vector-text-field\n      *ngIf=\"isTextFieldType(field)\"\n      [control]=\"formGroup.get(field.name)\"\n      [mask]=\"field.mask\"\n      [label]=\"field.placeholder\"\n      [isRequired]=\"field.required\"\n      [numeric]=\"field.type === fieldTypes.NUMBER\"\n    ></vector-text-field>\n    <vector-dropdown-field\n      *ngIf=\"[fieldTypes.DYNAMIC_DROPDOWN, fieldTypes.DROPDOWN].includes(field.type)\"\n      [dynamicFilters]=\"field.filterTypes\"\n      [disabled]=\"field.disabled\"\n      [options]=\"field.options || []\"\n      [service]=\"field.service\"\n      [isRequired]=\"field.required\"\n      [minLengthToService]=\"field.minLengthToService || 0\"\n      [control]=\"formGroup.get(field.name)\"\n      [paged]=\"false\"\n      [dependencies]=\"getFieldDependencies(field)\"\n      [initialLoad]=\"field.initiateValue\"\n    ></vector-dropdown-field>\n    <vector-currency-field\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\n      [control]=\"formGroup.get(field.name)\"\n      [outlined]=\"true\"\n      [disabled]=\"field.disabled\"\n    ></vector-currency-field>\n    <vector-calendar-field\n      *ngIf=\"field.type === fieldTypes.DATE\"\n      [control]=\"formGroup.get(field.name)\"\n      [isRequired]=\"field.required\"\n      [label]=\"field.placeholder || ''\"\n      [disabled]=\"field.disabled\"\n    ></vector-calendar-field>\n    <vector-select-button-field\n      *ngIf=\"field.type === fieldTypes.SELECT_BUTTON\"\n      [control]=\"formGroup.get(field.name)\"\n      [options]=\"field.options\"\n      (click)=\"search()\"\n      [disabled]=\"field.disabled\"\n    >\n    </vector-select-button-field>\n    <div *ngIf=\"field.type === fieldTypes.DATE_RANGE\" class=\"range-date-container\">\n      <vector-calendar-field\n        [control]=\"formGroup.get(field.name + '.startDate')\"\n        [isRequired]=\"field.required\"\n        [label]=\"field.placeholder || ''\"\n        [disabled]=\"field.disabled\"\n      ></vector-calendar-field>\n      At\u00E9\n      <vector-calendar-field\n        [control]=\"formGroup.get(field.name + '.endDate')\"\n        [isRequired]=\"field.required\"\n        [label]=\"field.placeholder || ''\"\n        [disabled]=\"field.disabled\"\n      ></vector-calendar-field>\n    </div>\n    <vector-multiselect-field\n      *ngIf=\"field.type === fieldTypes.MULTISELECT\"\n      [control]=\"formGroup.get(field.name)\"\n      [options]=\"field.options || []\"\n      [disabled]=\"field.disabled\"\n    >\n    </vector-multiselect-field>\n  </div>\n  <div class=\"search-button sm:col-4\">\n    <vector-button\n      [label]=\"'app.label.search' | translate\"\n      (click)=\"search()\"\n      [disabled]=\"!formGroup.valid\"\n    ></vector-button>\n  </div>\n</div>\n", styles: [".filter-container{align-items:center}.filter-container .field{display:flex;flex-direction:column}.filter-container .search-button{flex:1;padding-right:7px;display:flex;justify-content:flex-end}@media (min-width: 768px){.filter-container .search-button{padding-top:36px}}.filter-container .range-date-container{display:flex;align-items:center;gap:10px}.display-none{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TextFieldComponent, selector: "vector-text-field", inputs: ["isRequired", "label", "maxlength", "isPassword", "numeric", "numericPositive", "decimal", "onlyText", "alphaNumeric", "alphaNumericAndWhitespace", "mask", "autoClear", "readonly", "rightIcon", "centered", "enableDocumentTypeChoice", "hiddenErrorMessage", "leftLabel", "control", "inputId", "slotChar"], outputs: ["blurEvent", "enterKeyPress", "backSpaceKeyPress", "focusEvent", "onDocumentTypeChange"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { kind: "component", type: CalendarComponent, selector: "vector-calendar-field", inputs: ["isRequired", "control", "label", "showCalendarOnFocus", "min", "max", "disabledDates", "disabled", "defaultDate", "hiddenErrorMessage"] }, { kind: "component", type: MultiselectFieldComponent, selector: "vector-multiselect-field", inputs: ["pagedSugestion", "isRequired", "control", "label", "options", "filter", "showSelectAllOption", "display", "paged", "disabled", "minLengthToService", "initialLoad", "service", "filterVirtualScrool"], outputs: ["onChange", "onClosePanel"] }, { kind: "component", type: DropdownFieldComponent, selector: "vector-dropdown-field", inputs: ["options", "isNgContent", "isRequired", "control", "label", "service", "paged", "buttonAction", "dependencies", "hiddenErrorMessage", "dynamicFilters", "minLengthToService", "initialLoad", "disabled", "limitScrollPage"], outputs: ["onFocus", "onChange"] }, { kind: "component", type: CurrencyFieldComponent, selector: "vector-currency-field", inputs: ["minValue", "maxValue", "placeholder", "numberOfDecimals", "control", "outlined", "rounded", "label", "isBankingField", "inputClassName", "localePrefix", "currencyPrefix", "disabled", "centered"] }, { kind: "component", type: SelectButtonFieldComponent, selector: "vector-select-button-field", inputs: ["options", "control", "disabled"] }, { kind: "pipe", type: NotHiddenPipe, name: "notHidden" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: FiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-filters', template: "<div class=\"grid filter-container\" [ngClass]=\"{ 'display-none': hideFilters }\" [formGroup]=\"formGroup\">\r\n  <div *ngFor=\"let field of fields | notHidden\" class=\"field col-12 sm:col-8 {{ getGridClass(field) }}\">\r\n    <label\r\n      >{{ field.label }}\r\n      <i\r\n        *ngIf=\"field.tooltip\"\r\n        class=\"fas fa-info-circle mt-1 pl-2 ch\"\r\n        pTooltip=\"{{ field.tooltip }}\"\r\n        tooltipPosition=\"bottom\"\r\n      ></i\r\n    ></label>\r\n    <vector-text-field\r\n      *ngIf=\"isTextFieldType(field)\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [mask]=\"field.mask\"\r\n      [label]=\"field.placeholder\"\r\n      [isRequired]=\"field.required\"\r\n      [numeric]=\"field.type === fieldTypes.NUMBER\"\r\n    ></vector-text-field>\r\n    <vector-dropdown-field\r\n      *ngIf=\"[fieldTypes.DYNAMIC_DROPDOWN, fieldTypes.DROPDOWN].includes(field.type)\"\r\n      [dynamicFilters]=\"field.filterTypes\"\r\n      [disabled]=\"field.disabled\"\r\n      [options]=\"field.options || []\"\r\n      [service]=\"field.service\"\r\n      [isRequired]=\"field.required\"\r\n      [minLengthToService]=\"field.minLengthToService || 0\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [paged]=\"false\"\r\n      [dependencies]=\"getFieldDependencies(field)\"\r\n      [initialLoad]=\"field.initiateValue\"\r\n    ></vector-dropdown-field>\r\n    <vector-currency-field\r\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [outlined]=\"true\"\r\n      [disabled]=\"field.disabled\"\r\n    ></vector-currency-field>\r\n    <vector-calendar-field\r\n      *ngIf=\"field.type === fieldTypes.DATE\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [isRequired]=\"field.required\"\r\n      [label]=\"field.placeholder || ''\"\r\n      [disabled]=\"field.disabled\"\r\n    ></vector-calendar-field>\r\n    <vector-select-button-field\r\n      *ngIf=\"field.type === fieldTypes.SELECT_BUTTON\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [options]=\"field.options\"\r\n      (click)=\"search()\"\r\n      [disabled]=\"field.disabled\"\r\n    >\r\n    </vector-select-button-field>\r\n    <div *ngIf=\"field.type === fieldTypes.DATE_RANGE\" class=\"range-date-container\">\r\n      <vector-calendar-field\r\n        [control]=\"formGroup.get(field.name + '.startDate')\"\r\n        [isRequired]=\"field.required\"\r\n        [label]=\"field.placeholder || ''\"\r\n        [disabled]=\"field.disabled\"\r\n      ></vector-calendar-field>\r\n      At\u00E9\r\n      <vector-calendar-field\r\n        [control]=\"formGroup.get(field.name + '.endDate')\"\r\n        [isRequired]=\"field.required\"\r\n        [label]=\"field.placeholder || ''\"\r\n        [disabled]=\"field.disabled\"\r\n      ></vector-calendar-field>\r\n    </div>\r\n    <vector-multiselect-field\r\n      *ngIf=\"field.type === fieldTypes.MULTISELECT\"\r\n      [control]=\"formGroup.get(field.name)\"\r\n      [options]=\"field.options || []\"\r\n      [disabled]=\"field.disabled\"\r\n    >\r\n    </vector-multiselect-field>\r\n  </div>\r\n  <div class=\"search-button sm:col-4\">\r\n    <vector-button\r\n      [label]=\"'app.label.search' | translate\"\r\n      (click)=\"search()\"\r\n      [disabled]=\"!formGroup.valid\"\r\n    ></vector-button>\r\n  </div>\r\n</div>\r\n", styles: [".filter-container{align-items:center}.filter-container .field{display:flex;flex-direction:column}.filter-container .search-button{flex:1;padding-right:7px;display:flex;justify-content:flex-end}@media (min-width: 768px){.filter-container .search-button{padding-top:36px}}.filter-container .range-date-container{display:flex;align-items:center;gap:10px}.display-none{display:none!important}\n"] }]
+            args: [{ selector: 'vector-filters', template: "<div class=\"grid filter-container\" [ngClass]=\"{ 'display-none': hideFilters }\" [formGroup]=\"formGroup\">\n  <div *ngFor=\"let field of fields | notHidden\" class=\"field col-12 sm:col-8 {{ getGridClass(field) }}\">\n    <label\n      >{{ field.label }}\n      <i\n        *ngIf=\"field.tooltip\"\n        class=\"fas fa-info-circle mt-1 pl-2 ch\"\n        pTooltip=\"{{ field.tooltip }}\"\n        tooltipPosition=\"bottom\"\n      ></i\n    ></label>\n    <vector-text-field\n      *ngIf=\"isTextFieldType(field)\"\n      [control]=\"formGroup.get(field.name)\"\n      [mask]=\"field.mask\"\n      [label]=\"field.placeholder\"\n      [isRequired]=\"field.required\"\n      [numeric]=\"field.type === fieldTypes.NUMBER\"\n    ></vector-text-field>\n    <vector-dropdown-field\n      *ngIf=\"[fieldTypes.DYNAMIC_DROPDOWN, fieldTypes.DROPDOWN].includes(field.type)\"\n      [dynamicFilters]=\"field.filterTypes\"\n      [disabled]=\"field.disabled\"\n      [options]=\"field.options || []\"\n      [service]=\"field.service\"\n      [isRequired]=\"field.required\"\n      [minLengthToService]=\"field.minLengthToService || 0\"\n      [control]=\"formGroup.get(field.name)\"\n      [paged]=\"false\"\n      [dependencies]=\"getFieldDependencies(field)\"\n      [initialLoad]=\"field.initiateValue\"\n    ></vector-dropdown-field>\n    <vector-currency-field\n      *ngIf=\"field.type === fieldTypes.CURRENCY\"\n      [control]=\"formGroup.get(field.name)\"\n      [outlined]=\"true\"\n      [disabled]=\"field.disabled\"\n    ></vector-currency-field>\n    <vector-calendar-field\n      *ngIf=\"field.type === fieldTypes.DATE\"\n      [control]=\"formGroup.get(field.name)\"\n      [isRequired]=\"field.required\"\n      [label]=\"field.placeholder || ''\"\n      [disabled]=\"field.disabled\"\n    ></vector-calendar-field>\n    <vector-select-button-field\n      *ngIf=\"field.type === fieldTypes.SELECT_BUTTON\"\n      [control]=\"formGroup.get(field.name)\"\n      [options]=\"field.options\"\n      (click)=\"search()\"\n      [disabled]=\"field.disabled\"\n    >\n    </vector-select-button-field>\n    <div *ngIf=\"field.type === fieldTypes.DATE_RANGE\" class=\"range-date-container\">\n      <vector-calendar-field\n        [control]=\"formGroup.get(field.name + '.startDate')\"\n        [isRequired]=\"field.required\"\n        [label]=\"field.placeholder || ''\"\n        [disabled]=\"field.disabled\"\n      ></vector-calendar-field>\n      At\u00E9\n      <vector-calendar-field\n        [control]=\"formGroup.get(field.name + '.endDate')\"\n        [isRequired]=\"field.required\"\n        [label]=\"field.placeholder || ''\"\n        [disabled]=\"field.disabled\"\n      ></vector-calendar-field>\n    </div>\n    <vector-multiselect-field\n      *ngIf=\"field.type === fieldTypes.MULTISELECT\"\n      [control]=\"formGroup.get(field.name)\"\n      [options]=\"field.options || []\"\n      [disabled]=\"field.disabled\"\n    >\n    </vector-multiselect-field>\n  </div>\n  <div class=\"search-button sm:col-4\">\n    <vector-button\n      [label]=\"'app.label.search' | translate\"\n      (click)=\"search()\"\n      [disabled]=\"!formGroup.valid\"\n    ></vector-button>\n  </div>\n</div>\n", styles: [".filter-container{align-items:center}.filter-container .field{display:flex;flex-direction:column}.filter-container .search-button{flex:1;padding-right:7px;display:flex;justify-content:flex-end}@media (min-width: 768px){.filter-container .search-button{padding-top:36px}}.filter-container .range-date-container{display:flex;align-items:center;gap:10px}.display-none{display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }], propDecorators: { fields: [{
                 type: Input
             }], onSearch: [{
@@ -3424,11 +3430,11 @@ class DataTableComponent {
         return active ? 'success' : 'error';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: DataTableComponent, selector: "vector-data-table", inputs: { columns: "columns", data: "data", exportExcel: "exportExcel", exportPDF: "exportPDF", customFunction: "customFunction", totalRecords: "totalRecords", disabledHeadercheckbox: "disabledHeadercheckbox", filters: "filters", addItemLabel: "addItemLabel", pagination: "pagination", virtualPagination: "virtualPagination", tabs: "tabs", customButtons: "customButtons", addItemButtonPlusSign: "addItemButtonPlusSign", hasActions: "hasActions", hasExpandableIcon: "hasExpandableIcon", addNameColumnExpand: "addNameColumnExpand", expandable: "expandable", expansionTemplate: "expansionTemplate", selectionMode: "selectionMode", selectionType: "selectionType", height: "height", firstLazyLoad: "firstLazyLoad" }, outputs: { onLazyLoad: "onLazyLoad", onFilter: "onFilter", onAdd: "onAdd", onExportExcel: "onExportExcel", onExportPDF: "onExportPDF", onSelectedRows: "onSelectedRows", onFilterChanged: "onFilterChanged", onTabSelected: "onTabSelected", onExpandRow: "onExpandRow" }, viewQueries: [{ propertyName: "filtersComponent", first: true, predicate: FiltersComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"grid\">\r\n  <div class=\"col-12\">\r\n    <vector-filters\r\n      [fields]=\"filters\"\r\n      (onSearch)=\"lazyLoaded({ filter: true, data: $event })\"\r\n      (formBuilded)=\"subscribeToFilterChanges()\"\r\n    ></vector-filters>\r\n  </div>\r\n  <div class=\"table-header-actions field\" *ngIf=\"addItemLabel || exportExcel || exportPDF || customFunction\">\r\n    <button *ngIf=\"exportExcel\" (click)=\"onExportExcel.emit()\" class=\"export-button export-excel\">\r\n      <i class=\"fas fa-file-excel\"></i><span>Excel</span>\r\n    </button>\r\n    <button *ngIf=\"exportPDF\" (click)=\"onExportPDF.emit()\" class=\"export-button export-pdf\">\r\n      <i class=\"fas fa-file-pdf\"></i><span>PDF</span>\r\n    </button>\r\n    <button\r\n      *ngFor=\"let button of customFunction\"\r\n      (click)=\"button.clickFunction()\"\r\n      class=\"export-button custom-function\"\r\n    >\r\n      <i *ngIf=\"button?.icon\" class=\"{{ button?.icon }}\"></i><span>{{ button?.label }}</span>\r\n    </button>\r\n\r\n    <vector-button\r\n      *ngFor=\"let button of customButtons\"\r\n      class=\"add-item-button\"\r\n      [label]=\"button.label\"\r\n      (click)=\"button.clickFunction()\"\r\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\r\n    ></vector-button>\r\n    <vector-button\r\n      *ngIf=\"addItemLabel\"\r\n      class=\"add-item-button\"\r\n      [label]=\"addItemLabel\"\r\n      (click)=\"onAdd.emit()\"\r\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\r\n    ></vector-button>\r\n  </div>\r\n  <div class=\"col-12\">\r\n    <vector-panel class=\"data-table-panel\">\r\n      <p-tabView (onChange)=\"onTabChange($event)\" *ngIf=\"tabs?.length\">\r\n        <p-tabPanel *ngFor=\"let tab of tabs\">\r\n          <ng-template pTemplate=\"header\">\r\n            <em *ngIf=\"tab.icon\" [class]=\"tab.icon\">&nbsp;</em>\r\n            <span>{{ tab.name }}</span>\r\n          </ng-template>\r\n        </p-tabPanel>\r\n      </p-tabView>\r\n      <p-table\r\n        currentPageReportTemplate=\"Mostrando {first} at\u00E9 {last} de {totalRecords} registros\"\r\n        sortMode=\"single\"\r\n        [rows]=\"10\"\r\n        [lazy]=\"pagination && !virtualPagination\"\r\n        [value]=\"data\"\r\n        [paginator]=\"pagination\"\r\n        [totalRecords]=\"totalRecords\"\r\n        [showCurrentPageReport]=\"true\"\r\n        [rowsPerPageOptions]=\"[10, 25, 50, 100]\"\r\n        [responsive]=\"true\"\r\n        [resizableColumns]=\"true\"\r\n        [scrollable]=\"true\"\r\n        scrollDirection=\"vertical\"\r\n        responsiveLayout=\"scroll\"\r\n        dataKey=\"id\"\r\n        [scrollHeight]=\"height\"\r\n        [attr.selectionMode]=\"selectionMode\"\r\n        [(selection)]=\"selectedItems\"\r\n        (onRowSelect)=\"changeSelectedItems($event)\"\r\n        (onHeaderCheckboxToggle)=\"changeSelectedItems($event)\"\r\n        (onRowUnselect)=\"changeSelectedItems($event)\"\r\n        (onLazyLoad)=\"lazyLoaded({ filter: false, data: $event })\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n      >\r\n        <ng-template pTemplate=\"header\">\r\n          <tr class=\"header\">\r\n            <th *ngIf=\"selectionType === 'checkbox'\">\r\n              <p-tableHeaderCheckbox [disabled]=\"disabledHeadercheckbox\"></p-tableHeaderCheckbox>\r\n            </th>\r\n            <th class=\"text-center\" *ngIf=\"hasExpandableIcon\">\r\n              {{ addNameColumnExpand }}\r\n            </th>\r\n            <th *ngIf=\"hasActions\">{{ 'app.label.actions' | translate }}</th>\r\n            <th\r\n              *ngFor=\"let col of columns\"\r\n              [ngStyle]=\"getColStyle(col)\"\r\n              [pSortableColumn]=\"col.notSortable ? '' : col.field\"\r\n            >\r\n              <div class=\"flex align-items-center\">\r\n                <span>{{ col.header }}</span> <p-sortIcon *ngIf=\"!col.notSortable\" [field]=\"col.field\"></p-sortIcon>\r\n              </div>\r\n            </th>\r\n          </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-item let-expanded=\"expanded\">\r\n          <tr\r\n            class=\"row\"\r\n            [pSelectableRow]=\"rowData\"\r\n            [ngClass]=\"{ expandable: expandable }\"\r\n            [pRowToggler]=\"expandable ? item : undefined\"\r\n            (click)=\"onRowClick(item)\"\r\n          >\r\n            <ng-container *ngIf=\"selectionType === 'checkbox'\">\r\n              <td style=\"max-width: 3rem; padding-left: 10px\" class=\"flex justify-content-center align-items-center\">\r\n                <p-tableCheckbox [value]=\"item\" [disabled]=\"item.disabledCheckBox\"></p-tableCheckbox>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectionType === 'radiobutton'\">\r\n              <td style=\"max-width: 3rem; padding-left: 10px\" class=\"flex justify-content-center align-items-center\">\r\n                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\r\n              </td>\r\n            </ng-container>\r\n            <td *ngIf=\"hasExpandableIcon\" style=\"max-width: 150px\" class=\"centered\">\r\n              <p-menu #menu [model]=\"item.actions\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n              <i\r\n                [ngClass]=\"\r\n                  expanded ? 'actions-menu-button pi pi-chevron-down' : 'actions-menu-button pi pi-chevron-right'\r\n                \"\r\n              ></i>\r\n            </td>\r\n            <td *ngIf=\"hasActions\">\r\n              <p-menu #menu [model]=\"item.actions\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n              <i class=\"actions-menu-button fas fa-cog\" (click)=\"menu.toggle($event)\"></i>\r\n            </td>\r\n            <ng-container *ngFor=\"let col of columns\">\r\n              <td\r\n                *ngIf=\"isHtmlCell(col)\"\r\n                class=\"cell\"\r\n                [innerHTML]=\"getCellContent(item, col)\"\r\n                (click)=\"col && col.clickFunction && col.clickFunction(item)\"\r\n                [ngStyle]=\"getColStyle(col)\"\r\n              ></td>\r\n              <td\r\n                *ngIf=\"(!isHtmlCell(col) && !!col.getStatus) || isScoreCell(col)\"\r\n                class=\"cell\"\r\n                (click)=\"col && col.clickFunction && col.clickFunction(item)\"\r\n                [ngStyle]=\"getColStyle(col)\"\r\n              >\r\n                <vector-badge\r\n                  *ngIf=\"isBadgeCell(col)\"\r\n                  [label]=\"getCellText(item, col)\"\r\n                  [type]=\"col.getStatus && col.getStatus(item[col.field])\"\r\n                  [tooltip]=\"getTooltipText(item, col)\"\r\n                ></vector-badge>\r\n                <vector-score *ngIf=\"isScoreCell(col)\" [score]=\"item[col.field]\"></vector-score>\r\n              </td>\r\n            </ng-container>\r\n          </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"emptymessage\">\r\n          <tr class=\"row\">\r\n            <td class=\"no-results\" [attr.colspan]=\"columns.length + 1\">Nenhum resultado encontrado</td>\r\n          </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"paginatorright\"> </ng-template>\r\n        <ng-template let-item pTemplate=\"paginatordropdownitem\"> {{ item.value }} </ng-template>\r\n        <ng-template pTemplate=\"rowexpansion\" let-item>\r\n          <tr>\r\n            <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\">\r\n              <ng-container *ngTemplateOutlet=\"expansionTemplate; context: { item }\"> </ng-container>\r\n            </td>\r\n          </tr>\r\n        </ng-template>\r\n      </p-table>\r\n    </vector-panel>\r\n  </div>\r\n</div>\r\n", styles: [".no-results{padding:15px;background-color:#fff;width:100%}.centered{display:flex;justify-content:center}.table-header-actions{display:flex;justify-content:flex-end;align-items:flex-end;width:100%;padding-right:7px;margin-bottom:15px!important}@media (min-width: 768px){.table-header-actions{margin-top:-3px}}.table-header-actions .export-button{padding:7px 10px;color:#fff;display:flex;align-items:center;border:none;border-radius:5px;margin:5px;font-size:.75rem;cursor:pointer}.table-header-actions .export-button.export-excel{background-color:var(--success-color)}.table-header-actions .export-button.export-excel:hover{background-color:var(--success-color-dark)}.table-header-actions .export-button.export-pdf{background-color:var(--error-color)}.table-header-actions .export-button.export-pdf:hover{background-color:var(--error-color-dark)}.table-header-actions .export-button.custom-function{background-color:var(--theme-primary)}.table-header-actions .export-button.custom-function:hover{background-color:var(--theme-medium)}.table-header-actions .export-button i{color:#fff}.table-header-actions .export-button span{margin-left:5px}.table-header-actions .add-item-button{margin-left:10px}.actions-menu-button{font-size:23px;cursor:pointer;color:var(--theme-medium)}.expandable{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: PanelComponent, selector: "vector-panel" }, { kind: "component", type: i4$3.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i4$3.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: BadgeComponent, selector: "vector-badge", inputs: ["type", "label", "customColor", "customBackgroundColor", "tooltip"] }, { kind: "component", type: ScoreComponent, selector: "vector-score", inputs: ["score"] }, { kind: "component", type: i7.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i8.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", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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: i8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i8.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i8.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i8.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i8.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i8.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { kind: "component", type: FiltersComponent, selector: "vector-filters", inputs: ["fields"], outputs: ["onSearch", "formBuilded"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: DataTableComponent, selector: "vector-data-table", inputs: { columns: "columns", data: "data", exportExcel: "exportExcel", exportPDF: "exportPDF", customFunction: "customFunction", totalRecords: "totalRecords", disabledHeadercheckbox: "disabledHeadercheckbox", filters: "filters", addItemLabel: "addItemLabel", pagination: "pagination", virtualPagination: "virtualPagination", tabs: "tabs", customButtons: "customButtons", addItemButtonPlusSign: "addItemButtonPlusSign", hasActions: "hasActions", hasExpandableIcon: "hasExpandableIcon", addNameColumnExpand: "addNameColumnExpand", expandable: "expandable", expansionTemplate: "expansionTemplate", selectionMode: "selectionMode", selectionType: "selectionType", height: "height", firstLazyLoad: "firstLazyLoad" }, outputs: { onLazyLoad: "onLazyLoad", onFilter: "onFilter", onAdd: "onAdd", onExportExcel: "onExportExcel", onExportPDF: "onExportPDF", onSelectedRows: "onSelectedRows", onFilterChanged: "onFilterChanged", onTabSelected: "onTabSelected", onExpandRow: "onExpandRow" }, viewQueries: [{ propertyName: "filtersComponent", first: true, predicate: FiltersComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"grid\">\n  <div class=\"col-12\">\n    <vector-filters\n      [fields]=\"filters\"\n      (onSearch)=\"lazyLoaded({ filter: true, data: $event })\"\n      (formBuilded)=\"subscribeToFilterChanges()\"\n    ></vector-filters>\n  </div>\n  <div class=\"table-header-actions field\" *ngIf=\"addItemLabel || exportExcel || exportPDF || customFunction\">\n    <button *ngIf=\"exportExcel\" (click)=\"onExportExcel.emit()\" class=\"export-button export-excel\">\n      <i class=\"fas fa-file-excel\"></i><span>Excel</span>\n    </button>\n    <button *ngIf=\"exportPDF\" (click)=\"onExportPDF.emit()\" class=\"export-button export-pdf\">\n      <i class=\"fas fa-file-pdf\"></i><span>PDF</span>\n    </button>\n    <button\n      *ngFor=\"let button of customFunction\"\n      (click)=\"button.clickFunction()\"\n      class=\"export-button custom-function\"\n    >\n      <i *ngIf=\"button?.icon\" class=\"{{ button?.icon }}\"></i><span>{{ button?.label }}</span>\n    </button>\n\n    <vector-button\n      *ngFor=\"let button of customButtons\"\n      class=\"add-item-button\"\n      [label]=\"button.label\"\n      (click)=\"button.clickFunction()\"\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\n    ></vector-button>\n    <vector-button\n      *ngIf=\"addItemLabel\"\n      class=\"add-item-button\"\n      [label]=\"addItemLabel\"\n      (click)=\"onAdd.emit()\"\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\n    ></vector-button>\n  </div>\n  <div class=\"col-12\">\n    <vector-panel class=\"data-table-panel\">\n      <p-tabView (onChange)=\"onTabChange($event)\" *ngIf=\"tabs?.length\">\n        <p-tabPanel *ngFor=\"let tab of tabs\">\n          <ng-template pTemplate=\"header\">\n            <em *ngIf=\"tab.icon\" [class]=\"tab.icon\">&nbsp;</em>\n            <span>{{ tab.name }}</span>\n          </ng-template>\n        </p-tabPanel>\n      </p-tabView>\n      <p-table\n        currentPageReportTemplate=\"Mostrando {first} at\u00E9 {last} de {totalRecords} registros\"\n        sortMode=\"single\"\n        [rows]=\"10\"\n        [lazy]=\"pagination && !virtualPagination\"\n        [value]=\"data\"\n        [paginator]=\"pagination\"\n        [totalRecords]=\"totalRecords\"\n        [showCurrentPageReport]=\"true\"\n        [rowsPerPageOptions]=\"[10, 25, 50, 100]\"\n        [responsive]=\"true\"\n        [resizableColumns]=\"true\"\n        [scrollable]=\"true\"\n        scrollDirection=\"vertical\"\n        responsiveLayout=\"scroll\"\n        dataKey=\"id\"\n        [scrollHeight]=\"height\"\n        [attr.selectionMode]=\"selectionMode\"\n        [(selection)]=\"selectedItems\"\n        (onRowSelect)=\"changeSelectedItems($event)\"\n        (onHeaderCheckboxToggle)=\"changeSelectedItems($event)\"\n        (onRowUnselect)=\"changeSelectedItems($event)\"\n        (onLazyLoad)=\"lazyLoaded({ filter: false, data: $event })\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-template pTemplate=\"header\">\n          <tr class=\"header\">\n            <th *ngIf=\"selectionType === 'checkbox'\">\n              <p-tableHeaderCheckbox [disabled]=\"disabledHeadercheckbox\"></p-tableHeaderCheckbox>\n            </th>\n            <th class=\"text-center\" *ngIf=\"hasExpandableIcon\">\n              {{ addNameColumnExpand }}\n            </th>\n            <th *ngIf=\"hasActions\">{{ 'app.label.actions' | translate }}</th>\n            <th\n              *ngFor=\"let col of columns\"\n              [ngStyle]=\"getColStyle(col)\"\n              [pSortableColumn]=\"col.notSortable ? '' : col.field\"\n            >\n              <div class=\"flex align-items-center\">\n                <span>{{ col.header }}</span> <p-sortIcon *ngIf=\"!col.notSortable\" [field]=\"col.field\"></p-sortIcon>\n              </div>\n            </th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-item let-expanded=\"expanded\">\n          <tr\n            class=\"row\"\n            [pSelectableRow]=\"rowData\"\n            [ngClass]=\"{ expandable: expandable }\"\n            [pRowToggler]=\"expandable ? item : undefined\"\n            (click)=\"onRowClick(item)\"\n          >\n            <ng-container *ngIf=\"selectionType === 'checkbox'\">\n              <td style=\"max-width: 3rem; padding-left: 10px\" class=\"flex justify-content-center align-items-center\">\n                <p-tableCheckbox [value]=\"item\" [disabled]=\"item.disabledCheckBox\"></p-tableCheckbox>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"selectionType === 'radiobutton'\">\n              <td style=\"max-width: 3rem; padding-left: 10px\" class=\"flex justify-content-center align-items-center\">\n                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n              </td>\n            </ng-container>\n            <td *ngIf=\"hasExpandableIcon\" style=\"max-width: 150px\" class=\"centered\">\n              <p-menu #menu [model]=\"item.actions\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n              <i\n                [ngClass]=\"\n                  expanded ? 'actions-menu-button pi pi-chevron-down' : 'actions-menu-button pi pi-chevron-right'\n                \"\n              ></i>\n            </td>\n            <td *ngIf=\"hasActions\">\n              <p-menu #menu [model]=\"item.actions\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n              <i class=\"actions-menu-button fas fa-cog\" (click)=\"menu.toggle($event)\"></i>\n            </td>\n            <ng-container *ngFor=\"let col of columns\">\n              <td\n                *ngIf=\"isHtmlCell(col)\"\n                class=\"cell\"\n                [innerHTML]=\"getCellContent(item, col)\"\n                (click)=\"col && col.clickFunction && col.clickFunction(item)\"\n                [ngStyle]=\"getColStyle(col)\"\n              ></td>\n              <td\n                *ngIf=\"(!isHtmlCell(col) && !!col.getStatus) || isScoreCell(col)\"\n                class=\"cell\"\n                (click)=\"col && col.clickFunction && col.clickFunction(item)\"\n                [ngStyle]=\"getColStyle(col)\"\n              >\n                <vector-badge\n                  *ngIf=\"isBadgeCell(col)\"\n                  [label]=\"getCellText(item, col)\"\n                  [type]=\"col.getStatus && col.getStatus(item[col.field])\"\n                  [tooltip]=\"getTooltipText(item, col)\"\n                ></vector-badge>\n                <vector-score *ngIf=\"isScoreCell(col)\" [score]=\"item[col.field]\"></vector-score>\n              </td>\n            </ng-container>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"emptymessage\">\n          <tr class=\"row\">\n            <td class=\"no-results\" [attr.colspan]=\"columns.length + 1\">Nenhum resultado encontrado</td>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"paginatorright\"> </ng-template>\n        <ng-template let-item pTemplate=\"paginatordropdownitem\"> {{ item.value }} </ng-template>\n        <ng-template pTemplate=\"rowexpansion\" let-item>\n          <tr>\n            <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\">\n              <ng-container *ngTemplateOutlet=\"expansionTemplate; context: { item }\"> </ng-container>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n    </vector-panel>\n  </div>\n</div>\n", styles: [".no-results{padding:15px;background-color:#fff;width:100%}.centered{display:flex;justify-content:center}.table-header-actions{display:flex;justify-content:flex-end;align-items:flex-end;width:100%;padding-right:7px;margin-bottom:15px!important}@media (min-width: 768px){.table-header-actions{margin-top:-3px}}.table-header-actions .export-button{padding:7px 10px;color:#fff;display:flex;align-items:center;border:none;border-radius:5px;margin:5px;font-size:.75rem;cursor:pointer}.table-header-actions .export-button.export-excel{background-color:var(--success-color)}.table-header-actions .export-button.export-excel:hover{background-color:var(--success-color-dark)}.table-header-actions .export-button.export-pdf{background-color:var(--error-color)}.table-header-actions .export-button.export-pdf:hover{background-color:var(--error-color-dark)}.table-header-actions .export-button.custom-function{background-color:var(--theme-primary)}.table-header-actions .export-button.custom-function:hover{background-color:var(--theme-medium)}.table-header-actions .export-button i{color:#fff}.table-header-actions .export-button span{margin-left:5px}.table-header-actions .add-item-button{margin-left:10px}.actions-menu-button{font-size:23px;cursor:pointer;color:var(--theme-medium)}.expandable{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: PanelComponent, selector: "vector-panel" }, { kind: "component", type: i4$3.TabView, selector: "p-tabView", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i4$3.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: BadgeComponent, selector: "vector-badge", inputs: ["type", "label", "customColor", "customBackgroundColor", "tooltip"] }, { kind: "component", type: ScoreComponent, selector: "vector-score", inputs: ["score"] }, { kind: "component", type: i7.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i8.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", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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: i8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i8.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i8.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i8.TableRadioButton, selector: "p-tableRadioButton", inputs: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i8.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i8.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { kind: "component", type: FiltersComponent, selector: "vector-filters", inputs: ["fields"], outputs: ["onSearch", "formBuilded"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-data-table', template: "<div class=\"grid\">\r\n  <div class=\"col-12\">\r\n    <vector-filters\r\n      [fields]=\"filters\"\r\n      (onSearch)=\"lazyLoaded({ filter: true, data: $event })\"\r\n      (formBuilded)=\"subscribeToFilterChanges()\"\r\n    ></vector-filters>\r\n  </div>\r\n  <div class=\"table-header-actions field\" *ngIf=\"addItemLabel || exportExcel || exportPDF || customFunction\">\r\n    <button *ngIf=\"exportExcel\" (click)=\"onExportExcel.emit()\" class=\"export-button export-excel\">\r\n      <i class=\"fas fa-file-excel\"></i><span>Excel</span>\r\n    </button>\r\n    <button *ngIf=\"exportPDF\" (click)=\"onExportPDF.emit()\" class=\"export-button export-pdf\">\r\n      <i class=\"fas fa-file-pdf\"></i><span>PDF</span>\r\n    </button>\r\n    <button\r\n      *ngFor=\"let button of customFunction\"\r\n      (click)=\"button.clickFunction()\"\r\n      class=\"export-button custom-function\"\r\n    >\r\n      <i *ngIf=\"button?.icon\" class=\"{{ button?.icon }}\"></i><span>{{ button?.label }}</span>\r\n    </button>\r\n\r\n    <vector-button\r\n      *ngFor=\"let button of customButtons\"\r\n      class=\"add-item-button\"\r\n      [label]=\"button.label\"\r\n      (click)=\"button.clickFunction()\"\r\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\r\n    ></vector-button>\r\n    <vector-button\r\n      *ngIf=\"addItemLabel\"\r\n      class=\"add-item-button\"\r\n      [label]=\"addItemLabel\"\r\n      (click)=\"onAdd.emit()\"\r\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\r\n    ></vector-button>\r\n  </div>\r\n  <div class=\"col-12\">\r\n    <vector-panel class=\"data-table-panel\">\r\n      <p-tabView (onChange)=\"onTabChange($event)\" *ngIf=\"tabs?.length\">\r\n        <p-tabPanel *ngFor=\"let tab of tabs\">\r\n          <ng-template pTemplate=\"header\">\r\n            <em *ngIf=\"tab.icon\" [class]=\"tab.icon\">&nbsp;</em>\r\n            <span>{{ tab.name }}</span>\r\n          </ng-template>\r\n        </p-tabPanel>\r\n      </p-tabView>\r\n      <p-table\r\n        currentPageReportTemplate=\"Mostrando {first} at\u00E9 {last} de {totalRecords} registros\"\r\n        sortMode=\"single\"\r\n        [rows]=\"10\"\r\n        [lazy]=\"pagination && !virtualPagination\"\r\n        [value]=\"data\"\r\n        [paginator]=\"pagination\"\r\n        [totalRecords]=\"totalRecords\"\r\n        [showCurrentPageReport]=\"true\"\r\n        [rowsPerPageOptions]=\"[10, 25, 50, 100]\"\r\n        [responsive]=\"true\"\r\n        [resizableColumns]=\"true\"\r\n        [scrollable]=\"true\"\r\n        scrollDirection=\"vertical\"\r\n        responsiveLayout=\"scroll\"\r\n        dataKey=\"id\"\r\n        [scrollHeight]=\"height\"\r\n        [attr.selectionMode]=\"selectionMode\"\r\n        [(selection)]=\"selectedItems\"\r\n        (onRowSelect)=\"changeSelectedItems($event)\"\r\n        (onHeaderCheckboxToggle)=\"changeSelectedItems($event)\"\r\n        (onRowUnselect)=\"changeSelectedItems($event)\"\r\n        (onLazyLoad)=\"lazyLoaded({ filter: false, data: $event })\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n      >\r\n        <ng-template pTemplate=\"header\">\r\n          <tr class=\"header\">\r\n            <th *ngIf=\"selectionType === 'checkbox'\">\r\n              <p-tableHeaderCheckbox [disabled]=\"disabledHeadercheckbox\"></p-tableHeaderCheckbox>\r\n            </th>\r\n            <th class=\"text-center\" *ngIf=\"hasExpandableIcon\">\r\n              {{ addNameColumnExpand }}\r\n            </th>\r\n            <th *ngIf=\"hasActions\">{{ 'app.label.actions' | translate }}</th>\r\n            <th\r\n              *ngFor=\"let col of columns\"\r\n              [ngStyle]=\"getColStyle(col)\"\r\n              [pSortableColumn]=\"col.notSortable ? '' : col.field\"\r\n            >\r\n              <div class=\"flex align-items-center\">\r\n                <span>{{ col.header }}</span> <p-sortIcon *ngIf=\"!col.notSortable\" [field]=\"col.field\"></p-sortIcon>\r\n              </div>\r\n            </th>\r\n          </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData let-item let-expanded=\"expanded\">\r\n          <tr\r\n            class=\"row\"\r\n            [pSelectableRow]=\"rowData\"\r\n            [ngClass]=\"{ expandable: expandable }\"\r\n            [pRowToggler]=\"expandable ? item : undefined\"\r\n            (click)=\"onRowClick(item)\"\r\n          >\r\n            <ng-container *ngIf=\"selectionType === 'checkbox'\">\r\n              <td style=\"max-width: 3rem; padding-left: 10px\" class=\"flex justify-content-center align-items-center\">\r\n                <p-tableCheckbox [value]=\"item\" [disabled]=\"item.disabledCheckBox\"></p-tableCheckbox>\r\n              </td>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectionType === 'radiobutton'\">\r\n              <td style=\"max-width: 3rem; padding-left: 10px\" class=\"flex justify-content-center align-items-center\">\r\n                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\r\n              </td>\r\n            </ng-container>\r\n            <td *ngIf=\"hasExpandableIcon\" style=\"max-width: 150px\" class=\"centered\">\r\n              <p-menu #menu [model]=\"item.actions\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n              <i\r\n                [ngClass]=\"\r\n                  expanded ? 'actions-menu-button pi pi-chevron-down' : 'actions-menu-button pi pi-chevron-right'\r\n                \"\r\n              ></i>\r\n            </td>\r\n            <td *ngIf=\"hasActions\">\r\n              <p-menu #menu [model]=\"item.actions\" [popup]=\"true\" appendTo=\"body\"></p-menu>\r\n              <i class=\"actions-menu-button fas fa-cog\" (click)=\"menu.toggle($event)\"></i>\r\n            </td>\r\n            <ng-container *ngFor=\"let col of columns\">\r\n              <td\r\n                *ngIf=\"isHtmlCell(col)\"\r\n                class=\"cell\"\r\n                [innerHTML]=\"getCellContent(item, col)\"\r\n                (click)=\"col && col.clickFunction && col.clickFunction(item)\"\r\n                [ngStyle]=\"getColStyle(col)\"\r\n              ></td>\r\n              <td\r\n                *ngIf=\"(!isHtmlCell(col) && !!col.getStatus) || isScoreCell(col)\"\r\n                class=\"cell\"\r\n                (click)=\"col && col.clickFunction && col.clickFunction(item)\"\r\n                [ngStyle]=\"getColStyle(col)\"\r\n              >\r\n                <vector-badge\r\n                  *ngIf=\"isBadgeCell(col)\"\r\n                  [label]=\"getCellText(item, col)\"\r\n                  [type]=\"col.getStatus && col.getStatus(item[col.field])\"\r\n                  [tooltip]=\"getTooltipText(item, col)\"\r\n                ></vector-badge>\r\n                <vector-score *ngIf=\"isScoreCell(col)\" [score]=\"item[col.field]\"></vector-score>\r\n              </td>\r\n            </ng-container>\r\n          </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"emptymessage\">\r\n          <tr class=\"row\">\r\n            <td class=\"no-results\" [attr.colspan]=\"columns.length + 1\">Nenhum resultado encontrado</td>\r\n          </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"paginatorright\"> </ng-template>\r\n        <ng-template let-item pTemplate=\"paginatordropdownitem\"> {{ item.value }} </ng-template>\r\n        <ng-template pTemplate=\"rowexpansion\" let-item>\r\n          <tr>\r\n            <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\">\r\n              <ng-container *ngTemplateOutlet=\"expansionTemplate; context: { item }\"> </ng-container>\r\n            </td>\r\n          </tr>\r\n        </ng-template>\r\n      </p-table>\r\n    </vector-panel>\r\n  </div>\r\n</div>\r\n", styles: [".no-results{padding:15px;background-color:#fff;width:100%}.centered{display:flex;justify-content:center}.table-header-actions{display:flex;justify-content:flex-end;align-items:flex-end;width:100%;padding-right:7px;margin-bottom:15px!important}@media (min-width: 768px){.table-header-actions{margin-top:-3px}}.table-header-actions .export-button{padding:7px 10px;color:#fff;display:flex;align-items:center;border:none;border-radius:5px;margin:5px;font-size:.75rem;cursor:pointer}.table-header-actions .export-button.export-excel{background-color:var(--success-color)}.table-header-actions .export-button.export-excel:hover{background-color:var(--success-color-dark)}.table-header-actions .export-button.export-pdf{background-color:var(--error-color)}.table-header-actions .export-button.export-pdf:hover{background-color:var(--error-color-dark)}.table-header-actions .export-button.custom-function{background-color:var(--theme-primary)}.table-header-actions .export-button.custom-function:hover{background-color:var(--theme-medium)}.table-header-actions .export-button i{color:#fff}.table-header-actions .export-button span{margin-left:5px}.table-header-actions .add-item-button{margin-left:10px}.actions-menu-button{font-size:23px;cursor:pointer;color:var(--theme-medium)}.expandable{cursor:pointer}\n"] }]
+            args: [{ selector: 'vector-data-table', template: "<div class=\"grid\">\n  <div class=\"col-12\">\n    <vector-filters\n      [fields]=\"filters\"\n      (onSearch)=\"lazyLoaded({ filter: true, data: $event })\"\n      (formBuilded)=\"subscribeToFilterChanges()\"\n    ></vector-filters>\n  </div>\n  <div class=\"table-header-actions field\" *ngIf=\"addItemLabel || exportExcel || exportPDF || customFunction\">\n    <button *ngIf=\"exportExcel\" (click)=\"onExportExcel.emit()\" class=\"export-button export-excel\">\n      <i class=\"fas fa-file-excel\"></i><span>Excel</span>\n    </button>\n    <button *ngIf=\"exportPDF\" (click)=\"onExportPDF.emit()\" class=\"export-button export-pdf\">\n      <i class=\"fas fa-file-pdf\"></i><span>PDF</span>\n    </button>\n    <button\n      *ngFor=\"let button of customFunction\"\n      (click)=\"button.clickFunction()\"\n      class=\"export-button custom-function\"\n    >\n      <i *ngIf=\"button?.icon\" class=\"{{ button?.icon }}\"></i><span>{{ button?.label }}</span>\n    </button>\n\n    <vector-button\n      *ngFor=\"let button of customButtons\"\n      class=\"add-item-button\"\n      [label]=\"button.label\"\n      (click)=\"button.clickFunction()\"\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\n    ></vector-button>\n    <vector-button\n      *ngIf=\"addItemLabel\"\n      class=\"add-item-button\"\n      [label]=\"addItemLabel\"\n      (click)=\"onAdd.emit()\"\n      [rightIcon]=\"addItemButtonPlusSign ? 'pi pi-plus' : ''\"\n    ></vector-button>\n  </div>\n  <div class=\"col-12\">\n    <vector-panel class=\"data-table-panel\">\n      <p-tabView (onChange)=\"onTabChange($event)\" *ngIf=\"tabs?.length\">\n        <p-tabPanel *ngFor=\"let tab of tabs\">\n          <ng-template pTemplate=\"header\">\n            <em *ngIf=\"tab.icon\" [class]=\"tab.icon\">&nbsp;</em>\n            <span>{{ tab.name }}</span>\n          </ng-template>\n        </p-tabPanel>\n      </p-tabView>\n      <p-table\n        currentPageReportTemplate=\"Mostrando {first} at\u00E9 {last} de {totalRecords} registros\"\n        sortMode=\"single\"\n        [rows]=\"10\"\n        [lazy]=\"pagination && !virtualPagination\"\n        [value]=\"data\"\n        [paginator]=\"pagination\"\n        [totalRecords]=\"totalRecords\"\n        [showCurrentPageReport]=\"true\"\n        [rowsPerPageOptions]=\"[10, 25, 50, 100]\"\n        [responsive]=\"true\"\n        [resizableColumns]=\"true\"\n        [scrollable]=\"true\"\n        scrollDirection=\"vertical\"\n        responsiveLayout=\"scroll\"\n        dataKey=\"id\"\n        [scrollHeight]=\"height\"\n        [attr.selectionMode]=\"selectionMode\"\n        [(selection)]=\"selectedItems\"\n        (onRowSelect)=\"changeSelectedItems($event)\"\n        (onHeaderCheckboxToggle)=\"changeSelectedItems($event)\"\n        (onRowUnselect)=\"changeSelectedItems($event)\"\n        (onLazyLoad)=\"lazyLoaded({ filter: false, data: $event })\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-template pTemplate=\"header\">\n          <tr class=\"header\">\n            <th *ngIf=\"selectionType === 'checkbox'\">\n              <p-tableHeaderCheckbox [disabled]=\"disabledHeadercheckbox\"></p-tableHeaderCheckbox>\n            </th>\n            <th class=\"text-center\" *ngIf=\"hasExpandableIcon\">\n              {{ addNameColumnExpand }}\n            </th>\n            <th *ngIf=\"hasActions\">{{ 'app.label.actions' | translate }}</th>\n            <th\n              *ngFor=\"let col of columns\"\n              [ngStyle]=\"getColStyle(col)\"\n              [pSortableColumn]=\"col.notSortable ? '' : col.field\"\n            >\n              <div class=\"flex align-items-center\">\n                <span>{{ col.header }}</span> <p-sortIcon *ngIf=\"!col.notSortable\" [field]=\"col.field\"></p-sortIcon>\n              </div>\n            </th>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"body\" let-rowData let-item let-expanded=\"expanded\">\n          <tr\n            class=\"row\"\n            [pSelectableRow]=\"rowData\"\n            [ngClass]=\"{ expandable: expandable }\"\n            [pRowToggler]=\"expandable ? item : undefined\"\n            (click)=\"onRowClick(item)\"\n          >\n            <ng-container *ngIf=\"selectionType === 'checkbox'\">\n              <td style=\"max-width: 3rem; padding-left: 10px\" class=\"flex justify-content-center align-items-center\">\n                <p-tableCheckbox [value]=\"item\" [disabled]=\"item.disabledCheckBox\"></p-tableCheckbox>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"selectionType === 'radiobutton'\">\n              <td style=\"max-width: 3rem; padding-left: 10px\" class=\"flex justify-content-center align-items-center\">\n                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n              </td>\n            </ng-container>\n            <td *ngIf=\"hasExpandableIcon\" style=\"max-width: 150px\" class=\"centered\">\n              <p-menu #menu [model]=\"item.actions\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n              <i\n                [ngClass]=\"\n                  expanded ? 'actions-menu-button pi pi-chevron-down' : 'actions-menu-button pi pi-chevron-right'\n                \"\n              ></i>\n            </td>\n            <td *ngIf=\"hasActions\">\n              <p-menu #menu [model]=\"item.actions\" [popup]=\"true\" appendTo=\"body\"></p-menu>\n              <i class=\"actions-menu-button fas fa-cog\" (click)=\"menu.toggle($event)\"></i>\n            </td>\n            <ng-container *ngFor=\"let col of columns\">\n              <td\n                *ngIf=\"isHtmlCell(col)\"\n                class=\"cell\"\n                [innerHTML]=\"getCellContent(item, col)\"\n                (click)=\"col && col.clickFunction && col.clickFunction(item)\"\n                [ngStyle]=\"getColStyle(col)\"\n              ></td>\n              <td\n                *ngIf=\"(!isHtmlCell(col) && !!col.getStatus) || isScoreCell(col)\"\n                class=\"cell\"\n                (click)=\"col && col.clickFunction && col.clickFunction(item)\"\n                [ngStyle]=\"getColStyle(col)\"\n              >\n                <vector-badge\n                  *ngIf=\"isBadgeCell(col)\"\n                  [label]=\"getCellText(item, col)\"\n                  [type]=\"col.getStatus && col.getStatus(item[col.field])\"\n                  [tooltip]=\"getTooltipText(item, col)\"\n                ></vector-badge>\n                <vector-score *ngIf=\"isScoreCell(col)\" [score]=\"item[col.field]\"></vector-score>\n              </td>\n            </ng-container>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"emptymessage\">\n          <tr class=\"row\">\n            <td class=\"no-results\" [attr.colspan]=\"columns.length + 1\">Nenhum resultado encontrado</td>\n          </tr>\n        </ng-template>\n        <ng-template pTemplate=\"paginatorright\"> </ng-template>\n        <ng-template let-item pTemplate=\"paginatordropdownitem\"> {{ item.value }} </ng-template>\n        <ng-template pTemplate=\"rowexpansion\" let-item>\n          <tr>\n            <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\">\n              <ng-container *ngTemplateOutlet=\"expansionTemplate; context: { item }\"> </ng-container>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n    </vector-panel>\n  </div>\n</div>\n", styles: [".no-results{padding:15px;background-color:#fff;width:100%}.centered{display:flex;justify-content:center}.table-header-actions{display:flex;justify-content:flex-end;align-items:flex-end;width:100%;padding-right:7px;margin-bottom:15px!important}@media (min-width: 768px){.table-header-actions{margin-top:-3px}}.table-header-actions .export-button{padding:7px 10px;color:#fff;display:flex;align-items:center;border:none;border-radius:5px;margin:5px;font-size:.75rem;cursor:pointer}.table-header-actions .export-button.export-excel{background-color:var(--success-color)}.table-header-actions .export-button.export-excel:hover{background-color:var(--success-color-dark)}.table-header-actions .export-button.export-pdf{background-color:var(--error-color)}.table-header-actions .export-button.export-pdf:hover{background-color:var(--error-color-dark)}.table-header-actions .export-button.custom-function{background-color:var(--theme-primary)}.table-header-actions .export-button.custom-function:hover{background-color:var(--theme-medium)}.table-header-actions .export-button i{color:#fff}.table-header-actions .export-button span{margin-left:5px}.table-header-actions .add-item-button{margin-left:10px}.actions-menu-button{font-size:23px;cursor:pointer;color:var(--theme-medium)}.expandable{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
                 type: Input
             }], data: [{
@@ -3538,11 +3544,11 @@ class InputNumberFieldComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: InputNumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: InputNumberFieldComponent, selector: "vector-input-number", inputs: { control: "control", showButtons: "showButtons", type: "type", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", buttonLayout: "buttonLayout", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", min: "min", step: "step", disabled: "disabled", max: "max", suffix: "suffix" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput", onClear: "onClear" }, ngImport: i0, template: "<div class=\"input-container\">\r\n  <p-inputNumber\r\n    [formControl]=\"control\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [suffix]=\"suffix\"\r\n    [step]=\"step\"\r\n    [minFractionDigits]=\"minFractionDigits\"\r\n    [maxFractionDigits]=\"maxFractionDigits\"\r\n    [showButtons]=\"showButtons\"\r\n    [disabled]=\"disabled\"\r\n    [buttonLayout]=\"buttonLayout\"\r\n    [incrementButtonIcon]=\"incrementButtonIcon\"\r\n    [decrementButtonIcon]=\"decrementButtonIcon\"\r\n  ></p-inputNumber>\r\n  <vector-field-error-message [control]=\"control\"></vector-field-error-message>\r\n</div>\r\n", styles: [".input-container{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: InputNumberFieldComponent, selector: "vector-input-number", inputs: { control: "control", showButtons: "showButtons", type: "type", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", buttonLayout: "buttonLayout", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", min: "min", step: "step", disabled: "disabled", max: "max", suffix: "suffix" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput", onClear: "onClear" }, ngImport: i0, template: "<div class=\"input-container\">\n  <p-inputNumber\n    [formControl]=\"control\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [suffix]=\"suffix\"\n    [step]=\"step\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n    [showButtons]=\"showButtons\"\n    [disabled]=\"disabled\"\n    [buttonLayout]=\"buttonLayout\"\n    [incrementButtonIcon]=\"incrementButtonIcon\"\n    [decrementButtonIcon]=\"decrementButtonIcon\"\n  ></p-inputNumber>\n  <vector-field-error-message [control]=\"control\"></vector-field-error-message>\n</div>\n", styles: [".input-container{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: FieldErrorMessageComponent, selector: "vector-field-error-message", inputs: ["control"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: InputNumberFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-input-number', template: "<div class=\"input-container\">\r\n  <p-inputNumber\r\n    [formControl]=\"control\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [suffix]=\"suffix\"\r\n    [step]=\"step\"\r\n    [minFractionDigits]=\"minFractionDigits\"\r\n    [maxFractionDigits]=\"maxFractionDigits\"\r\n    [showButtons]=\"showButtons\"\r\n    [disabled]=\"disabled\"\r\n    [buttonLayout]=\"buttonLayout\"\r\n    [incrementButtonIcon]=\"incrementButtonIcon\"\r\n    [decrementButtonIcon]=\"decrementButtonIcon\"\r\n  ></p-inputNumber>\r\n  <vector-field-error-message [control]=\"control\"></vector-field-error-message>\r\n</div>\r\n", styles: [".input-container{width:100%}\n"] }]
+            args: [{ selector: 'vector-input-number', template: "<div class=\"input-container\">\n  <p-inputNumber\n    [formControl]=\"control\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [suffix]=\"suffix\"\n    [step]=\"step\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n    [showButtons]=\"showButtons\"\n    [disabled]=\"disabled\"\n    [buttonLayout]=\"buttonLayout\"\n    [incrementButtonIcon]=\"incrementButtonIcon\"\n    [decrementButtonIcon]=\"decrementButtonIcon\"\n  ></p-inputNumber>\n  <vector-field-error-message [control]=\"control\"></vector-field-error-message>\n</div>\n", styles: [".input-container{width:100%}\n"] }]
         }], propDecorators: { control: [{
                 type: Input
             }], showButtons: [{
@@ -3585,11 +3591,11 @@ class InputSwitchFieldComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: InputSwitchFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: InputSwitchFieldComponent, selector: "vector-input-switch-field", inputs: { control: "control", disabled: "disabled" }, ngImport: i0, template: "<p-inputSwitch [formControl]=\"control\" [disabled]=\"disabled\"></p-inputSwitch>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$4.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: InputSwitchFieldComponent, selector: "vector-input-switch-field", inputs: { control: "control", disabled: "disabled" }, ngImport: i0, template: "<p-inputSwitch [formControl]=\"control\" [disabled]=\"disabled\"></p-inputSwitch>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$4.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy"], outputs: ["onChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: InputSwitchFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-input-switch-field', template: "<p-inputSwitch [formControl]=\"control\" [disabled]=\"disabled\"></p-inputSwitch>\r\n" }]
+            args: [{ selector: 'vector-input-switch-field', template: "<p-inputSwitch [formControl]=\"control\" [disabled]=\"disabled\"></p-inputSwitch>\n" }]
         }], propDecorators: { control: [{
                 type: Input
             }], disabled: [{
@@ -3621,11 +3627,11 @@ class PercentageFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PercentageFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: PercentageFieldComponent, selector: "vector-percentage-field", inputs: { control: "control", min: "min", max: "max", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", step: "step" }, outputs: { blurEvent: "blurEvent", enterKeyPress: "enterKeyPress", focusEvent: "focusEvent" }, ngImport: i0, template: "<form class=\"input-container\">\r\n  <p-inputNumber\r\n    [formControl]=\"control\"\r\n    suffix=\"%\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [minFractionDigits]=\"minFractionDigits\"\r\n    [maxFractionDigits]=\"maxFractionDigits\"\r\n    [step]=\"step\"\r\n    [showButtons]=\"step > 1\"\r\n    buttonLayout=\"horizontal\"\r\n    decrementButtonIcon=\"pi pi-minus-circle\"\r\n    incrementButtonIcon=\"pi pi-plus-circle\"\r\n    (onBlur)=\"onBlur()\"\r\n  ></p-inputNumber>\r\n</form>\r\n", styles: [".input-container{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: PercentageFieldComponent, selector: "vector-percentage-field", inputs: { control: "control", min: "min", max: "max", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", step: "step" }, outputs: { blurEvent: "blurEvent", enterKeyPress: "enterKeyPress", focusEvent: "focusEvent" }, ngImport: i0, template: "<form class=\"input-container\">\n  <p-inputNumber\n    [formControl]=\"control\"\n    suffix=\"%\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n    [step]=\"step\"\n    [showButtons]=\"step > 1\"\n    buttonLayout=\"horizontal\"\n    decrementButtonIcon=\"pi pi-minus-circle\"\n    incrementButtonIcon=\"pi pi-plus-circle\"\n    (onBlur)=\"onBlur()\"\n  ></p-inputNumber>\n</form>\n", styles: [".input-container{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: PercentageFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-percentage-field', template: "<form class=\"input-container\">\r\n  <p-inputNumber\r\n    [formControl]=\"control\"\r\n    suffix=\"%\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [minFractionDigits]=\"minFractionDigits\"\r\n    [maxFractionDigits]=\"maxFractionDigits\"\r\n    [step]=\"step\"\r\n    [showButtons]=\"step > 1\"\r\n    buttonLayout=\"horizontal\"\r\n    decrementButtonIcon=\"pi pi-minus-circle\"\r\n    incrementButtonIcon=\"pi pi-plus-circle\"\r\n    (onBlur)=\"onBlur()\"\r\n  ></p-inputNumber>\r\n</form>\r\n", styles: [".input-container{width:100%}\n"] }]
+            args: [{ selector: 'vector-percentage-field', template: "<form class=\"input-container\">\n  <p-inputNumber\n    [formControl]=\"control\"\n    suffix=\"%\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [minFractionDigits]=\"minFractionDigits\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n    [step]=\"step\"\n    [showButtons]=\"step > 1\"\n    buttonLayout=\"horizontal\"\n    decrementButtonIcon=\"pi pi-minus-circle\"\n    incrementButtonIcon=\"pi pi-plus-circle\"\n    (onBlur)=\"onBlur()\"\n  ></p-inputNumber>\n</form>\n", styles: [".input-container{width:100%}\n"] }]
         }], propDecorators: { control: [{
                 type: Input
             }], min: [{
@@ -3670,11 +3676,11 @@ class RadioButtonFieldComponent {
         return label !== 'app.label.no' ? label : 'Não';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: RadioButtonFieldComponent, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: RadioButtonFieldComponent, selector: "vector-radio-button-field", inputs: { groupName: "groupName", options: "options", control: "control", layout: "layout", justifySpaceBetween: "justifySpaceBetween" }, ngImport: i0, template: "<div\r\n  class=\"radio-buttons-container\"\r\n  [ngClass]=\"layoutClass\"\r\n  [ngStyle]=\"{ 'justify-content': justifySpaceBetween ? 'space-between' : 'flex-start' }\"\r\n>\r\n  <div *ngFor=\"let option of options\" class=\"radio-button-item\">\r\n    <p-radioButton\r\n      [name]=\"groupName\"\r\n      [value]=\"option.value\"\r\n      [label]=\"option.label\"\r\n      [formControl]=\"control\"\r\n    ></p-radioButton>\r\n  </div>\r\n</div>\r\n", styles: [".radio-buttons-container{display:flex;flex-wrap:wrap;height:100%;width:100%;padding-top:5px}.radio-buttons-container .radio-button-item{margin:5px;flex:1 100px}.vertical{flex-direction:column;align-items:flex-start}.vertical .radio-button-item{margin-bottom:.5rem}.horizontal{flex-direction:row;padding-top:5px}.horizontal .radio-buttons-container .radio-button-item{margin:0 5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$4.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: RadioButtonFieldComponent, selector: "vector-radio-button-field", inputs: { groupName: "groupName", options: "options", control: "control", layout: "layout", justifySpaceBetween: "justifySpaceBetween" }, ngImport: i0, template: "<div\n  class=\"radio-buttons-container\"\n  [ngClass]=\"layoutClass\"\n  [ngStyle]=\"{ 'justify-content': justifySpaceBetween ? 'space-between' : 'flex-start' }\"\n>\n  <div *ngFor=\"let option of options\" class=\"radio-button-item\">\n    <p-radioButton\n      [name]=\"groupName\"\n      [value]=\"option.value\"\n      [label]=\"option.label\"\n      [formControl]=\"control\"\n    ></p-radioButton>\n  </div>\n</div>\n", styles: [".radio-buttons-container{display:flex;flex-wrap:wrap;height:100%;width:100%;padding-top:5px}.radio-buttons-container .radio-button-item{margin:5px;flex:1 100px}.vertical{flex-direction:column;align-items:flex-start}.vertical .radio-button-item{margin-bottom:.5rem}.horizontal{flex-direction:row;padding-top:5px}.horizontal .radio-buttons-container .radio-button-item{margin:0 5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$4.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: RadioButtonFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-radio-button-field', template: "<div\r\n  class=\"radio-buttons-container\"\r\n  [ngClass]=\"layoutClass\"\r\n  [ngStyle]=\"{ 'justify-content': justifySpaceBetween ? 'space-between' : 'flex-start' }\"\r\n>\r\n  <div *ngFor=\"let option of options\" class=\"radio-button-item\">\r\n    <p-radioButton\r\n      [name]=\"groupName\"\r\n      [value]=\"option.value\"\r\n      [label]=\"option.label\"\r\n      [formControl]=\"control\"\r\n    ></p-radioButton>\r\n  </div>\r\n</div>\r\n", styles: [".radio-buttons-container{display:flex;flex-wrap:wrap;height:100%;width:100%;padding-top:5px}.radio-buttons-container .radio-button-item{margin:5px;flex:1 100px}.vertical{flex-direction:column;align-items:flex-start}.vertical .radio-button-item{margin-bottom:.5rem}.horizontal{flex-direction:row;padding-top:5px}.horizontal .radio-buttons-container .radio-button-item{margin:0 5px}\n"] }]
+            args: [{ selector: 'vector-radio-button-field', template: "<div\n  class=\"radio-buttons-container\"\n  [ngClass]=\"layoutClass\"\n  [ngStyle]=\"{ 'justify-content': justifySpaceBetween ? 'space-between' : 'flex-start' }\"\n>\n  <div *ngFor=\"let option of options\" class=\"radio-button-item\">\n    <p-radioButton\n      [name]=\"groupName\"\n      [value]=\"option.value\"\n      [label]=\"option.label\"\n      [formControl]=\"control\"\n    ></p-radioButton>\n  </div>\n</div>\n", styles: [".radio-buttons-container{display:flex;flex-wrap:wrap;height:100%;width:100%;padding-top:5px}.radio-buttons-container .radio-button-item{margin:5px;flex:1 100px}.vertical{flex-direction:column;align-items:flex-start}.vertical .radio-button-item{margin-bottom:.5rem}.horizontal{flex-direction:row;padding-top:5px}.horizontal .radio-buttons-container .radio-button-item{margin:0 5px}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.TranslateService }], propDecorators: { groupName: [{
                 type: Input
             }], options: [{
@@ -3736,11 +3742,11 @@ class RangeValueComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: RangeValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: RangeValueComponent, selector: "vector-range-value", inputs: { value: "value", movimentedValue: "movimentedValue", min: "min", max: "max", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"range-input\">\r\n  <a href=\"javascript:void(0)\" class=\"btn-range minus\" (click)=\"decrement()\"></a>\r\n  <p-slider [(ngModel)]=\"value\" (onChange)=\"changeValue()\" [min]=\"min\" [max]=\"max\" [disabled]=\"disabled\"></p-slider>\r\n  <a href=\"javascript:void(0)\" class=\"btn-range plus\" (click)=\"increment()\"></a>\r\n</div>\r\n", styles: [".range-input{display:flex;flex-flow:row;align-items:center}.range-input .btn-range{width:26px;height:26px;display:flex;justify-content:center;align-items:center;background-color:#fff;border:2px solid var(--theme-dark);border-radius:4px;color:var(--theme-dark);text-decoration:none;font-size:1rem}.range-input .btn-range:hover{-webkit-transition:.2s linear;-moz-transition:.2s linear;-o-prop:.2s linear;background-color:var(--theme-dark);color:#fff}.range-input .minus:before{content:\"-\"}.range-input p-slider{flex:1;margin:0 10px}.range-input .plus:before{content:\"+\"}\n"], dependencies: [{ kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$5.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex"], outputs: ["onChange", "onSlideEnd"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: RangeValueComponent, selector: "vector-range-value", inputs: { value: "value", movimentedValue: "movimentedValue", min: "min", max: "max", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"range-input\">\n  <a href=\"javascript:void(0)\" class=\"btn-range minus\" (click)=\"decrement()\"></a>\n  <p-slider [(ngModel)]=\"value\" (onChange)=\"changeValue()\" [min]=\"min\" [max]=\"max\" [disabled]=\"disabled\"></p-slider>\n  <a href=\"javascript:void(0)\" class=\"btn-range plus\" (click)=\"increment()\"></a>\n</div>\n", styles: [".range-input{display:flex;flex-flow:row;align-items:center}.range-input .btn-range{width:26px;height:26px;display:flex;justify-content:center;align-items:center;background-color:#fff;border:2px solid var(--theme-dark);border-radius:4px;color:var(--theme-dark);text-decoration:none;font-size:1rem}.range-input .btn-range:hover{-webkit-transition:.2s linear;-moz-transition:.2s linear;-o-prop:.2s linear;background-color:var(--theme-dark);color:#fff}.range-input .minus:before{content:\"-\"}.range-input p-slider{flex:1;margin:0 10px}.range-input .plus:before{content:\"+\"}\n"], dependencies: [{ kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$5.Slider, selector: "p-slider", inputs: ["animate", "disabled", "min", "max", "orientation", "step", "range", "style", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex"], outputs: ["onChange", "onSlideEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: RangeValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-range-value', template: "<div class=\"range-input\">\r\n  <a href=\"javascript:void(0)\" class=\"btn-range minus\" (click)=\"decrement()\"></a>\r\n  <p-slider [(ngModel)]=\"value\" (onChange)=\"changeValue()\" [min]=\"min\" [max]=\"max\" [disabled]=\"disabled\"></p-slider>\r\n  <a href=\"javascript:void(0)\" class=\"btn-range plus\" (click)=\"increment()\"></a>\r\n</div>\r\n", styles: [".range-input{display:flex;flex-flow:row;align-items:center}.range-input .btn-range{width:26px;height:26px;display:flex;justify-content:center;align-items:center;background-color:#fff;border:2px solid var(--theme-dark);border-radius:4px;color:var(--theme-dark);text-decoration:none;font-size:1rem}.range-input .btn-range:hover{-webkit-transition:.2s linear;-moz-transition:.2s linear;-o-prop:.2s linear;background-color:var(--theme-dark);color:#fff}.range-input .minus:before{content:\"-\"}.range-input p-slider{flex:1;margin:0 10px}.range-input .plus:before{content:\"+\"}\n"] }]
+            args: [{ selector: 'vector-range-value', template: "<div class=\"range-input\">\n  <a href=\"javascript:void(0)\" class=\"btn-range minus\" (click)=\"decrement()\"></a>\n  <p-slider [(ngModel)]=\"value\" (onChange)=\"changeValue()\" [min]=\"min\" [max]=\"max\" [disabled]=\"disabled\"></p-slider>\n  <a href=\"javascript:void(0)\" class=\"btn-range plus\" (click)=\"increment()\"></a>\n</div>\n", styles: [".range-input{display:flex;flex-flow:row;align-items:center}.range-input .btn-range{width:26px;height:26px;display:flex;justify-content:center;align-items:center;background-color:#fff;border:2px solid var(--theme-dark);border-radius:4px;color:var(--theme-dark);text-decoration:none;font-size:1rem}.range-input .btn-range:hover{-webkit-transition:.2s linear;-moz-transition:.2s linear;-o-prop:.2s linear;background-color:var(--theme-dark);color:#fff}.range-input .minus:before{content:\"-\"}.range-input p-slider{flex:1;margin:0 10px}.range-input .plus:before{content:\"+\"}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], movimentedValue: [{
@@ -3771,11 +3777,11 @@ class SearchFieldComponent {
         this.subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SearchFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SearchFieldComponent, selector: "vector-search-field", inputs: { placeholder: "placeholder" }, outputs: { onSearch: "onSearch" }, ngImport: i0, template: "<vector-text-field [control]=\"formControl\" rightIcon=\"fas fa-search\" [label]=\"placeholder\"></vector-text-field>\r\n", styles: [""], dependencies: [{ kind: "component", type: TextFieldComponent, selector: "vector-text-field", inputs: ["isRequired", "label", "maxlength", "isPassword", "numeric", "numericPositive", "decimal", "onlyText", "alphaNumeric", "alphaNumericAndWhitespace", "mask", "autoClear", "readonly", "rightIcon", "centered", "enableDocumentTypeChoice", "hiddenErrorMessage", "leftLabel", "control", "inputId", "slotChar"], outputs: ["blurEvent", "enterKeyPress", "backSpaceKeyPress", "focusEvent", "onDocumentTypeChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SearchFieldComponent, selector: "vector-search-field", inputs: { placeholder: "placeholder" }, outputs: { onSearch: "onSearch" }, ngImport: i0, template: "<vector-text-field [control]=\"formControl\" rightIcon=\"fas fa-search\" [label]=\"placeholder\"></vector-text-field>\n", styles: [""], dependencies: [{ kind: "component", type: TextFieldComponent, selector: "vector-text-field", inputs: ["isRequired", "label", "maxlength", "isPassword", "numeric", "numericPositive", "decimal", "onlyText", "alphaNumeric", "alphaNumericAndWhitespace", "mask", "autoClear", "readonly", "rightIcon", "centered", "enableDocumentTypeChoice", "hiddenErrorMessage", "leftLabel", "control", "inputId", "slotChar"], outputs: ["blurEvent", "enterKeyPress", "backSpaceKeyPress", "focusEvent", "onDocumentTypeChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SearchFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-search-field', template: "<vector-text-field [control]=\"formControl\" rightIcon=\"fas fa-search\" [label]=\"placeholder\"></vector-text-field>\r\n" }]
+            args: [{ selector: 'vector-search-field', template: "<vector-text-field [control]=\"formControl\" rightIcon=\"fas fa-search\" [label]=\"placeholder\"></vector-text-field>\n" }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{
                 type: Input
             }], onSearch: [{
@@ -3834,11 +3840,11 @@ class TextareaFieldComponent {
         this.focusEvent.emit(target?.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: TextareaFieldComponent, selector: "vector-textarea-field", inputs: { isRequired: "isRequired", label: "label", maxlength: "maxlength", rows: "rows", cols: "cols", control: "control" }, outputs: { blurEvent: "blurEvent", enterKeyPress: "enterKeyPress", focusEvent: "focusEvent" }, ngImport: i0, template: "<form class=\"input-container\">\r\n  <textarea\r\n    pInputTextarea\r\n    [rows]=\"rows\"\r\n    [cols]=\"cols\"\r\n    [formControl]=\"control\"\r\n    [attr.maxlength]=\"maxlength\"\r\n    [placeholder]=\"placeholder\"\r\n    [autoResize]=\"false\"\r\n    (onBlur)=\"onBlur()\"\r\n    (keydown.enter)=\"onEnterPress()\"\r\n    (click)=\"onFocus($event)\"\r\n  >\r\n  </textarea>\r\n  <span class=\"length-control\">{{ control?.value?.length || 0 }} / {{ maxlength }}</span>\r\n</form>\r\n", styles: [".input-container{width:100%;position:relative}.input-container .length-control{position:absolute;right:15px;bottom:15px;opacity:.8;font-size:.6rem}\n"], dependencies: [{ kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$6.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: TextareaFieldComponent, selector: "vector-textarea-field", inputs: { isRequired: "isRequired", label: "label", maxlength: "maxlength", rows: "rows", cols: "cols", control: "control" }, outputs: { blurEvent: "blurEvent", enterKeyPress: "enterKeyPress", focusEvent: "focusEvent" }, ngImport: i0, template: "<form class=\"input-container\">\n  <textarea\n    pInputTextarea\n    [rows]=\"rows\"\n    [cols]=\"cols\"\n    [formControl]=\"control\"\n    [attr.maxlength]=\"maxlength\"\n    [placeholder]=\"placeholder\"\n    [autoResize]=\"false\"\n    (onBlur)=\"onBlur()\"\n    (keydown.enter)=\"onEnterPress()\"\n    (click)=\"onFocus($event)\"\n  >\n  </textarea>\n  <span class=\"length-control\">{{ control?.value?.length || 0 }} / {{ maxlength }}</span>\n</form>\n", styles: [".input-container{width:100%;position:relative}.input-container .length-control{position:absolute;right:15px;bottom:15px;opacity:.8;font-size:.6rem}\n"], dependencies: [{ kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$6.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TextareaFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-textarea-field', template: "<form class=\"input-container\">\r\n  <textarea\r\n    pInputTextarea\r\n    [rows]=\"rows\"\r\n    [cols]=\"cols\"\r\n    [formControl]=\"control\"\r\n    [attr.maxlength]=\"maxlength\"\r\n    [placeholder]=\"placeholder\"\r\n    [autoResize]=\"false\"\r\n    (onBlur)=\"onBlur()\"\r\n    (keydown.enter)=\"onEnterPress()\"\r\n    (click)=\"onFocus($event)\"\r\n  >\r\n  </textarea>\r\n  <span class=\"length-control\">{{ control?.value?.length || 0 }} / {{ maxlength }}</span>\r\n</form>\r\n", styles: [".input-container{width:100%;position:relative}.input-container .length-control{position:absolute;right:15px;bottom:15px;opacity:.8;font-size:.6rem}\n"] }]
+            args: [{ selector: 'vector-textarea-field', template: "<form class=\"input-container\">\n  <textarea\n    pInputTextarea\n    [rows]=\"rows\"\n    [cols]=\"cols\"\n    [formControl]=\"control\"\n    [attr.maxlength]=\"maxlength\"\n    [placeholder]=\"placeholder\"\n    [autoResize]=\"false\"\n    (onBlur)=\"onBlur()\"\n    (keydown.enter)=\"onEnterPress()\"\n    (click)=\"onFocus($event)\"\n  >\n  </textarea>\n  <span class=\"length-control\">{{ control?.value?.length || 0 }} / {{ maxlength }}</span>\n</form>\n", styles: [".input-container{width:100%;position:relative}.input-container .length-control{position:absolute;right:15px;bottom:15px;opacity:.8;font-size:.6rem}\n"] }]
         }], propDecorators: { isRequired: [{
                 type: Input
             }], label: [{
@@ -4062,11 +4068,11 @@ class CrudHeaderComponent {
     constructor() { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CrudHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CrudHeaderComponent, selector: "vector-crud-header", inputs: { statusCode: "statusCode", code: "code" }, ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"status-container\">\r\n    <span>Status</span>\r\n    <vector-badge [label]=\"statusLabel\" [type]=\"statusCode\"></vector-badge>\r\n  </div>\r\n  <div class=\"separator\"></div>\r\n  <span class=\"code-label\"\r\n    >C\u00F3digo de identifica\u00E7\u00E3o<span class=\"code\">{{ code }}</span></span\r\n  >\r\n</div>\r\n", styles: [".container{display:flex;align-items:center;margin-bottom:15px;justify-content:space-between;flex-wrap:wrap}@media (min-width: 441px){.container{justify-content:flex-end;height:40px}}.container .status-container{display:flex;align-items:center}.container .status-container vector-badge{margin-left:15px}.container .separator{width:1px;height:100%;margin:0 20px;background-color:var(--gray-medium)}@media (max-width: 440px){.container .separator{display:none}}.container .code-label{color:var(--form-labels-color);font-size:13px;max-width:150px;line-height:1rem}.container .code-label .code{color:#000;font-weight:600;font-size:20px;margin-left:10px}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "vector-badge", inputs: ["type", "label", "customColor", "customBackgroundColor", "tooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CrudHeaderComponent, selector: "vector-crud-header", inputs: { statusCode: "statusCode", code: "code" }, ngImport: i0, template: "<div class=\"container\">\n  <div class=\"status-container\">\n    <span>Status</span>\n    <vector-badge [label]=\"statusLabel\" [type]=\"statusCode\"></vector-badge>\n  </div>\n  <div class=\"separator\"></div>\n  <span class=\"code-label\"\n    >C\u00F3digo de identifica\u00E7\u00E3o<span class=\"code\">{{ code }}</span></span\n  >\n</div>\n", styles: [".container{display:flex;align-items:center;margin-bottom:15px;justify-content:space-between;flex-wrap:wrap}@media (min-width: 441px){.container{justify-content:flex-end;height:40px}}.container .status-container{display:flex;align-items:center}.container .status-container vector-badge{margin-left:15px}.container .separator{width:1px;height:100%;margin:0 20px;background-color:var(--gray-medium)}@media (max-width: 440px){.container .separator{display:none}}.container .code-label{color:var(--form-labels-color);font-size:13px;max-width:150px;line-height:1rem}.container .code-label .code{color:#000;font-weight:600;font-size:20px;margin-left:10px}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "vector-badge", inputs: ["type", "label", "customColor", "customBackgroundColor", "tooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CrudHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-crud-header', template: "<div class=\"container\">\r\n  <div class=\"status-container\">\r\n    <span>Status</span>\r\n    <vector-badge [label]=\"statusLabel\" [type]=\"statusCode\"></vector-badge>\r\n  </div>\r\n  <div class=\"separator\"></div>\r\n  <span class=\"code-label\"\r\n    >C\u00F3digo de identifica\u00E7\u00E3o<span class=\"code\">{{ code }}</span></span\r\n  >\r\n</div>\r\n", styles: [".container{display:flex;align-items:center;margin-bottom:15px;justify-content:space-between;flex-wrap:wrap}@media (min-width: 441px){.container{justify-content:flex-end;height:40px}}.container .status-container{display:flex;align-items:center}.container .status-container vector-badge{margin-left:15px}.container .separator{width:1px;height:100%;margin:0 20px;background-color:var(--gray-medium)}@media (max-width: 440px){.container .separator{display:none}}.container .code-label{color:var(--form-labels-color);font-size:13px;max-width:150px;line-height:1rem}.container .code-label .code{color:#000;font-weight:600;font-size:20px;margin-left:10px}\n"] }]
+            args: [{ selector: 'vector-crud-header', template: "<div class=\"container\">\n  <div class=\"status-container\">\n    <span>Status</span>\n    <vector-badge [label]=\"statusLabel\" [type]=\"statusCode\"></vector-badge>\n  </div>\n  <div class=\"separator\"></div>\n  <span class=\"code-label\"\n    >C\u00F3digo de identifica\u00E7\u00E3o<span class=\"code\">{{ code }}</span></span\n  >\n</div>\n", styles: [".container{display:flex;align-items:center;margin-bottom:15px;justify-content:space-between;flex-wrap:wrap}@media (min-width: 441px){.container{justify-content:flex-end;height:40px}}.container .status-container{display:flex;align-items:center}.container .status-container vector-badge{margin-left:15px}.container .separator{width:1px;height:100%;margin:0 20px;background-color:var(--gray-medium)}@media (max-width: 440px){.container .separator{display:none}}.container .code-label{color:var(--form-labels-color);font-size:13px;max-width:150px;line-height:1rem}.container .code-label .code{color:#000;font-weight:600;font-size:20px;margin-left:10px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { statusCode: [{
                 type: Input
             }], code: [{
@@ -4152,11 +4158,11 @@ class CrudHistoryComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CrudHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CrudHistoryComponent, selector: "vector-crud-history", inputs: { crudHistory: "crudHistory" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<p-accordionTab *ngIf=\"crudHistory\" class=\"history-item\">\r\n  <ng-template pTemplate=\"header\">\r\n    <div class=\"history-item-header-container\" (click)=\"onClick.emit()\">\r\n      <div class=\"history-item-header-left\">\r\n        <span id=\"color-first-span\" *ngIf=\"crudHistory.typeOfModification\">{{ crudHistory.typeOfModification }}</span>\r\n        <vector-badge\r\n          [customBackgroundColor]=\"getHistoryBadgeBackgroundColor(crudHistory.eventType)\"\r\n          [customColor]=\"getHistoryBadgeColor(crudHistory.eventType)\"\r\n          [label]=\"getHistoryBadgeLabel(crudHistory.eventType)\"\r\n        ></vector-badge>\r\n        <span>por {{ crudHistory.modifierName }}</span>\r\n      </div>\r\n      <span class=\"history-item-header-right\">\r\n        {{ crudHistory.dateTime | date : 'dd/MM/yyyy HH:mm' }}\r\n      </span>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template pTemplate=\"content\">\r\n    <div *ngFor=\"let auditDelta of crudHistory.dataAuditDelta\">\r\n      <div class=\"grid\">\r\n        <div class=\"col-12 md:col-6 field\">\r\n          <span>{{ auditDelta.fieldName }}</span>\r\n        </div>\r\n        <div class=\"col-12 md:col-6 field\">\r\n          <span class=\"new-value\">{{ auditDelta.newValue }}</span>\r\n          <s class=\"old-value pl-1\">{{ auditDelta.oldValue }}</s>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</p-accordionTab>\r\n", styles: [".history-item{width:100%;margin:10px 0}.history-item .history-item-header-container{display:flex;align-items:center;justify-content:space-between;width:100%}.history-item .history-item-header-container .history-item-header-left{display:flex;align-items:center}.history-item .history-item-header-container .history-item-header-left span#color-first-span{color:#000;margin-right:10px}.history-item .history-item-header-container .history-item-header-left span{margin-left:15px;color:var(--theme-medium);font-weight:600}.history-item .history-item-header-container .history-item-header-right{font-size:.8rem;color:var(--gray-darker);margin-right:40px}.new-value{color:#83c5be}.old-value{color:#000}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "vector-badge", inputs: ["type", "label", "customColor", "customBackgroundColor", "tooltip"] }, { kind: "component", type: i3$3.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CrudHistoryComponent, selector: "vector-crud-history", inputs: { crudHistory: "crudHistory" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<p-accordionTab *ngIf=\"crudHistory\" class=\"history-item\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"history-item-header-container\" (click)=\"onClick.emit()\">\n      <div class=\"history-item-header-left\">\n        <span id=\"color-first-span\" *ngIf=\"crudHistory.typeOfModification\">{{ crudHistory.typeOfModification }}</span>\n        <vector-badge\n          [customBackgroundColor]=\"getHistoryBadgeBackgroundColor(crudHistory.eventType)\"\n          [customColor]=\"getHistoryBadgeColor(crudHistory.eventType)\"\n          [label]=\"getHistoryBadgeLabel(crudHistory.eventType)\"\n        ></vector-badge>\n        <span>por {{ crudHistory.modifierName }}</span>\n      </div>\n      <span class=\"history-item-header-right\">\n        {{ crudHistory.dateTime | date : 'dd/MM/yyyy HH:mm' }}\n      </span>\n    </div>\n  </ng-template>\n  <ng-template pTemplate=\"content\">\n    <div *ngFor=\"let auditDelta of crudHistory.dataAuditDelta\">\n      <div class=\"grid\">\n        <div class=\"col-12 md:col-6 field\">\n          <span>{{ auditDelta.fieldName }}</span>\n        </div>\n        <div class=\"col-12 md:col-6 field\">\n          <span class=\"new-value\">{{ auditDelta.newValue }}</span>\n          <s class=\"old-value pl-1\">{{ auditDelta.oldValue }}</s>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</p-accordionTab>\n", styles: [".history-item{width:100%;margin:10px 0}.history-item .history-item-header-container{display:flex;align-items:center;justify-content:space-between;width:100%}.history-item .history-item-header-container .history-item-header-left{display:flex;align-items:center}.history-item .history-item-header-container .history-item-header-left span#color-first-span{color:#000;margin-right:10px}.history-item .history-item-header-container .history-item-header-left span{margin-left:15px;color:var(--theme-medium);font-weight:600}.history-item .history-item-header-container .history-item-header-right{font-size:.8rem;color:var(--gray-darker);margin-right:40px}.new-value{color:#83c5be}.old-value{color:#000}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "vector-badge", inputs: ["type", "label", "customColor", "customBackgroundColor", "tooltip"] }, { kind: "component", type: i3$3.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CrudHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-crud-history', template: "<p-accordionTab *ngIf=\"crudHistory\" class=\"history-item\">\r\n  <ng-template pTemplate=\"header\">\r\n    <div class=\"history-item-header-container\" (click)=\"onClick.emit()\">\r\n      <div class=\"history-item-header-left\">\r\n        <span id=\"color-first-span\" *ngIf=\"crudHistory.typeOfModification\">{{ crudHistory.typeOfModification }}</span>\r\n        <vector-badge\r\n          [customBackgroundColor]=\"getHistoryBadgeBackgroundColor(crudHistory.eventType)\"\r\n          [customColor]=\"getHistoryBadgeColor(crudHistory.eventType)\"\r\n          [label]=\"getHistoryBadgeLabel(crudHistory.eventType)\"\r\n        ></vector-badge>\r\n        <span>por {{ crudHistory.modifierName }}</span>\r\n      </div>\r\n      <span class=\"history-item-header-right\">\r\n        {{ crudHistory.dateTime | date : 'dd/MM/yyyy HH:mm' }}\r\n      </span>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template pTemplate=\"content\">\r\n    <div *ngFor=\"let auditDelta of crudHistory.dataAuditDelta\">\r\n      <div class=\"grid\">\r\n        <div class=\"col-12 md:col-6 field\">\r\n          <span>{{ auditDelta.fieldName }}</span>\r\n        </div>\r\n        <div class=\"col-12 md:col-6 field\">\r\n          <span class=\"new-value\">{{ auditDelta.newValue }}</span>\r\n          <s class=\"old-value pl-1\">{{ auditDelta.oldValue }}</s>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</p-accordionTab>\r\n", styles: [".history-item{width:100%;margin:10px 0}.history-item .history-item-header-container{display:flex;align-items:center;justify-content:space-between;width:100%}.history-item .history-item-header-container .history-item-header-left{display:flex;align-items:center}.history-item .history-item-header-container .history-item-header-left span#color-first-span{color:#000;margin-right:10px}.history-item .history-item-header-container .history-item-header-left span{margin-left:15px;color:var(--theme-medium);font-weight:600}.history-item .history-item-header-container .history-item-header-right{font-size:.8rem;color:var(--gray-darker);margin-right:40px}.new-value{color:#83c5be}.old-value{color:#000}\n"] }]
+            args: [{ selector: 'vector-crud-history', template: "<p-accordionTab *ngIf=\"crudHistory\" class=\"history-item\">\n  <ng-template pTemplate=\"header\">\n    <div class=\"history-item-header-container\" (click)=\"onClick.emit()\">\n      <div class=\"history-item-header-left\">\n        <span id=\"color-first-span\" *ngIf=\"crudHistory.typeOfModification\">{{ crudHistory.typeOfModification }}</span>\n        <vector-badge\n          [customBackgroundColor]=\"getHistoryBadgeBackgroundColor(crudHistory.eventType)\"\n          [customColor]=\"getHistoryBadgeColor(crudHistory.eventType)\"\n          [label]=\"getHistoryBadgeLabel(crudHistory.eventType)\"\n        ></vector-badge>\n        <span>por {{ crudHistory.modifierName }}</span>\n      </div>\n      <span class=\"history-item-header-right\">\n        {{ crudHistory.dateTime | date : 'dd/MM/yyyy HH:mm' }}\n      </span>\n    </div>\n  </ng-template>\n  <ng-template pTemplate=\"content\">\n    <div *ngFor=\"let auditDelta of crudHistory.dataAuditDelta\">\n      <div class=\"grid\">\n        <div class=\"col-12 md:col-6 field\">\n          <span>{{ auditDelta.fieldName }}</span>\n        </div>\n        <div class=\"col-12 md:col-6 field\">\n          <span class=\"new-value\">{{ auditDelta.newValue }}</span>\n          <s class=\"old-value pl-1\">{{ auditDelta.oldValue }}</s>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</p-accordionTab>\n", styles: [".history-item{width:100%;margin:10px 0}.history-item .history-item-header-container{display:flex;align-items:center;justify-content:space-between;width:100%}.history-item .history-item-header-container .history-item-header-left{display:flex;align-items:center}.history-item .history-item-header-container .history-item-header-left span#color-first-span{color:#000;margin-right:10px}.history-item .history-item-header-container .history-item-header-left span{margin-left:15px;color:var(--theme-medium);font-weight:600}.history-item .history-item-header-container .history-item-header-right{font-size:.8rem;color:var(--gray-darker);margin-right:40px}.new-value{color:#83c5be}.old-value{color:#000}\n"] }]
         }], propDecorators: { crudHistory: [{
                 type: Input
             }], onClick: [{
@@ -4197,11 +4203,11 @@ class GenericErrorModalComponent {
         this.message = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: GenericErrorModalComponent, deps: [{ token: ErrorMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: GenericErrorModalComponent, selector: "vector-generic-error-modal", inputs: { skipMessages: "skipMessages" }, ngImport: i0, template: "<p-dialog\r\n  [visible]=\"!!message\"\r\n  [modal]=\"true\"\r\n  [breakpoints]=\"{ '440px': '95vw' }\"\r\n  [style]=\"{ width: '400px' }\"\r\n  [draggable]=\"false\"\r\n  [resizable]=\"false\"\r\n  [blockScroll]=\"true\"\r\n  [closeOnEscape]=\"false\"\r\n  [closable]=\"true\"\r\n>\r\n  <div class=\"content-container\">\r\n    <img class=\"emote\" src=\".././../../assets/images/emote_bad.svg\" />\r\n    <p class=\"title\">Algo deu errado!</p>\r\n    <p class=\"message\">{{ message }}</p>\r\n\r\n    <div class=\"actions\">\r\n      <vector-button (click)=\"close()\" label=\"Voltar\"></vector-button>\r\n    </div>\r\n  </div>\r\n</p-dialog>\r\n", styles: [".content-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.content-container .title{text-align:center;color:var(--theme-dark);font-weight:600;margin-bottom:20px}.content-container .emote{height:40px;width:40px}@media (min-width: 991px){.content-container .emote{height:60px;width:60px}}.content-container .actions{margin-top:20px;width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center}.content-container .actions vector-button{width:75%}\n"], dependencies: [{ kind: "component", type: i2$7.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", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: GenericErrorModalComponent, selector: "vector-generic-error-modal", inputs: { skipMessages: "skipMessages" }, ngImport: i0, template: "<p-dialog\n  [visible]=\"!!message\"\n  [modal]=\"true\"\n  [breakpoints]=\"{ '440px': '95vw' }\"\n  [style]=\"{ width: '400px' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [blockScroll]=\"true\"\n  [closeOnEscape]=\"false\"\n  [closable]=\"true\"\n>\n  <div class=\"content-container\">\n    <img class=\"emote\" src=\".././../../assets/images/emote_bad.svg\" />\n    <p class=\"title\">Algo deu errado!</p>\n    <p class=\"message\">{{ message }}</p>\n\n    <div class=\"actions\">\n      <vector-button (click)=\"close()\" label=\"Voltar\"></vector-button>\n    </div>\n  </div>\n</p-dialog>\n", styles: [".content-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.content-container .title{text-align:center;color:var(--theme-dark);font-weight:600;margin-bottom:20px}.content-container .emote{height:40px;width:40px}@media (min-width: 991px){.content-container .emote{height:60px;width:60px}}.content-container .actions{margin-top:20px;width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center}.content-container .actions vector-button{width:75%}\n"], dependencies: [{ kind: "component", type: i2$7.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", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: GenericErrorModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-generic-error-modal', template: "<p-dialog\r\n  [visible]=\"!!message\"\r\n  [modal]=\"true\"\r\n  [breakpoints]=\"{ '440px': '95vw' }\"\r\n  [style]=\"{ width: '400px' }\"\r\n  [draggable]=\"false\"\r\n  [resizable]=\"false\"\r\n  [blockScroll]=\"true\"\r\n  [closeOnEscape]=\"false\"\r\n  [closable]=\"true\"\r\n>\r\n  <div class=\"content-container\">\r\n    <img class=\"emote\" src=\".././../../assets/images/emote_bad.svg\" />\r\n    <p class=\"title\">Algo deu errado!</p>\r\n    <p class=\"message\">{{ message }}</p>\r\n\r\n    <div class=\"actions\">\r\n      <vector-button (click)=\"close()\" label=\"Voltar\"></vector-button>\r\n    </div>\r\n  </div>\r\n</p-dialog>\r\n", styles: [".content-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.content-container .title{text-align:center;color:var(--theme-dark);font-weight:600;margin-bottom:20px}.content-container .emote{height:40px;width:40px}@media (min-width: 991px){.content-container .emote{height:60px;width:60px}}.content-container .actions{margin-top:20px;width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center}.content-container .actions vector-button{width:75%}\n"] }]
+            args: [{ selector: 'vector-generic-error-modal', template: "<p-dialog\n  [visible]=\"!!message\"\n  [modal]=\"true\"\n  [breakpoints]=\"{ '440px': '95vw' }\"\n  [style]=\"{ width: '400px' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [blockScroll]=\"true\"\n  [closeOnEscape]=\"false\"\n  [closable]=\"true\"\n>\n  <div class=\"content-container\">\n    <img class=\"emote\" src=\".././../../assets/images/emote_bad.svg\" />\n    <p class=\"title\">Algo deu errado!</p>\n    <p class=\"message\">{{ message }}</p>\n\n    <div class=\"actions\">\n      <vector-button (click)=\"close()\" label=\"Voltar\"></vector-button>\n    </div>\n  </div>\n</p-dialog>\n", styles: [".content-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.content-container .title{text-align:center;color:var(--theme-dark);font-weight:600;margin-bottom:20px}.content-container .emote{height:40px;width:40px}@media (min-width: 991px){.content-container .emote{height:60px;width:60px}}.content-container .actions{margin-top:20px;width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center}.content-container .actions vector-button{width:75%}\n"] }]
         }], ctorParameters: () => [{ type: ErrorMessageService }], propDecorators: { skipMessages: [{
                 type: Input
             }] } });
@@ -4253,11 +4259,11 @@ class GenericModalComponent {
         this.onCloseModal.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: GenericModalComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: GenericModalComponent, selector: "vector-generic-modal", inputs: { modalMessage: "modalMessage", isClosable: "isClosable", hiddenActions: "hiddenActions", linkLabel: "linkLabel", linkUrl: "linkUrl", display: "display", maxWidth: "maxWidth", lineBreak: "lineBreak" }, outputs: { displayChange: "displayChange", onCloseModal: "onCloseModal" }, ngImport: i0, template: "<p-dialog\r\n  [(visible)]=\"display\"\r\n  [modal]=\"true\"\r\n  [breakpoints]=\"{ '440px': '95vw' }\"\r\n  [style]=\"{ width: '400px' }\"\r\n  [draggable]=\"false\"\r\n  [resizable]=\"false\"\r\n  [blockScroll]=\"true\"\r\n  [closeOnEscape]=\"false\"\r\n  [closable]=\"isClosable\"\r\n  (onHide)=\"hideModal()\"\r\n  [ngStyle]=\"{ 'max-width': maxWidth, 'line-break': lineBreak }\"\r\n>\r\n  <div class=\"grid modal-generic\">\r\n    <div class=\"col-12\">\r\n      <img\r\n        *ngIf=\"modalMessage.fileIcon\"\r\n        class=\"flex mx-auto mb-3\"\r\n        [ngClass]=\"!isClosable ? 'mt-4' : ''\"\r\n        src=\"assets/images/{{ modalMessage.fileIcon }}.svg\"\r\n      />\r\n      <h1 *ngIf=\"modalMessage.title\">{{ modalMessage.title }}</h1>\r\n      <p *ngFor=\"let text of modalMessage.message\" [innerHTML]=\"text\"></p>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"linkLabel\" class=\"grid mt-2 justify-content-center\">\r\n    <div class=\"col-12 md:col-6\">\r\n      <vector-button [label]=\"linkLabel\" (click)=\"routerLink(linkUrl)\"></vector-button>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!hiddenActions\" class=\"grid mt-2 justify-content-center\">\r\n    <div class=\"col-12 md:col-6\" *ngIf=\"modalMessage.cancelButton\">\r\n      <vector-button\r\n        (onClick)=\"modalMessage.cancelButton && modalMessage.cancelButton.clickFunction()\"\r\n        [label]=\"modalMessage.cancelButton.label\"\r\n        [type]=\"modalMessage.cancelButton.type ? modalMessage.cancelButton.type : 'default'\"\r\n      ></vector-button>\r\n    </div>\r\n\r\n    <div class=\"col-12 md:col-6\" *ngIf=\"modalMessage.confirmButton\">\r\n      <vector-button\r\n        (onClick)=\"modalMessage.confirmButton && modalMessage.confirmButton.clickFunction()\"\r\n        [label]=\"modalMessage.confirmButton.label\"\r\n        [type]=\"modalMessage.confirmButton.type ? modalMessage.confirmButton.type : 'default-filled'\"\r\n      ></vector-button>\r\n    </div>\r\n  </div>\r\n</p-dialog>\r\n", styles: [".modal-generic{font-style:normal;font-family:Poppins;text-align:center!important}.modal-generic h1{margin:1em auto!important;font-weight:700;font-size:1.42em!important;line-height:1.2em;letter-spacing:1px;color:#262338}.modal-generic p{margin:0 auto;font-weight:400;font-size:1.07em;line-height:1.5em;letter-spacing:.053em;color:#4e4b66}\n"], dependencies: [{ kind: "component", type: i2$7.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", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: GenericModalComponent, selector: "vector-generic-modal", inputs: { modalMessage: "modalMessage", isClosable: "isClosable", hiddenActions: "hiddenActions", linkLabel: "linkLabel", linkUrl: "linkUrl", display: "display", maxWidth: "maxWidth", lineBreak: "lineBreak" }, outputs: { displayChange: "displayChange", onCloseModal: "onCloseModal" }, ngImport: i0, template: "<p-dialog\n  [(visible)]=\"display\"\n  [modal]=\"true\"\n  [breakpoints]=\"{ '440px': '95vw' }\"\n  [style]=\"{ width: '400px' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [blockScroll]=\"true\"\n  [closeOnEscape]=\"false\"\n  [closable]=\"isClosable\"\n  (onHide)=\"hideModal()\"\n  [ngStyle]=\"{ 'max-width': maxWidth, 'line-break': lineBreak }\"\n>\n  <div class=\"grid modal-generic\">\n    <div class=\"col-12\">\n      <img\n        *ngIf=\"modalMessage.fileIcon\"\n        class=\"flex mx-auto mb-3\"\n        [ngClass]=\"!isClosable ? 'mt-4' : ''\"\n        src=\"assets/images/{{ modalMessage.fileIcon }}.svg\"\n      />\n      <h1 *ngIf=\"modalMessage.title\">{{ modalMessage.title }}</h1>\n      <p *ngFor=\"let text of modalMessage.message\" [innerHTML]=\"text\"></p>\n    </div>\n  </div>\n\n  <div *ngIf=\"linkLabel\" class=\"grid mt-2 justify-content-center\">\n    <div class=\"col-12 md:col-6\">\n      <vector-button [label]=\"linkLabel\" (click)=\"routerLink(linkUrl)\"></vector-button>\n    </div>\n  </div>\n\n  <div *ngIf=\"!hiddenActions\" class=\"grid mt-2 justify-content-center\">\n    <div class=\"col-12 md:col-6\" *ngIf=\"modalMessage.cancelButton\">\n      <vector-button\n        (onClick)=\"modalMessage.cancelButton && modalMessage.cancelButton.clickFunction()\"\n        [label]=\"modalMessage.cancelButton.label\"\n        [type]=\"modalMessage.cancelButton.type ? modalMessage.cancelButton.type : 'default'\"\n      ></vector-button>\n    </div>\n\n    <div class=\"col-12 md:col-6\" *ngIf=\"modalMessage.confirmButton\">\n      <vector-button\n        (onClick)=\"modalMessage.confirmButton && modalMessage.confirmButton.clickFunction()\"\n        [label]=\"modalMessage.confirmButton.label\"\n        [type]=\"modalMessage.confirmButton.type ? modalMessage.confirmButton.type : 'default-filled'\"\n      ></vector-button>\n    </div>\n  </div>\n</p-dialog>\n", styles: [".modal-generic{font-style:normal;font-family:Poppins;text-align:center!important}.modal-generic h1{margin:1em auto!important;font-weight:700;font-size:1.42em!important;line-height:1.2em;letter-spacing:1px;color:#262338}.modal-generic p{margin:0 auto;font-weight:400;font-size:1.07em;line-height:1.5em;letter-spacing:.053em;color:#4e4b66}\n"], dependencies: [{ kind: "component", type: i2$7.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", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: ButtonComponent, selector: "vector-button", inputs: ["disabled", "label", "type", "leftIcon", "rightIcon", "noShadow", "style"], outputs: ["onClick"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: GenericModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-generic-modal', template: "<p-dialog\r\n  [(visible)]=\"display\"\r\n  [modal]=\"true\"\r\n  [breakpoints]=\"{ '440px': '95vw' }\"\r\n  [style]=\"{ width: '400px' }\"\r\n  [draggable]=\"false\"\r\n  [resizable]=\"false\"\r\n  [blockScroll]=\"true\"\r\n  [closeOnEscape]=\"false\"\r\n  [closable]=\"isClosable\"\r\n  (onHide)=\"hideModal()\"\r\n  [ngStyle]=\"{ 'max-width': maxWidth, 'line-break': lineBreak }\"\r\n>\r\n  <div class=\"grid modal-generic\">\r\n    <div class=\"col-12\">\r\n      <img\r\n        *ngIf=\"modalMessage.fileIcon\"\r\n        class=\"flex mx-auto mb-3\"\r\n        [ngClass]=\"!isClosable ? 'mt-4' : ''\"\r\n        src=\"assets/images/{{ modalMessage.fileIcon }}.svg\"\r\n      />\r\n      <h1 *ngIf=\"modalMessage.title\">{{ modalMessage.title }}</h1>\r\n      <p *ngFor=\"let text of modalMessage.message\" [innerHTML]=\"text\"></p>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"linkLabel\" class=\"grid mt-2 justify-content-center\">\r\n    <div class=\"col-12 md:col-6\">\r\n      <vector-button [label]=\"linkLabel\" (click)=\"routerLink(linkUrl)\"></vector-button>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!hiddenActions\" class=\"grid mt-2 justify-content-center\">\r\n    <div class=\"col-12 md:col-6\" *ngIf=\"modalMessage.cancelButton\">\r\n      <vector-button\r\n        (onClick)=\"modalMessage.cancelButton && modalMessage.cancelButton.clickFunction()\"\r\n        [label]=\"modalMessage.cancelButton.label\"\r\n        [type]=\"modalMessage.cancelButton.type ? modalMessage.cancelButton.type : 'default'\"\r\n      ></vector-button>\r\n    </div>\r\n\r\n    <div class=\"col-12 md:col-6\" *ngIf=\"modalMessage.confirmButton\">\r\n      <vector-button\r\n        (onClick)=\"modalMessage.confirmButton && modalMessage.confirmButton.clickFunction()\"\r\n        [label]=\"modalMessage.confirmButton.label\"\r\n        [type]=\"modalMessage.confirmButton.type ? modalMessage.confirmButton.type : 'default-filled'\"\r\n      ></vector-button>\r\n    </div>\r\n  </div>\r\n</p-dialog>\r\n", styles: [".modal-generic{font-style:normal;font-family:Poppins;text-align:center!important}.modal-generic h1{margin:1em auto!important;font-weight:700;font-size:1.42em!important;line-height:1.2em;letter-spacing:1px;color:#262338}.modal-generic p{margin:0 auto;font-weight:400;font-size:1.07em;line-height:1.5em;letter-spacing:.053em;color:#4e4b66}\n"] }]
+            args: [{ selector: 'vector-generic-modal', template: "<p-dialog\n  [(visible)]=\"display\"\n  [modal]=\"true\"\n  [breakpoints]=\"{ '440px': '95vw' }\"\n  [style]=\"{ width: '400px' }\"\n  [draggable]=\"false\"\n  [resizable]=\"false\"\n  [blockScroll]=\"true\"\n  [closeOnEscape]=\"false\"\n  [closable]=\"isClosable\"\n  (onHide)=\"hideModal()\"\n  [ngStyle]=\"{ 'max-width': maxWidth, 'line-break': lineBreak }\"\n>\n  <div class=\"grid modal-generic\">\n    <div class=\"col-12\">\n      <img\n        *ngIf=\"modalMessage.fileIcon\"\n        class=\"flex mx-auto mb-3\"\n        [ngClass]=\"!isClosable ? 'mt-4' : ''\"\n        src=\"assets/images/{{ modalMessage.fileIcon }}.svg\"\n      />\n      <h1 *ngIf=\"modalMessage.title\">{{ modalMessage.title }}</h1>\n      <p *ngFor=\"let text of modalMessage.message\" [innerHTML]=\"text\"></p>\n    </div>\n  </div>\n\n  <div *ngIf=\"linkLabel\" class=\"grid mt-2 justify-content-center\">\n    <div class=\"col-12 md:col-6\">\n      <vector-button [label]=\"linkLabel\" (click)=\"routerLink(linkUrl)\"></vector-button>\n    </div>\n  </div>\n\n  <div *ngIf=\"!hiddenActions\" class=\"grid mt-2 justify-content-center\">\n    <div class=\"col-12 md:col-6\" *ngIf=\"modalMessage.cancelButton\">\n      <vector-button\n        (onClick)=\"modalMessage.cancelButton && modalMessage.cancelButton.clickFunction()\"\n        [label]=\"modalMessage.cancelButton.label\"\n        [type]=\"modalMessage.cancelButton.type ? modalMessage.cancelButton.type : 'default'\"\n      ></vector-button>\n    </div>\n\n    <div class=\"col-12 md:col-6\" *ngIf=\"modalMessage.confirmButton\">\n      <vector-button\n        (onClick)=\"modalMessage.confirmButton && modalMessage.confirmButton.clickFunction()\"\n        [label]=\"modalMessage.confirmButton.label\"\n        [type]=\"modalMessage.confirmButton.type ? modalMessage.confirmButton.type : 'default-filled'\"\n      ></vector-button>\n    </div>\n  </div>\n</p-dialog>\n", styles: [".modal-generic{font-style:normal;font-family:Poppins;text-align:center!important}.modal-generic h1{margin:1em auto!important;font-weight:700;font-size:1.42em!important;line-height:1.2em;letter-spacing:1px;color:#262338}.modal-generic p{margin:0 auto;font-weight:400;font-size:1.07em;line-height:1.5em;letter-spacing:.053em;color:#4e4b66}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { modalMessage: [{
                 type: Input
             }], isClosable: [{
@@ -4315,11 +4321,11 @@ class SubMenusListComponent {
         return this.childLevel * 10 + 'px';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SubMenusListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SubMenusListComponent, selector: "vector-sub-menus-list", inputs: { showList: "showList", options: "options", childLevel: "childLevel", submenuSelected: "submenuSelected" }, outputs: { submenuSelectedChange: "submenuSelectedChange" }, ngImport: i0, template: "<div class=\"sub-menu-container\">\r\n  <ul *ngIf=\"showList\" class=\"sub-menu\">\r\n    <div *ngFor=\"let submenuItem of options\">\r\n      <li class=\"sub-menu-item\" [ngStyle]=\"{ 'padding-left': paddingLeft }\" (click)=\"submenuClick(submenuItem)\">\r\n        <div\r\n          class=\"current-item\"\r\n          [ngClass]=\"{\r\n            'active-menu': submenuSelected?.id === submenuItem.id,\r\n            'always-open': !!submenuItem.alwaysOpen,\r\n            'last-child': !submenuItem.children?.length\r\n          }\"\r\n          [pTooltip]=\"submenuItem.label\"\r\n          tooltipPosition=\"right\"\r\n        >\r\n          <div *ngIf=\"submenuItem.icon\" class=\"icon-container\">\r\n            <i [class]=\"submenuItem.icon\"></i>\r\n          </div>\r\n          <span class=\"menu-label\">{{ submenuItem.label }}</span>\r\n          <i\r\n            *ngIf=\"submenuItem.children?.length && !submenuItem.alwaysOpen\"\r\n            class=\"fas angle-icon\"\r\n            [ngClass]=\"{\r\n              'fa-angle-down': submenuSelected?.id !== submenuItem.id,\r\n              'fa-angle-up': submenuSelected?.id === submenuItem.id\r\n            }\"\r\n          ></i>\r\n        </div>\r\n      </li>\r\n      <vector-sub-menus-list\r\n        *ngIf=\"submenuItem?.children\"\r\n        [options]=\"submenuItem?.children\"\r\n        [showList]=\"submenuItem?.id === submenuSelected?.id || !!submenuItem?.alwaysOpen\"\r\n        [childLevel]=\"childLevel + 1\"\r\n        (submenuSelectedChange)=\"submenuClick($event)\"\r\n      ></vector-sub-menus-list>\r\n    </div>\r\n  </ul>\r\n</div>\r\n", styles: [".angle-icon{position:absolute;right:10px}.menu-icon{filter:brightness(0) saturate(100%) invert(14%) sepia(87%) saturate(1218%) hue-rotate(233deg) brightness(88%) contrast(90%);width:20px;height:20px}.icon-container{width:20px;height:20px;position:relative}.icon-container .menu-icon{display:flex;justify-content:center;align-items:center;font-size:1.4em}.icon-container .menu-notifications-count{padding:0 4.5px;background-color:var(--error-color);border-radius:10px;position:absolute;top:-4px;right:-4px;font-size:8px}.menu-label{color:var(--theme-dark);font-weight:600;text-decoration:none;padding-bottom:1px;margin-left:20px;min-width:175px;white-space:normal;overflow:visible}.active-menu:not(.always-open){background-color:var(--gray-light)}.sub-menu-container .sub-menu{list-style:none;display:contents}.sub-menu-container .sub-menu .sub-menu-item{animation:showSubMenu ease-in-out .1s;animation-fill-mode:both}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(n){animation-delay:50ms}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(2n){animation-delay:.1s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(3n){animation-delay:.15s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(4n){animation-delay:.2s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(5n){animation-delay:.25s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(6n){animation-delay:.3s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(7n){animation-delay:.35s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(8n){animation-delay:.4s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(9n){animation-delay:.45s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(10n){animation-delay:.5s}.sub-menu-container .sub-menu .sub-menu-item .current-item{min-height:40px;display:flex;flex-direction:row;align-items:center;transition:background-color ease-in-out .1s;z-index:2;overflow:hidden;padding:0 10px;border-radius:15px;margin:5px 0;position:relative}.sub-menu-container .sub-menu .sub-menu-item .current-item:not(.always-open){cursor:pointer}.sub-menu-container .sub-menu .sub-menu-item .current-item:hover,.sub-menu-container .sub-menu .sub-menu-item .current-item.active{background-color:var(--gray-light)}.sub-menu-container .sub-menu .sub-menu-item .current-item.active span,.sub-menu-container .sub-menu .sub-menu-item .current-item.active i{color:#fff}@keyframes showSubMenu{0%{transform:translate(-100%)}to{transform:translate(0)}}.sub-menu-container .sub-menu .sub-menu-item .last-child .menu-label{font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SubMenusListComponent, selector: "vector-sub-menus-list", inputs: ["showList", "options", "childLevel", "submenuSelected"], outputs: ["submenuSelectedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SubMenusListComponent, selector: "vector-sub-menus-list", inputs: { showList: "showList", options: "options", childLevel: "childLevel", submenuSelected: "submenuSelected" }, outputs: { submenuSelectedChange: "submenuSelectedChange" }, ngImport: i0, template: "<div class=\"sub-menu-container\">\n  <ul *ngIf=\"showList\" class=\"sub-menu\">\n    <div *ngFor=\"let submenuItem of options\">\n      <li class=\"sub-menu-item\" [ngStyle]=\"{ 'padding-left': paddingLeft }\" (click)=\"submenuClick(submenuItem)\">\n        <div\n          class=\"current-item\"\n          [ngClass]=\"{\n            'active-menu': submenuSelected?.id === submenuItem.id,\n            'always-open': !!submenuItem.alwaysOpen,\n            'last-child': !submenuItem.children?.length\n          }\"\n          [pTooltip]=\"submenuItem.label\"\n          tooltipPosition=\"right\"\n        >\n          <div *ngIf=\"submenuItem.icon\" class=\"icon-container\">\n            <i [class]=\"submenuItem.icon\"></i>\n          </div>\n          <span class=\"menu-label\">{{ submenuItem.label }}</span>\n          <i\n            *ngIf=\"submenuItem.children?.length && !submenuItem.alwaysOpen\"\n            class=\"fas angle-icon\"\n            [ngClass]=\"{\n              'fa-angle-down': submenuSelected?.id !== submenuItem.id,\n              'fa-angle-up': submenuSelected?.id === submenuItem.id\n            }\"\n          ></i>\n        </div>\n      </li>\n      <vector-sub-menus-list\n        *ngIf=\"submenuItem?.children\"\n        [options]=\"submenuItem?.children\"\n        [showList]=\"submenuItem?.id === submenuSelected?.id || !!submenuItem?.alwaysOpen\"\n        [childLevel]=\"childLevel + 1\"\n        (submenuSelectedChange)=\"submenuClick($event)\"\n      ></vector-sub-menus-list>\n    </div>\n  </ul>\n</div>\n", styles: [".angle-icon{position:absolute;right:10px}.menu-icon{filter:brightness(0) saturate(100%) invert(14%) sepia(87%) saturate(1218%) hue-rotate(233deg) brightness(88%) contrast(90%);width:20px;height:20px}.icon-container{width:20px;height:20px;position:relative}.icon-container .menu-icon{display:flex;justify-content:center;align-items:center;font-size:1.4em}.icon-container .menu-notifications-count{padding:0 4.5px;background-color:var(--error-color);border-radius:10px;position:absolute;top:-4px;right:-4px;font-size:8px}.menu-label{color:var(--theme-dark);font-weight:600;text-decoration:none;padding-bottom:1px;margin-left:20px;min-width:175px;white-space:normal;overflow:visible}.active-menu:not(.always-open){background-color:var(--gray-light)}.sub-menu-container .sub-menu{list-style:none;display:contents}.sub-menu-container .sub-menu .sub-menu-item{animation:showSubMenu ease-in-out .1s;animation-fill-mode:both}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(n){animation-delay:50ms}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(2n){animation-delay:.1s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(3n){animation-delay:.15s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(4n){animation-delay:.2s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(5n){animation-delay:.25s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(6n){animation-delay:.3s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(7n){animation-delay:.35s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(8n){animation-delay:.4s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(9n){animation-delay:.45s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(10n){animation-delay:.5s}.sub-menu-container .sub-menu .sub-menu-item .current-item{min-height:40px;display:flex;flex-direction:row;align-items:center;transition:background-color ease-in-out .1s;z-index:2;overflow:hidden;padding:0 10px;border-radius:15px;margin:5px 0;position:relative}.sub-menu-container .sub-menu .sub-menu-item .current-item:not(.always-open){cursor:pointer}.sub-menu-container .sub-menu .sub-menu-item .current-item:hover,.sub-menu-container .sub-menu .sub-menu-item .current-item.active{background-color:var(--gray-light)}.sub-menu-container .sub-menu .sub-menu-item .current-item.active span,.sub-menu-container .sub-menu .sub-menu-item .current-item.active i{color:#fff}@keyframes showSubMenu{0%{transform:translate(-100%)}to{transform:translate(0)}}.sub-menu-container .sub-menu .sub-menu-item .last-child .menu-label{font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SubMenusListComponent, selector: "vector-sub-menus-list", inputs: ["showList", "options", "childLevel", "submenuSelected"], outputs: ["submenuSelectedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SubMenusListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-sub-menus-list', template: "<div class=\"sub-menu-container\">\r\n  <ul *ngIf=\"showList\" class=\"sub-menu\">\r\n    <div *ngFor=\"let submenuItem of options\">\r\n      <li class=\"sub-menu-item\" [ngStyle]=\"{ 'padding-left': paddingLeft }\" (click)=\"submenuClick(submenuItem)\">\r\n        <div\r\n          class=\"current-item\"\r\n          [ngClass]=\"{\r\n            'active-menu': submenuSelected?.id === submenuItem.id,\r\n            'always-open': !!submenuItem.alwaysOpen,\r\n            'last-child': !submenuItem.children?.length\r\n          }\"\r\n          [pTooltip]=\"submenuItem.label\"\r\n          tooltipPosition=\"right\"\r\n        >\r\n          <div *ngIf=\"submenuItem.icon\" class=\"icon-container\">\r\n            <i [class]=\"submenuItem.icon\"></i>\r\n          </div>\r\n          <span class=\"menu-label\">{{ submenuItem.label }}</span>\r\n          <i\r\n            *ngIf=\"submenuItem.children?.length && !submenuItem.alwaysOpen\"\r\n            class=\"fas angle-icon\"\r\n            [ngClass]=\"{\r\n              'fa-angle-down': submenuSelected?.id !== submenuItem.id,\r\n              'fa-angle-up': submenuSelected?.id === submenuItem.id\r\n            }\"\r\n          ></i>\r\n        </div>\r\n      </li>\r\n      <vector-sub-menus-list\r\n        *ngIf=\"submenuItem?.children\"\r\n        [options]=\"submenuItem?.children\"\r\n        [showList]=\"submenuItem?.id === submenuSelected?.id || !!submenuItem?.alwaysOpen\"\r\n        [childLevel]=\"childLevel + 1\"\r\n        (submenuSelectedChange)=\"submenuClick($event)\"\r\n      ></vector-sub-menus-list>\r\n    </div>\r\n  </ul>\r\n</div>\r\n", styles: [".angle-icon{position:absolute;right:10px}.menu-icon{filter:brightness(0) saturate(100%) invert(14%) sepia(87%) saturate(1218%) hue-rotate(233deg) brightness(88%) contrast(90%);width:20px;height:20px}.icon-container{width:20px;height:20px;position:relative}.icon-container .menu-icon{display:flex;justify-content:center;align-items:center;font-size:1.4em}.icon-container .menu-notifications-count{padding:0 4.5px;background-color:var(--error-color);border-radius:10px;position:absolute;top:-4px;right:-4px;font-size:8px}.menu-label{color:var(--theme-dark);font-weight:600;text-decoration:none;padding-bottom:1px;margin-left:20px;min-width:175px;white-space:normal;overflow:visible}.active-menu:not(.always-open){background-color:var(--gray-light)}.sub-menu-container .sub-menu{list-style:none;display:contents}.sub-menu-container .sub-menu .sub-menu-item{animation:showSubMenu ease-in-out .1s;animation-fill-mode:both}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(n){animation-delay:50ms}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(2n){animation-delay:.1s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(3n){animation-delay:.15s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(4n){animation-delay:.2s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(5n){animation-delay:.25s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(6n){animation-delay:.3s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(7n){animation-delay:.35s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(8n){animation-delay:.4s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(9n){animation-delay:.45s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(10n){animation-delay:.5s}.sub-menu-container .sub-menu .sub-menu-item .current-item{min-height:40px;display:flex;flex-direction:row;align-items:center;transition:background-color ease-in-out .1s;z-index:2;overflow:hidden;padding:0 10px;border-radius:15px;margin:5px 0;position:relative}.sub-menu-container .sub-menu .sub-menu-item .current-item:not(.always-open){cursor:pointer}.sub-menu-container .sub-menu .sub-menu-item .current-item:hover,.sub-menu-container .sub-menu .sub-menu-item .current-item.active{background-color:var(--gray-light)}.sub-menu-container .sub-menu .sub-menu-item .current-item.active span,.sub-menu-container .sub-menu .sub-menu-item .current-item.active i{color:#fff}@keyframes showSubMenu{0%{transform:translate(-100%)}to{transform:translate(0)}}.sub-menu-container .sub-menu .sub-menu-item .last-child .menu-label{font-weight:400}\n"] }]
+            args: [{ selector: 'vector-sub-menus-list', template: "<div class=\"sub-menu-container\">\n  <ul *ngIf=\"showList\" class=\"sub-menu\">\n    <div *ngFor=\"let submenuItem of options\">\n      <li class=\"sub-menu-item\" [ngStyle]=\"{ 'padding-left': paddingLeft }\" (click)=\"submenuClick(submenuItem)\">\n        <div\n          class=\"current-item\"\n          [ngClass]=\"{\n            'active-menu': submenuSelected?.id === submenuItem.id,\n            'always-open': !!submenuItem.alwaysOpen,\n            'last-child': !submenuItem.children?.length\n          }\"\n          [pTooltip]=\"submenuItem.label\"\n          tooltipPosition=\"right\"\n        >\n          <div *ngIf=\"submenuItem.icon\" class=\"icon-container\">\n            <i [class]=\"submenuItem.icon\"></i>\n          </div>\n          <span class=\"menu-label\">{{ submenuItem.label }}</span>\n          <i\n            *ngIf=\"submenuItem.children?.length && !submenuItem.alwaysOpen\"\n            class=\"fas angle-icon\"\n            [ngClass]=\"{\n              'fa-angle-down': submenuSelected?.id !== submenuItem.id,\n              'fa-angle-up': submenuSelected?.id === submenuItem.id\n            }\"\n          ></i>\n        </div>\n      </li>\n      <vector-sub-menus-list\n        *ngIf=\"submenuItem?.children\"\n        [options]=\"submenuItem?.children\"\n        [showList]=\"submenuItem?.id === submenuSelected?.id || !!submenuItem?.alwaysOpen\"\n        [childLevel]=\"childLevel + 1\"\n        (submenuSelectedChange)=\"submenuClick($event)\"\n      ></vector-sub-menus-list>\n    </div>\n  </ul>\n</div>\n", styles: [".angle-icon{position:absolute;right:10px}.menu-icon{filter:brightness(0) saturate(100%) invert(14%) sepia(87%) saturate(1218%) hue-rotate(233deg) brightness(88%) contrast(90%);width:20px;height:20px}.icon-container{width:20px;height:20px;position:relative}.icon-container .menu-icon{display:flex;justify-content:center;align-items:center;font-size:1.4em}.icon-container .menu-notifications-count{padding:0 4.5px;background-color:var(--error-color);border-radius:10px;position:absolute;top:-4px;right:-4px;font-size:8px}.menu-label{color:var(--theme-dark);font-weight:600;text-decoration:none;padding-bottom:1px;margin-left:20px;min-width:175px;white-space:normal;overflow:visible}.active-menu:not(.always-open){background-color:var(--gray-light)}.sub-menu-container .sub-menu{list-style:none;display:contents}.sub-menu-container .sub-menu .sub-menu-item{animation:showSubMenu ease-in-out .1s;animation-fill-mode:both}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(n){animation-delay:50ms}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(2n){animation-delay:.1s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(3n){animation-delay:.15s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(4n){animation-delay:.2s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(5n){animation-delay:.25s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(6n){animation-delay:.3s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(7n){animation-delay:.35s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(8n){animation-delay:.4s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(9n){animation-delay:.45s}.sub-menu-container .sub-menu .sub-menu-item:not(:first-child):nth-child(10n){animation-delay:.5s}.sub-menu-container .sub-menu .sub-menu-item .current-item{min-height:40px;display:flex;flex-direction:row;align-items:center;transition:background-color ease-in-out .1s;z-index:2;overflow:hidden;padding:0 10px;border-radius:15px;margin:5px 0;position:relative}.sub-menu-container .sub-menu .sub-menu-item .current-item:not(.always-open){cursor:pointer}.sub-menu-container .sub-menu .sub-menu-item .current-item:hover,.sub-menu-container .sub-menu .sub-menu-item .current-item.active{background-color:var(--gray-light)}.sub-menu-container .sub-menu .sub-menu-item .current-item.active span,.sub-menu-container .sub-menu .sub-menu-item .current-item.active i{color:#fff}@keyframes showSubMenu{0%{transform:translate(-100%)}to{transform:translate(0)}}.sub-menu-container .sub-menu .sub-menu-item .last-child .menu-label{font-weight:400}\n"] }]
         }], propDecorators: { showList: [{
                 type: Input
             }], options: [{
@@ -4524,7 +4530,7 @@ class MenuComponent {
         this.activeSubmenuOption = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: MenuComponent, deps: [{ token: MenuService }, { token: i1$1.Router }, { token: ProfileService }, { token: StorageService }, { token: ENVIRONMENT }, { token: APP_NAME }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: MenuComponent, selector: "vector-menu", inputs: { accountService: "accountService", apps: "apps" }, outputs: { onFinishMenuOptionsConfig: "onFinishMenuOptionsConfig" }, host: { listeners: { "window:resize": "onResize($event)", "document:keydown.escape": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<nav id=\"menu\" [ngStyle]=\"widthStyle\" [@sideInOut]=\"lastAnimation\">\r\n  <div class=\"header-menu\">\r\n    <div class=\"logo-container\">\r\n      <div class=\"logo\" [ngClass]=\"{ 'logo-small': !opened }\"></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"menu-sections\">\r\n    <div class=\"menu-section\">\r\n      <span [ngStyle]=\"{ opacity: opened ? 1 : 0 }\" class=\"menu-section-title\">SELE\u00C7\u00C3O DE PORTAL</span>\r\n      <ul class=\"side-menu\">\r\n        <ng-container *ngIf=\"apps.length\">\r\n          <li *ngFor=\"let app of apps\">\r\n            <div\r\n              class=\"side-menu-item\"\r\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(app.appName) }\"\r\n              (click)=\"navigateToPortal(app)\"\r\n            >\r\n              <div class=\"icon-container selected-portal-item {{ app.className }}\"></div>\r\n              <span class=\"menu-label\">{{ app.description }}</span>\r\n            </div>\r\n          </li>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!apps.length\">\r\n          <li>\r\n            <div\r\n              class=\"side-menu-item\"\r\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(appsEnum.LOGTECH) }\"\r\n              (click)=\"navigateToPortal({ appName: appsEnum.LOGTECH, isAdmin: false })\"\r\n            >\r\n              <div class=\"icon-container selected-portal-item logtech\"></div>\r\n              <span class=\"menu-label\">Cargas</span>\r\n            </div>\r\n          </li>\r\n          <li *ngIf=\"hasAnyFintechPermission\">\r\n            <div\r\n              class=\"side-menu-item\"\r\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(appsEnum.FINTECH) }\"\r\n              (click)=\"navigateToPortal({ appName: appsEnum.FINTECH, isAdmin: false })\"\r\n            >\r\n              <div class=\"icon-container selected-portal-item fintech\"></div>\r\n              <span class=\"menu-label\">Conta digital</span>\r\n            </div>\r\n          </li>\r\n          <li *ngIf=\"!production\">\r\n            <div\r\n              class=\"side-menu-item\"\r\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(appsEnum.MARKETPLACE) }\"\r\n              (click)=\"navigateToPortal({ appName: appsEnum.MARKETPLACE, isAdmin: false })\"\r\n            >\r\n              <div class=\"icon-container selected-portal-item marketplace\"></div>\r\n              <span class=\"menu-label\">Combust\u00EDvel</span>\r\n            </div>\r\n          </li>\r\n          <li *ngIf=\"adminOption && (hasFintechAdminPermission || hasMarketplaceAdminPermission)\">\r\n            <div\r\n              class=\"side-menu-item\"\r\n              [ngClass]=\"{ 'active-menu': activeOption?.id === adminOption.id }\"\r\n              (click)=\"navigateToPortal({ appName: appsEnum.FINTECH, isAdmin: true })\"\r\n            >\r\n              <div class=\"icon-container selected-portal-item admin\"></div>\r\n              <span class=\"menu-label\">Admin Fintech</span>\r\n            </div>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    <div class=\"menu-section\">\r\n      <span [ngStyle]=\"{ opacity: opened && options.length ? 1 : 0 }\" class=\"menu-section-title\">MENU</span>\r\n      <ul class=\"side-menu\">\r\n        <li *ngFor=\"let option of options\">\r\n          <div\r\n            class=\"side-menu-item\"\r\n            [ngClass]=\"{ 'active-menu': activeOption?.id === option.id, 'always-open': !!option.alwaysOpen }\"\r\n            [pTooltip]=\"option.label\"\r\n            tooltipPosition=\"right\"\r\n            (click)=\"onMenuClick(option)\"\r\n          >\r\n            <div class=\"icon-container\">\r\n              <img\r\n                *ngIf=\"option.iconFileName\"\r\n                [src]=\"'../../../../assets/icons/' + option.iconFileName + '.svg'\"\r\n                class=\"menu-icon\"\r\n              />\r\n              <i *ngIf=\"option.icon\" class=\"menu-icon {{ option.icon }}\"></i>\r\n              <span *ngIf=\"getMenuNotificationsCount(option)\" class=\"menu-notifications-count\">{{\r\n                getMenuNotificationsCount(option)\r\n              }}</span>\r\n            </div>\r\n            <span class=\"menu-label\">{{ option.label }}</span>\r\n            <i\r\n              *ngIf=\"opened && option.children?.length && !option.alwaysOpen\"\r\n              class=\"fas angle-icon\"\r\n              [ngClass]=\"{\r\n                'fa-angle-down': activeOption?.id !== option.id,\r\n                'fa-angle-up': activeOption?.id === option.id\r\n              }\"\r\n            ></i>\r\n          </div>\r\n          <vector-sub-menus-list\r\n            [options]=\"option.children\"\r\n            [showList]=\"activeOption?.id === option.id || (!!option.alwaysOpen && opened)\"\r\n            [submenuSelected]=\"activeSubmenuOption\"\r\n            (submenuSelectedChange)=\"onSubmenuClick($event)\"\r\n          ></vector-sub-menus-list>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n  <div class=\"footer side-menu-item\">\r\n    <div class=\"icon-container\">\r\n      <a>\r\n        <img src=\"../../../../assets/icons/menu_footer_icon.svg\" (click)=\"openTermsOfUse()\" class=\"menu-icon\" />\r\n      </a>\r\n    </div>\r\n    <span class=\"menu-label footer-content\">\r\n      <span> Veja nosso <a (click)=\"openTermsOfUse()\">Termo de uso</a> </span>\r\n      <span>e <a (click)=\"openTermsOfUse()\">Pol\u00EDtica de privacidade</a></span>\r\n    </span>\r\n  </div>\r\n</nav>\r\n", styles: [".angle-icon{position:absolute;right:10px}.menu-icon{filter:brightness(0) saturate(100%) invert(14%) sepia(87%) saturate(1218%) hue-rotate(233deg) brightness(88%) contrast(90%);width:20px;height:20px}.icon-container{width:20px;height:20px;position:relative}.icon-container .menu-icon{display:flex;justify-content:center;align-items:center;font-size:1.4em}.icon-container .menu-notifications-count{padding:0 4.5px;background-color:var(--error-color);border-radius:10px;position:absolute;top:-4px;right:-4px;font-size:8px}.menu-label{color:var(--theme-dark);font-weight:600;text-decoration:none;padding-bottom:1px;margin-left:20px;min-width:175px;white-space:normal;overflow:visible}.active-menu:not(.always-open){background-color:var(--gray-light)}nav{height:100vh;min-height:100vh;background-color:#fff;transition:width ease-in-out .2s;display:flex;flex-direction:column;z-index:500;position:sticky;box-shadow:2px 2px 4px #00000029}nav .header-menu{display:flex;justify-content:center;flex-direction:column;width:100%}nav .header-menu .logo-container{height:81px;padding:5px;display:flex;justify-content:center;align-items:center}nav .header-menu .logo-container .logo{background-image:url(/assets/images/vector_logo_horizontal.svg);background-repeat:no-repeat;background-position:center;height:50px;width:150px}nav .header-menu .logo-container .logo-small{background-position-y:center;background-position-x:right}nav .menu-sections{display:flex;flex-direction:column;flex:1;overflow-y:overlay;overflow-x:hidden}nav .menu-sections::-webkit-scrollbar{width:4px}nav .menu-sections .menu-section{margin:5px 10px 0}nav .menu-sections .menu-section:first-child{border-bottom:1px solid var(--gray-light)}nav .menu-sections .menu-section .menu-section-title{color:var(--gray-dark);font-weight:500;font-size:.8em;padding-left:10px;white-space:nowrap;transition:opacity .2s ease-in-out}nav .menu-sections .menu-section .side-menu{padding:0;margin:0;list-style:none;overflow-x:hidden;overflow-y:scroll;-ms-overflow-style:none}nav .menu-sections .menu-section .side-menu::-webkit-scrollbar{display:none}@media screen and (max-width: 650px){nav .menu-sections .menu-section .side-menu{background-size:120px;background-position:20px}}nav .menu-sections .menu-section .side-menu-item{min-height:40px;display:flex;flex-direction:row;align-items:center;transition:background-color ease-in-out .1s;z-index:2;overflow:hidden;padding:0 10px;border-radius:15px;margin:5px 0;position:relative}nav .menu-sections .menu-section .side-menu-item:not(.always-open){cursor:pointer}nav .menu-sections .menu-section .side-menu-item:hover{background-color:var(--gray-light)}nav .menu-sections .menu-section .side-menu-item.active{background-color:var(--gray-light)}nav .menu-sections .menu-section .side-menu-item.active span{color:#fff}nav .menu-sections .menu-section .side-menu-item.active i{color:#fff}nav .menu-sections .menu-section .fintech{-webkit-mask-image:url(../../../../assets/icons/vector_fintech_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_fintech_icon.svg);-o-prop:url(../../../../assets/icons/vector_fintech_icon.svg)}nav .menu-sections .menu-section .logtech{-webkit-mask-image:url(../../../../assets/icons/vector_logtech_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_logtech_icon.svg);-o-prop:url(../../../../assets/icons/vector_logtech_icon.svg)}nav .menu-sections .menu-section .marketplace{-webkit-mask-image:url(../../../../assets/icons/vector_marketplace_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_marketplace_icon.svg);-o-prop:url(../../../../assets/icons/vector_marketplace_icon.svg)}nav .menu-sections .menu-section .admin{-webkit-mask-image:url(../../../../assets/icons/vector_admin_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_admin_icon.svg);-o-prop:url(../../../../assets/icons/vector_admin_icon.svg)}nav .menu-sections .menu-section .selected-portal-item{-webkit-mask-size:contain;-moz-mask-size:contain;-o-prop:contain;background-color:var(--form-labels-color)}nav .menu-sections .menu-section .selected-portal-item:before{content:\"\";width:20px;height:20px;display:block}nav .menu-sections .menu-section .selected-portal{background-color:var(--gray-light);border-radius:15px}nav .menu-sections .menu-section .selected-portal .icon-container{-webkit-mask-size:contain;-moz-mask-size:contain;-o-prop:contain}nav .menu-sections .menu-section .selected-portal .icon-container .menu-icon{filter:invert(35%) sepia(100%) saturate(5659%) hue-rotate(210deg) brightness(87%) contrast(118%)}nav .menu-sections .menu-section .selected-portal .selected-portal-item{background-color:var(--theme-primary)}nav .menu-sections .menu-section .selected-portal .marketplace .menu-label{color:var(--success-color)}nav .menu-sections .menu-section .selected-portal .menu-label{color:var(--theme-primary)}nav .footer{display:flex;align-items:center;padding:10px;margin:0 10px;border-top:1px solid var(--gray-light);overflow:hidden;height:50px}nav .footer .footer-icon{width:50px}nav .footer .footer-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;font-size:.8em;text-overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SubMenusListComponent, selector: "vector-sub-menus-list", inputs: ["showList", "options", "childLevel", "submenuSelected"], outputs: ["submenuSelectedChange"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: MenuComponent, selector: "vector-menu", inputs: { accountService: "accountService", apps: "apps" }, outputs: { onFinishMenuOptionsConfig: "onFinishMenuOptionsConfig" }, host: { listeners: { "window:resize": "onResize($event)", "document:keydown.escape": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<nav id=\"menu\" [ngStyle]=\"widthStyle\" [@sideInOut]=\"lastAnimation\">\n  <div class=\"header-menu\">\n    <div class=\"logo-container\">\n      <div class=\"logo\" [ngClass]=\"{ 'logo-small': !opened }\"></div>\n    </div>\n  </div>\n  <div class=\"menu-sections\">\n    <div class=\"menu-section\">\n      <span [ngStyle]=\"{ opacity: opened ? 1 : 0 }\" class=\"menu-section-title\">SELE\u00C7\u00C3O DE PORTAL</span>\n      <ul class=\"side-menu\">\n        <ng-container *ngIf=\"apps.length\">\n          <li *ngFor=\"let app of apps\">\n            <div\n              class=\"side-menu-item\"\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(app.appName) }\"\n              (click)=\"navigateToPortal(app)\"\n            >\n              <div class=\"icon-container selected-portal-item {{ app.className }}\"></div>\n              <span class=\"menu-label\">{{ app.description }}</span>\n            </div>\n          </li>\n        </ng-container>\n        <ng-container *ngIf=\"!apps.length\">\n          <li>\n            <div\n              class=\"side-menu-item\"\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(appsEnum.LOGTECH) }\"\n              (click)=\"navigateToPortal({ appName: appsEnum.LOGTECH, isAdmin: false })\"\n            >\n              <div class=\"icon-container selected-portal-item logtech\"></div>\n              <span class=\"menu-label\">Cargas</span>\n            </div>\n          </li>\n          <li *ngIf=\"hasAnyFintechPermission\">\n            <div\n              class=\"side-menu-item\"\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(appsEnum.FINTECH) }\"\n              (click)=\"navigateToPortal({ appName: appsEnum.FINTECH, isAdmin: false })\"\n            >\n              <div class=\"icon-container selected-portal-item fintech\"></div>\n              <span class=\"menu-label\">Conta digital</span>\n            </div>\n          </li>\n          <li *ngIf=\"!production\">\n            <div\n              class=\"side-menu-item\"\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(appsEnum.MARKETPLACE) }\"\n              (click)=\"navigateToPortal({ appName: appsEnum.MARKETPLACE, isAdmin: false })\"\n            >\n              <div class=\"icon-container selected-portal-item marketplace\"></div>\n              <span class=\"menu-label\">Combust\u00EDvel</span>\n            </div>\n          </li>\n          <li *ngIf=\"adminOption && (hasFintechAdminPermission || hasMarketplaceAdminPermission)\">\n            <div\n              class=\"side-menu-item\"\n              [ngClass]=\"{ 'active-menu': activeOption?.id === adminOption.id }\"\n              (click)=\"navigateToPortal({ appName: appsEnum.FINTECH, isAdmin: true })\"\n            >\n              <div class=\"icon-container selected-portal-item admin\"></div>\n              <span class=\"menu-label\">Admin Fintech</span>\n            </div>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n    <div class=\"menu-section\">\n      <span [ngStyle]=\"{ opacity: opened && options.length ? 1 : 0 }\" class=\"menu-section-title\">MENU</span>\n      <ul class=\"side-menu\">\n        <li *ngFor=\"let option of options\">\n          <div\n            class=\"side-menu-item\"\n            [ngClass]=\"{ 'active-menu': activeOption?.id === option.id, 'always-open': !!option.alwaysOpen }\"\n            [pTooltip]=\"option.label\"\n            tooltipPosition=\"right\"\n            (click)=\"onMenuClick(option)\"\n          >\n            <div class=\"icon-container\">\n              <img\n                *ngIf=\"option.iconFileName\"\n                [src]=\"'../../../../assets/icons/' + option.iconFileName + '.svg'\"\n                class=\"menu-icon\"\n              />\n              <i *ngIf=\"option.icon\" class=\"menu-icon {{ option.icon }}\"></i>\n              <span *ngIf=\"getMenuNotificationsCount(option)\" class=\"menu-notifications-count\">{{\n                getMenuNotificationsCount(option)\n              }}</span>\n            </div>\n            <span class=\"menu-label\">{{ option.label }}</span>\n            <i\n              *ngIf=\"opened && option.children?.length && !option.alwaysOpen\"\n              class=\"fas angle-icon\"\n              [ngClass]=\"{\n                'fa-angle-down': activeOption?.id !== option.id,\n                'fa-angle-up': activeOption?.id === option.id\n              }\"\n            ></i>\n          </div>\n          <vector-sub-menus-list\n            [options]=\"option.children\"\n            [showList]=\"activeOption?.id === option.id || (!!option.alwaysOpen && opened)\"\n            [submenuSelected]=\"activeSubmenuOption\"\n            (submenuSelectedChange)=\"onSubmenuClick($event)\"\n          ></vector-sub-menus-list>\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div class=\"footer side-menu-item\">\n    <div class=\"icon-container\">\n      <a>\n        <img src=\"../../../../assets/icons/menu_footer_icon.svg\" (click)=\"openTermsOfUse()\" class=\"menu-icon\" />\n      </a>\n    </div>\n    <span class=\"menu-label footer-content\">\n      <span> Veja nosso <a (click)=\"openTermsOfUse()\">Termo de uso</a> </span>\n      <span>e <a (click)=\"openTermsOfUse()\">Pol\u00EDtica de privacidade</a></span>\n    </span>\n  </div>\n</nav>\n", styles: [".angle-icon{position:absolute;right:10px}.menu-icon{filter:brightness(0) saturate(100%) invert(14%) sepia(87%) saturate(1218%) hue-rotate(233deg) brightness(88%) contrast(90%);width:20px;height:20px}.icon-container{width:20px;height:20px;position:relative}.icon-container .menu-icon{display:flex;justify-content:center;align-items:center;font-size:1.4em}.icon-container .menu-notifications-count{padding:0 4.5px;background-color:var(--error-color);border-radius:10px;position:absolute;top:-4px;right:-4px;font-size:8px}.menu-label{color:var(--theme-dark);font-weight:600;text-decoration:none;padding-bottom:1px;margin-left:20px;min-width:175px;white-space:normal;overflow:visible}.active-menu:not(.always-open){background-color:var(--gray-light)}nav{height:100vh;min-height:100vh;background-color:#fff;transition:width ease-in-out .2s;display:flex;flex-direction:column;z-index:500;position:sticky;box-shadow:2px 2px 4px #00000029}nav .header-menu{display:flex;justify-content:center;flex-direction:column;width:100%}nav .header-menu .logo-container{height:81px;padding:5px;display:flex;justify-content:center;align-items:center}nav .header-menu .logo-container .logo{background-image:url(/assets/images/vector_logo_horizontal.svg);background-repeat:no-repeat;background-position:center;height:50px;width:150px}nav .header-menu .logo-container .logo-small{background-position-y:center;background-position-x:right}nav .menu-sections{display:flex;flex-direction:column;flex:1;overflow-y:overlay;overflow-x:hidden}nav .menu-sections::-webkit-scrollbar{width:4px}nav .menu-sections .menu-section{margin:5px 10px 0}nav .menu-sections .menu-section:first-child{border-bottom:1px solid var(--gray-light)}nav .menu-sections .menu-section .menu-section-title{color:var(--gray-dark);font-weight:500;font-size:.8em;padding-left:10px;white-space:nowrap;transition:opacity .2s ease-in-out}nav .menu-sections .menu-section .side-menu{padding:0;margin:0;list-style:none;overflow-x:hidden;overflow-y:scroll;-ms-overflow-style:none}nav .menu-sections .menu-section .side-menu::-webkit-scrollbar{display:none}@media screen and (max-width: 650px){nav .menu-sections .menu-section .side-menu{background-size:120px;background-position:20px}}nav .menu-sections .menu-section .side-menu-item{min-height:40px;display:flex;flex-direction:row;align-items:center;transition:background-color ease-in-out .1s;z-index:2;overflow:hidden;padding:0 10px;border-radius:15px;margin:5px 0;position:relative}nav .menu-sections .menu-section .side-menu-item:not(.always-open){cursor:pointer}nav .menu-sections .menu-section .side-menu-item:hover{background-color:var(--gray-light)}nav .menu-sections .menu-section .side-menu-item.active{background-color:var(--gray-light)}nav .menu-sections .menu-section .side-menu-item.active span{color:#fff}nav .menu-sections .menu-section .side-menu-item.active i{color:#fff}nav .menu-sections .menu-section .fintech{-webkit-mask-image:url(../../../../assets/icons/vector_fintech_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_fintech_icon.svg);-o-prop:url(../../../../assets/icons/vector_fintech_icon.svg)}nav .menu-sections .menu-section .logtech{-webkit-mask-image:url(../../../../assets/icons/vector_logtech_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_logtech_icon.svg);-o-prop:url(../../../../assets/icons/vector_logtech_icon.svg)}nav .menu-sections .menu-section .marketplace{-webkit-mask-image:url(../../../../assets/icons/vector_marketplace_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_marketplace_icon.svg);-o-prop:url(../../../../assets/icons/vector_marketplace_icon.svg)}nav .menu-sections .menu-section .admin{-webkit-mask-image:url(../../../../assets/icons/vector_admin_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_admin_icon.svg);-o-prop:url(../../../../assets/icons/vector_admin_icon.svg)}nav .menu-sections .menu-section .selected-portal-item{-webkit-mask-size:contain;-moz-mask-size:contain;-o-prop:contain;background-color:var(--form-labels-color)}nav .menu-sections .menu-section .selected-portal-item:before{content:\"\";width:20px;height:20px;display:block}nav .menu-sections .menu-section .selected-portal{background-color:var(--gray-light);border-radius:15px}nav .menu-sections .menu-section .selected-portal .icon-container{-webkit-mask-size:contain;-moz-mask-size:contain;-o-prop:contain}nav .menu-sections .menu-section .selected-portal .icon-container .menu-icon{filter:invert(35%) sepia(100%) saturate(5659%) hue-rotate(210deg) brightness(87%) contrast(118%)}nav .menu-sections .menu-section .selected-portal .selected-portal-item{background-color:var(--theme-primary)}nav .menu-sections .menu-section .selected-portal .marketplace .menu-label{color:var(--success-color)}nav .menu-sections .menu-section .selected-portal .menu-label{color:var(--theme-primary)}nav .footer{display:flex;align-items:center;padding:10px;margin:0 10px;border-top:1px solid var(--gray-light);overflow:hidden;height:50px}nav .footer .footer-icon{width:50px}nav .footer .footer-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;font-size:.8em;text-overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: SubMenusListComponent, selector: "vector-sub-menus-list", inputs: ["showList", "options", "childLevel", "submenuSelected"], outputs: ["submenuSelectedChange"] }], animations: [
             trigger('sideInOut', [state('in', style({ width: '60px' })), state('out', style({ width: '250px' }))]),
             trigger('fadeInOut', [
                 state('0', style({
@@ -4606,7 +4612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                             })),
                             transition('0 <=> 1', animate('350ms ease-in-out')),
                         ]),
-                    ], template: "<nav id=\"menu\" [ngStyle]=\"widthStyle\" [@sideInOut]=\"lastAnimation\">\r\n  <div class=\"header-menu\">\r\n    <div class=\"logo-container\">\r\n      <div class=\"logo\" [ngClass]=\"{ 'logo-small': !opened }\"></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"menu-sections\">\r\n    <div class=\"menu-section\">\r\n      <span [ngStyle]=\"{ opacity: opened ? 1 : 0 }\" class=\"menu-section-title\">SELE\u00C7\u00C3O DE PORTAL</span>\r\n      <ul class=\"side-menu\">\r\n        <ng-container *ngIf=\"apps.length\">\r\n          <li *ngFor=\"let app of apps\">\r\n            <div\r\n              class=\"side-menu-item\"\r\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(app.appName) }\"\r\n              (click)=\"navigateToPortal(app)\"\r\n            >\r\n              <div class=\"icon-container selected-portal-item {{ app.className }}\"></div>\r\n              <span class=\"menu-label\">{{ app.description }}</span>\r\n            </div>\r\n          </li>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!apps.length\">\r\n          <li>\r\n            <div\r\n              class=\"side-menu-item\"\r\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(appsEnum.LOGTECH) }\"\r\n              (click)=\"navigateToPortal({ appName: appsEnum.LOGTECH, isAdmin: false })\"\r\n            >\r\n              <div class=\"icon-container selected-portal-item logtech\"></div>\r\n              <span class=\"menu-label\">Cargas</span>\r\n            </div>\r\n          </li>\r\n          <li *ngIf=\"hasAnyFintechPermission\">\r\n            <div\r\n              class=\"side-menu-item\"\r\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(appsEnum.FINTECH) }\"\r\n              (click)=\"navigateToPortal({ appName: appsEnum.FINTECH, isAdmin: false })\"\r\n            >\r\n              <div class=\"icon-container selected-portal-item fintech\"></div>\r\n              <span class=\"menu-label\">Conta digital</span>\r\n            </div>\r\n          </li>\r\n          <li *ngIf=\"!production\">\r\n            <div\r\n              class=\"side-menu-item\"\r\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(appsEnum.MARKETPLACE) }\"\r\n              (click)=\"navigateToPortal({ appName: appsEnum.MARKETPLACE, isAdmin: false })\"\r\n            >\r\n              <div class=\"icon-container selected-portal-item marketplace\"></div>\r\n              <span class=\"menu-label\">Combust\u00EDvel</span>\r\n            </div>\r\n          </li>\r\n          <li *ngIf=\"adminOption && (hasFintechAdminPermission || hasMarketplaceAdminPermission)\">\r\n            <div\r\n              class=\"side-menu-item\"\r\n              [ngClass]=\"{ 'active-menu': activeOption?.id === adminOption.id }\"\r\n              (click)=\"navigateToPortal({ appName: appsEnum.FINTECH, isAdmin: true })\"\r\n            >\r\n              <div class=\"icon-container selected-portal-item admin\"></div>\r\n              <span class=\"menu-label\">Admin Fintech</span>\r\n            </div>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    <div class=\"menu-section\">\r\n      <span [ngStyle]=\"{ opacity: opened && options.length ? 1 : 0 }\" class=\"menu-section-title\">MENU</span>\r\n      <ul class=\"side-menu\">\r\n        <li *ngFor=\"let option of options\">\r\n          <div\r\n            class=\"side-menu-item\"\r\n            [ngClass]=\"{ 'active-menu': activeOption?.id === option.id, 'always-open': !!option.alwaysOpen }\"\r\n            [pTooltip]=\"option.label\"\r\n            tooltipPosition=\"right\"\r\n            (click)=\"onMenuClick(option)\"\r\n          >\r\n            <div class=\"icon-container\">\r\n              <img\r\n                *ngIf=\"option.iconFileName\"\r\n                [src]=\"'../../../../assets/icons/' + option.iconFileName + '.svg'\"\r\n                class=\"menu-icon\"\r\n              />\r\n              <i *ngIf=\"option.icon\" class=\"menu-icon {{ option.icon }}\"></i>\r\n              <span *ngIf=\"getMenuNotificationsCount(option)\" class=\"menu-notifications-count\">{{\r\n                getMenuNotificationsCount(option)\r\n              }}</span>\r\n            </div>\r\n            <span class=\"menu-label\">{{ option.label }}</span>\r\n            <i\r\n              *ngIf=\"opened && option.children?.length && !option.alwaysOpen\"\r\n              class=\"fas angle-icon\"\r\n              [ngClass]=\"{\r\n                'fa-angle-down': activeOption?.id !== option.id,\r\n                'fa-angle-up': activeOption?.id === option.id\r\n              }\"\r\n            ></i>\r\n          </div>\r\n          <vector-sub-menus-list\r\n            [options]=\"option.children\"\r\n            [showList]=\"activeOption?.id === option.id || (!!option.alwaysOpen && opened)\"\r\n            [submenuSelected]=\"activeSubmenuOption\"\r\n            (submenuSelectedChange)=\"onSubmenuClick($event)\"\r\n          ></vector-sub-menus-list>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n  <div class=\"footer side-menu-item\">\r\n    <div class=\"icon-container\">\r\n      <a>\r\n        <img src=\"../../../../assets/icons/menu_footer_icon.svg\" (click)=\"openTermsOfUse()\" class=\"menu-icon\" />\r\n      </a>\r\n    </div>\r\n    <span class=\"menu-label footer-content\">\r\n      <span> Veja nosso <a (click)=\"openTermsOfUse()\">Termo de uso</a> </span>\r\n      <span>e <a (click)=\"openTermsOfUse()\">Pol\u00EDtica de privacidade</a></span>\r\n    </span>\r\n  </div>\r\n</nav>\r\n", styles: [".angle-icon{position:absolute;right:10px}.menu-icon{filter:brightness(0) saturate(100%) invert(14%) sepia(87%) saturate(1218%) hue-rotate(233deg) brightness(88%) contrast(90%);width:20px;height:20px}.icon-container{width:20px;height:20px;position:relative}.icon-container .menu-icon{display:flex;justify-content:center;align-items:center;font-size:1.4em}.icon-container .menu-notifications-count{padding:0 4.5px;background-color:var(--error-color);border-radius:10px;position:absolute;top:-4px;right:-4px;font-size:8px}.menu-label{color:var(--theme-dark);font-weight:600;text-decoration:none;padding-bottom:1px;margin-left:20px;min-width:175px;white-space:normal;overflow:visible}.active-menu:not(.always-open){background-color:var(--gray-light)}nav{height:100vh;min-height:100vh;background-color:#fff;transition:width ease-in-out .2s;display:flex;flex-direction:column;z-index:500;position:sticky;box-shadow:2px 2px 4px #00000029}nav .header-menu{display:flex;justify-content:center;flex-direction:column;width:100%}nav .header-menu .logo-container{height:81px;padding:5px;display:flex;justify-content:center;align-items:center}nav .header-menu .logo-container .logo{background-image:url(/assets/images/vector_logo_horizontal.svg);background-repeat:no-repeat;background-position:center;height:50px;width:150px}nav .header-menu .logo-container .logo-small{background-position-y:center;background-position-x:right}nav .menu-sections{display:flex;flex-direction:column;flex:1;overflow-y:overlay;overflow-x:hidden}nav .menu-sections::-webkit-scrollbar{width:4px}nav .menu-sections .menu-section{margin:5px 10px 0}nav .menu-sections .menu-section:first-child{border-bottom:1px solid var(--gray-light)}nav .menu-sections .menu-section .menu-section-title{color:var(--gray-dark);font-weight:500;font-size:.8em;padding-left:10px;white-space:nowrap;transition:opacity .2s ease-in-out}nav .menu-sections .menu-section .side-menu{padding:0;margin:0;list-style:none;overflow-x:hidden;overflow-y:scroll;-ms-overflow-style:none}nav .menu-sections .menu-section .side-menu::-webkit-scrollbar{display:none}@media screen and (max-width: 650px){nav .menu-sections .menu-section .side-menu{background-size:120px;background-position:20px}}nav .menu-sections .menu-section .side-menu-item{min-height:40px;display:flex;flex-direction:row;align-items:center;transition:background-color ease-in-out .1s;z-index:2;overflow:hidden;padding:0 10px;border-radius:15px;margin:5px 0;position:relative}nav .menu-sections .menu-section .side-menu-item:not(.always-open){cursor:pointer}nav .menu-sections .menu-section .side-menu-item:hover{background-color:var(--gray-light)}nav .menu-sections .menu-section .side-menu-item.active{background-color:var(--gray-light)}nav .menu-sections .menu-section .side-menu-item.active span{color:#fff}nav .menu-sections .menu-section .side-menu-item.active i{color:#fff}nav .menu-sections .menu-section .fintech{-webkit-mask-image:url(../../../../assets/icons/vector_fintech_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_fintech_icon.svg);-o-prop:url(../../../../assets/icons/vector_fintech_icon.svg)}nav .menu-sections .menu-section .logtech{-webkit-mask-image:url(../../../../assets/icons/vector_logtech_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_logtech_icon.svg);-o-prop:url(../../../../assets/icons/vector_logtech_icon.svg)}nav .menu-sections .menu-section .marketplace{-webkit-mask-image:url(../../../../assets/icons/vector_marketplace_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_marketplace_icon.svg);-o-prop:url(../../../../assets/icons/vector_marketplace_icon.svg)}nav .menu-sections .menu-section .admin{-webkit-mask-image:url(../../../../assets/icons/vector_admin_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_admin_icon.svg);-o-prop:url(../../../../assets/icons/vector_admin_icon.svg)}nav .menu-sections .menu-section .selected-portal-item{-webkit-mask-size:contain;-moz-mask-size:contain;-o-prop:contain;background-color:var(--form-labels-color)}nav .menu-sections .menu-section .selected-portal-item:before{content:\"\";width:20px;height:20px;display:block}nav .menu-sections .menu-section .selected-portal{background-color:var(--gray-light);border-radius:15px}nav .menu-sections .menu-section .selected-portal .icon-container{-webkit-mask-size:contain;-moz-mask-size:contain;-o-prop:contain}nav .menu-sections .menu-section .selected-portal .icon-container .menu-icon{filter:invert(35%) sepia(100%) saturate(5659%) hue-rotate(210deg) brightness(87%) contrast(118%)}nav .menu-sections .menu-section .selected-portal .selected-portal-item{background-color:var(--theme-primary)}nav .menu-sections .menu-section .selected-portal .marketplace .menu-label{color:var(--success-color)}nav .menu-sections .menu-section .selected-portal .menu-label{color:var(--theme-primary)}nav .footer{display:flex;align-items:center;padding:10px;margin:0 10px;border-top:1px solid var(--gray-light);overflow:hidden;height:50px}nav .footer .footer-icon{width:50px}nav .footer .footer-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;font-size:.8em;text-overflow:hidden;white-space:nowrap}\n"] }]
+                    ], template: "<nav id=\"menu\" [ngStyle]=\"widthStyle\" [@sideInOut]=\"lastAnimation\">\n  <div class=\"header-menu\">\n    <div class=\"logo-container\">\n      <div class=\"logo\" [ngClass]=\"{ 'logo-small': !opened }\"></div>\n    </div>\n  </div>\n  <div class=\"menu-sections\">\n    <div class=\"menu-section\">\n      <span [ngStyle]=\"{ opacity: opened ? 1 : 0 }\" class=\"menu-section-title\">SELE\u00C7\u00C3O DE PORTAL</span>\n      <ul class=\"side-menu\">\n        <ng-container *ngIf=\"apps.length\">\n          <li *ngFor=\"let app of apps\">\n            <div\n              class=\"side-menu-item\"\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(app.appName) }\"\n              (click)=\"navigateToPortal(app)\"\n            >\n              <div class=\"icon-container selected-portal-item {{ app.className }}\"></div>\n              <span class=\"menu-label\">{{ app.description }}</span>\n            </div>\n          </li>\n        </ng-container>\n        <ng-container *ngIf=\"!apps.length\">\n          <li>\n            <div\n              class=\"side-menu-item\"\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(appsEnum.LOGTECH) }\"\n              (click)=\"navigateToPortal({ appName: appsEnum.LOGTECH, isAdmin: false })\"\n            >\n              <div class=\"icon-container selected-portal-item logtech\"></div>\n              <span class=\"menu-label\">Cargas</span>\n            </div>\n          </li>\n          <li *ngIf=\"hasAnyFintechPermission\">\n            <div\n              class=\"side-menu-item\"\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(appsEnum.FINTECH) }\"\n              (click)=\"navigateToPortal({ appName: appsEnum.FINTECH, isAdmin: false })\"\n            >\n              <div class=\"icon-container selected-portal-item fintech\"></div>\n              <span class=\"menu-label\">Conta digital</span>\n            </div>\n          </li>\n          <li *ngIf=\"!production\">\n            <div\n              class=\"side-menu-item\"\n              [ngClass]=\"{ 'selected-portal': isPortalSelected(appsEnum.MARKETPLACE) }\"\n              (click)=\"navigateToPortal({ appName: appsEnum.MARKETPLACE, isAdmin: false })\"\n            >\n              <div class=\"icon-container selected-portal-item marketplace\"></div>\n              <span class=\"menu-label\">Combust\u00EDvel</span>\n            </div>\n          </li>\n          <li *ngIf=\"adminOption && (hasFintechAdminPermission || hasMarketplaceAdminPermission)\">\n            <div\n              class=\"side-menu-item\"\n              [ngClass]=\"{ 'active-menu': activeOption?.id === adminOption.id }\"\n              (click)=\"navigateToPortal({ appName: appsEnum.FINTECH, isAdmin: true })\"\n            >\n              <div class=\"icon-container selected-portal-item admin\"></div>\n              <span class=\"menu-label\">Admin Fintech</span>\n            </div>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n    <div class=\"menu-section\">\n      <span [ngStyle]=\"{ opacity: opened && options.length ? 1 : 0 }\" class=\"menu-section-title\">MENU</span>\n      <ul class=\"side-menu\">\n        <li *ngFor=\"let option of options\">\n          <div\n            class=\"side-menu-item\"\n            [ngClass]=\"{ 'active-menu': activeOption?.id === option.id, 'always-open': !!option.alwaysOpen }\"\n            [pTooltip]=\"option.label\"\n            tooltipPosition=\"right\"\n            (click)=\"onMenuClick(option)\"\n          >\n            <div class=\"icon-container\">\n              <img\n                *ngIf=\"option.iconFileName\"\n                [src]=\"'../../../../assets/icons/' + option.iconFileName + '.svg'\"\n                class=\"menu-icon\"\n              />\n              <i *ngIf=\"option.icon\" class=\"menu-icon {{ option.icon }}\"></i>\n              <span *ngIf=\"getMenuNotificationsCount(option)\" class=\"menu-notifications-count\">{{\n                getMenuNotificationsCount(option)\n              }}</span>\n            </div>\n            <span class=\"menu-label\">{{ option.label }}</span>\n            <i\n              *ngIf=\"opened && option.children?.length && !option.alwaysOpen\"\n              class=\"fas angle-icon\"\n              [ngClass]=\"{\n                'fa-angle-down': activeOption?.id !== option.id,\n                'fa-angle-up': activeOption?.id === option.id\n              }\"\n            ></i>\n          </div>\n          <vector-sub-menus-list\n            [options]=\"option.children\"\n            [showList]=\"activeOption?.id === option.id || (!!option.alwaysOpen && opened)\"\n            [submenuSelected]=\"activeSubmenuOption\"\n            (submenuSelectedChange)=\"onSubmenuClick($event)\"\n          ></vector-sub-menus-list>\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div class=\"footer side-menu-item\">\n    <div class=\"icon-container\">\n      <a>\n        <img src=\"../../../../assets/icons/menu_footer_icon.svg\" (click)=\"openTermsOfUse()\" class=\"menu-icon\" />\n      </a>\n    </div>\n    <span class=\"menu-label footer-content\">\n      <span> Veja nosso <a (click)=\"openTermsOfUse()\">Termo de uso</a> </span>\n      <span>e <a (click)=\"openTermsOfUse()\">Pol\u00EDtica de privacidade</a></span>\n    </span>\n  </div>\n</nav>\n", styles: [".angle-icon{position:absolute;right:10px}.menu-icon{filter:brightness(0) saturate(100%) invert(14%) sepia(87%) saturate(1218%) hue-rotate(233deg) brightness(88%) contrast(90%);width:20px;height:20px}.icon-container{width:20px;height:20px;position:relative}.icon-container .menu-icon{display:flex;justify-content:center;align-items:center;font-size:1.4em}.icon-container .menu-notifications-count{padding:0 4.5px;background-color:var(--error-color);border-radius:10px;position:absolute;top:-4px;right:-4px;font-size:8px}.menu-label{color:var(--theme-dark);font-weight:600;text-decoration:none;padding-bottom:1px;margin-left:20px;min-width:175px;white-space:normal;overflow:visible}.active-menu:not(.always-open){background-color:var(--gray-light)}nav{height:100vh;min-height:100vh;background-color:#fff;transition:width ease-in-out .2s;display:flex;flex-direction:column;z-index:500;position:sticky;box-shadow:2px 2px 4px #00000029}nav .header-menu{display:flex;justify-content:center;flex-direction:column;width:100%}nav .header-menu .logo-container{height:81px;padding:5px;display:flex;justify-content:center;align-items:center}nav .header-menu .logo-container .logo{background-image:url(/assets/images/vector_logo_horizontal.svg);background-repeat:no-repeat;background-position:center;height:50px;width:150px}nav .header-menu .logo-container .logo-small{background-position-y:center;background-position-x:right}nav .menu-sections{display:flex;flex-direction:column;flex:1;overflow-y:overlay;overflow-x:hidden}nav .menu-sections::-webkit-scrollbar{width:4px}nav .menu-sections .menu-section{margin:5px 10px 0}nav .menu-sections .menu-section:first-child{border-bottom:1px solid var(--gray-light)}nav .menu-sections .menu-section .menu-section-title{color:var(--gray-dark);font-weight:500;font-size:.8em;padding-left:10px;white-space:nowrap;transition:opacity .2s ease-in-out}nav .menu-sections .menu-section .side-menu{padding:0;margin:0;list-style:none;overflow-x:hidden;overflow-y:scroll;-ms-overflow-style:none}nav .menu-sections .menu-section .side-menu::-webkit-scrollbar{display:none}@media screen and (max-width: 650px){nav .menu-sections .menu-section .side-menu{background-size:120px;background-position:20px}}nav .menu-sections .menu-section .side-menu-item{min-height:40px;display:flex;flex-direction:row;align-items:center;transition:background-color ease-in-out .1s;z-index:2;overflow:hidden;padding:0 10px;border-radius:15px;margin:5px 0;position:relative}nav .menu-sections .menu-section .side-menu-item:not(.always-open){cursor:pointer}nav .menu-sections .menu-section .side-menu-item:hover{background-color:var(--gray-light)}nav .menu-sections .menu-section .side-menu-item.active{background-color:var(--gray-light)}nav .menu-sections .menu-section .side-menu-item.active span{color:#fff}nav .menu-sections .menu-section .side-menu-item.active i{color:#fff}nav .menu-sections .menu-section .fintech{-webkit-mask-image:url(../../../../assets/icons/vector_fintech_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_fintech_icon.svg);-o-prop:url(../../../../assets/icons/vector_fintech_icon.svg)}nav .menu-sections .menu-section .logtech{-webkit-mask-image:url(../../../../assets/icons/vector_logtech_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_logtech_icon.svg);-o-prop:url(../../../../assets/icons/vector_logtech_icon.svg)}nav .menu-sections .menu-section .marketplace{-webkit-mask-image:url(../../../../assets/icons/vector_marketplace_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_marketplace_icon.svg);-o-prop:url(../../../../assets/icons/vector_marketplace_icon.svg)}nav .menu-sections .menu-section .admin{-webkit-mask-image:url(../../../../assets/icons/vector_admin_icon.svg);-moz-mask-image:url(../../../../assets/icons/vector_admin_icon.svg);-o-prop:url(../../../../assets/icons/vector_admin_icon.svg)}nav .menu-sections .menu-section .selected-portal-item{-webkit-mask-size:contain;-moz-mask-size:contain;-o-prop:contain;background-color:var(--form-labels-color)}nav .menu-sections .menu-section .selected-portal-item:before{content:\"\";width:20px;height:20px;display:block}nav .menu-sections .menu-section .selected-portal{background-color:var(--gray-light);border-radius:15px}nav .menu-sections .menu-section .selected-portal .icon-container{-webkit-mask-size:contain;-moz-mask-size:contain;-o-prop:contain}nav .menu-sections .menu-section .selected-portal .icon-container .menu-icon{filter:invert(35%) sepia(100%) saturate(5659%) hue-rotate(210deg) brightness(87%) contrast(118%)}nav .menu-sections .menu-section .selected-portal .selected-portal-item{background-color:var(--theme-primary)}nav .menu-sections .menu-section .selected-portal .marketplace .menu-label{color:var(--success-color)}nav .menu-sections .menu-section .selected-portal .menu-label{color:var(--theme-primary)}nav .footer{display:flex;align-items:center;padding:10px;margin:0 10px;border-top:1px solid var(--gray-light);overflow:hidden;height:50px}nav .footer .footer-icon{width:50px}nav .footer .footer-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;font-size:.8em;text-overflow:hidden;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: MenuService }, { type: i1$1.Router }, { type: ProfileService }, { type: StorageService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -4670,11 +4676,11 @@ class StepperComponent {
         this.activeIndexChange.emit(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: StepperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: StepperComponent, selector: "vector-stepper", inputs: { steps: "steps", navigable: "navigable", activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange" }, ngImport: i0, template: "<div class=\"wrapper\">\r\n  <p-steps\r\n    [model]=\"steps\"\r\n    [readonly]=\"!navigable\"\r\n    [activeIndex]=\"activeIndex\"\r\n    (activeIndexChange)=\"onActiveIndexChange($event)\"\r\n  >\r\n    ></p-steps\r\n  >\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: i1$7.Steps, selector: "p-steps", inputs: ["activeIndex", "model", "readonly", "style", "styleClass", "exact"], outputs: ["activeIndexChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: StepperComponent, selector: "vector-stepper", inputs: { steps: "steps", navigable: "navigable", activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange" }, ngImport: i0, template: "<div class=\"wrapper\">\n  <p-steps\n    [model]=\"steps\"\n    [readonly]=\"!navigable\"\n    [activeIndex]=\"activeIndex\"\n    (activeIndexChange)=\"onActiveIndexChange($event)\"\n  >\n    ></p-steps\n  >\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$7.Steps, selector: "p-steps", inputs: ["activeIndex", "model", "readonly", "style", "styleClass", "exact"], outputs: ["activeIndexChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-stepper', template: "<div class=\"wrapper\">\r\n  <p-steps\r\n    [model]=\"steps\"\r\n    [readonly]=\"!navigable\"\r\n    [activeIndex]=\"activeIndex\"\r\n    (activeIndexChange)=\"onActiveIndexChange($event)\"\r\n  >\r\n    ></p-steps\r\n  >\r\n</div>\r\n" }]
+            args: [{ selector: 'vector-stepper', template: "<div class=\"wrapper\">\n  <p-steps\n    [model]=\"steps\"\n    [readonly]=\"!navigable\"\n    [activeIndex]=\"activeIndex\"\n    (activeIndexChange)=\"onActiveIndexChange($event)\"\n  >\n    ></p-steps\n  >\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { steps: [{
                 type: Input
             }], navigable: [{
@@ -4815,11 +4821,11 @@ class TopBarComponent {
         this.onClick.emit(link || '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TopBarComponent, deps: [{ token: MenuService }, { token: AuthService }, { token: i1$1.Router }, { token: ProfileService }, { token: StorageService }, { token: NotificationsService }, { token: ErrorMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: TopBarComponent, selector: "vector-top-bar", inputs: { fintech: "fintech", accountService: "accountService", showHelpCentral: "showHelpCentral" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div class=\"top-bar-container\">\r\n  <div id=\"menu-toggle\" class=\"menu-toggle\" (click)=\"toggleMenu()\">\r\n    <div class=\"menu-icon\"></div>\r\n  </div>\r\n\r\n  <div class=\"left-items-container\" *ngIf=\"fintech && isDesktop() && !doingOnboarding && !isAdmin\">\r\n    <span>Banco {{ currentAccount?.bankCode }}</span>\r\n    <span class=\"separator\"></span>\r\n    <span>AG {{ currentAccount?.agency }}</span>\r\n    <span class=\"separator\"></span>\r\n    <span>CC {{ currentAccount?.accountNumber }}</span>\r\n    <span class=\"separator\"></span>\r\n    <span\r\n      >{{ currentAccount?.accountType === 'CURRENT_ACCOUNT_PF' ? 'CPF' : 'CNPJ' }}\r\n      {{ maskUtil.formatDocument(currentAccount?.document) }}</span\r\n    >\r\n    <ng-container>\r\n      <span class=\"separator\"></span>\r\n      <div class=\"change-account-button cursor-pointer\" (click)=\"changeAccountMenu.toggle($event)\">\r\n        <span class=\"mr-2\">Alternar conta</span>\r\n        <span\r\n          class=\"fas\"\r\n          [ngClass]=\"{ 'fa-angle-down': !openedChangeAccountMenu, 'fa-angle-up': openedChangeAccountMenu }\"\r\n        ></span>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div class=\"right-items-container\" [ngClass]=\"{ 'hidden-items': hideElements }\" *ngIf=\"!isAdmin && !doingOnboarding\">\r\n    <div class=\"help-central\" *ngIf=\"showHelpCentral\">\r\n      <span>{{ 'app.label.help_central' | translate }}:</span>\r\n      <ng-container *ngFor=\"let item of helpCentralIcons\">\r\n        <a target=\"_blank\" [ngClass]=\"{ hidden: !item.active }\" [attr.href]=\"item.url\">\r\n          <i [class]=\"item.icon\"></i>\r\n        </a>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <span *ngIf=\"!fintech\" (click)=\"notifications.toggle($event)\" class=\"fas fa-bell notifications-icon\">\r\n      <span *ngIf=\"(notificationsList | unreadNotifications).length\" class=\"notifications-indicator\"> </span>\r\n    </span>\r\n\r\n    <span class=\"separator\"></span>\r\n    <div\r\n      #menuContainer\r\n      class=\"menu-container\"\r\n      (click)=\"menu.toggle($event)\"\r\n      pTooltip=\"Enter your username\"\r\n      tooltipPosition=\"bottom\"\r\n      tooltipEvent=\"click\"\r\n    >\r\n      <span class=\"user-name\">{{ currentAccount?.name || vectorFirstName || '' }}</span>\r\n      <span class=\"fas\" [ngClass]=\"{ 'fa-angle-down': !openedMenu, 'fa-angle-up': openedMenu }\"></span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<p-overlayPanel #menu (onHide)=\"openedMenu = false\" (onShow)=\"openedMenu = true\">\r\n  <ng-template pTemplate>\r\n    <div class=\"account-info\" *ngIf=\"!isDesktop()\">\r\n      <div class=\"account-info-row\">\r\n        <div class=\"account-info-item\">\r\n          <span>Banco: </span>\r\n          <span class=\"account-info-value\">{{ currentAccount?.bank }}</span>\r\n        </div>\r\n\r\n        <span class=\"separator\"></span>\r\n        <div class=\"account-info-item\">\r\n          <span>AG: </span>\r\n          <span class=\"account-info-value\">{{ currentAccount?.agency }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"account-info-row\">\r\n        <div class=\"account-info-item\">\r\n          <span>CC: </span>\r\n          <span class=\"account-info-value\">{{ currentAccount?.accountNumber }}</span>\r\n        </div>\r\n        <span class=\"separator\"></span>\r\n        <div class=\"account-info-item\">\r\n          <span>{{ currentAccount?.accountType === 'CURRENT_ACCOUNT_PF' ? 'CPF' : 'CNPJ' }}: </span>\r\n          <span class=\"account-info-value\"> {{ maskUtil.formatDocument(currentAccount?.document) }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"change-account-mobile\" (click)=\"changeAccountMenu.toggle($event)\" *ngIf=\"otherAccounts?.length\">\r\n        <span class=\"change-account-mobile-label\">Alternar conta</span>\r\n        <span\r\n          class=\"fas\"\r\n          [ngClass]=\"{ 'fa-angle-down': !openedChangeAccountMenu, 'fa-angle-up': openedChangeAccountMenu }\"\r\n        ></span>\r\n      </div>\r\n    </div>\r\n    <ul class=\"user-menu\">\r\n      <li *ngIf=\"fintech\" (click)=\"goToTermsOfUse(); menu.hide()\">\r\n        <span class=\"terms-of-use user-menu-icon\"></span>\r\n        <span>Termos de Uso</span>\r\n      </li>\r\n      <li *ngIf=\"fintech\" (click)=\"goToPasswordChange(); menu.hide()\">\r\n        <span class=\"fintech-password user-menu-icon\"></span>\r\n        <span>Alterar Senha</span>\r\n      </li>\r\n      <li (click)=\"logout()\">\r\n        <span class=\"logout user-menu-icon\"></span>\r\n        <span>Sair</span>\r\n      </li>\r\n    </ul>\r\n  </ng-template>\r\n</p-overlayPanel>\r\n\r\n<p-overlayPanel #changeAccountMenu (onHide)=\"openedChangeAccountMenu = false\" (onShow)=\"openedChangeAccountMenu = true\">\r\n  <ng-template pTemplate>\r\n    <div\r\n      *ngFor=\"let account of otherAccounts\"\r\n      class=\"account-info change-account-info\"\r\n      (click)=\"changeAccount(account)\"\r\n    >\r\n      <div class=\"account-info-row\">\r\n        <div class=\"account-info-item\">\r\n          <span>Banco: </span>\r\n          <span class=\"account-info-value\">{{ account?.bank }}</span>\r\n        </div>\r\n\r\n        <span class=\"separator\"></span>\r\n        <div class=\"account-info-item\">\r\n          <span>AG: </span>\r\n          <span class=\"account-info-value\">{{ account?.agency }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"account-info-row\">\r\n        <div class=\"account-info-item\">\r\n          <span>CC: </span>\r\n          <span class=\"account-info-value\">{{ account?.accountNumber }}</span>\r\n        </div>\r\n        <span class=\"separator\"></span>\r\n        <div class=\"account-info-item\">\r\n          <span>{{ account?.accountType === 'CURRENT_ACCOUNT_PF' ? 'CPF' : 'CNPJ' }}: </span>\r\n          <span class=\"account-info-value\"> {{ account?.document | formatDocument }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div>\r\n      <hr />\r\n      <p class=\"text-center add-account\" (click)=\"goToOnboarding(); changeAccountMenu.hide()\">\r\n        Adicionar uma nova conta\r\n      </p>\r\n    </div>\r\n  </ng-template>\r\n</p-overlayPanel>\r\n\r\n<p-overlayPanel\r\n  #notifications\r\n  (onHide)=\"showNotifications = false\"\r\n  (onShow)=\"showNotifications = true\"\r\n  styleClass=\"background-white\"\r\n>\r\n  <ng-template pTemplate>\r\n    <div class=\"notifications-header\">\r\n      <div class=\"notifications-vector-logo\"></div>\r\n      <span class=\"notifications-title\">\r\n        {{ 'app.label.notifications' | translate }}\r\n      </span>\r\n    </div>\r\n    <ul class=\"notifications-list\">\r\n      <li\r\n        (click)=\"handleClick(notification?.link)\"\r\n        class=\"notification-item\"\r\n        *ngFor=\"let notification of notificationsList | unreadNotifications\"\r\n      >\r\n        <span class=\"notification-title\">{{ notification.title }}</span>\r\n        <span>{{ notification.description }}</span>\r\n        <em class=\"fas fa-chevron-right\"></em>\r\n      </li>\r\n    </ul>\r\n  </ng-template>\r\n</p-overlayPanel>\r\n", styles: [".fas{color:#fff}.top-bar-container{height:81px;background-color:var(--theme-light);display:flex;flex:1;align-items:center;padding:15px;color:#fff;font-size:1em;font-weight:600;box-shadow:2px 2px 4px #00000029}.top-bar-container .menu-toggle{cursor:pointer;margin-right:10px;padding:8px}.top-bar-container .menu-toggle .menu-icon{background:url(../../../../assets/icons/menu_hamburguer_icon.svg);background-repeat:no-repeat;background-size:cover;width:20.77px;height:13.85px}.top-bar-container .menu-toggle span{font-size:1.3em}.top-bar-container .left-items-container{display:flex;align-items:center;flex-direction:row}.top-bar-container .right-items-container{flex:1;display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.top-bar-container .right-items-container .help-central{display:flex;align-items:center;gap:20px;font-size:1rem;margin-right:35px}.top-bar-container .right-items-container .help-central em{font-size:1.3rem}.top-bar-container .right-items-container .help-central a{outline:none;border:none;text-decoration:none;color:transparent}.top-bar-container .right-items-container .help-central a i{color:#fff;font-size:1.1em}.top-bar-container .right-items-container .help-central a i:hover{color:#7de5ec}@media screen and (max-width: 441px){.top-bar-container .right-items-container .help-central span{display:none}.top-bar-container .right-items-container .help-central em{font-size:1rem}}.top-bar-container .right-items-container .menu-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;cursor:pointer}.top-bar-container .right-items-container .menu-container .user-name{margin-right:15px}.top-bar-container .right-items-container .notifications-icon{position:relative;cursor:pointer}.top-bar-container .right-items-container .notifications-indicator{position:absolute;right:-8px;top:-8px;width:12px;height:12px;border-radius:50%;background-color:var(--error-color)}.separator{height:100%;margin-left:15px;margin-right:15px}.separator:after{content:\"\";height:100%;border-right:2px solid #ffffff}.account-info{display:flex;flex-direction:column;background-color:var(--theme-primary);border-radius:var(--border-radius);color:#fff;padding:5px;width:300px}.account-info .account-info-row{display:flex;flex-direction:row;align-items:center}.account-info .account-info-row .account-info-item{flex:1}.account-info .account-info-row .account-info-item:first-child{flex:.6}.account-info .account-info-row .account-info-item .account-info-value{font-weight:200}.account-info .change-account-mobile{font-size:.8em;align-items:center;display:flex}.account-info .change-account-mobile .change-account-mobile-label{margin-right:5px}.change-account-info{background-color:unset;cursor:pointer}.change-account-info:hover{background-color:var(--theme-primary)}.user-menu{padding:0;margin:0;list-style:none;color:#fff}.user-menu li{display:flex;flex-direction:row;align-items:center;padding:4px;font-weight:200;cursor:pointer;border-radius:var(--border-radius)}.user-menu li:hover{background-color:var(--theme-primary)}.user-menu li .user-menu-icon{width:28px;height:25px;background-repeat:no-repeat}.user-menu li .logout{background-image:url(../../../../assets/icons/logout_icon.svg);background-position-y:3px}.add-account{color:#fff;font-size:1.1em;padding:10px;margin:0;font-weight:400;letter-spacing:.25px;cursor:pointer}@media screen and (max-width: 441px){.hidden-items{display:none!important}}.notifications-header{display:flex;align-items:center;gap:8px}.notifications-header .notifications-vector-logo{background-image:url(/assets/images/vector_logo_horizontal.svg);background-repeat:no-repeat;background-position:right;background-size:cover;height:12px;width:30px}.notifications-header .notifications-title{text-transform:uppercase;color:var(--gray-dark)}.notifications-list{max-height:400px;overflow:auto;margin-top:10px}.notifications-list .notification-item{display:flex;flex-direction:column;cursor:pointer;position:relative;padding:5px 10px;border-radius:5px}.notifications-list .notification-item:hover{background-color:var(--gray-medium)}.notifications-list .notification-item .notification-title{font-weight:700;text-transform:uppercase}.notifications-list .notification-item span{font-weight:500;margin-right:20px}.notifications-list .notification-item em{position:absolute;right:10px;bottom:10px;color:var(--theme-primary)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "pipe", type: FormatDocumentPipe, name: "formatDocument" }, { kind: "pipe", type: UnreadNotificationsPipe, name: "unreadNotifications" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: TopBarComponent, selector: "vector-top-bar", inputs: { fintech: "fintech", accountService: "accountService", showHelpCentral: "showHelpCentral" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div class=\"top-bar-container\">\n  <div id=\"menu-toggle\" class=\"menu-toggle\" (click)=\"toggleMenu()\">\n    <div class=\"menu-icon\"></div>\n  </div>\n\n  <div class=\"left-items-container\" *ngIf=\"fintech && isDesktop() && !doingOnboarding && !isAdmin\">\n    <span>Banco {{ currentAccount?.bankCode }}</span>\n    <span class=\"separator\"></span>\n    <span>AG {{ currentAccount?.agency }}</span>\n    <span class=\"separator\"></span>\n    <span>CC {{ currentAccount?.accountNumber }}</span>\n    <span class=\"separator\"></span>\n    <span\n      >{{ currentAccount?.accountType === 'CURRENT_ACCOUNT_PF' ? 'CPF' : 'CNPJ' }}\n      {{ maskUtil.formatDocument(currentAccount?.document) }}</span\n    >\n    <ng-container>\n      <span class=\"separator\"></span>\n      <div class=\"change-account-button cursor-pointer\" (click)=\"changeAccountMenu.toggle($event)\">\n        <span class=\"mr-2\">Alternar conta</span>\n        <span\n          class=\"fas\"\n          [ngClass]=\"{ 'fa-angle-down': !openedChangeAccountMenu, 'fa-angle-up': openedChangeAccountMenu }\"\n        ></span>\n      </div>\n    </ng-container>\n  </div>\n\n  <div class=\"right-items-container\" [ngClass]=\"{ 'hidden-items': hideElements }\" *ngIf=\"!isAdmin && !doingOnboarding\">\n    <div class=\"help-central\" *ngIf=\"showHelpCentral\">\n      <span>{{ 'app.label.help_central' | translate }}:</span>\n      <ng-container *ngFor=\"let item of helpCentralIcons\">\n        <a target=\"_blank\" [ngClass]=\"{ hidden: !item.active }\" [attr.href]=\"item.url\">\n          <i [class]=\"item.icon\"></i>\n        </a>\n      </ng-container>\n    </div>\n\n    <span *ngIf=\"!fintech\" (click)=\"notifications.toggle($event)\" class=\"fas fa-bell notifications-icon\">\n      <span *ngIf=\"(notificationsList | unreadNotifications).length\" class=\"notifications-indicator\"> </span>\n    </span>\n\n    <span class=\"separator\"></span>\n    <div\n      #menuContainer\n      class=\"menu-container\"\n      (click)=\"menu.toggle($event)\"\n      pTooltip=\"Enter your username\"\n      tooltipPosition=\"bottom\"\n      tooltipEvent=\"click\"\n    >\n      <span class=\"user-name\">{{ currentAccount?.name || vectorFirstName || '' }}</span>\n      <span class=\"fas\" [ngClass]=\"{ 'fa-angle-down': !openedMenu, 'fa-angle-up': openedMenu }\"></span>\n    </div>\n  </div>\n</div>\n\n<p-overlayPanel #menu (onHide)=\"openedMenu = false\" (onShow)=\"openedMenu = true\">\n  <ng-template pTemplate>\n    <div class=\"account-info\" *ngIf=\"!isDesktop()\">\n      <div class=\"account-info-row\">\n        <div class=\"account-info-item\">\n          <span>Banco: </span>\n          <span class=\"account-info-value\">{{ currentAccount?.bank }}</span>\n        </div>\n\n        <span class=\"separator\"></span>\n        <div class=\"account-info-item\">\n          <span>AG: </span>\n          <span class=\"account-info-value\">{{ currentAccount?.agency }}</span>\n        </div>\n      </div>\n      <div class=\"account-info-row\">\n        <div class=\"account-info-item\">\n          <span>CC: </span>\n          <span class=\"account-info-value\">{{ currentAccount?.accountNumber }}</span>\n        </div>\n        <span class=\"separator\"></span>\n        <div class=\"account-info-item\">\n          <span>{{ currentAccount?.accountType === 'CURRENT_ACCOUNT_PF' ? 'CPF' : 'CNPJ' }}: </span>\n          <span class=\"account-info-value\"> {{ maskUtil.formatDocument(currentAccount?.document) }}</span>\n        </div>\n      </div>\n      <div class=\"change-account-mobile\" (click)=\"changeAccountMenu.toggle($event)\" *ngIf=\"otherAccounts?.length\">\n        <span class=\"change-account-mobile-label\">Alternar conta</span>\n        <span\n          class=\"fas\"\n          [ngClass]=\"{ 'fa-angle-down': !openedChangeAccountMenu, 'fa-angle-up': openedChangeAccountMenu }\"\n        ></span>\n      </div>\n    </div>\n    <ul class=\"user-menu\">\n      <li *ngIf=\"fintech\" (click)=\"goToTermsOfUse(); menu.hide()\">\n        <span class=\"terms-of-use user-menu-icon\"></span>\n        <span>Termos de Uso</span>\n      </li>\n      <li *ngIf=\"fintech\" (click)=\"goToPasswordChange(); menu.hide()\">\n        <span class=\"fintech-password user-menu-icon\"></span>\n        <span>Alterar Senha</span>\n      </li>\n      <li (click)=\"logout()\">\n        <span class=\"logout user-menu-icon\"></span>\n        <span>Sair</span>\n      </li>\n    </ul>\n  </ng-template>\n</p-overlayPanel>\n\n<p-overlayPanel #changeAccountMenu (onHide)=\"openedChangeAccountMenu = false\" (onShow)=\"openedChangeAccountMenu = true\">\n  <ng-template pTemplate>\n    <div\n      *ngFor=\"let account of otherAccounts\"\n      class=\"account-info change-account-info\"\n      (click)=\"changeAccount(account)\"\n    >\n      <div class=\"account-info-row\">\n        <div class=\"account-info-item\">\n          <span>Banco: </span>\n          <span class=\"account-info-value\">{{ account?.bank }}</span>\n        </div>\n\n        <span class=\"separator\"></span>\n        <div class=\"account-info-item\">\n          <span>AG: </span>\n          <span class=\"account-info-value\">{{ account?.agency }}</span>\n        </div>\n      </div>\n      <div class=\"account-info-row\">\n        <div class=\"account-info-item\">\n          <span>CC: </span>\n          <span class=\"account-info-value\">{{ account?.accountNumber }}</span>\n        </div>\n        <span class=\"separator\"></span>\n        <div class=\"account-info-item\">\n          <span>{{ account?.accountType === 'CURRENT_ACCOUNT_PF' ? 'CPF' : 'CNPJ' }}: </span>\n          <span class=\"account-info-value\"> {{ account?.document | formatDocument }}</span>\n        </div>\n      </div>\n    </div>\n    <div>\n      <hr />\n      <p class=\"text-center add-account\" (click)=\"goToOnboarding(); changeAccountMenu.hide()\">\n        Adicionar uma nova conta\n      </p>\n    </div>\n  </ng-template>\n</p-overlayPanel>\n\n<p-overlayPanel\n  #notifications\n  (onHide)=\"showNotifications = false\"\n  (onShow)=\"showNotifications = true\"\n  styleClass=\"background-white\"\n>\n  <ng-template pTemplate>\n    <div class=\"notifications-header\">\n      <div class=\"notifications-vector-logo\"></div>\n      <span class=\"notifications-title\">\n        {{ 'app.label.notifications' | translate }}\n      </span>\n    </div>\n    <ul class=\"notifications-list\">\n      <li\n        (click)=\"handleClick(notification?.link)\"\n        class=\"notification-item\"\n        *ngFor=\"let notification of notificationsList | unreadNotifications\"\n      >\n        <span class=\"notification-title\">{{ notification.title }}</span>\n        <span>{{ notification.description }}</span>\n        <em class=\"fas fa-chevron-right\"></em>\n      </li>\n    </ul>\n  </ng-template>\n</p-overlayPanel>\n", styles: [".fas{color:#fff}.top-bar-container{height:81px;background-color:var(--theme-light);display:flex;flex:1;align-items:center;padding:15px;color:#fff;font-size:1em;font-weight:600;box-shadow:2px 2px 4px #00000029}.top-bar-container .menu-toggle{cursor:pointer;margin-right:10px;padding:8px}.top-bar-container .menu-toggle .menu-icon{background:url(../../../../assets/icons/menu_hamburguer_icon.svg);background-repeat:no-repeat;background-size:cover;width:20.77px;height:13.85px}.top-bar-container .menu-toggle span{font-size:1.3em}.top-bar-container .left-items-container{display:flex;align-items:center;flex-direction:row}.top-bar-container .right-items-container{flex:1;display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.top-bar-container .right-items-container .help-central{display:flex;align-items:center;gap:20px;font-size:1rem;margin-right:35px}.top-bar-container .right-items-container .help-central em{font-size:1.3rem}.top-bar-container .right-items-container .help-central a{outline:none;border:none;text-decoration:none;color:transparent}.top-bar-container .right-items-container .help-central a i{color:#fff;font-size:1.1em}.top-bar-container .right-items-container .help-central a i:hover{color:#7de5ec}@media screen and (max-width: 441px){.top-bar-container .right-items-container .help-central span{display:none}.top-bar-container .right-items-container .help-central em{font-size:1rem}}.top-bar-container .right-items-container .menu-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;cursor:pointer}.top-bar-container .right-items-container .menu-container .user-name{margin-right:15px}.top-bar-container .right-items-container .notifications-icon{position:relative;cursor:pointer}.top-bar-container .right-items-container .notifications-indicator{position:absolute;right:-8px;top:-8px;width:12px;height:12px;border-radius:50%;background-color:var(--error-color)}.separator{height:100%;margin-left:15px;margin-right:15px}.separator:after{content:\"\";height:100%;border-right:2px solid #ffffff}.account-info{display:flex;flex-direction:column;background-color:var(--theme-primary);border-radius:var(--border-radius);color:#fff;padding:5px;width:300px}.account-info .account-info-row{display:flex;flex-direction:row;align-items:center}.account-info .account-info-row .account-info-item{flex:1}.account-info .account-info-row .account-info-item:first-child{flex:.6}.account-info .account-info-row .account-info-item .account-info-value{font-weight:200}.account-info .change-account-mobile{font-size:.8em;align-items:center;display:flex}.account-info .change-account-mobile .change-account-mobile-label{margin-right:5px}.change-account-info{background-color:unset;cursor:pointer}.change-account-info:hover{background-color:var(--theme-primary)}.user-menu{padding:0;margin:0;list-style:none;color:#fff}.user-menu li{display:flex;flex-direction:row;align-items:center;padding:4px;font-weight:200;cursor:pointer;border-radius:var(--border-radius)}.user-menu li:hover{background-color:var(--theme-primary)}.user-menu li .user-menu-icon{width:28px;height:25px;background-repeat:no-repeat}.user-menu li .logout{background-image:url(../../../../assets/icons/logout_icon.svg);background-position-y:3px}.add-account{color:#fff;font-size:1.1em;padding:10px;margin:0;font-weight:400;letter-spacing:.25px;cursor:pointer}@media screen and (max-width: 441px){.hidden-items{display:none!important}}.notifications-header{display:flex;align-items:center;gap:8px}.notifications-header .notifications-vector-logo{background-image:url(/assets/images/vector_logo_horizontal.svg);background-repeat:no-repeat;background-position:right;background-size:cover;height:12px;width:30px}.notifications-header .notifications-title{text-transform:uppercase;color:var(--gray-dark)}.notifications-list{max-height:400px;overflow:auto;margin-top:10px}.notifications-list .notification-item{display:flex;flex-direction:column;cursor:pointer;position:relative;padding:5px 10px;border-radius:5px}.notifications-list .notification-item:hover{background-color:var(--gray-medium)}.notifications-list .notification-item .notification-title{font-weight:700;text-transform:uppercase}.notifications-list .notification-item span{font-weight:500;margin-right:20px}.notifications-list .notification-item em{position:absolute;right:10px;bottom:10px;color:var(--theme-primary)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "pipe", type: FormatDocumentPipe, name: "formatDocument" }, { kind: "pipe", type: UnreadNotificationsPipe, name: "unreadNotifications" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: TopBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vector-top-bar', template: "<div class=\"top-bar-container\">\r\n  <div id=\"menu-toggle\" class=\"menu-toggle\" (click)=\"toggleMenu()\">\r\n    <div class=\"menu-icon\"></div>\r\n  </div>\r\n\r\n  <div class=\"left-items-container\" *ngIf=\"fintech && isDesktop() && !doingOnboarding && !isAdmin\">\r\n    <span>Banco {{ currentAccount?.bankCode }}</span>\r\n    <span class=\"separator\"></span>\r\n    <span>AG {{ currentAccount?.agency }}</span>\r\n    <span class=\"separator\"></span>\r\n    <span>CC {{ currentAccount?.accountNumber }}</span>\r\n    <span class=\"separator\"></span>\r\n    <span\r\n      >{{ currentAccount?.accountType === 'CURRENT_ACCOUNT_PF' ? 'CPF' : 'CNPJ' }}\r\n      {{ maskUtil.formatDocument(currentAccount?.document) }}</span\r\n    >\r\n    <ng-container>\r\n      <span class=\"separator\"></span>\r\n      <div class=\"change-account-button cursor-pointer\" (click)=\"changeAccountMenu.toggle($event)\">\r\n        <span class=\"mr-2\">Alternar conta</span>\r\n        <span\r\n          class=\"fas\"\r\n          [ngClass]=\"{ 'fa-angle-down': !openedChangeAccountMenu, 'fa-angle-up': openedChangeAccountMenu }\"\r\n        ></span>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <div class=\"right-items-container\" [ngClass]=\"{ 'hidden-items': hideElements }\" *ngIf=\"!isAdmin && !doingOnboarding\">\r\n    <div class=\"help-central\" *ngIf=\"showHelpCentral\">\r\n      <span>{{ 'app.label.help_central' | translate }}:</span>\r\n      <ng-container *ngFor=\"let item of helpCentralIcons\">\r\n        <a target=\"_blank\" [ngClass]=\"{ hidden: !item.active }\" [attr.href]=\"item.url\">\r\n          <i [class]=\"item.icon\"></i>\r\n        </a>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <span *ngIf=\"!fintech\" (click)=\"notifications.toggle($event)\" class=\"fas fa-bell notifications-icon\">\r\n      <span *ngIf=\"(notificationsList | unreadNotifications).length\" class=\"notifications-indicator\"> </span>\r\n    </span>\r\n\r\n    <span class=\"separator\"></span>\r\n    <div\r\n      #menuContainer\r\n      class=\"menu-container\"\r\n      (click)=\"menu.toggle($event)\"\r\n      pTooltip=\"Enter your username\"\r\n      tooltipPosition=\"bottom\"\r\n      tooltipEvent=\"click\"\r\n    >\r\n      <span class=\"user-name\">{{ currentAccount?.name || vectorFirstName || '' }}</span>\r\n      <span class=\"fas\" [ngClass]=\"{ 'fa-angle-down': !openedMenu, 'fa-angle-up': openedMenu }\"></span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<p-overlayPanel #menu (onHide)=\"openedMenu = false\" (onShow)=\"openedMenu = true\">\r\n  <ng-template pTemplate>\r\n    <div class=\"account-info\" *ngIf=\"!isDesktop()\">\r\n      <div class=\"account-info-row\">\r\n        <div class=\"account-info-item\">\r\n          <span>Banco: </span>\r\n          <span class=\"account-info-value\">{{ currentAccount?.bank }}</span>\r\n        </div>\r\n\r\n        <span class=\"separator\"></span>\r\n        <div class=\"account-info-item\">\r\n          <span>AG: </span>\r\n          <span class=\"account-info-value\">{{ currentAccount?.agency }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"account-info-row\">\r\n        <div class=\"account-info-item\">\r\n          <span>CC: </span>\r\n          <span class=\"account-info-value\">{{ currentAccount?.accountNumber }}</span>\r\n        </div>\r\n        <span class=\"separator\"></span>\r\n        <div class=\"account-info-item\">\r\n          <span>{{ currentAccount?.accountType === 'CURRENT_ACCOUNT_PF' ? 'CPF' : 'CNPJ' }}: </span>\r\n          <span class=\"account-info-value\"> {{ maskUtil.formatDocument(currentAccount?.document) }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"change-account-mobile\" (click)=\"changeAccountMenu.toggle($event)\" *ngIf=\"otherAccounts?.length\">\r\n        <span class=\"change-account-mobile-label\">Alternar conta</span>\r\n        <span\r\n          class=\"fas\"\r\n          [ngClass]=\"{ 'fa-angle-down': !openedChangeAccountMenu, 'fa-angle-up': openedChangeAccountMenu }\"\r\n        ></span>\r\n      </div>\r\n    </div>\r\n    <ul class=\"user-menu\">\r\n      <li *ngIf=\"fintech\" (click)=\"goToTermsOfUse(); menu.hide()\">\r\n        <span class=\"terms-of-use user-menu-icon\"></span>\r\n        <span>Termos de Uso</span>\r\n      </li>\r\n      <li *ngIf=\"fintech\" (click)=\"goToPasswordChange(); menu.hide()\">\r\n        <span class=\"fintech-password user-menu-icon\"></span>\r\n        <span>Alterar Senha</span>\r\n      </li>\r\n      <li (click)=\"logout()\">\r\n        <span class=\"logout user-menu-icon\"></span>\r\n        <span>Sair</span>\r\n      </li>\r\n    </ul>\r\n  </ng-template>\r\n</p-overlayPanel>\r\n\r\n<p-overlayPanel #changeAccountMenu (onHide)=\"openedChangeAccountMenu = false\" (onShow)=\"openedChangeAccountMenu = true\">\r\n  <ng-template pTemplate>\r\n    <div\r\n      *ngFor=\"let account of otherAccounts\"\r\n      class=\"account-info change-account-info\"\r\n      (click)=\"changeAccount(account)\"\r\n    >\r\n      <div class=\"account-info-row\">\r\n        <div class=\"account-info-item\">\r\n          <span>Banco: </span>\r\n          <span class=\"account-info-value\">{{ account?.bank }}</span>\r\n        </div>\r\n\r\n        <span class=\"separator\"></span>\r\n        <div class=\"account-info-item\">\r\n          <span>AG: </span>\r\n          <span class=\"account-info-value\">{{ account?.agency }}</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"account-info-row\">\r\n        <div class=\"account-info-item\">\r\n          <span>CC: </span>\r\n          <span class=\"account-info-value\">{{ account?.accountNumber }}</span>\r\n        </div>\r\n        <span class=\"separator\"></span>\r\n        <div class=\"account-info-item\">\r\n          <span>{{ account?.accountType === 'CURRENT_ACCOUNT_PF' ? 'CPF' : 'CNPJ' }}: </span>\r\n          <span class=\"account-info-value\"> {{ account?.document | formatDocument }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div>\r\n      <hr />\r\n      <p class=\"text-center add-account\" (click)=\"goToOnboarding(); changeAccountMenu.hide()\">\r\n        Adicionar uma nova conta\r\n      </p>\r\n    </div>\r\n  </ng-template>\r\n</p-overlayPanel>\r\n\r\n<p-overlayPanel\r\n  #notifications\r\n  (onHide)=\"showNotifications = false\"\r\n  (onShow)=\"showNotifications = true\"\r\n  styleClass=\"background-white\"\r\n>\r\n  <ng-template pTemplate>\r\n    <div class=\"notifications-header\">\r\n      <div class=\"notifications-vector-logo\"></div>\r\n      <span class=\"notifications-title\">\r\n        {{ 'app.label.notifications' | translate }}\r\n      </span>\r\n    </div>\r\n    <ul class=\"notifications-list\">\r\n      <li\r\n        (click)=\"handleClick(notification?.link)\"\r\n        class=\"notification-item\"\r\n        *ngFor=\"let notification of notificationsList | unreadNotifications\"\r\n      >\r\n        <span class=\"notification-title\">{{ notification.title }}</span>\r\n        <span>{{ notification.description }}</span>\r\n        <em class=\"fas fa-chevron-right\"></em>\r\n      </li>\r\n    </ul>\r\n  </ng-template>\r\n</p-overlayPanel>\r\n", styles: [".fas{color:#fff}.top-bar-container{height:81px;background-color:var(--theme-light);display:flex;flex:1;align-items:center;padding:15px;color:#fff;font-size:1em;font-weight:600;box-shadow:2px 2px 4px #00000029}.top-bar-container .menu-toggle{cursor:pointer;margin-right:10px;padding:8px}.top-bar-container .menu-toggle .menu-icon{background:url(../../../../assets/icons/menu_hamburguer_icon.svg);background-repeat:no-repeat;background-size:cover;width:20.77px;height:13.85px}.top-bar-container .menu-toggle span{font-size:1.3em}.top-bar-container .left-items-container{display:flex;align-items:center;flex-direction:row}.top-bar-container .right-items-container{flex:1;display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.top-bar-container .right-items-container .help-central{display:flex;align-items:center;gap:20px;font-size:1rem;margin-right:35px}.top-bar-container .right-items-container .help-central em{font-size:1.3rem}.top-bar-container .right-items-container .help-central a{outline:none;border:none;text-decoration:none;color:transparent}.top-bar-container .right-items-container .help-central a i{color:#fff;font-size:1.1em}.top-bar-container .right-items-container .help-central a i:hover{color:#7de5ec}@media screen and (max-width: 441px){.top-bar-container .right-items-container .help-central span{display:none}.top-bar-container .right-items-container .help-central em{font-size:1rem}}.top-bar-container .right-items-container .menu-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;cursor:pointer}.top-bar-container .right-items-container .menu-container .user-name{margin-right:15px}.top-bar-container .right-items-container .notifications-icon{position:relative;cursor:pointer}.top-bar-container .right-items-container .notifications-indicator{position:absolute;right:-8px;top:-8px;width:12px;height:12px;border-radius:50%;background-color:var(--error-color)}.separator{height:100%;margin-left:15px;margin-right:15px}.separator:after{content:\"\";height:100%;border-right:2px solid #ffffff}.account-info{display:flex;flex-direction:column;background-color:var(--theme-primary);border-radius:var(--border-radius);color:#fff;padding:5px;width:300px}.account-info .account-info-row{display:flex;flex-direction:row;align-items:center}.account-info .account-info-row .account-info-item{flex:1}.account-info .account-info-row .account-info-item:first-child{flex:.6}.account-info .account-info-row .account-info-item .account-info-value{font-weight:200}.account-info .change-account-mobile{font-size:.8em;align-items:center;display:flex}.account-info .change-account-mobile .change-account-mobile-label{margin-right:5px}.change-account-info{background-color:unset;cursor:pointer}.change-account-info:hover{background-color:var(--theme-primary)}.user-menu{padding:0;margin:0;list-style:none;color:#fff}.user-menu li{display:flex;flex-direction:row;align-items:center;padding:4px;font-weight:200;cursor:pointer;border-radius:var(--border-radius)}.user-menu li:hover{background-color:var(--theme-primary)}.user-menu li .user-menu-icon{width:28px;height:25px;background-repeat:no-repeat}.user-menu li .logout{background-image:url(../../../../assets/icons/logout_icon.svg);background-position-y:3px}.add-account{color:#fff;font-size:1.1em;padding:10px;margin:0;font-weight:400;letter-spacing:.25px;cursor:pointer}@media screen and (max-width: 441px){.hidden-items{display:none!important}}.notifications-header{display:flex;align-items:center;gap:8px}.notifications-header .notifications-vector-logo{background-image:url(/assets/images/vector_logo_horizontal.svg);background-repeat:no-repeat;background-position:right;background-size:cover;height:12px;width:30px}.notifications-header .notifications-title{text-transform:uppercase;color:var(--gray-dark)}.notifications-list{max-height:400px;overflow:auto;margin-top:10px}.notifications-list .notification-item{display:flex;flex-direction:column;cursor:pointer;position:relative;padding:5px 10px;border-radius:5px}.notifications-list .notification-item:hover{background-color:var(--gray-medium)}.notifications-list .notification-item .notification-title{font-weight:700;text-transform:uppercase}.notifications-list .notification-item span{font-weight:500;margin-right:20px}.notifications-list .notification-item em{position:absolute;right:10px;bottom:10px;color:var(--theme-primary)}\n"] }]
+            args: [{ selector: 'vector-top-bar', template: "<div class=\"top-bar-container\">\n  <div id=\"menu-toggle\" class=\"menu-toggle\" (click)=\"toggleMenu()\">\n    <div class=\"menu-icon\"></div>\n  </div>\n\n  <div class=\"left-items-container\" *ngIf=\"fintech && isDesktop() && !doingOnboarding && !isAdmin\">\n    <span>Banco {{ currentAccount?.bankCode }}</span>\n    <span class=\"separator\"></span>\n    <span>AG {{ currentAccount?.agency }}</span>\n    <span class=\"separator\"></span>\n    <span>CC {{ currentAccount?.accountNumber }}</span>\n    <span class=\"separator\"></span>\n    <span\n      >{{ currentAccount?.accountType === 'CURRENT_ACCOUNT_PF' ? 'CPF' : 'CNPJ' }}\n      {{ maskUtil.formatDocument(currentAccount?.document) }}</span\n    >\n    <ng-container>\n      <span class=\"separator\"></span>\n      <div class=\"change-account-button cursor-pointer\" (click)=\"changeAccountMenu.toggle($event)\">\n        <span class=\"mr-2\">Alternar conta</span>\n        <span\n          class=\"fas\"\n          [ngClass]=\"{ 'fa-angle-down': !openedChangeAccountMenu, 'fa-angle-up': openedChangeAccountMenu }\"\n        ></span>\n      </div>\n    </ng-container>\n  </div>\n\n  <div class=\"right-items-container\" [ngClass]=\"{ 'hidden-items': hideElements }\" *ngIf=\"!isAdmin && !doingOnboarding\">\n    <div class=\"help-central\" *ngIf=\"showHelpCentral\">\n      <span>{{ 'app.label.help_central' | translate }}:</span>\n      <ng-container *ngFor=\"let item of helpCentralIcons\">\n        <a target=\"_blank\" [ngClass]=\"{ hidden: !item.active }\" [attr.href]=\"item.url\">\n          <i [class]=\"item.icon\"></i>\n        </a>\n      </ng-container>\n    </div>\n\n    <span *ngIf=\"!fintech\" (click)=\"notifications.toggle($event)\" class=\"fas fa-bell notifications-icon\">\n      <span *ngIf=\"(notificationsList | unreadNotifications).length\" class=\"notifications-indicator\"> </span>\n    </span>\n\n    <span class=\"separator\"></span>\n    <div\n      #menuContainer\n      class=\"menu-container\"\n      (click)=\"menu.toggle($event)\"\n      pTooltip=\"Enter your username\"\n      tooltipPosition=\"bottom\"\n      tooltipEvent=\"click\"\n    >\n      <span class=\"user-name\">{{ currentAccount?.name || vectorFirstName || '' }}</span>\n      <span class=\"fas\" [ngClass]=\"{ 'fa-angle-down': !openedMenu, 'fa-angle-up': openedMenu }\"></span>\n    </div>\n  </div>\n</div>\n\n<p-overlayPanel #menu (onHide)=\"openedMenu = false\" (onShow)=\"openedMenu = true\">\n  <ng-template pTemplate>\n    <div class=\"account-info\" *ngIf=\"!isDesktop()\">\n      <div class=\"account-info-row\">\n        <div class=\"account-info-item\">\n          <span>Banco: </span>\n          <span class=\"account-info-value\">{{ currentAccount?.bank }}</span>\n        </div>\n\n        <span class=\"separator\"></span>\n        <div class=\"account-info-item\">\n          <span>AG: </span>\n          <span class=\"account-info-value\">{{ currentAccount?.agency }}</span>\n        </div>\n      </div>\n      <div class=\"account-info-row\">\n        <div class=\"account-info-item\">\n          <span>CC: </span>\n          <span class=\"account-info-value\">{{ currentAccount?.accountNumber }}</span>\n        </div>\n        <span class=\"separator\"></span>\n        <div class=\"account-info-item\">\n          <span>{{ currentAccount?.accountType === 'CURRENT_ACCOUNT_PF' ? 'CPF' : 'CNPJ' }}: </span>\n          <span class=\"account-info-value\"> {{ maskUtil.formatDocument(currentAccount?.document) }}</span>\n        </div>\n      </div>\n      <div class=\"change-account-mobile\" (click)=\"changeAccountMenu.toggle($event)\" *ngIf=\"otherAccounts?.length\">\n        <span class=\"change-account-mobile-label\">Alternar conta</span>\n        <span\n          class=\"fas\"\n          [ngClass]=\"{ 'fa-angle-down': !openedChangeAccountMenu, 'fa-angle-up': openedChangeAccountMenu }\"\n        ></span>\n      </div>\n    </div>\n    <ul class=\"user-menu\">\n      <li *ngIf=\"fintech\" (click)=\"goToTermsOfUse(); menu.hide()\">\n        <span class=\"terms-of-use user-menu-icon\"></span>\n        <span>Termos de Uso</span>\n      </li>\n      <li *ngIf=\"fintech\" (click)=\"goToPasswordChange(); menu.hide()\">\n        <span class=\"fintech-password user-menu-icon\"></span>\n        <span>Alterar Senha</span>\n      </li>\n      <li (click)=\"logout()\">\n        <span class=\"logout user-menu-icon\"></span>\n        <span>Sair</span>\n      </li>\n    </ul>\n  </ng-template>\n</p-overlayPanel>\n\n<p-overlayPanel #changeAccountMenu (onHide)=\"openedChangeAccountMenu = false\" (onShow)=\"openedChangeAccountMenu = true\">\n  <ng-template pTemplate>\n    <div\n      *ngFor=\"let account of otherAccounts\"\n      class=\"account-info change-account-info\"\n      (click)=\"changeAccount(account)\"\n    >\n      <div class=\"account-info-row\">\n        <div class=\"account-info-item\">\n          <span>Banco: </span>\n          <span class=\"account-info-value\">{{ account?.bank }}</span>\n        </div>\n\n        <span class=\"separator\"></span>\n        <div class=\"account-info-item\">\n          <span>AG: </span>\n          <span class=\"account-info-value\">{{ account?.agency }}</span>\n        </div>\n      </div>\n      <div class=\"account-info-row\">\n        <div class=\"account-info-item\">\n          <span>CC: </span>\n          <span class=\"account-info-value\">{{ account?.accountNumber }}</span>\n        </div>\n        <span class=\"separator\"></span>\n        <div class=\"account-info-item\">\n          <span>{{ account?.accountType === 'CURRENT_ACCOUNT_PF' ? 'CPF' : 'CNPJ' }}: </span>\n          <span class=\"account-info-value\"> {{ account?.document | formatDocument }}</span>\n        </div>\n      </div>\n    </div>\n    <div>\n      <hr />\n      <p class=\"text-center add-account\" (click)=\"goToOnboarding(); changeAccountMenu.hide()\">\n        Adicionar uma nova conta\n      </p>\n    </div>\n  </ng-template>\n</p-overlayPanel>\n\n<p-overlayPanel\n  #notifications\n  (onHide)=\"showNotifications = false\"\n  (onShow)=\"showNotifications = true\"\n  styleClass=\"background-white\"\n>\n  <ng-template pTemplate>\n    <div class=\"notifications-header\">\n      <div class=\"notifications-vector-logo\"></div>\n      <span class=\"notifications-title\">\n        {{ 'app.label.notifications' | translate }}\n      </span>\n    </div>\n    <ul class=\"notifications-list\">\n      <li\n        (click)=\"handleClick(notification?.link)\"\n        class=\"notification-item\"\n        *ngFor=\"let notification of notificationsList | unreadNotifications\"\n      >\n        <span class=\"notification-title\">{{ notification.title }}</span>\n        <span>{{ notification.description }}</span>\n        <em class=\"fas fa-chevron-right\"></em>\n      </li>\n    </ul>\n  </ng-template>\n</p-overlayPanel>\n", styles: [".fas{color:#fff}.top-bar-container{height:81px;background-color:var(--theme-light);display:flex;flex:1;align-items:center;padding:15px;color:#fff;font-size:1em;font-weight:600;box-shadow:2px 2px 4px #00000029}.top-bar-container .menu-toggle{cursor:pointer;margin-right:10px;padding:8px}.top-bar-container .menu-toggle .menu-icon{background:url(../../../../assets/icons/menu_hamburguer_icon.svg);background-repeat:no-repeat;background-size:cover;width:20.77px;height:13.85px}.top-bar-container .menu-toggle span{font-size:1.3em}.top-bar-container .left-items-container{display:flex;align-items:center;flex-direction:row}.top-bar-container .right-items-container{flex:1;display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.top-bar-container .right-items-container .help-central{display:flex;align-items:center;gap:20px;font-size:1rem;margin-right:35px}.top-bar-container .right-items-container .help-central em{font-size:1.3rem}.top-bar-container .right-items-container .help-central a{outline:none;border:none;text-decoration:none;color:transparent}.top-bar-container .right-items-container .help-central a i{color:#fff;font-size:1.1em}.top-bar-container .right-items-container .help-central a i:hover{color:#7de5ec}@media screen and (max-width: 441px){.top-bar-container .right-items-container .help-central span{display:none}.top-bar-container .right-items-container .help-central em{font-size:1rem}}.top-bar-container .right-items-container .menu-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;cursor:pointer}.top-bar-container .right-items-container .menu-container .user-name{margin-right:15px}.top-bar-container .right-items-container .notifications-icon{position:relative;cursor:pointer}.top-bar-container .right-items-container .notifications-indicator{position:absolute;right:-8px;top:-8px;width:12px;height:12px;border-radius:50%;background-color:var(--error-color)}.separator{height:100%;margin-left:15px;margin-right:15px}.separator:after{content:\"\";height:100%;border-right:2px solid #ffffff}.account-info{display:flex;flex-direction:column;background-color:var(--theme-primary);border-radius:var(--border-radius);color:#fff;padding:5px;width:300px}.account-info .account-info-row{display:flex;flex-direction:row;align-items:center}.account-info .account-info-row .account-info-item{flex:1}.account-info .account-info-row .account-info-item:first-child{flex:.6}.account-info .account-info-row .account-info-item .account-info-value{font-weight:200}.account-info .change-account-mobile{font-size:.8em;align-items:center;display:flex}.account-info .change-account-mobile .change-account-mobile-label{margin-right:5px}.change-account-info{background-color:unset;cursor:pointer}.change-account-info:hover{background-color:var(--theme-primary)}.user-menu{padding:0;margin:0;list-style:none;color:#fff}.user-menu li{display:flex;flex-direction:row;align-items:center;padding:4px;font-weight:200;cursor:pointer;border-radius:var(--border-radius)}.user-menu li:hover{background-color:var(--theme-primary)}.user-menu li .user-menu-icon{width:28px;height:25px;background-repeat:no-repeat}.user-menu li .logout{background-image:url(../../../../assets/icons/logout_icon.svg);background-position-y:3px}.add-account{color:#fff;font-size:1.1em;padding:10px;margin:0;font-weight:400;letter-spacing:.25px;cursor:pointer}@media screen and (max-width: 441px){.hidden-items{display:none!important}}.notifications-header{display:flex;align-items:center;gap:8px}.notifications-header .notifications-vector-logo{background-image:url(/assets/images/vector_logo_horizontal.svg);background-repeat:no-repeat;background-position:right;background-size:cover;height:12px;width:30px}.notifications-header .notifications-title{text-transform:uppercase;color:var(--gray-dark)}.notifications-list{max-height:400px;overflow:auto;margin-top:10px}.notifications-list .notification-item{display:flex;flex-direction:column;cursor:pointer;position:relative;padding:5px 10px;border-radius:5px}.notifications-list .notification-item:hover{background-color:var(--gray-medium)}.notifications-list .notification-item .notification-title{font-weight:700;text-transform:uppercase}.notifications-list .notification-item span{font-weight:500;margin-right:20px}.notifications-list .notification-item em{position:absolute;right:10px;bottom:10px;color:var(--theme-primary)}\n"] }]
         }], ctorParameters: () => [{ type: MenuService }, { type: AuthService }, { type: i1$1.Router }, { type: ProfileService }, { type: StorageService }, { type: NotificationsService }, { type: ErrorMessageService }], propDecorators: { fintech: [{
                 type: Input
             }], accountService: [{