npm - @po-ui/ng-components - Versions diffs - 16.0.0 → 16.1.0 - Mend

@po-ui/ng-components 16.0.0 → 16.1.0

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 (665) hide show

package/fesm2022/po-ui-ng-components.mjs CHANGED Viewed

@@ -15,6 +15,8 @@ import { debounceTime, concatMap, mapTo, scan, tap, switchMap, take, delay, take
 import * as i6 from '@angular/cdk/listbox';
 import { CdkListboxModule } from '@angular/cdk/listbox';
 import * as i1$2 from '@angular/platform-browser';
+import * as i5 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
 import * as i2$2 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i3 from '@angular/cdk/drag-drop';
@@ -167,7 +169,7 @@ class PoAccordionItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoAccordionItemComponent, [{
         type: Component,
-        args: [{ selector: 'po-accordion-item', template: "<ng-template>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-accordion-item', template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
     }], function () { return [{ type: PoAccordionService }]; }, { label: [{
             type: Input,
             args: ['p-label']
@@ -212,7 +214,7 @@ class PoAccordionItemBodyComponent {
                         transition('* => void', [style({ height: '*' }), animate(200, style({ height: 0 }))]),
                         transition('void => *', [style({ height: '0' }), animate(200, style({ height: '*' }))])
                     ])
-                ], template: "<div class=\"po-accordion-item-body\" *ngIf=\"expanded\" @toggleBody>\r\n  <div class=\"po-accordion-item-body-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n" }]
+                ], template: "<div class=\"po-accordion-item-body\" *ngIf=\"expanded\" @toggleBody>\n  <div class=\"po-accordion-item-body-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
     }], null, { expanded: [{
             type: Input,
             args: ['p-expanded']
@@ -242,7 +244,7 @@ class PoAccordionItemHeaderComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoAccordionItemHeaderComponent, [{
         type: Component,
-        args: [{ selector: 'po-accordion-item-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"po-accordion-item-header\">\r\n  <button class=\"po-accordion-item-header-button po-clickable\" (click)=\"onClick()\">\r\n    <div class=\"po-text-ellipsis po-accordion-item-header-title\">{{ label }}</div>\r\n    <span #icon class=\"po-icon po-accordion-item-header-icon po-icon-arrow-down\"> </span>\r\n  </button>\r\n</header>\r\n" }]
+        args: [{ selector: 'po-accordion-item-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"po-accordion-item-header\">\n  <button class=\"po-accordion-item-header-button po-clickable\" (click)=\"onClick()\">\n    <div class=\"po-text-ellipsis po-accordion-item-header-title\">{{ label }}</div>\n    <span #icon class=\"po-icon po-accordion-item-header-icon po-icon-arrow-down\"> </span>\n  </button>\n</header>\n" }]
     }], null, { expanded: [{
             type: Input,
             args: ['p-expanded']
@@ -347,7 +349,7 @@ class PoAccordionComponent extends PoAccordionBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoAccordionComponent, [{
         type: Component,
-        args: [{ selector: 'po-accordion', providers: [PoAccordionService], template: "<div class=\"po-accordion po-container po-container-no-padding\">\r\n  <section\r\n    *ngFor=\"let poAccordionItem of poAccordionItems\"\r\n    class=\"po-accordion-item\"\r\n    [class.po-accordion-item-active]=\"poAccordionItem.expanded\"\r\n  >\r\n    <po-accordion-item-header\r\n      [p-expanded]=\"poAccordionItem.expanded\"\r\n      [p-label]=\"poAccordionItem.label\"\r\n      (p-toggle)=\"headerToggle($event, poAccordionItem)\"\r\n    >\r\n    </po-accordion-item-header>\r\n\r\n    <po-accordion-item-body [p-expanded]=\"poAccordionItem.expanded\">\r\n      <ng-container *ngTemplateOutlet=\"poAccordionItem.templateRef\"></ng-container>\r\n    </po-accordion-item-body>\r\n  </section>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-accordion', providers: [PoAccordionService], template: "<div class=\"po-accordion po-container po-container-no-padding\">\n  <section\n    *ngFor=\"let poAccordionItem of poAccordionItems\"\n    class=\"po-accordion-item\"\n    [class.po-accordion-item-active]=\"poAccordionItem.expanded\"\n  >\n    <po-accordion-item-header\n      [p-expanded]=\"poAccordionItem.expanded\"\n      [p-label]=\"poAccordionItem.label\"\n      (p-toggle)=\"headerToggle($event, poAccordionItem)\"\n    >\n    </po-accordion-item-header>\n\n    <po-accordion-item-body [p-expanded]=\"poAccordionItem.expanded\">\n      <ng-container *ngTemplateOutlet=\"poAccordionItem.templateRef\"></ng-container>\n    </po-accordion-item-body>\n  </section>\n</div>\n" }]
     }], function () { return [{ type: PoAccordionService }]; }, { poAccordionItems: [{
             type: ContentChildren,
             args: [PoAccordionItemComponent]
@@ -551,7 +553,7 @@ class PoAvatarComponent extends PoAvatarBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoAvatarComponent, [{
         type: Component,
-        args: [{ selector: 'po-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-avatar po-avatar-{{ size }}\" [class.po-clickable]=\"hasClickEvent\" (click)=\"click.emit()\">\r\n  <ng-container *ngIf=\"src; then sourceImage; else defaultIcon\"></ng-container>\r\n</div>\r\n\r\n<ng-template #sourceImage>\r\n  <img class=\"po-avatar-image\" [src]=\"src\" alt=\"\" [attr.loading]=\"loading\" (error)=\"onError()\" />\r\n</ng-template>\r\n\r\n<ng-template #defaultIcon>\r\n  <span class=\"po-icon po-icon-user po-avatar-default-icon\"></span>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-avatar po-avatar-{{ size }}\" [class.po-clickable]=\"hasClickEvent\" (click)=\"click.emit()\">\n  <ng-container *ngIf=\"src; then sourceImage; else defaultIcon\"></ng-container>\n</div>\n\n<ng-template #sourceImage>\n  <img class=\"po-avatar-image\" [src]=\"src\" alt=\"\" [attr.loading]=\"loading\" (error)=\"onError()\" />\n</ng-template>\n\n<ng-template #defaultIcon>\n  <span class=\"po-icon po-icon-user po-avatar-default-icon\"></span>\n</ng-template>\n" }]
     }], null, null); })();
 /**
@@ -731,7 +733,7 @@ class PoBreadcrumbDropdownComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoBreadcrumbDropdownComponent, [{
         type: Component,
-        args: [{ selector: 'po-breadcrumb-dropdown', template: "<ul class=\"po-breadcrumb-dropdown\">\r\n  <li class=\"po-breadcrumb-dropdown-item\" *ngFor=\"let item of items\" [routerLink]=\"item.link\" (click)=\"item.action?.()\">\r\n    {{ item.label }}\r\n  </li>\r\n</ul>\r\n" }]
+        args: [{ selector: 'po-breadcrumb-dropdown', template: "<ul class=\"po-breadcrumb-dropdown\">\n  <li class=\"po-breadcrumb-dropdown-item\" *ngFor=\"let item of items\" [routerLink]=\"item.link\" (click)=\"item.action?.()\">\n    {{ item.label }}\n  </li>\n</ul>\n" }]
     }], null, { items: [{
             type: Input,
             args: ['p-items']
@@ -1713,7 +1715,7 @@ class PoBreadcrumbFavoriteComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoBreadcrumbFavoriteComponent, [{
         type: Component,
-        args: [{ selector: 'po-breadcrumb-favorite', providers: [PoBreadcrumbFavoriteService], template: "<div class=\"po-breadcrumb-favorite po-clickable\" (click)=\"toggleFavoriteAction()\">\r\n  <span\r\n    class=\"po-icon po-icon-star po-breadcrumb-favorite-star po-clickable\"\r\n    [class.po-breadcrumb-favorite-star-active]=\"favorite\"\r\n  >\r\n  </span>\r\n\r\n  <span class=\"po-hidden-sm po-breadcrumb-favorite-label\" *ngIf=\"favorite\">{{ literals?.unfavorite }}</span>\r\n  <span class=\"po-hidden-sm po-breadcrumb-favorite-label\" *ngIf=\"!favorite\">{{ literals?.favorite }}</span>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-breadcrumb-favorite', providers: [PoBreadcrumbFavoriteService], template: "<div class=\"po-breadcrumb-favorite po-clickable\" (click)=\"toggleFavoriteAction()\">\n  <span\n    class=\"po-icon po-icon-star po-breadcrumb-favorite-star po-clickable\"\n    [class.po-breadcrumb-favorite-star-active]=\"favorite\"\n  >\n  </span>\n\n  <span class=\"po-hidden-sm po-breadcrumb-favorite-label\" *ngIf=\"favorite\">{{ literals?.unfavorite }}</span>\n  <span class=\"po-hidden-sm po-breadcrumb-favorite-label\" *ngIf=\"!favorite\">{{ literals?.favorite }}</span>\n</div>\n" }]
     }], function () { return [{ type: PoBreadcrumbFavoriteService }, { type: PoLanguageService }]; }, { favoriteService: [{
             type: Input,
             args: ['p-favorite-service']
@@ -1815,7 +1817,7 @@ class PoBreadcrumbItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoBreadcrumbItemComponent, [{
         type: Component,
-        args: [{ selector: 'po-breadcrumb-item', template: "<li\r\n  *ngIf=\"!itemActive\"\r\n  [class.po-breadcrumb-item]=\"link || action\"\r\n  [class.po-breadcrumb-item-unclickable]=\"!link && !action\"\r\n>\r\n  <a *ngIf=\"link\" [routerLink]=\"link\">\r\n    <label class=\"po-breadcrumb-label\">{{ label }}</label>\r\n    <div class=\"po-breadcrumb-arrow\"></div>\r\n  </a>\r\n\r\n  <a *ngIf=\"!link && action\" (click)=\"action(label)\">\r\n    <label class=\"po-breadcrumb-label\">{{ label }}</label>\r\n    <div class=\"po-breadcrumb-arrow\"></div>\r\n  </a>\r\n\r\n  <a *ngIf=\"!link && !action\">\r\n    <label class=\"po-breadcrumb-label\">{{ label }}</label>\r\n    <div class=\"po-breadcrumb-arrow\"></div>\r\n  </a>\r\n</li>\r\n\r\n<li *ngIf=\"itemActive\" class=\"po-breadcrumb-item-unclickable\">\r\n  <label class=\"po-breadcrumb-label\">{{ label }}</label>\r\n</li>\r\n" }]
+        args: [{ selector: 'po-breadcrumb-item', template: "<li\n  *ngIf=\"!itemActive\"\n  [class.po-breadcrumb-item]=\"link || action\"\n  [class.po-breadcrumb-item-unclickable]=\"!link && !action\"\n>\n  <a *ngIf=\"link\" [routerLink]=\"link\">\n    <label class=\"po-breadcrumb-label\">{{ label }}</label>\n    <div class=\"po-breadcrumb-arrow\"></div>\n  </a>\n\n  <a *ngIf=\"!link && action\" (click)=\"action(label)\">\n    <label class=\"po-breadcrumb-label\">{{ label }}</label>\n    <div class=\"po-breadcrumb-arrow\"></div>\n  </a>\n\n  <a *ngIf=\"!link && !action\">\n    <label class=\"po-breadcrumb-label\">{{ label }}</label>\n    <div class=\"po-breadcrumb-arrow\"></div>\n  </a>\n</li>\n\n<li *ngIf=\"itemActive\" class=\"po-breadcrumb-item-unclickable\">\n  <label class=\"po-breadcrumb-label\">{{ label }}</label>\n</li>\n" }]
     }], null, { action: [{
             type: Input,
             args: ['p-action']
@@ -2038,7 +2040,7 @@ class PoBreadcrumbComponent extends PoBreadcrumbBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoBreadcrumbComponent, [{
         type: Component,
-        args: [{ selector: 'po-breadcrumb', template: "<div class=\"po-breadcrumb\" #breadcrumb>\r\n  <ul class=\"po-breadcrumb-items\">\r\n    <li #dropdownIcon *ngIf=\"showDropdownToggle\" class=\"po-breadcrumb-item po-clickable\" (click)=\"toggleDropdown()\">\r\n      <span class=\"po-breadcrumb-icon-more po-icon po-icon-more\"></span>\r\n      <div class=\"po-breadcrumb-arrow\"></div>\r\n    </li>\r\n\r\n    <div *ngFor=\"let item of itemsView; let itemIndex = index\">\r\n      <po-breadcrumb-item\r\n        [p-action]=\"item.action\"\r\n        [p-label]=\"item.label\"\r\n        [p-link]=\"item.link\"\r\n        [p-item-active]=\"itemIndex === itemsView.length - 1\"\r\n      >\r\n      </po-breadcrumb-item>\r\n    </div>\r\n  </ul>\r\n\r\n  <po-breadcrumb-favorite\r\n    *ngIf=\"favoriteService\"\r\n    [p-favorite-service]=\"favoriteService\"\r\n    [p-item-active]=\"items[items.length - 1]\"\r\n    [p-params-service]=\"paramsService\"\r\n  >\r\n  </po-breadcrumb-favorite>\r\n\r\n  <po-breadcrumb-dropdown *ngIf=\"showDropdown\" [p-items]=\"dropdownItems\"> </po-breadcrumb-dropdown>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-breadcrumb', template: "<div class=\"po-breadcrumb\" #breadcrumb>\n  <ul class=\"po-breadcrumb-items\">\n    <li #dropdownIcon *ngIf=\"showDropdownToggle\" class=\"po-breadcrumb-item po-clickable\" (click)=\"toggleDropdown()\">\n      <span class=\"po-breadcrumb-icon-more po-icon po-icon-more\"></span>\n      <div class=\"po-breadcrumb-arrow\"></div>\n    </li>\n\n    <div *ngFor=\"let item of itemsView; let itemIndex = index\">\n      <po-breadcrumb-item\n        [p-action]=\"item.action\"\n        [p-label]=\"item.label\"\n        [p-link]=\"item.link\"\n        [p-item-active]=\"itemIndex === itemsView.length - 1\"\n      >\n      </po-breadcrumb-item>\n    </div>\n  </ul>\n\n  <po-breadcrumb-favorite\n    *ngIf=\"favoriteService\"\n    [p-favorite-service]=\"favoriteService\"\n    [p-item-active]=\"items[items.length - 1]\"\n    [p-params-service]=\"paramsService\"\n  >\n  </po-breadcrumb-favorite>\n\n  <po-breadcrumb-dropdown *ngIf=\"showDropdown\" [p-items]=\"dropdownItems\"> </po-breadcrumb-dropdown>\n</div>\n" }]
     }], function () { return [{ type: i0.IterableDiffers }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, { breadcrumbElement: [{
             type: ViewChild,
             args: ['breadcrumb', { read: ElementRef, static: true }]
@@ -2368,7 +2370,7 @@ class PoLoadingIconComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLoadingIconComponent, [{
         type: Component,
-        args: [{ selector: 'po-loading-icon', template: "<div class=\"po-loading-icon\" [class.po-loading-icon-neutral-color]=\"neutralColor\">\r\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-1\"></span>\r\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-2\"></span>\r\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-3\"></span>\r\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-4\"></span>\r\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-5\"></span>\r\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-6\"></span>\r\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-7\"></span>\r\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-8\"></span>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-loading-icon', template: "<div class=\"po-loading-icon\" [class.po-loading-icon-neutral-color]=\"neutralColor\">\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-1\"></span>\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-2\"></span>\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-3\"></span>\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-4\"></span>\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-5\"></span>\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-6\"></span>\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-7\"></span>\n  <span class=\"po-loading-icon-bar po-loading-icon-bar-8\"></span>\n</div>\n" }]
     }], null, { neutralColor: [{
             type: Input,
             args: ['p-neutral-color']
@@ -2444,7 +2446,7 @@ class PoIconComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoIconComponent, [{
         type: Component,
-        args: [{ selector: 'po-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"class; then fontTemplate; else icon\"></ng-container>\r\n\r\n<ng-template #fontTemplate>\r\n  <i [class]=\"class\" aria-hidden=\"true\"></i>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"class; then fontTemplate; else icon\"></ng-container>\n\n<ng-template #fontTemplate>\n  <i [class]=\"class\" aria-hidden=\"true\"></i>\n</ng-template>\n" }]
     }], function () { return []; }, { icon: [{
             type: Input,
             args: ['p-icon']
@@ -2549,7 +2551,7 @@ class PoButtonComponent extends PoButtonBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoButtonComponent, [{
         type: Component,
-        args: [{ selector: 'po-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  #button\r\n  class=\"po-button\"\r\n  type=\"button\"\r\n  [attr.p-size]=\"size\"\r\n  [attr.p-kind]=\"kind\"\r\n  [attr.p-danger]=\"danger\"\r\n  [class.po-button-sm]=\"small\"\r\n  [disabled]=\"disabled || loading\"\r\n  [attr.aria-label]=\"ariaLabel\"\r\n  (click)=\"onClick()\"\r\n>\r\n  <div *ngIf=\"loading\" class=\"po-button-loading-icon\">\r\n    <po-loading-icon p-neutral-color></po-loading-icon>\r\n  </div>\r\n\r\n  <po-icon *ngIf=\"icon\" class=\"po-button-icon\" [p-icon]=\"icon\"></po-icon>\r\n  <span *ngIf=\"label\" class=\"po-button-label\">{{ label }}</span>\r\n</button>\r\n" }]
+        args: [{ selector: 'po-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #button\n  class=\"po-button\"\n  type=\"button\"\n  [attr.p-size]=\"size\"\n  [attr.p-kind]=\"kind\"\n  [attr.p-danger]=\"danger\"\n  [class.po-button-sm]=\"small\"\n  [disabled]=\"disabled || loading\"\n  [attr.aria-label]=\"ariaLabel\"\n  (click)=\"onClick()\"\n>\n  <div *ngIf=\"loading\" class=\"po-button-loading-icon\">\n    <po-loading-icon p-neutral-color></po-loading-icon>\n  </div>\n\n  <po-icon *ngIf=\"icon\" class=\"po-button-icon\" [p-icon]=\"icon\"></po-icon>\n  <span *ngIf=\"label\" class=\"po-button-label\">{{ label }}</span>\n</button>\n" }]
     }], null, { buttonElement: [{
             type: ViewChild,
             args: ['button', { static: true }]
@@ -2746,7 +2748,7 @@ class PoLoadingComponent extends PoLoadingBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLoadingComponent, [{
         type: Component,
-        args: [{ selector: 'po-loading', template: "<div class=\"po-loading\">\r\n  <po-loading-icon></po-loading-icon>\r\n  <span class=\"po-loading-label po-text-ellipsis\" *ngIf=\"text\">{{ text }}</span>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-loading', template: "<div class=\"po-loading\">\n  <po-loading-icon></po-loading-icon>\n  <span class=\"po-loading-label po-text-ellipsis\" *ngIf=\"text\">{{ text }}</span>\n</div>\n" }]
     }], null, null); })();
 /**
@@ -2789,7 +2791,7 @@ class PoLoadingOverlayComponent extends PoLoadingOverlayBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLoadingOverlayComponent, [{
         type: Component,
-        args: [{ selector: 'po-loading-overlay', template: "<div [class.po-overlay-absolute]=\"!screenLock\" [class.po-overlay-fixed]=\"screenLock\">\r\n  <po-loading class=\"po-loading-overlay-content\" [p-text]=\"text\"></po-loading>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-loading-overlay', template: "<div [class.po-overlay-absolute]=\"!screenLock\" [class.po-overlay-fixed]=\"screenLock\">\n  <po-loading class=\"po-loading-overlay-content\" [p-text]=\"text\"></po-loading>\n</div>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: PoLanguageService }]; }, null); })();
 /**
@@ -3742,7 +3744,7 @@ class PoButtonGroupComponent extends PoButtonGroupBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoButtonGroupComponent, [{
         type: Component,
-        args: [{ selector: 'po-button-group', template: "<div class=\"po-button-group-container\">\r\n  <po-button\r\n    *ngFor=\"let button of buttons; index as i\"\r\n    class=\"po-sm-12 po-button-group\"\r\n    [class.po-button-group-button-selected]=\"button.selected\"\r\n    [class.po-button-group-disabled]=\"button.disabled\"\r\n    p-tooltip-position=\"bottom\"\r\n    [p-disabled]=\"button.disabled\"\r\n    [p-icon]=\"button.icon\"\r\n    [p-label]=\"button.label\"\r\n    [p-small]=\"small\"\r\n    [p-tooltip]=\"!button.disabled ? button.tooltip : undefined\"\r\n    (p-click)=\"onButtonClick(button, i); button.action(button)\"\r\n  >\r\n  </po-button>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-button-group', template: "<div class=\"po-button-group-container\">\n  <po-button\n    *ngFor=\"let button of buttons; index as i\"\n    class=\"po-sm-12 po-button-group\"\n    [class.po-button-group-button-selected]=\"button.selected\"\n    [class.po-button-group-disabled]=\"button.disabled\"\n    p-tooltip-position=\"bottom\"\n    [p-disabled]=\"button.disabled\"\n    [p-icon]=\"button.icon\"\n    [p-label]=\"button.label\"\n    [p-small]=\"small\"\n    [p-tooltip]=\"!button.disabled ? button.tooltip : undefined\"\n    (p-click)=\"onButtonClick(button, i); button.action(button)\"\n  >\n  </po-button>\n</div>\n" }]
     }], function () { return [{ type: i0.ViewContainerRef }]; }, null); })();
 /**
@@ -4470,7 +4472,7 @@ class PoCalendarHeaderComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoCalendarHeaderComponent, [{
         type: Component,
-        args: [{ selector: 'po-calendar-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-calendar-header\">\r\n  <span\r\n    *ngIf=\"previous?.observers && !hidePrevious\"\r\n    class=\"po-calendar-header-left po-icon po-icon-arrow-left\"\r\n    (click)=\"previous.emit()\"\r\n  >\r\n  </span>\r\n\r\n  <div class=\"po-calendar-header-title\" attr-calendar>\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <span\r\n    *ngIf=\"next?.observers.length && !hideNext\"\r\n    class=\"po-calendar-header-right po-icon po-icon-arrow-right\"\r\n    (click)=\"next.emit()\"\r\n  >\r\n  </span>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-calendar-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-calendar-header\">\n  <span\n    *ngIf=\"previous?.observers && !hidePrevious\"\n    class=\"po-calendar-header-left po-icon po-icon-arrow-left\"\n    (click)=\"previous.emit()\"\n  >\n  </span>\n\n  <div class=\"po-calendar-header-title\" attr-calendar>\n    <ng-content></ng-content>\n  </div>\n\n  <span\n    *ngIf=\"next?.observers.length && !hideNext\"\n    class=\"po-calendar-header-right po-icon po-icon-arrow-right\"\n    (click)=\"next.emit()\"\n  >\n  </span>\n</div>\n" }]
     }], function () { return []; }, { hidePrevious: [{
             type: Input,
             args: ['p-hide-previous']
@@ -4903,7 +4905,7 @@ class PoCalendarWrapperComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoCalendarWrapperComponent, [{
         type: Component,
-        args: [{ selector: 'po-calendar-wrapper', providers: [PoCalendarService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-calendar-wrapper\">\r\n  <ng-container *ngIf=\"isDayVisible\">\r\n    <po-calendar-header\r\n      [p-hide-previous]=\"isEndPart\"\r\n      [p-hide-next]=\"isStartPart && !responsive\"\r\n      (p-previous)=\"onPreviousMonth()\"\r\n      (p-next)=\"onNextMonth()\"\r\n    >\r\n      <span class=\"po-clickable po-mr-1\" (click)=\"selectDisplayMode('month')\">{{ displayMonth }}</span>\r\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">{{ displayYear }}</span>\r\n    </po-calendar-header>\r\n\r\n    <div class=\"po-calendar-content\">\r\n      <div class=\"po-calendar-labels\">\r\n        <div class=\"po-calendar-label\" *ngFor=\"let weekDay of displayWeekDays\">\r\n          {{ weekDay }}\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"po-calendar-content-list-day\">\r\n        <div\r\n          *ngFor=\"let day of displayDays\"\r\n          class=\"po-calendar-day\"\r\n          [ngClass]=\"getDayBackgroundColor(day)\"\r\n          (click)=\"onSelectDate(day)\"\r\n          (mouseenter)=\"onMouseEnter(day)\"\r\n          (mouseleave)=\"onMouseLeave()\"\r\n          attr-calendar\r\n        >\r\n          <span *ngIf=\"day !== 0\" [ngClass]=\"getDayForegroundColor(day)\">\r\n            {{ day.getDate() }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"isMonthVisible\">\r\n    <po-calendar-header (p-previous)=\"updateYear(-1)\" (p-next)=\"updateYear(1)\">\r\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">\r\n        {{ displayYear }}\r\n      </span>\r\n    </po-calendar-header>\r\n\r\n    <div class=\"po-calendar-content\">\r\n      <div class=\"po-calendar-labels\">\r\n        <div class=\"po-calendar-label\">\r\n          {{ monthLabel }}\r\n        </div>\r\n      </div>\r\n      <div class=\"po-calendar-content-list-month\">\r\n        <div\r\n          *ngFor=\"let month of displayMonths; let i = index\"\r\n          class=\"po-calendar-month\"\r\n          [ngClass]=\"getBackgroundColor(i, displayMonthNumber)\"\r\n          (click)=\"onSelectMonth(displayYear, i)\"\r\n          attr-calendar\r\n        >\r\n          <span [ngClass]=\"getForegroundColor(i, displayMonthNumber)\">\r\n            {{ month }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"isYearVisible\">\r\n    <po-calendar-header (p-previous)=\"updateYear(-10)\" (p-next)=\"updateYear(10)\">\r\n      {{ displayStartDecade }} - {{ displayFinalDecade }}\r\n    </po-calendar-header>\r\n\r\n    <div class=\"po-calendar-content\">\r\n      <div class=\"po-calendar-labels\">\r\n        <div class=\"po-calendar-label\">\r\n          {{ yearLabel }}\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"po-calendar-content-list-year\">\r\n        <div\r\n          *ngFor=\"let year of displayDecade; let i = index\"\r\n          class=\"po-calendar-year\"\r\n          [ngClass]=\"getBackgroundColor(year, currentYear)\"\r\n          (click)=\"onSelectYear(year, displayMonthNumber)\"\r\n          attr-calendar\r\n        >\r\n          <span [ngClass]=\"getForegroundColor(year, currentYear)\">\r\n            {{ year }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!range\">\r\n    <div class=\"po-calendar-footer\">\r\n      <div class=\"po-calendar-footer-today\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"po-calendar-footer-today-button\"\r\n          (click)=\"onSelectDate(today)\"\r\n          [disabled]=\"isTodayUnavailable()\"\r\n        >\r\n          {{ displayToday }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-calendar-wrapper', providers: [PoCalendarService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-calendar-wrapper\">\n  <ng-container *ngIf=\"isDayVisible\">\n    <po-calendar-header\n      [p-hide-previous]=\"isEndPart\"\n      [p-hide-next]=\"isStartPart && !responsive\"\n      (p-previous)=\"onPreviousMonth()\"\n      (p-next)=\"onNextMonth()\"\n    >\n      <span class=\"po-clickable po-mr-1\" (click)=\"selectDisplayMode('month')\">{{ displayMonth }}</span>\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">{{ displayYear }}</span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\" *ngFor=\"let weekDay of displayWeekDays\">\n          {{ weekDay }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-day\">\n        <div\n          *ngFor=\"let day of displayDays\"\n          class=\"po-calendar-day\"\n          [ngClass]=\"getDayBackgroundColor(day)\"\n          (click)=\"onSelectDate(day)\"\n          (mouseenter)=\"onMouseEnter(day)\"\n          (mouseleave)=\"onMouseLeave()\"\n          attr-calendar\n        >\n          <span *ngIf=\"day !== 0\" [ngClass]=\"getDayForegroundColor(day)\">\n            {{ day.getDate() }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isMonthVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-1)\" (p-next)=\"updateYear(1)\">\n      <span class=\"po-clickable\" (click)=\"selectDisplayMode('year')\">\n        {{ displayYear }}\n      </span>\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ monthLabel }}\n        </div>\n      </div>\n      <div class=\"po-calendar-content-list-month\">\n        <div\n          *ngFor=\"let month of displayMonths; let i = index\"\n          class=\"po-calendar-month\"\n          [ngClass]=\"getBackgroundColor(i, displayMonthNumber)\"\n          (click)=\"onSelectMonth(displayYear, i)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(i, displayMonthNumber)\">\n            {{ month }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"isYearVisible\">\n    <po-calendar-header (p-previous)=\"updateYear(-10)\" (p-next)=\"updateYear(10)\">\n      {{ displayStartDecade }} - {{ displayFinalDecade }}\n    </po-calendar-header>\n\n    <div class=\"po-calendar-content\">\n      <div class=\"po-calendar-labels\">\n        <div class=\"po-calendar-label\">\n          {{ yearLabel }}\n        </div>\n      </div>\n\n      <div class=\"po-calendar-content-list-year\">\n        <div\n          *ngFor=\"let year of displayDecade; let i = index\"\n          class=\"po-calendar-year\"\n          [ngClass]=\"getBackgroundColor(year, currentYear)\"\n          (click)=\"onSelectYear(year, displayMonthNumber)\"\n          attr-calendar\n        >\n          <span [ngClass]=\"getForegroundColor(year, currentYear)\">\n            {{ year }}\n          </span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!range\">\n    <div class=\"po-calendar-footer\">\n      <div class=\"po-calendar-footer-today\">\n        <button\n          type=\"button\"\n          class=\"po-calendar-footer-today-button\"\n          (click)=\"onSelectDate(today)\"\n          [disabled]=\"isTodayUnavailable()\"\n        >\n          {{ displayToday }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</div>\n" }]
     }], function () { return [{ type: PoCalendarService }, { type: PoCalendarLangService }, { type: PoDateService }]; }, { value: [{
             type: Input,
             args: ['p-value']
@@ -5210,7 +5212,7 @@ class PoCalendarComponent extends PoCalendarBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoCalendarComponent, [{
         type: Component,
-        args: [{ selector: 'po-calendar', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$6, template: "<ng-container *ngIf=\"isRange; then rangeTemplate; else calendarTemplate\"></ng-container>\r\n\r\n<ng-template #rangeTemplate>\r\n  <div class=\"po-calendar-range\">\r\n    <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'start' }\"></ng-container>\r\n    <ng-container *ngIf=\"!isResponsive\">\r\n      <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'end' }\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #calendarTemplate>\r\n  <div class=\"po-calendar\">\r\n    <ng-template [ngTemplateOutlet]=\"calendarWrapper\"></ng-template>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #calendarWrapper let-partType=\"partType\">\r\n  <po-calendar-wrapper\r\n    [p-value]=\"getValue(partType)\"\r\n    [p-activate-date]=\"getActivateDate(partType)\"\r\n    [p-locale]=\"locale\"\r\n    [p-min-date]=\"minDate\"\r\n    [p-max-date]=\"maxDate\"\r\n    [p-part-type]=\"partType\"\r\n    [p-range]=\"isRange\"\r\n    [p-responsive]=\"isResponsive\"\r\n    [p-selected-value]=\"value\"\r\n    [p-hover-value]=\"hoverValue\"\r\n    (p-header-change)=\"onHeaderChange($event, partType)\"\r\n    (p-select-date)=\"onSelectDate($event, partType)\"\r\n    (p-hover-date)=\"onHoverDate($event)\"\r\n  >\r\n  </po-calendar-wrapper>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-calendar', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$6, template: "<ng-container *ngIf=\"isRange; then rangeTemplate; else calendarTemplate\"></ng-container>\n\n<ng-template #rangeTemplate>\n  <div class=\"po-calendar-range\">\n    <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'start' }\"></ng-container>\n    <ng-container *ngIf=\"!isResponsive\">\n      <ng-container *ngTemplateOutlet=\"calendarWrapper; context: { partType: 'end' }\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n<ng-template #calendarTemplate>\n  <div class=\"po-calendar\">\n    <ng-template [ngTemplateOutlet]=\"calendarWrapper\"></ng-template>\n  </div>\n</ng-template>\n\n<ng-template #calendarWrapper let-partType=\"partType\">\n  <po-calendar-wrapper\n    [p-value]=\"getValue(partType)\"\n    [p-activate-date]=\"getActivateDate(partType)\"\n    [p-locale]=\"locale\"\n    [p-min-date]=\"minDate\"\n    [p-max-date]=\"maxDate\"\n    [p-part-type]=\"partType\"\n    [p-range]=\"isRange\"\n    [p-responsive]=\"isResponsive\"\n    [p-selected-value]=\"value\"\n    [p-hover-value]=\"hoverValue\"\n    (p-header-change)=\"onHeaderChange($event, partType)\"\n    (p-select-date)=\"onSelectDate($event, partType)\"\n    (p-hover-date)=\"onHoverDate($event)\"\n  >\n  </po-calendar-wrapper>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: PoDateService }, { type: PoLanguageService }]; }, null); })();
 /**
@@ -5660,7 +5662,7 @@ class PoChartPathComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartPathComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-path]', template: "<svg:path #chartPath\r\n  class=\"po-chart-path\"\r\n  [class.po-chart-active-path]=\"isActive\"\r\n  [class.po-chart-line-path]=\"chartLine\"\r\n  [class]=\"color?.includes('po-border-color') || color?.includes('po-color') ? color : ''\"\r\n  [attr.fill]=\"chartLine ? 'none' : color\"\r\n  [attr.stroke-dasharray]=\"pathWidth\"\r\n  [attr.stroke-dashoffset]=\"pathWidth\"\r\n  [attr.stroke]=\"chartLine ? color : ''\"\r\n  [attr.d]=\"coordinates\">\r\n</svg:path> " }]
+        args: [{ selector: '[po-chart-path]', template: "<svg:path #chartPath\n  class=\"po-chart-path\"\n  [class.po-chart-active-path]=\"isActive\"\n  [class.po-chart-line-path]=\"chartLine\"\n  [class]=\"color?.includes('po-border-color') || color?.includes('po-color') ? color : ''\"\n  [attr.fill]=\"chartLine ? 'none' : color\"\n  [attr.stroke-dasharray]=\"pathWidth\"\n  [attr.stroke-dashoffset]=\"pathWidth\"\n  [attr.stroke]=\"chartLine ? color : ''\"\n  [attr.d]=\"coordinates\">\n</svg:path> " }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { isActive: [{
             type: Input,
             args: [{ alias: 'p-is-active', transform: convertToBoolean }]
@@ -5776,7 +5778,7 @@ class PoChartSeriesPointComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartSeriesPointComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-series-point]', template: "<svg:circle *ngFor=\"let item of coordinates$ | async; trackBy: trackBy\" \r\n  [p-tooltip]=\"item.tooltipLabel\"\r\n  [p-append-in-body]='true'\r\n  [p-display-tooltip]=\"!chartLine && item.isActive\"\r\n  p-tooltip-position=\"top\"\r\n  class=\"po-chart-line-point\"\r\n  [class]=\"strokeColor?.includes('po-border-color') ? strokeColor : ''\"\r\n  [class.po-chart-active-point]=\"item.isActive\"\r\n  [attr.cx]=\"item.xCoordinate\"\r\n  [attr.cy]=\"item.yCoordinate\"\r\n  [attr.r]=\"radius\"\r\n  [attr.stroke]=\"strokeColor\"\r\n  (click)=\"onClick(item)\"\r\n  (mouseenter)=\"onMouseEnter($event, item)\"\r\n  (mouseleave)=\"onMouseLeave($event)\"\r\n  >\r\n</svg:circle>\r\n" }]
+        args: [{ selector: '[po-chart-series-point]', template: "<svg:circle *ngFor=\"let item of coordinates$ | async; trackBy: trackBy\" \n  [p-tooltip]=\"item.tooltipLabel\"\n  [p-append-in-body]='true'\n  [p-display-tooltip]=\"!chartLine && item.isActive\"\n  p-tooltip-position=\"top\"\n  class=\"po-chart-line-point\"\n  [class]=\"strokeColor?.includes('po-border-color') ? strokeColor : ''\"\n  [class.po-chart-active-point]=\"item.isActive\"\n  [attr.cx]=\"item.xCoordinate\"\n  [attr.cy]=\"item.yCoordinate\"\n  [attr.r]=\"radius\"\n  [attr.stroke]=\"strokeColor\"\n  (click)=\"onClick(item)\"\n  (mouseenter)=\"onMouseEnter($event, item)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n  >\n</svg:circle>\n" }]
     }], function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { animate: [{
             type: Input,
             args: ['p-animate']
@@ -5902,7 +5904,7 @@ class PoChartAreaComponent extends PoChartLineBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartAreaComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-area]', template: "<svg:g #chartLine>\r\n\r\n  <svg:g *ngFor=\"let item of seriesPathsCoordinates; let i = index; trackBy: trackBy\"\r\n    [class]=\"'po-chart-line-path-group-' + i\"\r\n    (mouseenter)=\"onEnter(i)\"\r\n    (mouseleave)=\"onLeave(i)\"\r\n  >\r\n    <!-- SERIES PATHS -->\r\n    <svg:g po-chart-path\r\n      [p-chart-line]=\"chartType === 'line'\"\r\n      [attr.key]=\"'po-chart-line-path-' + i\"\r\n      [p-animate]=\"animate\"\r\n      [p-color]=\"item.color\" \r\n      [p-coordinates]=\"item?.coordinates\"\r\n      [p-is-active]=\"item.isActive\"\r\n      >\r\n      </svg:g>\r\n\r\n    <!-- SERIES POINTS -->\r\n    <svg:g po-chart-series-point\r\n      [p-animate]=\"animate\"\r\n      [p-chart-line]=\"chartType === 'line'\"\r\n      [p-color]=\"item.color\"\r\n      [p-coordinates]=\"seriesPointsCoordinates[i]\"\r\n      [p-is-active]=\"activeTooltip\"\r\n      [p-relative-to]=\"'po-chart-line-path-group-' + i\" \r\n      [attr.key]=\"'po-chart-line-path-points-group-' + i\"\r\n      (p-point-click)=\"onSeriePointClick($event)\"\r\n      (p-point-hover)=\"onSeriePointHover($event)\"\r\n      ></svg:g>\r\n  </svg:g>\r\n\r\n</svg:g>" }]
+        args: [{ selector: '[po-chart-area]', template: "<svg:g #chartLine>\n\n  <svg:g *ngFor=\"let item of seriesPathsCoordinates; let i = index; trackBy: trackBy\"\n    [class]=\"'po-chart-line-path-group-' + i\"\n    (mouseenter)=\"onEnter(i)\"\n    (mouseleave)=\"onLeave(i)\"\n  >\n    <!-- SERIES PATHS -->\n    <svg:g po-chart-path\n      [p-chart-line]=\"chartType === 'line'\"\n      [attr.key]=\"'po-chart-line-path-' + i\"\n      [p-animate]=\"animate\"\n      [p-color]=\"item.color\" \n      [p-coordinates]=\"item?.coordinates\"\n      [p-is-active]=\"item.isActive\"\n      >\n      </svg:g>\n\n    <!-- SERIES POINTS -->\n    <svg:g po-chart-series-point\n      [p-animate]=\"animate\"\n      [p-chart-line]=\"chartType === 'line'\"\n      [p-color]=\"item.color\"\n      [p-coordinates]=\"seriesPointsCoordinates[i]\"\n      [p-is-active]=\"activeTooltip\"\n      [p-relative-to]=\"'po-chart-line-path-group-' + i\" \n      [attr.key]=\"'po-chart-line-path-points-group-' + i\"\n      (p-point-click)=\"onSeriePointClick($event)\"\n      (p-point-hover)=\"onSeriePointHover($event)\"\n      ></svg:g>\n  </svg:g>\n\n</svg:g>" }]
     }], function () { return [{ type: PoChartMathsService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, null); })();
 const _c0$1u = ["po-chart-axis-path", ""];
@@ -5945,7 +5947,7 @@ class PoChartAxisPathComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartAxisPathComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-axis-path]', template: "<svg:g>\r\n  <svg:path *ngFor=\"let item of axisXCoordinates; trackBy: trackBy\"\r\n    class=\"po-chart-axis-path\" \r\n    [attr.d]=\"item.coordinates\">\r\n  </svg:path> \r\n</svg:g>\r\n\r\n<svg:g>\r\n  <svg:path *ngFor=\"let item of axisYCoordinates; trackBy: trackBy\"\r\n    class=\"po-chart-axis-path\" \r\n    [attr.d]=\"item.coordinates\">\r\n  </svg:path> \r\n</svg:g>" }]
+        args: [{ selector: '[po-chart-axis-path]', template: "<svg:g>\n  <svg:path *ngFor=\"let item of axisXCoordinates; trackBy: trackBy\"\n    class=\"po-chart-axis-path\" \n    [attr.d]=\"item.coordinates\">\n  </svg:path> \n</svg:g>\n\n<svg:g>\n  <svg:path *ngFor=\"let item of axisYCoordinates; trackBy: trackBy\"\n    class=\"po-chart-axis-path\" \n    [attr.d]=\"item.coordinates\">\n  </svg:path> \n</svg:g>" }]
     }], function () { return []; }, { axisXCoordinates: [{
             type: Input,
             args: ['p-axis-x-coordinates']
@@ -6006,7 +6008,7 @@ class PoChartAxisLabelComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartAxisLabelComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-axis-label]', template: "<svg:g>\r\n  <svg:text *ngFor=\"let item of axisXLabelCoordinates; trackBy: trackBy\"\r\n    class=\"po-chart-axis-x-label\" \r\n    dominant-baseline=\"middle\"\r\n    [attr.x]=\"item.xCoordinate\"\r\n    [attr.y]=\"item.yCoordinate\">\r\n    {{ item.label }}\r\n  </svg:text> \r\n</svg:g>\r\n\r\n<svg:g>\r\n  <svg:text *ngFor=\"let item of axisYLabelCoordinates; let first = first; let last = last; trackBy: trackBy\"\r\n    class=\"po-chart-axis-y-label\" \r\n    [class.po-chart-centered-label]=\"!alignByTheCorners\"\r\n    [attr.x]=\"item.xCoordinate\"\r\n    [attr.y]=\"item.yCoordinate\">\r\n    {{ item.label }}\r\n  </svg:text> \r\n</svg:g>" }]
+        args: [{ selector: '[po-chart-axis-label]', template: "<svg:g>\n  <svg:text *ngFor=\"let item of axisXLabelCoordinates; trackBy: trackBy\"\n    class=\"po-chart-axis-x-label\" \n    dominant-baseline=\"middle\"\n    [attr.x]=\"item.xCoordinate\"\n    [attr.y]=\"item.yCoordinate\">\n    {{ item.label }}\n  </svg:text> \n</svg:g>\n\n<svg:g>\n  <svg:text *ngFor=\"let item of axisYLabelCoordinates; let first = first; let last = last; trackBy: trackBy\"\n    class=\"po-chart-axis-y-label\" \n    [class.po-chart-centered-label]=\"!alignByTheCorners\"\n    [attr.x]=\"item.xCoordinate\"\n    [attr.y]=\"item.yCoordinate\">\n    {{ item.label }}\n  </svg:text> \n</svg:g>" }]
     }], function () { return []; }, { alignByTheCorners: [{
             type: Input,
             args: ['p-align-by-the-corners']
@@ -6304,7 +6306,7 @@ class PoChartAxisComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartAxisComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-axis]', template: "<svg:g po-chart-axis-path [p-axis-x-coordinates]=\"axisXCoordinates\" [p-axis-y-coordinates]=\"axisYCoordinates\"></svg:g>\r\n\r\n<svg:g po-chart-axis-label \r\n  [p-align-by-the-corners]=\"alignByTheCorners\" \r\n  [p-axis-x-label-coordinates]=\"axisXLabelCoordinates\" \r\n  [p-axis-y-label-coordinates]=\"axisYLabelCoordinates\" \r\n  [p-type]=\"type\"\r\n  >\r\n</svg:g>" }]
+        args: [{ selector: '[po-chart-axis]', template: "<svg:g po-chart-axis-path [p-axis-x-coordinates]=\"axisXCoordinates\" [p-axis-y-coordinates]=\"axisYCoordinates\"></svg:g>\n\n<svg:g po-chart-axis-label \n  [p-align-by-the-corners]=\"alignByTheCorners\" \n  [p-axis-x-label-coordinates]=\"axisXLabelCoordinates\" \n  [p-axis-y-label-coordinates]=\"axisYLabelCoordinates\" \n  [p-type]=\"type\"\n  >\n</svg:g>" }]
     }], function () { return [{ type: PoChartMathsService }]; }, { alignByTheCorners: [{
             type: Input,
             args: ['p-align-by-the-corners']
@@ -6476,7 +6478,7 @@ class PoChartBarPathComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartBarPathComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-bar-path]', template: "<svg:path *ngFor=\"let item of coordinates; trackBy: trackBy\"\r\n  [p-tooltip]=\"item.tooltipLabel\"\r\n  [p-tooltip-position]=\"tooltipPosition\"\r\n  [p-append-in-body]='true'\r\n  class=\"po-chart-bar-path\"\r\n  [class]=\"color?.includes('po-color') ? color : ''\"\r\n  [attr.fill]=\"color\"\r\n  [attr.d]=\"item.coordinates\"\r\n  (mouseenter)=\"onMouseEnter(item)\"\r\n  (click)=\"onClick(item)\">\r\n</svg:path> \r\n" }]
+        args: [{ selector: '[po-chart-bar-path]', template: "<svg:path *ngFor=\"let item of coordinates; trackBy: trackBy\"\n  [p-tooltip]=\"item.tooltipLabel\"\n  [p-tooltip-position]=\"tooltipPosition\"\n  [p-append-in-body]='true'\n  class=\"po-chart-bar-path\"\n  [class]=\"color?.includes('po-color') ? color : ''\"\n  [attr.fill]=\"color\"\n  [attr.d]=\"item.coordinates\"\n  (mouseenter)=\"onMouseEnter(item)\"\n  (click)=\"onClick(item)\">\n</svg:path> \n" }]
     }], function () { return []; }, { color: [{
             type: Input,
             args: ['p-color']
@@ -6567,7 +6569,7 @@ class PoChartBarComponent extends PoChartBarBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartBarComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-bar]', template: "<svg:g>\r\n  <svg:g *ngFor=\"let item of seriesPathsCoordinates; let i = index; trackBy: trackBy\"\r\n    [class]=\"'po-chart-bar-group-' + i\"\r\n  >\r\n    <!-- SERIES PATHS -->\r\n    <svg:g po-chart-bar-path\r\n      [attr.key]=\"'po-chart-bar-path-' + i\"\r\n      [p-color]=\"item[0]?.color\" \r\n      [p-coordinates]=\"item\"\r\n      [p-tooltip-position]=\"tooltipPosition\"\r\n      (p-bar-click)=\"onSerieBarClick($event)\"\r\n      (p-bar-hover)=\"onSerieBarHover($event)\"\r\n      >\r\n      </svg:g>\r\n  </svg:g>\r\n</svg:g>" }]
+        args: [{ selector: '[po-chart-bar]', template: "<svg:g>\n  <svg:g *ngFor=\"let item of seriesPathsCoordinates; let i = index; trackBy: trackBy\"\n    [class]=\"'po-chart-bar-group-' + i\"\n  >\n    <!-- SERIES PATHS -->\n    <svg:g po-chart-bar-path\n      [attr.key]=\"'po-chart-bar-path-' + i\"\n      [p-color]=\"item[0]?.color\" \n      [p-coordinates]=\"item\"\n      [p-tooltip-position]=\"tooltipPosition\"\n      (p-bar-click)=\"onSerieBarClick($event)\"\n      (p-bar-hover)=\"onSerieBarHover($event)\"\n      >\n      </svg:g>\n  </svg:g>\n</svg:g>" }]
     }], function () { return [{ type: PoChartMathsService }]; }, null); })();
 const _c0$1p = ["po-chart-column", ""];
@@ -6644,7 +6646,7 @@ class PoChartColumnComponent extends PoChartBarBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartColumnComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-column]', template: "<svg:g>\r\n  <svg:g *ngFor=\"let item of seriesPathsCoordinates; let i = index; trackBy: trackBy\"\r\n    [class]=\"'po-chart-bar-group-' + i\"\r\n  >\r\n    <!-- SERIES PATHS -->\r\n    <svg:g po-chart-bar-path\r\n      [attr.key]=\"'po-chart-bar-path-' + i\"\r\n      [p-color]=\"item[0]?.color\" \r\n      [p-coordinates]=\"item\"\r\n      [p-tooltip-position]=\"tooltipPosition\"\r\n      (p-bar-click)=\"onSerieBarClick($event)\"\r\n      (p-bar-hover)=\"onSerieBarHover($event)\"\r\n      >\r\n      </svg:g>\r\n  </svg:g>\r\n</svg:g>" }]
+        args: [{ selector: '[po-chart-column]', template: "<svg:g>\n  <svg:g *ngFor=\"let item of seriesPathsCoordinates; let i = index; trackBy: trackBy\"\n    [class]=\"'po-chart-bar-group-' + i\"\n  >\n    <!-- SERIES PATHS -->\n    <svg:g po-chart-bar-path\n      [attr.key]=\"'po-chart-bar-path-' + i\"\n      [p-color]=\"item[0]?.color\" \n      [p-coordinates]=\"item\"\n      [p-tooltip-position]=\"tooltipPosition\"\n      (p-bar-click)=\"onSerieBarClick($event)\"\n      (p-bar-hover)=\"onSerieBarHover($event)\"\n      >\n      </svg:g>\n  </svg:g>\n</svg:g>" }]
     }], function () { return [{ type: PoChartMathsService }]; }, null); })();
 // Array de cores para gráficos definido pela equipe de UX PO.
@@ -7163,7 +7165,7 @@ class PoChartLineComponent extends PoChartLineBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartLineComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-line]', template: "<svg:g #chartLine>\r\n\r\n  <svg:g *ngFor=\"let item of seriesPathsCoordinates; let i = index; trackBy: trackBy\"\r\n    [class]=\"'po-chart-line-path-group-' + i\"\r\n    (mouseenter)=\"onEnter(i)\"\r\n    (mouseleave)=\"onLeave(i)\"\r\n  >\r\n    <!-- SERIES PATHS -->\r\n    <svg:g po-chart-path\r\n      [p-chart-line]=\"chartType === 'line'\"\r\n      [attr.key]=\"'po-chart-line-path-' + i\"\r\n      [p-animate]=\"animate\"\r\n      [p-color]=\"item.color\" \r\n      [p-coordinates]=\"item?.coordinates\"\r\n      [p-is-active]=\"item.isActive\"\r\n      >\r\n      </svg:g>\r\n\r\n    <!-- SERIES POINTS -->\r\n    <svg:g po-chart-series-point\r\n      [p-animate]=\"animate\"\r\n      [p-chart-line]=\"chartType === 'line'\"\r\n      [p-color]=\"item.color\"\r\n      [p-coordinates]=\"seriesPointsCoordinates[i]\"\r\n      [p-is-active]=\"activeTooltip\"\r\n      [p-relative-to]=\"'po-chart-line-path-group-' + i\" \r\n      [attr.key]=\"'po-chart-line-path-points-group-' + i\"\r\n      (p-point-click)=\"onSeriePointClick($event)\"\r\n      (p-point-hover)=\"onSeriePointHover($event)\"\r\n      ></svg:g>\r\n  </svg:g>\r\n\r\n</svg:g>" }]
+        args: [{ selector: '[po-chart-line]', template: "<svg:g #chartLine>\n\n  <svg:g *ngFor=\"let item of seriesPathsCoordinates; let i = index; trackBy: trackBy\"\n    [class]=\"'po-chart-line-path-group-' + i\"\n    (mouseenter)=\"onEnter(i)\"\n    (mouseleave)=\"onLeave(i)\"\n  >\n    <!-- SERIES PATHS -->\n    <svg:g po-chart-path\n      [p-chart-line]=\"chartType === 'line'\"\n      [attr.key]=\"'po-chart-line-path-' + i\"\n      [p-animate]=\"animate\"\n      [p-color]=\"item.color\" \n      [p-coordinates]=\"item?.coordinates\"\n      [p-is-active]=\"item.isActive\"\n      >\n      </svg:g>\n\n    <!-- SERIES POINTS -->\n    <svg:g po-chart-series-point\n      [p-animate]=\"animate\"\n      [p-chart-line]=\"chartType === 'line'\"\n      [p-color]=\"item.color\"\n      [p-coordinates]=\"seriesPointsCoordinates[i]\"\n      [p-is-active]=\"activeTooltip\"\n      [p-relative-to]=\"'po-chart-line-path-group-' + i\" \n      [attr.key]=\"'po-chart-line-path-points-group-' + i\"\n      (p-point-click)=\"onSeriePointClick($event)\"\n      (p-point-hover)=\"onSeriePointHover($event)\"\n      ></svg:g>\n  </svg:g>\n\n</svg:g>" }]
     }], function () { return [{ type: PoChartMathsService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, null); })();
 const _c0$1n = ["svgPaths"];
@@ -7469,7 +7471,7 @@ class PoChartCircularPathComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartCircularPathComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-circular-path]', template: "<svg:path #svgPath\r\n  class=\"po-path-item\"\r\n  [class]=\"serie?.color.includes('po-color') ? serie.color : ''\"\r\n  [p-chart-tooltip]=\"serie?.tooltipLabel\"\r\n  [attr.fill]=\"serie?.color\"\r\n  (click)=\"onMouseClick()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n  >\r\n</svg:path> \r\n" }]
+        args: [{ selector: '[po-chart-circular-path]', template: "<svg:path #svgPath\n  class=\"po-path-item\"\n  [class]=\"serie?.color.includes('po-color') ? serie.color : ''\"\n  [p-chart-tooltip]=\"serie?.tooltipLabel\"\n  [attr.fill]=\"serie?.color\"\n  (click)=\"onMouseClick()\"\n  (mouseenter)=\"onMouseEnter()\"\n  >\n</svg:path> \n" }]
     }], function () { return [{ type: i0.Renderer2 }]; }, { serie: [{
             type: Input,
             args: ['p-serie']
@@ -7522,7 +7524,7 @@ class PoChartCircularLabelComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartCircularLabelComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-circular-label]', template: "<svg:text #svgLabel \r\n  class=\"po-chart-label\" \r\n  dominant-baseline=\"middle\"\r\n  [class.po-invisible]=\"!showLabel\"\r\n  [attr.fill]=\"serie?.color\"\r\n  [attr.x]=\"serie?.xCoordinate\"\r\n  [attr.y]=\"serie?.yCoordinate\">\r\n  {{ serie?.label }}\r\n</svg:text> " }]
+        args: [{ selector: '[po-chart-circular-label]', template: "<svg:text #svgLabel \n  class=\"po-chart-label\" \n  dominant-baseline=\"middle\"\n  [class.po-invisible]=\"!showLabel\"\n  [attr.fill]=\"serie?.color\"\n  [attr.x]=\"serie?.xCoordinate\"\n  [attr.y]=\"serie?.yCoordinate\">\n  {{ serie?.label }}\n</svg:text> " }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, { serie: [{
             type: Input,
             args: ['p-serie']
@@ -7630,7 +7632,7 @@ class PoChartPieComponent extends PoChartCircularComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartPieComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-pie]', template: "<svg:g>\r\n  <!-- SERIES PATHS -->\r\n  <svg:g *ngFor=\"let item of seriesList; let i = index\">\r\n    <svg:g #svgPaths po-chart-circular-path\r\n      [attr.key]=\"'po-chart-circular-path-' + i\"\r\n      [p-serie]=\"item\"\r\n      (p-on-click)=\"onSerieClick($event)\"\r\n      (p-on-hover)=\"onSerieHover($event)\">\r\n    </svg:g>\r\n  </svg:g>\r\n\r\n  <!-- SERIES LABELS -->\r\n  <svg:g *ngIf=\"canDisplayLabels\">\r\n    <svg:g *ngFor=\"let item of seriesLabels; let i = index\">\r\n      <svg:g #svgLabels po-chart-circular-label\r\n        [attr.key]=\"'po-chart-circular-label-' + i\"\r\n        [p-serie]=\"item\"\r\n        [p-show-label]=\"showLabels\">\r\n      </svg:g>\r\n    </svg:g>\r\n  </svg:g>\r\n</svg:g>\r\n\r\n" }]
+        args: [{ selector: '[po-chart-pie]', template: "<svg:g>\n  <!-- SERIES PATHS -->\n  <svg:g *ngFor=\"let item of seriesList; let i = index\">\n    <svg:g #svgPaths po-chart-circular-path\n      [attr.key]=\"'po-chart-circular-path-' + i\"\n      [p-serie]=\"item\"\n      (p-on-click)=\"onSerieClick($event)\"\n      (p-on-hover)=\"onSerieHover($event)\">\n    </svg:g>\n  </svg:g>\n\n  <!-- SERIES LABELS -->\n  <svg:g *ngIf=\"canDisplayLabels\">\n    <svg:g *ngFor=\"let item of seriesLabels; let i = index\">\n      <svg:g #svgLabels po-chart-circular-label\n        [attr.key]=\"'po-chart-circular-label-' + i\"\n        [p-serie]=\"item\"\n        [p-show-label]=\"showLabels\">\n      </svg:g>\n    </svg:g>\n  </svg:g>\n</svg:g>\n\n" }]
     }], function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, null); })();
 const _c0$1j = ["po-chart-donut", ""];
@@ -7784,7 +7786,7 @@ class PoChartDonutComponent extends PoChartCircularComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartDonutComponent, [{
         type: Component,
-        args: [{ selector: '[po-chart-donut]', template: "<svg:g>\r\n  <!-- SERIES PATHS -->\r\n  <svg:g *ngFor=\"let item of seriesList; let i = index\">\r\n    <svg:g #svgPaths po-chart-circular-path\r\n      [attr.key]=\"'po-chart-circular-path-' + i\"\r\n      [p-serie]=\"item\"\r\n      (p-on-click)=\"onSerieClick($event)\"\r\n      (p-on-hover)=\"onSerieHover($event)\">\r\n    </svg:g>\r\n  </svg:g>\r\n\r\n  <!-- SERIES LABELS -->\r\n  <svg:g *ngIf=\"canDisplayLabels\">\r\n    <svg:g *ngFor=\"let item of seriesLabels; let i = index\">\r\n      <svg:g #svgLabels po-chart-circular-label\r\n        [attr.key]=\"'po-chart-circular-label-' + i\"\r\n        [p-serie]=\"item\"\r\n        [p-show-label]=\"showLabels\">\r\n      </svg:g>\r\n    </svg:g>\r\n  </svg:g>\r\n</svg:g>\r\n\r\n" }]
+        args: [{ selector: '[po-chart-donut]', template: "<svg:g>\n  <!-- SERIES PATHS -->\n  <svg:g *ngFor=\"let item of seriesList; let i = index\">\n    <svg:g #svgPaths po-chart-circular-path\n      [attr.key]=\"'po-chart-circular-path-' + i\"\n      [p-serie]=\"item\"\n      (p-on-click)=\"onSerieClick($event)\"\n      (p-on-hover)=\"onSerieHover($event)\">\n    </svg:g>\n  </svg:g>\n\n  <!-- SERIES LABELS -->\n  <svg:g *ngIf=\"canDisplayLabels\">\n    <svg:g *ngFor=\"let item of seriesLabels; let i = index\">\n      <svg:g #svgLabels po-chart-circular-label\n        [attr.key]=\"'po-chart-circular-label-' + i\"\n        [p-serie]=\"item\"\n        [p-show-label]=\"showLabels\">\n      </svg:g>\n    </svg:g>\n  </svg:g>\n</svg:g>\n\n" }]
     }], function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, null); })();
 const _c0$1i = ["svgELement"];
@@ -8004,7 +8006,7 @@ class PoChartContainerComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartContainerComponent, [{
         type: Component,
-        args: [{ selector: 'po-chart-container', template: "<svg:svg\r\n  #svgELement\r\n  class=\"po-chart-svg-element\"\r\n  preserveAspectRatio=\"xMidYMin meet\"\r\n  [attr.viewBox]=\"viewBox\"\r\n  [attr.width]=\"containerSize.svgWidth\"\r\n  [attr.height]=\"containerSize.svgHeight\"\r\n>\r\n  <!-- axis -->\r\n  <svg:g\r\n    *ngIf=\"!isTypeCircular\"\r\n    po-chart-axis\r\n    [p-align-by-the-corners]=\"alignByTheCorners\"\r\n    [p-range]=\"range\"\r\n    [p-type]=\"type\"\r\n    [p-series]=\"series\"\r\n    [p-container-size]=\"containerSize\"\r\n    [p-options]=\"axisOptions\"\r\n    [p-categories]=\"categories\"\r\n    (p-categories-coordinates)=\"getCategoriesCoordinates($event)\"\r\n  ></svg:g>\r\n\r\n  <!-- chart area -->\r\n  <svg:g\r\n    *ngIf=\"(type === 'area' || type === 'line' || type === 'column') && seriesByType['area'].length\"\r\n    po-chart-area\r\n    [p-align-by-the-corners]=\"alignByTheCorners\"\r\n    [p-svg-space]=\"svgSpace\"\r\n    [p-categories]=\"categories\"\r\n    [p-categories-coordinates]=\"categoriesCoordinates\"\r\n    [p-range]=\"range\"\r\n    [p-series]=\"seriesByType['area']\"\r\n    [p-container-size]=\"containerSize\"\r\n    (p-bar-hover)=\"onSerieHover($event)\"\r\n    (p-bar-click)=\"onSerieClick($event)\"\r\n  ></svg:g>\r\n\r\n  <!-- chart column -->\r\n  <svg:g\r\n    *ngIf=\"(type === 'area' || type === 'line' || type === 'column') && seriesByType['column'].length\"\r\n    po-chart-column\r\n    [p-categories]=\"categories\"\r\n    [p-range]=\"range\"\r\n    [p-series]=\"seriesByType['column']\"\r\n    [p-container-size]=\"containerSize\"\r\n    (p-bar-hover)=\"onSerieHover($event)\"\r\n    (p-bar-click)=\"onSerieClick($event)\"\r\n  ></svg:g>\r\n\r\n  <!-- chart line -->\r\n  <svg:g\r\n    *ngIf=\"(type === 'area' || type === 'line' || type === 'column') && seriesByType['line'].length\"\r\n    po-chart-line\r\n    [p-categories]=\"categories\"\r\n    [p-range]=\"range\"\r\n    [p-series]=\"seriesByType['line']\"\r\n    [p-container-size]=\"containerSize\"\r\n    (p-point-hover)=\"onSerieHover($event)\"\r\n    (p-point-click)=\"onSerieClick($event)\"\r\n  ></svg:g>\r\n\r\n  <!-- chart bar -->\r\n  <svg:g\r\n    *ngIf=\"type === 'bar'\"\r\n    po-chart-bar\r\n    [p-categories]=\"categories\"\r\n    [p-range]=\"range\"\r\n    [p-series]=\"seriesByType['bar']\"\r\n    [p-container-size]=\"containerSize\"\r\n    (p-bar-hover)=\"onSerieHover($event)\"\r\n    (p-bar-click)=\"onSerieClick($event)\"\r\n  ></svg:g>\r\n\r\n  <svg:g\r\n    *ngIf=\"type === 'pie'\"\r\n    po-chart-pie\r\n    [p-series]=\"seriesByType['pie']\"\r\n    [p-container-size]=\"containerSize\"\r\n    (p-circular-hover)=\"onSerieHover($event)\"\r\n    (p-circular-click)=\"onSerieClick($event)\"\r\n  ></svg:g>\r\n\r\n  <svg:g\r\n    *ngIf=\"type === 'donut'\"\r\n    po-chart-donut\r\n    [p-options]=\"options\"\r\n    [p-series]=\"seriesByType['donut']\"\r\n    [p-container-size]=\"containerSize\"\r\n    (p-circular-hover)=\"onSerieHover($event)\"\r\n    (p-circular-click)=\"onSerieClick($event)\"\r\n  ></svg:g>\r\n</svg:svg>\r\n" }]
+        args: [{ selector: 'po-chart-container', template: "<svg:svg\n  #svgELement\n  class=\"po-chart-svg-element\"\n  preserveAspectRatio=\"xMidYMin meet\"\n  [attr.viewBox]=\"viewBox\"\n  [attr.width]=\"containerSize.svgWidth\"\n  [attr.height]=\"containerSize.svgHeight\"\n>\n  <!-- axis -->\n  <svg:g\n    *ngIf=\"!isTypeCircular\"\n    po-chart-axis\n    [p-align-by-the-corners]=\"alignByTheCorners\"\n    [p-range]=\"range\"\n    [p-type]=\"type\"\n    [p-series]=\"series\"\n    [p-container-size]=\"containerSize\"\n    [p-options]=\"axisOptions\"\n    [p-categories]=\"categories\"\n    (p-categories-coordinates)=\"getCategoriesCoordinates($event)\"\n  ></svg:g>\n\n  <!-- chart area -->\n  <svg:g\n    *ngIf=\"(type === 'area' || type === 'line' || type === 'column') && seriesByType['area'].length\"\n    po-chart-area\n    [p-align-by-the-corners]=\"alignByTheCorners\"\n    [p-svg-space]=\"svgSpace\"\n    [p-categories]=\"categories\"\n    [p-categories-coordinates]=\"categoriesCoordinates\"\n    [p-range]=\"range\"\n    [p-series]=\"seriesByType['area']\"\n    [p-container-size]=\"containerSize\"\n    (p-bar-hover)=\"onSerieHover($event)\"\n    (p-bar-click)=\"onSerieClick($event)\"\n  ></svg:g>\n\n  <!-- chart column -->\n  <svg:g\n    *ngIf=\"(type === 'area' || type === 'line' || type === 'column') && seriesByType['column'].length\"\n    po-chart-column\n    [p-categories]=\"categories\"\n    [p-range]=\"range\"\n    [p-series]=\"seriesByType['column']\"\n    [p-container-size]=\"containerSize\"\n    (p-bar-hover)=\"onSerieHover($event)\"\n    (p-bar-click)=\"onSerieClick($event)\"\n  ></svg:g>\n\n  <!-- chart line -->\n  <svg:g\n    *ngIf=\"(type === 'area' || type === 'line' || type === 'column') && seriesByType['line'].length\"\n    po-chart-line\n    [p-categories]=\"categories\"\n    [p-range]=\"range\"\n    [p-series]=\"seriesByType['line']\"\n    [p-container-size]=\"containerSize\"\n    (p-point-hover)=\"onSerieHover($event)\"\n    (p-point-click)=\"onSerieClick($event)\"\n  ></svg:g>\n\n  <!-- chart bar -->\n  <svg:g\n    *ngIf=\"type === 'bar'\"\n    po-chart-bar\n    [p-categories]=\"categories\"\n    [p-range]=\"range\"\n    [p-series]=\"seriesByType['bar']\"\n    [p-container-size]=\"containerSize\"\n    (p-bar-hover)=\"onSerieHover($event)\"\n    (p-bar-click)=\"onSerieClick($event)\"\n  ></svg:g>\n\n  <svg:g\n    *ngIf=\"type === 'pie'\"\n    po-chart-pie\n    [p-series]=\"seriesByType['pie']\"\n    [p-container-size]=\"containerSize\"\n    (p-circular-hover)=\"onSerieHover($event)\"\n    (p-circular-click)=\"onSerieClick($event)\"\n  ></svg:g>\n\n  <svg:g\n    *ngIf=\"type === 'donut'\"\n    po-chart-donut\n    [p-options]=\"options\"\n    [p-series]=\"seriesByType['donut']\"\n    [p-container-size]=\"containerSize\"\n    (p-circular-hover)=\"onSerieHover($event)\"\n    (p-circular-click)=\"onSerieClick($event)\"\n  ></svg:g>\n</svg:svg>\n" }]
     }], function () { return [{ type: PoChartMathsService }]; }, { categories: [{
             type: Input,
             args: ['p-categories']
@@ -8066,7 +8068,7 @@ class PoChartLegendComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartLegendComponent, [{
         type: Component,
-        args: [{ selector: 'po-chart-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-chart-legend\">\r\n  <div class=\"po-chart-legend-container\">\r\n    <div class=\"po-chart-legend-item\" *ngFor=\"let serie of series; let i = index\">\r\n      <div\r\n        class=\"po-chart-legend-square\"\r\n        [class]=\"serie.color?.includes('po-color') ? serie.color : ''\"\r\n        [style.background]=\"serie.color\"\r\n      ></div>\r\n      <span class=\"po-chart-legend-text\">{{ serie.label || serie.category }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-chart-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-chart-legend\">\n  <div class=\"po-chart-legend-container\">\n    <div class=\"po-chart-legend-item\" *ngFor=\"let serie of series; let i = index\">\n      <div\n        class=\"po-chart-legend-square\"\n        [class]=\"serie.color?.includes('po-color') ? serie.color : ''\"\n        [style.background]=\"serie.color\"\n      ></div>\n      <span class=\"po-chart-legend-text\">{{ serie.label || serie.category }}</span>\n    </div>\n  </div>\n</div>\n" }]
     }], null, { type: [{
             type: Input,
             args: ['p-type']
@@ -8351,7 +8353,7 @@ class PoChartComponent extends PoChartBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartComponent, [{
         type: Component,
-        args: [{ selector: 'po-chart', template: "<div #chartWrapper class=\"po-chart-wrapper\" (p-resize-observer)=\"resizeAction()\">\r\n  <div #chartHeader class=\"po-chart-header\">\r\n    <div class=\"po-chart-title\">{{ title }}</div>\r\n  </div>\r\n\r\n  <po-chart-container\r\n    [p-options]=\"options\"\r\n    [p-type]=\"chartType\"\r\n    [p-series]=\"chartSeries\"\r\n    [p-categories]=\"categories\"\r\n    [p-container-size]=\"svgContainerSize\"\r\n    (p-serie-click)=\"onSeriesClick($event)\"\r\n    (p-serie-hover)=\"onSeriesHover($event)\"\r\n  ></po-chart-container>\r\n\r\n  <!-- Inje\u00E7\u00E3o de gr\u00E1ficos do tipo gauge. Remover na deprecia\u00E7\u00E3o.  -->\r\n  <ng-template #chartContainer></ng-template>\r\n\r\n  <div *ngIf=\"options?.legend !== false\">\r\n    <ng-container *ngTemplateOutlet=\"chartLegendGroup\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #chartLegendGroup>\r\n  <po-chart-legend #chartLegend [p-series]=\"chartSeries\" [p-type]=\"type\"> </po-chart-legend>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-chart', template: "<div #chartWrapper class=\"po-chart-wrapper\" (p-resize-observer)=\"resizeAction()\">\n  <div #chartHeader class=\"po-chart-header\">\n    <div class=\"po-chart-title\">{{ title }}</div>\n  </div>\n\n  <po-chart-container\n    [p-options]=\"options\"\n    [p-type]=\"chartType\"\n    [p-series]=\"chartSeries\"\n    [p-categories]=\"categories\"\n    [p-container-size]=\"svgContainerSize\"\n    (p-serie-click)=\"onSeriesClick($event)\"\n    (p-serie-hover)=\"onSeriesHover($event)\"\n  ></po-chart-container>\n\n  <!-- Inje\u00E7\u00E3o de gr\u00E1ficos do tipo gauge. Remover na deprecia\u00E7\u00E3o.  -->\n  <ng-template #chartContainer></ng-template>\n\n  <div *ngIf=\"options?.legend !== false\">\n    <ng-container *ngTemplateOutlet=\"chartLegendGroup\"></ng-container>\n  </div>\n</div>\n\n<ng-template #chartLegendGroup>\n  <po-chart-legend #chartLegend [p-series]=\"chartSeries\" [p-type]=\"type\"> </po-chart-legend>\n</ng-template>\n" }]
     }], function () { return [{ type: PoColorService }, { type: i0.ChangeDetectorRef }, { type: PoChartSvgContainerService }, { type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: PoChartMathsService }, { type: i0.Renderer2 }]; }, { chartContainer: [{
             type: ViewChild,
             args: ['chartContainer', { read: ViewContainerRef, static: true }]
@@ -8554,7 +8556,7 @@ class PoContainerComponent extends PoContainerBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoContainerComponent, [{
         type: Component,
-        args: [{ selector: 'po-container', template: "<div\r\n  class=\"po-container\"\r\n  [class.po-container-no-border]=\"noBorder\"\r\n  [class.po-container-no-padding]=\"noPadding\"\r\n  [style.height]=\"height ? height + 'px' : 'auto'\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-container', template: "<div\n  class=\"po-container\"\n  [class.po-container-no-border]=\"noBorder\"\n  [class.po-container-no-padding]=\"noPadding\"\n  [style.height]=\"height ? height + 'px' : 'auto'\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
     }], null, null); })();
 /**
@@ -8765,7 +8767,7 @@ class PoDisclaimerComponent extends PoDisclaimerBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDisclaimerComponent, [{
         type: Component,
-        args: [{ selector: 'po-disclaimer', template: "<div #disclaimerContainer class=\"disclaimer-container\">\r\n  <div\r\n    *ngIf=\"showDisclaimer === true\"\r\n    class=\"po-disclaimer\"\r\n    [class.po-disclaimer-remove-all]=\"hideClose\"\r\n    [class.po-disclaimer-danger]=\"type === 'danger'\"\r\n    [p-tooltip]=\"getWidthDisclaimer() ? getLabel() : ''\"\r\n    p-tooltip-position=\"bottom\"\r\n    [tabindex]=\"hideClose ? '0' : '-1'\"\r\n  >\r\n    <div class=\"po-disclaimer-label\" [class.show-close]=\"!hideClose\">\r\n      <span class=\"label\">\r\n        {{ getLabel() }}\r\n      </span>\r\n    </div>\r\n\r\n    <span\r\n      *ngIf=\"hideClose === false\"\r\n      [attr.aria-label]=\"setAriaLabel()\"\r\n      [attr.role]=\"!hideClose ? 'button' : ''\"\r\n      class=\"po-disclaimer-remove po-icon po-icon-close po-clickable\"\r\n      tabindex=\"0\"\r\n      [class.po-disclaimer-remove-danger]=\"type === 'danger'\"\r\n      (click)=\"close()\"\r\n      (keydown)=\"onKeyPress($event)\"\r\n    >\r\n    </span>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-disclaimer', template: "<div #disclaimerContainer class=\"disclaimer-container\">\n  <div\n    *ngIf=\"showDisclaimer === true\"\n    class=\"po-disclaimer\"\n    [class.po-disclaimer-remove-all]=\"hideClose\"\n    [class.po-disclaimer-danger]=\"type === 'danger'\"\n    [p-tooltip]=\"getWidthDisclaimer() ? getLabel() : ''\"\n    p-tooltip-position=\"bottom\"\n    [tabindex]=\"hideClose ? '0' : '-1'\"\n  >\n    <div class=\"po-disclaimer-label\" [class.show-close]=\"!hideClose\">\n      <span class=\"label\">\n        {{ getLabel() }}\n      </span>\n    </div>\n\n    <span\n      *ngIf=\"hideClose === false\"\n      [attr.aria-label]=\"setAriaLabel()\"\n      [attr.role]=\"!hideClose ? 'button' : ''\"\n      class=\"po-disclaimer-remove po-icon po-icon-close po-clickable\"\n      tabindex=\"0\"\n      [class.po-disclaimer-remove-danger]=\"type === 'danger'\"\n      (click)=\"close()\"\n      (keydown)=\"onKeyPress($event)\"\n    >\n    </span>\n  </div>\n</div>\n" }]
     }], null, { disclaimerContainer: [{
             type: ViewChild,
             args: ['disclaimerContainer', { static: true }]
@@ -9331,7 +9333,7 @@ class PoTagComponent extends PoTagBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTagComponent, [{
         type: Component,
-        args: [{ selector: 'po-tag', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  #tagContainer\r\n  class=\"po-tag-container\"\r\n  [class.po-tag-container-horizontal]=\"tagOrientation\"\r\n  [p-tooltip]=\"getWidthTag() ? value : ''\"\r\n  p-tooltip-position=\"top\"\r\n>\r\n  <div *ngIf=\"label\" class=\"po-tag-title po-text-nowrap\">\r\n    <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\r\n  </div>\r\n\r\n  <div class=\"po-tag-sub-container\">\r\n    <div\r\n      class=\"po-tag\"\r\n      [attr.role]=\"isClickable && !disabled ? 'button' : ''\"\r\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\r\n      [class.po-tag-inverse]=\"inverse && !type && !customTextColor && !removable\"\r\n      [class.po-tag-removable]=\"removable\"\r\n      [class.po-tag-disabled]=\"disabled && removable\"\r\n      [ngClass]=\"tagColor\"\r\n      [ngStyle]=\"styleTag()\"\r\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\r\n      (click)=\"onClick()\"\r\n      (keydown.enter)=\"onKeyPressed($event)\"\r\n      (keydown.space)=\"$event.preventDefault()\"\r\n      (keyup.space)=\"onKeyPressed($event)\"\r\n    >\r\n      <po-icon\r\n        *ngIf=\"icon && !removable\"\r\n        class=\"po-tag-icon\"\r\n        [p-icon]=\"!type ? icon : iconFromType\"\r\n        [ngStyle]=\"\r\n          !tagColor && inverse && !customTextColor\r\n            ? { 'color': customColor }\r\n            : !type && customTextColor\r\n            ? { 'color': customTextColor }\r\n            : ''\r\n        \"\r\n      >\r\n      </po-icon>\r\n\r\n      <div class=\"po-tag-value\">\r\n        <span\r\n          [ngStyle]=\"\r\n            !tagColor && inverse && !customTextColor\r\n              ? { 'color': customColor }\r\n              : !type && customTextColor && !removable\r\n              ? { 'color': customTextColor }\r\n              : ''\r\n          \"\r\n          >{{ value }}</span\r\n        >\r\n      </div>\r\n\r\n      <span\r\n        *ngIf=\"removable\"\r\n        [attr.aria-label]=\"setAriaLabel()\"\r\n        class=\"po-tag-remove po-icon po-icon-close\"\r\n        [class.po-clickable]=\"!disabled\"\r\n        [tabindex]=\"!disabled ? 0 : -1\"\r\n        [attr.role]=\"!disabled ? 'button' : ''\"\r\n        (click)=\"onClose()\"\r\n        (keydown.enter)=\"onClose()\"\r\n      >\r\n      </span>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-tag', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #tagContainer\n  class=\"po-tag-container\"\n  [class.po-tag-container-horizontal]=\"tagOrientation\"\n  [p-tooltip]=\"getWidthTag() ? value : ''\"\n  p-tooltip-position=\"top\"\n>\n  <div *ngIf=\"label\" class=\"po-tag-title po-text-nowrap\">\n    <span class=\"po-tag-label\">{{ tagOrientation ? label + ':' : label }}</span>\n  </div>\n\n  <div class=\"po-tag-sub-container\">\n    <div\n      class=\"po-tag\"\n      [attr.role]=\"isClickable && !disabled ? 'button' : ''\"\n      [class.po-clickable]=\"isClickable && !disabled && !removable\"\n      [class.po-tag-inverse]=\"inverse && !type && !customTextColor && !removable\"\n      [class.po-tag-removable]=\"removable\"\n      [class.po-tag-disabled]=\"disabled && removable\"\n      [ngClass]=\"tagColor\"\n      [ngStyle]=\"styleTag()\"\n      [tabindex]=\"isClickable && !removable ? 0 : -1\"\n      (click)=\"onClick()\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n    >\n      <po-icon\n        *ngIf=\"icon && !removable\"\n        class=\"po-tag-icon\"\n        [p-icon]=\"!type ? icon : iconFromType\"\n        [ngStyle]=\"\n          !tagColor && inverse && !customTextColor\n            ? { 'color': customColor }\n            : !type && customTextColor\n            ? { 'color': customTextColor }\n            : ''\n        \"\n      >\n      </po-icon>\n\n      <div class=\"po-tag-value\">\n        <span\n          [ngStyle]=\"\n            !tagColor && inverse && !customTextColor\n              ? { 'color': customColor }\n              : !type && customTextColor && !removable\n              ? { 'color': customTextColor }\n              : ''\n          \"\n          >{{ value }}</span\n        >\n      </div>\n\n      <span\n        *ngIf=\"removable\"\n        [attr.aria-label]=\"setAriaLabel()\"\n        class=\"po-tag-remove po-icon po-icon-close\"\n        [class.po-clickable]=\"!disabled\"\n        [tabindex]=\"!disabled ? 0 : -1\"\n        [attr.role]=\"!disabled ? 'button' : ''\"\n        (click)=\"onClose()\"\n        (keydown.enter)=\"onClose()\"\n      >\n      </span>\n    </div>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: PoLanguageService }]; }, { tagContainer: [{
             type: ViewChild,
             args: ['tagContainer', { static: true }]
@@ -9598,7 +9600,7 @@ class PoDisclaimerRemoveComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDisclaimerRemoveComponent, [{
         type: Component,
-        args: [{ selector: 'po-disclaimer-remove', template: "<po-tag class=\"po-clickable\" [p-inverse]=\"true\" p-type=\"danger\" [p-value]=\"label\" (p-click)=\"removeAction()\"> </po-tag>\r\n" }]
+        args: [{ selector: 'po-disclaimer-remove', template: "<po-tag class=\"po-clickable\" [p-inverse]=\"true\" p-type=\"danger\" [p-value]=\"label\" (p-click)=\"removeAction()\"> </po-tag>\n" }]
     }], null, { label: [{
             type: Input,
             args: ['p-label']
@@ -9678,7 +9680,7 @@ class PoDisclaimerGroupComponent extends PoDisclaimerGroupBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDisclaimerGroupComponent, [{
         type: Component,
-        args: [{ selector: 'po-disclaimer-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-disclaimer-group\" *ngIf=\"disclaimers.length > 0\">\r\n  <div class=\"po-disclaimer-group-title\">{{ title }}</div>\r\n\r\n  <po-disclaimer-remove\r\n    *ngIf=\"isRemoveAll()\"\r\n    class=\"po-disclaimer-group-disclaimer-align\"\r\n    [p-label]=\"literals.removeAll\"\r\n    (keydown)=\"onKeyPress($event)\"\r\n    (p-remove-all-action)=\"removeAllItems()\"\r\n  >\r\n  </po-disclaimer-remove>\r\n\r\n  <po-disclaimer\r\n    *ngFor=\"let disclaimer of disclaimers\"\r\n    class=\"po-disclaimer-group-disclaimer-align\"\r\n    [p-hide-close]=\"disclaimer.hideClose\"\r\n    [p-label]=\"disclaimer.label\"\r\n    [p-property]=\"disclaimer.property\"\r\n    [p-value]=\"disclaimer.value\"\r\n    (p-close-action)=\"onCloseAction(disclaimer)\"\r\n  >\r\n  </po-disclaimer>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-disclaimer-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-disclaimer-group\" *ngIf=\"disclaimers.length > 0\">\n  <div class=\"po-disclaimer-group-title\">{{ title }}</div>\n\n  <po-disclaimer-remove\n    *ngIf=\"isRemoveAll()\"\n    class=\"po-disclaimer-group-disclaimer-align\"\n    [p-label]=\"literals.removeAll\"\n    (keydown)=\"onKeyPress($event)\"\n    (p-remove-all-action)=\"removeAllItems()\"\n  >\n  </po-disclaimer-remove>\n\n  <po-disclaimer\n    *ngFor=\"let disclaimer of disclaimers\"\n    class=\"po-disclaimer-group-disclaimer-align\"\n    [p-hide-close]=\"disclaimer.hideClose\"\n    [p-label]=\"disclaimer.label\"\n    [p-property]=\"disclaimer.property\"\n    [p-value]=\"disclaimer.value\"\n    (p-close-action)=\"onCloseAction(disclaimer)\"\n  >\n  </po-disclaimer>\n</div>\n" }]
     }], function () { return [{ type: i0.IterableDiffers }, { type: PoLanguageService }, { type: i0.ChangeDetectorRef }]; }, null); })();
 /**
@@ -9829,7 +9831,7 @@ class PoDividerComponent extends PoDividerBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDividerComponent, [{
         type: Component,
-        args: [{ selector: 'po-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-divider\" [attr.p-size]=\"borderWidth\">\r\n  <div *ngIf=\"label\" class=\"po-divider-label\">{{ label }}</div>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\">\r\n    <line [attr.x1]=\"coordinateX1\" y1=\"50%\" [attr.x2]=\"coordinateX2\" y2=\"50%\" />\r\n  </svg>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-divider\" [attr.p-size]=\"borderWidth\">\n  <div *ngIf=\"label\" class=\"po-divider-label\">{{ label }}</div>\n  <svg xmlns=\"http://www.w3.org/2000/svg\">\n    <line [attr.x1]=\"coordinateX1\" y1=\"50%\" [attr.x2]=\"coordinateX2\" y2=\"50%\" />\n  </svg>\n</div>\n" }]
     }], null, null); })();
 /**
@@ -10569,7 +10571,7 @@ class PoLabelComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLabelComponent, [{
         type: Component,
-        args: [{ selector: 'po-label', template: "<label\r\n  *ngIf=\"label\"\r\n  class=\"po-label\"\r\n  [attr.for]=\"field && for ? for : undefined\"\r\n  [attr.p-field]=\"field\"\r\n  [class.po-label-disabled]=\"disabled\"\r\n  >{{ label }}</label\r\n>\r\n<span *ngIf=\"field && requirement\" class=\"po-label-requirement\">{{ requirement }}</span>\r\n" }]
+        args: [{ selector: 'po-label', template: "<label\n  *ngIf=\"label\"\n  class=\"po-label\"\n  [attr.for]=\"field && for ? for : undefined\"\n  [attr.p-field]=\"field\"\n  [class.po-label-disabled]=\"disabled\"\n  >{{ label }}</label\n>\n<span *ngIf=\"field && requirement\" class=\"po-label-requirement\">{{ requirement }}</span>\n" }]
     }], null, { disabled: [{
             type: Input,
             args: ['p-disabled']
@@ -10707,7 +10709,7 @@ class PoCheckboxComponent extends PoCheckboxBaseComponent {
                         useExisting: forwardRef(() => PoCheckboxComponent),
                         multi: true
                     }
-                ], template: "<div\r\n  class=\"container-po-checkbox\"\r\n  [attr.checked]=\"checkboxValue\"\r\n  (click)=\"checkOption(checkboxValue)\"\r\n  (keydown)=\"onKeyDown($event, checkboxValue)\"\r\n>\r\n  <div\r\n    role=\"checkbox\"\r\n    class=\"po-checkbox-outline\"\r\n    [attr.p-size]=\"size\"\r\n    [tabindex]=\"disabled || disabladTabindex ? -1 : 0\"\r\n    [attr.aria-checked]=\"checkboxValue\"\r\n  >\r\n    <span\r\n      [attr.aria-checked]=\"checkboxValue\"\r\n      aria-label=\" \"\r\n      [id]=\"id\"\r\n      class=\"po-checkbox\"\r\n      [attr.aria-disabled]=\"disabled\"\r\n      [attr.required]=\"checkBoxRequired\"\r\n    >\r\n    </span>\r\n\r\n    <po-label\r\n      #checkboxLabel\r\n      *ngIf=\"label\"\r\n      class=\"po-checkbox-label\"\r\n      tabindex=\"-1\"\r\n      [p-disabled]=\"disabled\"\r\n      [p-for]=\"id\"\r\n      [p-label]=\"label\"\r\n    >\r\n    </po-label>\r\n  </div>\r\n</div>\r\n" }]
+                ], template: "<div\n  class=\"container-po-checkbox\"\n  [attr.checked]=\"checkboxValue\"\n  (click)=\"checkOption(checkboxValue)\"\n  (keydown)=\"onKeyDown($event, checkboxValue)\"\n>\n  <div\n    role=\"checkbox\"\n    class=\"po-checkbox-outline\"\n    [attr.p-size]=\"size\"\n    [tabindex]=\"disabled || disabladTabindex ? -1 : 0\"\n    [attr.aria-checked]=\"checkboxValue\"\n  >\n    <span\n      [attr.aria-checked]=\"checkboxValue\"\n      aria-label=\" \"\n      [id]=\"id\"\n      class=\"po-checkbox\"\n      [attr.aria-disabled]=\"disabled\"\n      [attr.required]=\"checkBoxRequired\"\n    >\n    </span>\n\n    <po-label\n      #checkboxLabel\n      *ngIf=\"label\"\n      class=\"po-checkbox-label\"\n      tabindex=\"-1\"\n      [p-disabled]=\"disabled\"\n      [p-for]=\"id\"\n      [p-label]=\"label\"\n    >\n    </po-label>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { checkboxLabel: [{
             type: ViewChild,
             args: ['checkboxLabel', { static: true }]
@@ -10888,7 +10890,7 @@ class PoItemListComponent extends PoItemListBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoItemListComponent, [{
         type: Component,
-        args: [{ selector: 'po-item-list', template: "<ng-container [ngSwitch]=\"type\" (keydown)=\"onCheckboxItemEmit($event)\">\r\n  <div\r\n    *ngSwitchDefault\r\n    #itemList\r\n    [class.po-item-list__separator]=\"separator\"\r\n    [class.po-item-list__disabled]=\"disabled || !visible\"\r\n    [class.po-item-list__selected]=\"selected && !disabled\"\r\n    [attr.aria-disabled]=\"disabled || !visible\"\r\n    [attr.aria-label]=\"label\"\r\n    [class.po-item-list__danger]=\"danger\"\r\n    class=\"po-item-list po-item-list__action\"\r\n  >\r\n    <po-icon *ngIf=\"icon\" class=\"po-popup-icon-item po-icon\" [p-icon]=\"icon\"></po-icon>\r\n    <span class=\"po-item-list-label\">{{ label }}</span>\r\n  </div>\r\n  <div\r\n    *ngSwitchCase=\"'option'\"\r\n    #itemList\r\n    class=\"po-item-list po-item-list__option\"\r\n    [class.po-item-list__separator]=\"separator\"\r\n    [class.po-item-list__selected]=\"selected && !disabled\"\r\n    [attr.aria-disabled]=\"disabled\"\r\n    [attr.aria-label]=\"label\"\r\n    (click)=\"onComboItem(item, $event)\"\r\n  >\r\n    <span *ngIf=\"!template\" class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\r\n\r\n    <ng-template [ngTemplateOutlet]=\"template?.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\">\r\n    </ng-template>\r\n  </div>\r\n\r\n  <div\r\n    *ngSwitchCase=\"'check'\"\r\n    class=\"po-item-list po-item-list__check\"\r\n    [class.po-item-list__separator]=\"separator\"\r\n    [class.po-item-list__selected]=\"selected && !disabled\"\r\n    [class.po-item-list__disabled]=\"disabled\"\r\n    [attr.aria-disabled]=\"disabled\"\r\n    [attr.aria-label]=\"label\"\r\n    (click)=\"onCheckboxItem()\"\r\n    (keydown)=\"onCheckboxItemEmit($event)\"\r\n    (keyup)=\"onCheckboxItemEmit($event)\"\r\n  >\r\n    <po-checkbox\r\n      [p-disabled-tabindex]=\"true\"\r\n      [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\r\n      [p-disabled]=\"disabled\"\r\n      (p-change)=\"onSelectItem({label})\"\r\n    ></po-checkbox>\r\n\r\n    <span class=\"po-item-list__label\" *ngIf=\"!template\">{{ label }}</span>\r\n\r\n    <ng-template [ngTemplateOutlet]=\"template?.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\">\r\n    </ng-template>\r\n  </div>\r\n</ng-container>\r\n" }]
+        args: [{ selector: 'po-item-list', template: "<ng-container [ngSwitch]=\"type\" (keydown)=\"onCheckboxItemEmit($event)\">\n  <div\n    *ngSwitchDefault\n    #itemList\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__disabled]=\"disabled || !visible\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [attr.aria-disabled]=\"disabled || !visible\"\n    [attr.aria-label]=\"label\"\n    [class.po-item-list__danger]=\"danger\"\n    class=\"po-item-list po-item-list__action\"\n  >\n    <po-icon *ngIf=\"icon\" class=\"po-popup-icon-item po-icon\" [p-icon]=\"icon\"></po-icon>\n    <span class=\"po-item-list-label\">{{ label }}</span>\n  </div>\n  <div\n    *ngSwitchCase=\"'option'\"\n    #itemList\n    class=\"po-item-list po-item-list__option\"\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-label]=\"label\"\n    (click)=\"onComboItem(item, $event)\"\n  >\n    <span *ngIf=\"!template\" class=\"po-item-list-label\" [innerHTML]=\"getLabelFormatted(label)\"></span>\n\n    <ng-template [ngTemplateOutlet]=\"template?.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\">\n    </ng-template>\n  </div>\n\n  <div\n    *ngSwitchCase=\"'check'\"\n    class=\"po-item-list po-item-list__check\"\n    [class.po-item-list__separator]=\"separator\"\n    [class.po-item-list__selected]=\"selected && !disabled\"\n    [class.po-item-list__disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-label]=\"label\"\n    (click)=\"onCheckboxItem()\"\n    (keydown)=\"onCheckboxItemEmit($event)\"\n    (keyup)=\"onCheckboxItemEmit($event)\"\n  >\n    <po-checkbox\n      [p-disabled-tabindex]=\"true\"\n      [p-checkboxValue]=\"checkboxValue === null ? 'mixed' : checkboxValue\"\n      [p-disabled]=\"disabled\"\n      (p-change)=\"onSelectItem({label})\"\n    ></po-checkbox>\n\n    <span class=\"po-item-list__label\" *ngIf=\"!template\">{{ label }}</span>\n\n    <ng-template [ngTemplateOutlet]=\"template?.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\">\n    </ng-template>\n  </div>\n</ng-container>\n" }]
     }], function () { return [{ type: i1$2.DomSanitizer }]; }, { itemList: [{
             type: ViewChild,
             args: ['itemList', { static: true }]
@@ -10968,7 +10970,7 @@ class PoSearchListComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoSearchListComponent, [{
         type: Component,
-        args: [{ selector: 'po-search-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-field-container-content po-listbox-container-search\">\r\n  <div class=\"po-field-icon-container-left\">\r\n    <span class=\"po-icon po-icon-search po-field-icon po-icon-input\"></span>\r\n  </div>\r\n\r\n  <input\r\n    #inputElement\r\n    class=\"po-input po-input-icon-left po-listbox-search-input\"\r\n    type=\"text\"\r\n    [placeholder]=\"placeholder\"\r\n    (keyup)=\"onChange($event)\"\r\n  />\r\n</div>\r\n" }]
+        args: [{ selector: 'po-search-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-field-container-content po-listbox-container-search\">\n  <div class=\"po-field-icon-container-left\">\n    <span class=\"po-icon po-icon-search po-field-icon po-icon-input\"></span>\n  </div>\n\n  <input\n    #inputElement\n    class=\"po-input po-input-icon-left po-listbox-search-input\"\n    type=\"text\"\n    [placeholder]=\"placeholder\"\n    (keyup)=\"onChange($event)\"\n  />\n</div>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { inputElement: [{
             type: ViewChild,
             args: ['inputElement', { read: ElementRef, static: true }]
@@ -11293,7 +11295,7 @@ class PoListBoxComponent extends PoListBoxBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoListBoxComponent, [{
         type: Component,
-        args: [{ selector: 'po-listbox', template: "<div\r\n  #listbox\r\n  class=\"po-listbox\"\r\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\r\n  [attr.data-type]=\"type\"\r\n  [hidden]=\"visible\"\r\n>\r\n  <ng-content select=\"[p-popup-header-template]\"></ng-content>\r\n\r\n  <po-search-list\r\n    #searchElement\r\n    *ngIf=\"!hideSearch && type === 'check'\"\r\n    (p-change)=\"callChangeSearch($event)\"\r\n    [p-literals]=\"literalSearch\"\r\n    [p-field-value]=\"fieldValueSearch\"\r\n    [p-placeholder]=\"placeholderSearch\"\r\n  ></po-search-list>\r\n\r\n  <ng-container *ngIf=\"checkTemplate(); else noDataTemplate\">\r\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\r\n      <li\r\n        cdkOption=\"selectAll\"\r\n        *ngIf=\"type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll\"\r\n        [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\r\n        (click)=\"changeAll.emit()\"\r\n        (keydown)=\"changeAllEmit($event)\"\r\n      >\r\n        <po-item-list\r\n          [p-selected]=\"checkboxAllValue\"\r\n          p-type=\"check\"\r\n          [p-label]=\"literals.selectAll\"\r\n          p-value=\"selectAll\"\r\n          [p-checkbox-value]=\"checkboxAllValue\"\r\n        >\r\n        </po-item-list>\r\n      </li>\r\n      <li\r\n        class=\"po-listbox-item\"\r\n        *ngFor=\"let item of items\"\r\n        [cdkOption]=\"item[fieldLabel]\"\r\n        [cdkOptionDisabled]=\"\r\n          returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\r\n        \"\r\n        [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\r\n        (click)=\"onSelectItem(item)\"\r\n        (keydown)=\"onKeyDown(item, $event)\"\r\n      >\r\n        <label *ngIf=\"item.options\" class=\"po-combo-item-title\">\r\n          {{ item.label }}\r\n        </label>\r\n        <po-item-list\r\n          *ngIf=\"returnBooleanValue(item, 'visible') !== false && !item.options\"\r\n          [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\r\n          [p-visible]=\"returnBooleanValue(item, 'visible')\"\r\n          [p-checkbox-value]=\"isSelectedItem(item)\"\r\n          [attr.data-item-list]=\"item | json\"\r\n          [p-label]=\"item[fieldLabel]\"\r\n          [p-value]=\"item[fieldValue]\"\r\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\r\n          [p-separator]=\"item.separator\"\r\n          [p-danger]=\"item.danger || item.type === 'danger'\"\r\n          [p-icon]=\"item.icon\"\r\n          [p-type]=\"type\"\r\n          [p-item]=\"item\"\r\n          [p-field-value]=\"fieldValue\"\r\n          [p-field-label]=\"fieldLabel\"\r\n          [p-template]=\"template\"\r\n          [p-template-context]=\"item\"\r\n          (p-selectcheckbox-item)=\"checkboxClicked($event)\"\r\n          (p-selectcombo-item)=\"optionClicked($event)\"\r\n          (p-select-item)=\"onSelectCheckBoxItem(item)\"\r\n          [p-search-value]=\"searchValue\"\r\n          [p-filter-mode]=\"filterMode\"\r\n          [p-filtering]=\"isFiltering\"\r\n          [p-should-mark-letter]=\"shouldMarkLetters\"\r\n          [p-compare-cache]=\"compareCache\"\r\n          [p-combo-service]=\"comboService\"\r\n        ></po-item-list>\r\n      </li>\r\n    </ul>\r\n  </ng-container>\r\n\r\n  <div *ngIf=\"isServerSearching && type !== 'action'\" class=\"po-text-center\">\r\n    <ng-container *ngIf=\"infiniteLoading; then scrollLoadingTemplate; else defaultLoadingTemplate\"></ng-container>\r\n  </div>\r\n\r\n  <ng-template #scrollLoadingTemplate>\r\n    <po-loading-overlay class=\"po-listbox-container-loading-scroll\"></po-loading-overlay>\r\n  </ng-template>\r\n\r\n  <ng-template #defaultLoadingTemplate>\r\n    <po-loading class=\"po-listbox-container-loading-default\"></po-loading>\r\n  </ng-template>\r\n\r\n  <ng-template #noDataTemplate>\r\n    <div\r\n      *ngIf=\"!items.length && !isServerSearching && type !== 'action'\"\r\n      class=\"po-listbox-container-no-data po-text-center\"\r\n    >\r\n      <span> {{ literals.noItems }}</span>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-listbox', template: "<div\n  #listbox\n  class=\"po-listbox\"\n  [class.po-listbox-check]=\"type === 'check' || type === 'option'\"\n  [attr.data-type]=\"type\"\n  [hidden]=\"visible\"\n>\n  <ng-content select=\"[p-popup-header-template]\"></ng-content>\n\n  <po-search-list\n    #searchElement\n    *ngIf=\"!hideSearch && type === 'check'\"\n    (p-change)=\"callChangeSearch($event)\"\n    [p-literals]=\"literalSearch\"\n    [p-field-value]=\"fieldValueSearch\"\n    [p-placeholder]=\"placeholderSearch\"\n  ></po-search-list>\n\n  <ng-container *ngIf=\"checkTemplate(); else noDataTemplate\">\n    <ul #listboxItemList cdkListbox [cdkListboxMultiple]=\"type === 'check'\" class=\"po-listbox-list\">\n      <li\n        cdkOption=\"selectAll\"\n        *ngIf=\"type === 'check' && items.length && !searchElement?.inputValue && !hideSelectAll\"\n        [attr.aria-checked]=\"checkboxAllValue === null ? 'mixed' : checkboxAllValue\"\n        (click)=\"changeAll.emit()\"\n        (keydown)=\"changeAllEmit($event)\"\n      >\n        <po-item-list\n          [p-selected]=\"checkboxAllValue\"\n          p-type=\"check\"\n          [p-label]=\"literals.selectAll\"\n          p-value=\"selectAll\"\n          [p-checkbox-value]=\"checkboxAllValue\"\n        >\n        </po-item-list>\n      </li>\n      <li\n        class=\"po-listbox-item\"\n        *ngFor=\"let item of items\"\n        [cdkOption]=\"item[fieldLabel]\"\n        [cdkOptionDisabled]=\"\n          returnBooleanValue(item, 'disabled') || returnBooleanValue(item, 'visible') === false || item.options\n        \"\n        [attr.aria-selected]=\"isSelectedItem(item) || item.selected\"\n        (click)=\"onSelectItem(item)\"\n        (keydown)=\"onKeyDown(item, $event)\"\n      >\n        <label *ngIf=\"item.options\" class=\"po-combo-item-title\">\n          {{ item.label }}\n        </label>\n        <po-item-list\n          *ngIf=\"returnBooleanValue(item, 'visible') !== false && !item.options\"\n          [p-disabled]=\"returnBooleanValue(item, 'disabled')\"\n          [p-visible]=\"returnBooleanValue(item, 'visible')\"\n          [p-checkbox-value]=\"isSelectedItem(item)\"\n          [attr.data-item-list]=\"item | json\"\n          [p-label]=\"item[fieldLabel]\"\n          [p-value]=\"item[fieldValue]\"\n          [p-selected]=\"isSelectedItem(item) || item.selected\"\n          [p-separator]=\"item.separator\"\n          [p-danger]=\"item.danger || item.type === 'danger'\"\n          [p-icon]=\"item.icon\"\n          [p-type]=\"type\"\n          [p-item]=\"item\"\n          [p-field-value]=\"fieldValue\"\n          [p-field-label]=\"fieldLabel\"\n          [p-template]=\"template\"\n          [p-template-context]=\"item\"\n          (p-selectcheckbox-item)=\"checkboxClicked($event)\"\n          (p-selectcombo-item)=\"optionClicked($event)\"\n          (p-select-item)=\"onSelectCheckBoxItem(item)\"\n          [p-search-value]=\"searchValue\"\n          [p-filter-mode]=\"filterMode\"\n          [p-filtering]=\"isFiltering\"\n          [p-should-mark-letter]=\"shouldMarkLetters\"\n          [p-compare-cache]=\"compareCache\"\n          [p-combo-service]=\"comboService\"\n        ></po-item-list>\n      </li>\n    </ul>\n  </ng-container>\n\n  <div *ngIf=\"isServerSearching && type !== 'action'\" class=\"po-text-center\">\n    <ng-container *ngIf=\"infiniteLoading; then scrollLoadingTemplate; else defaultLoadingTemplate\"></ng-container>\n  </div>\n\n  <ng-template #scrollLoadingTemplate>\n    <po-loading-overlay class=\"po-listbox-container-loading-scroll\"></po-loading-overlay>\n  </ng-template>\n\n  <ng-template #defaultLoadingTemplate>\n    <po-loading class=\"po-listbox-container-loading-default\"></po-loading>\n  </ng-template>\n\n  <ng-template #noDataTemplate>\n    <div\n      *ngIf=\"!items.length && !isServerSearching && type !== 'action'\"\n      class=\"po-listbox-container-no-data po-text-center\"\n    >\n      <span> {{ literals.noItems }}</span>\n    </div>\n  </ng-template>\n</div>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PoLanguageService }, { type: i2.Router }, { type: i0.ChangeDetectorRef }]; }, { listbox: [{
             type: ViewChild,
             args: ['listbox', { static: true }]
@@ -11757,7 +11759,7 @@ class PoPopupComponent extends PoPopupBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPopupComponent, [{
         type: Component,
-        args: [{ selector: 'po-popup', providers: [PoControlPositionService], template: "<div #popupRef class=\"po-popup\" *ngIf=\"showPopup && actions.length && !checkAllActionIsInvisible()\">\r\n  <div *ngIf=\"!hideArrow\" class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\r\n\r\n  <div class=\"po-popup-container\">\r\n    <po-listbox #listbox #poListBoxRef p-type=\"action\" [p-items]=\"actions\" [p-param]=\"param\" (p-close)=\"close()\">\r\n      <div p-popup-header-template>\r\n        <ng-content select=\"[p-popup-header-template]\"></ng-content>\r\n      </div>\r\n    </po-listbox>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-popup', providers: [PoControlPositionService], template: "<div #popupRef class=\"po-popup\" *ngIf=\"showPopup && actions.length && !checkAllActionIsInvisible()\">\n  <div *ngIf=\"!hideArrow\" class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n\n  <div class=\"po-popup-container\">\n    <po-listbox #listbox #poListBoxRef p-type=\"action\" [p-items]=\"actions\" [p-param]=\"param\" (p-close)=\"close()\">\n      <div p-popup-header-template>\n        <ng-content select=\"[p-popup-header-template]\"></ng-content>\n      </div>\n    </po-listbox>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i2.Router }, { type: PoControlPositionService }, { type: i0.ChangeDetectorRef }]; }, { popupRef: [{
             type: ViewChild,
             args: ['popupRef', { read: ElementRef }]
@@ -11987,7 +11989,7 @@ class PoDropdownComponent extends PoDropdownBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDropdownComponent, [{
         type: Component,
-        args: [{ selector: 'po-dropdown', template: "<div\r\n  #dropdownRef\r\n  class=\"po-dropdown\"\r\n  [attr.disabled]=\"disabled\"\r\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\r\n  (click)=\"toggleDropdown()\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n>\r\n  <div\r\n    class=\"po-dropdown-button\"\r\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\r\n  >\r\n    {{ label }}\r\n    <div class=\"po-dropdown-icon po-icon {{ icon }}\"></div>\r\n  </div>\r\n</div>\r\n\r\n<po-popup\r\n  #popupRef\r\n  p-hide-arrow\r\n  p-is-corner-align\r\n  p-position=\"bottom-left\"\r\n  [p-actions]=\"actions\"\r\n  [p-custom-positions]=\"['bottom-left', 'top-left']\"\r\n  [p-target]=\"dropdownRef\"\r\n>\r\n</po-popup>\r\n" }]
+        args: [{ selector: 'po-dropdown', template: "<div\n  #dropdownRef\n  class=\"po-dropdown\"\n  [attr.disabled]=\"disabled\"\n  tabindex=\"{{ disabled ? -1 : 0 }}\"\n  (click)=\"toggleDropdown()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <div\n    class=\"po-dropdown-button\"\n    [ngClass]=\"{ 'po-dropdown-button-disabled': disabled, 'po-dropdown-button-open': open }\"\n  >\n    {{ label }}\n    <div class=\"po-dropdown-icon po-icon {{ icon }}\"></div>\n  </div>\n</div>\n\n<po-popup\n  #popupRef\n  p-hide-arrow\n  p-is-corner-align\n  p-position=\"bottom-left\"\n  [p-actions]=\"actions\"\n  [p-custom-positions]=\"['bottom-left', 'top-left']\"\n  [p-target]=\"dropdownRef\"\n>\n</po-popup>\n" }]
     }], function () { return [{ type: i0.Renderer2 }]; }, { dropdownRef: [{
             type: ViewChild,
             args: ['dropdownRef', { read: ElementRef, static: true }]
@@ -12067,7 +12069,7 @@ class PoFieldContainerBottomComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoFieldContainerBottomComponent, [{
         type: Component,
-        args: [{ selector: 'po-field-container-bottom', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-field-container-bottom\" [class.po-field-container-bottom-disabled]=\"disabled\">\r\n  <div *ngIf=\"errorPattern\" class=\"po-field-container-bottom-text-error\">\r\n    <po-icon p-icon=\"po-icon-warning\"></po-icon>\r\n    <span> {{ errorPattern }}</span>\r\n  </div>\r\n  <span *ngIf=\"help && !errorPattern\" class=\"po-field-container-bottom-help-text\">\r\n    {{ help }}\r\n  </span>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-field-container-bottom', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-field-container-bottom\" [class.po-field-container-bottom-disabled]=\"disabled\">\n  <div *ngIf=\"errorPattern\" class=\"po-field-container-bottom-text-error\">\n    <po-icon p-icon=\"po-icon-warning\"></po-icon>\n    <span> {{ errorPattern }}</span>\n  </div>\n  <span *ngIf=\"help && !errorPattern\" class=\"po-field-container-bottom-help-text\">\n    {{ help }}\n  </span>\n</div>\n" }]
     }], null, { errorPattern: [{
             type: Input,
             args: ['p-error-pattern']
@@ -12193,7 +12195,7 @@ class PoFieldContainerComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoFieldContainerComponent, [{
         type: Component,
-        args: [{ selector: 'po-field-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-field-container\">\r\n  <div class=\"po-field-container-title\">\r\n    <po-label\r\n      *ngIf=\"label || help\"\r\n      [p-disabled]=\"disabled\"\r\n      p-field=\"true\"\r\n      [p-for]=\"id\"\r\n      [p-label]=\"label\"\r\n      [p-requirement]=\"requirement\"\r\n    ></po-label>\r\n  </div>\r\n\r\n  <div class=\"po-field-help\" *ngIf=\"help\">{{ help }}</div>\r\n\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-field-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-field-container\">\n  <div class=\"po-field-container-title\">\n    <po-label\n      *ngIf=\"label || help\"\n      [p-disabled]=\"disabled\"\n      p-field=\"true\"\n      [p-for]=\"id\"\n      [p-label]=\"label\"\n      [p-requirement]=\"requirement\"\n    ></po-label>\n  </div>\n\n  <div class=\"po-field-help\" *ngIf=\"help\">{{ help }}</div>\n\n  <ng-content></ng-content>\n</div>\n" }]
     }], function () { return [{ type: PoLanguageService }]; }, { disabled: [{
             type: Input,
             args: ['p-disabled']
@@ -12751,7 +12753,7 @@ class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent {
                         useExisting: forwardRef(() => PoCheckboxGroupComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-help]=\"help\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div role=\"group\" [attr.aria-label]=\"label\" class=\"po-field-container-content po-checkbox-group-content\">\r\n    <ul class=\"po-row po-pt-2 po-pb-1\">\r\n      <li\r\n        *ngFor=\"let option of checkboxGroupOptionsView; trackBy: trackByFn\"\r\n        class=\"po-checkbox-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\"\r\n        [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\r\n      >\r\n        <po-checkbox\r\n          #checkboxLabel\r\n          [p-label]=\"option.label\"\r\n          [p-disabled]=\"option.disabled || disabled\"\r\n          (click)=\"checkOption(option)\"\r\n          (keydown)=\"onKeyDown($event, option)\"\r\n          [p-checkboxValue]=\"checkedOptions[option.value] === null ? 'mixed' : checkedOptions[option.value]\"\r\n          [p-required]=\"required\"\r\n        >\r\n        </po-checkbox>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n\r\n  <po-field-container-bottom></po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-help]=\"help\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div role=\"group\" [attr.aria-label]=\"label\" class=\"po-field-container-content po-checkbox-group-content\">\n    <ul class=\"po-row po-pt-2 po-pb-1\">\n      <li\n        *ngFor=\"let option of checkboxGroupOptionsView; trackBy: trackByFn\"\n        class=\"po-checkbox-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\"\n        [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n      >\n        <po-checkbox\n          #checkboxLabel\n          [p-label]=\"option.label\"\n          [p-disabled]=\"option.disabled || disabled\"\n          (click)=\"checkOption(option)\"\n          (keydown)=\"onKeyDown($event, option)\"\n          [p-checkboxValue]=\"checkedOptions[option.value] === null ? 'mixed' : checkedOptions[option.value]\"\n          [p-required]=\"required\"\n        >\n        </po-checkbox>\n      </li>\n    </ul>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { checkboxLabels: [{
             type: ViewChildren,
             args: ['checkboxLabel']
@@ -13251,7 +13253,7 @@ class PoRadioComponent extends PoFieldModel {
                         useExisting: forwardRef(() => PoRadioComponent),
                         multi: true
                     }
-                ], template: "<div #radio class=\"po-radio\">\r\n  <label (click)=\"eventClick()\" (keydown)=\"onKeyDown($event)\">\r\n    <input\r\n      #radioInput\r\n      type=\"radio\"\r\n      [attr.p-size]=\"size\"\r\n      [checked]=\"checked\"\r\n      [disabled]=\"disabled\"\r\n      [name]=\"name ?? 'po-input-radio'\"\r\n      [required]=\"required\"\r\n      [value]=\"radioValue ?? ''\"\r\n    />\r\n    <po-label *ngIf=\"label\" [p-disabled]=\"disabled\" [p-label]=\"label\"></po-label>\r\n  </label>\r\n</div>\r\n" }]
+                ], template: "<div #radio class=\"po-radio\">\n  <label (click)=\"eventClick()\" (keydown)=\"onKeyDown($event)\">\n    <input\n      #radioInput\n      type=\"radio\"\n      [attr.p-size]=\"size\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      [name]=\"name ?? 'po-input-radio'\"\n      [required]=\"required\"\n      [value]=\"radioValue ?? ''\"\n    />\n    <po-label *ngIf=\"label\" [p-disabled]=\"disabled\" [p-label]=\"label\"></po-label>\n  </label>\n</div>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, { radio: [{
             type: ViewChild,
             args: ['radio', { static: true }]
@@ -13443,7 +13445,7 @@ class PoRadioGroupComponent extends PoRadioGroupBaseComponent {
                         useExisting: forwardRef(() => PoRadioGroupComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-help]=\"help\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\" [attr.name]=\"name\">\r\n    <div #inp class=\"po-radio-group\" role=\"radiogroup\" [attr.aria-label]=\"label\" [attr.data-options]=\"options.length\">\r\n      <div *ngFor=\"let option of options\" class=\"po-radio-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\">\r\n        <po-radio\r\n          #inputRadio\r\n          [name]=\"name\"\r\n          [p-checked]=\"value === option.value\"\r\n          [p-disabled]=\"option.disabled === true || disabled\"\r\n          [p-label]=\"option.label\"\r\n          [p-required]=\"required\"\r\n          [p-size]=\"size\"\r\n          [p-value]=\"option.value\"\r\n          (keyup)=\"onKeyUp($event, option.value)\"\r\n          (click)=\"eventClick(option.value, option.disabled === true || disabled)\"\r\n        >\r\n        </po-radio>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <po-field-container-bottom></po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-help]=\"help\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\" [attr.name]=\"name\">\n    <div #inp class=\"po-radio-group\" role=\"radiogroup\" [attr.aria-label]=\"label\" [attr.data-options]=\"options.length\">\n      <div *ngFor=\"let option of options\" class=\"po-radio-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\">\n        <po-radio\n          #inputRadio\n          [name]=\"name\"\n          [p-checked]=\"value === option.value\"\n          [p-disabled]=\"option.disabled === true || disabled\"\n          [p-label]=\"option.label\"\n          [p-required]=\"required\"\n          [p-size]=\"size\"\n          [p-value]=\"option.value\"\n          (keyup)=\"onKeyUp($event, option.value)\"\n          (click)=\"eventClick(option.value, option.disabled === true || disabled)\"\n        >\n        </po-radio>\n      </div>\n    </div>\n  </div>\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }]; }, { label: [{
             type: Input,
             args: ['p-label']
@@ -13578,7 +13580,7 @@ class PoCleanComponent extends PoCleanBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoCleanComponent, [{
         type: Component,
-        args: [{ selector: 'po-clean', template: "<span *ngIf=\"showIcon()\" class=\"po-icon po-field-icon po-icon-close\" (click)=\"clear()\"> </span>\r\n" }]
+        args: [{ selector: 'po-clean', template: "<span *ngIf=\"showIcon()\" class=\"po-icon po-field-icon po-icon-close\" (click)=\"clear()\"> </span>\n" }]
     }], null, null); })();
 /**
@@ -15006,7 +15008,7 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
                         multi: true
                     },
                     PoControlPositionService
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-id]=\"id\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content po-field-container-content-datepicker\">\r\n    <div class=\"po-field-container-input\">\r\n      <input\r\n        #inp\r\n        class=\"po-input po-datepicker\"\r\n        [class.po-input-icon-right]=\"clean && inp.value\"\r\n        type=\"text\"\r\n        [attr.name]=\"name\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [disabled]=\"disabled\"\r\n        [id]=\"id\"\r\n        [placeholder]=\"disabled ? '' : placeholder\"\r\n        [readonly]=\"readonly\"\r\n        [required]=\"required\"\r\n        (blur)=\"eventOnBlur($event)\"\r\n        (click)=\"eventOnClick($event)\"\r\n      />\r\n      <div class=\"po-field-icon-container-right\">\r\n        <po-clean\r\n          class=\"po-icon-input\"\r\n          *ngIf=\"clean && !disabled && !readonly\"\r\n          [p-element-ref]=\"inputEl\"\r\n          (p-change-event)=\"clear()\"\r\n        >\r\n        </po-clean>\r\n      </div>\r\n    </div>\r\n    <po-button\r\n      #iconDatepicker\r\n      class=\"po-datepicker-button\"\r\n      p-icon=\"po-icon-calendar\"\r\n      p-kind=\"tertiary\"\r\n      [p-disabled]=\"disabled || readonly\"\r\n      (keydown)=\"onKeyPress($event)\"\r\n      (p-click)=\"togglePicker()\"\r\n    >\r\n    </po-button>\r\n  </div>\r\n\r\n  <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\">\r\n    <div *ngIf=\"verifyMobile()\" class=\"po-datepicker-calendar-overlay\"></div>\r\n    <po-calendar\r\n      [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\r\n      #calendar\r\n      [(ngModel)]=\"date\"\r\n      [p-max-date]=\"maxDate\"\r\n      [p-min-date]=\"minDate\"\r\n      [p-locale]=\"locale\"\r\n      (p-change)=\"dateSelected()\"\r\n    >\r\n    </po-calendar>\r\n  </div>\r\n\r\n  <po-field-container-bottom\r\n    [p-help]=\"help\"\r\n    [p-disabled]=\"disabled\"\r\n    [p-error-pattern]=\"getErrorPattern()\"\r\n  ></po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content po-field-container-content-datepicker\">\n    <div class=\"po-field-container-input\">\n      <input\n        #inp\n        class=\"po-input po-datepicker\"\n        [class.po-input-icon-right]=\"clean && inp.value\"\n        type=\"text\"\n        [attr.name]=\"name\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [id]=\"id\"\n        [placeholder]=\"disabled ? '' : placeholder\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        (blur)=\"eventOnBlur($event)\"\n        (click)=\"eventOnClick($event)\"\n      />\n      <div class=\"po-field-icon-container-right\">\n        <po-clean\n          class=\"po-icon-input\"\n          *ngIf=\"clean && !disabled && !readonly\"\n          [p-element-ref]=\"inputEl\"\n          (p-change-event)=\"clear()\"\n        >\n        </po-clean>\n      </div>\n    </div>\n    <po-button\n      #iconDatepicker\n      class=\"po-datepicker-button\"\n      p-icon=\"po-icon-calendar\"\n      p-kind=\"tertiary\"\n      [p-disabled]=\"disabled || readonly\"\n      (keydown)=\"onKeyPress($event)\"\n      (p-click)=\"togglePicker()\"\n    >\n    </po-button>\n  </div>\n\n  <div #dialogPicker [class.po-datepicker-popup-calendar]=\"!verifyMobile()\">\n    <div *ngIf=\"verifyMobile()\" class=\"po-datepicker-calendar-overlay\"></div>\n    <po-calendar\n      [class.po-datepicker-calendar-mobile]=\"verifyMobile()\"\n      #calendar\n      [(ngModel)]=\"date\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      (p-change)=\"dateSelected()\"\n    >\n    </po-calendar>\n  </div>\n\n  <po-field-container-bottom\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: PoLanguageService }, { type: PoControlPositionService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { calendar: [{
             type: ViewChild,
             args: ['calendar', { static: true }]
@@ -15283,7 +15285,7 @@ class PoModalFooterComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoModalFooterComponent, [{
         type: Component,
-        args: [{ selector: 'po-modal-footer', template: "<div class=\"po-modal-footer\" [class.po-modal-footer-align-right]=\"!disabledAlign\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-modal-footer', template: "<div class=\"po-modal-footer\" [class.po-modal-footer-align-right]=\"!disabledAlign\">\n  <ng-content></ng-content>\n</div>\n" }]
     }], null, { disabledAlign: [{
             type: Input,
             args: ['p-disabled-align']
@@ -15500,7 +15502,7 @@ class PoModalComponent extends PoModalBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoModalComponent, [{
         type: Component,
-        args: [{ selector: 'po-modal', template: "<div #modalContainer *ngIf=\"!isHidden\" class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\r\n  <div class=\"po-modal-overlay\" (mousedown)=\"onClickOut($event)\"></div>\r\n  <div class=\"po-modal-container po-pb-2 po-pt-2\">\r\n    <div class=\"po-modal-vertical-align\">\r\n      <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\r\n        <div class=\"po-modal-header\">\r\n          <div class=\"po-modal-title po-text-ellipsis\">\r\n            <po-icon *ngIf=\"icon\" [p-icon]=\"icon\"></po-icon>\r\n            <div class=\"po-text-ellipsis\">\r\n              {{ title }}\r\n            </div>\r\n          </div>\r\n          <po-button\r\n            *ngIf=\"!hideClose\"\r\n            [p-aria-label]=\"literals.close\"\r\n            p-icon=\"po-icon po-icon-close\"\r\n            (p-click)=\"close(true)\"\r\n            p-kind=\"tertiary\"\r\n          >\r\n          </po-button>\r\n        </div>\r\n\r\n        <div class=\"po-modal-body\">\r\n          <ng-content></ng-content>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"modalFooter; else defaultModalFooterTemplate\">\r\n          <ng-content select=\"po-modal-footer\"></ng-content>\r\n        </ng-container>\r\n\r\n        <ng-template #defaultModalFooterTemplate>\r\n          <po-modal-footer>\r\n            <div class=\"po-modal-footer-basic\">\r\n              <po-button\r\n                *ngIf=\"secondaryAction\"\r\n                [p-danger]=\"getSecondaryActionButtonDanger()\"\r\n                [p-disabled]=\"secondaryAction.disabled\"\r\n                [p-label]=\"secondaryAction.label\"\r\n                [p-loading]=\"secondaryAction.loading\"\r\n                p-kind=\"secondary\"\r\n                (p-click)=\"secondaryAction.action()\"\r\n              >\r\n              </po-button>\r\n\r\n              <po-button\r\n                class=\"po-button-modal-first-action\"\r\n                [p-danger]=\"primaryAction.danger\"\r\n                [p-disabled]=\"primaryAction.disabled\"\r\n                [p-label]=\"primaryAction.label\"\r\n                [p-loading]=\"primaryAction.loading\"\r\n                p-kind=\"primary\"\r\n                (p-click)=\"primaryAction.action()\"\r\n              >\r\n              </po-button>\r\n            </div>\r\n          </po-modal-footer>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-modal', template: "<div #modalContainer *ngIf=\"!isHidden\" class=\"po-modal\" tabindex=\"0\" (keydown.esc)=\"closeModalOnEscapeKey($event)\">\n  <div class=\"po-modal-overlay\" (mousedown)=\"onClickOut($event)\"></div>\n  <div class=\"po-modal-container po-pb-2 po-pt-2\">\n    <div class=\"po-modal-vertical-align\">\n      <div #modalContent class=\"po-modal-content po-modal-{{ size }}\" tabindex=\"-1\">\n        <div class=\"po-modal-header\">\n          <div class=\"po-modal-title po-text-ellipsis\">\n            <po-icon *ngIf=\"icon\" [p-icon]=\"icon\"></po-icon>\n            <div class=\"po-text-ellipsis\">\n              {{ title }}\n            </div>\n          </div>\n          <po-button\n            *ngIf=\"!hideClose\"\n            [p-aria-label]=\"literals.close\"\n            p-icon=\"po-icon po-icon-close\"\n            (p-click)=\"close(true)\"\n            p-kind=\"tertiary\"\n          >\n          </po-button>\n        </div>\n\n        <div class=\"po-modal-body\">\n          <ng-content></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"modalFooter; else defaultModalFooterTemplate\">\n          <ng-content select=\"po-modal-footer\"></ng-content>\n        </ng-container>\n\n        <ng-template #defaultModalFooterTemplate>\n          <po-modal-footer>\n            <div class=\"po-modal-footer-basic\">\n              <po-button\n                *ngIf=\"secondaryAction\"\n                [p-danger]=\"getSecondaryActionButtonDanger()\"\n                [p-disabled]=\"secondaryAction.disabled\"\n                [p-label]=\"secondaryAction.label\"\n                [p-loading]=\"secondaryAction.loading\"\n                p-kind=\"secondary\"\n                (p-click)=\"secondaryAction.action()\"\n              >\n              </po-button>\n\n              <po-button\n                class=\"po-button-modal-first-action\"\n                [p-danger]=\"primaryAction.danger\"\n                [p-disabled]=\"primaryAction.disabled\"\n                [p-label]=\"primaryAction.label\"\n                [p-loading]=\"primaryAction.loading\"\n                p-kind=\"primary\"\n                (p-click)=\"primaryAction.action()\"\n              >\n              </po-button>\n            </div>\n          </po-modal-footer>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: PoActiveOverlayService }, { type: PoLanguageService }]; }, { modalContent: [{
             type: ViewChild,
             args: ['modalContent', { read: ElementRef }]
@@ -15550,7 +15552,7 @@ class PoProgressBarComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoProgressBarComponent, [{
         type: Component,
-        args: [{ selector: 'po-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.po-progress-bar-indeterminate]=\"indeterminate\">\r\n  <div class=\"po-progress-bar-element po-progress-bar-primary\" [style.transform]=\"'scaleX(' + valueScale + ')'\"></div>\r\n  <div class=\"po-progress-bar-element po-progress-bar-secondary\"></div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class.po-progress-bar-indeterminate]=\"indeterminate\">\n  <div class=\"po-progress-bar-element po-progress-bar-primary\" [style.transform]=\"'scaleX(' + valueScale + ')'\"></div>\n  <div class=\"po-progress-bar-element po-progress-bar-secondary\"></div>\n</div>\n" }]
     }], null, { indeterminate: [{
             type: Input,
             args: ['p-indeterminate']
@@ -15850,7 +15852,7 @@ class PoProgressComponent extends PoProgressBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoProgressComponent, [{
         type: Component,
-        args: [{ selector: 'po-progress', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-progress\" [ngClass]=\"statusClass\">\r\n  <label *ngIf=\"text\" class=\"po-progress-description-mobile po-progress-description-text\">\r\n    {{ text }}\r\n  </label>\r\n\r\n  <po-progress-bar class=\"po-progress-bar\" [p-indeterminate]=\"indeterminate\" [p-value]=\"value\"> </po-progress-bar>\r\n\r\n  <div *ngIf=\"text\" class=\"po-progress-description\">\r\n    <label class=\"po-progress-description-text\">\r\n      {{ text }}\r\n    </label>\r\n  </div>\r\n\r\n  <div *ngIf=\"isAllowProgressInfo\" class=\"po-progress-info\">\r\n    <span *ngIf=\"infoIcon\" class=\"po-progress-info-icon po-icon {{ infoIcon }}\"></span>\r\n    <span *ngIf=\"info\" class=\"po-progress-info-text\">{{ info }}</span>\r\n\r\n    <button\r\n      *ngIf=\"isAllowRetry\"\r\n      class=\"po-progress-info-icon-action po-icon po-icon-refresh po-clickable\"\r\n      (click)=\"emitRetry()\"\r\n    ></button>\r\n\r\n    <button\r\n      *ngIf=\"isAllowCancel\"\r\n      class=\"po-progress-info-icon-action po-icon po-icon-close po-clickable\"\r\n      (click)=\"emitCancellation()\"\r\n    ></button>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-progress', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-progress\" [ngClass]=\"statusClass\">\n  <label *ngIf=\"text\" class=\"po-progress-description-mobile po-progress-description-text\">\n    {{ text }}\n  </label>\n\n  <po-progress-bar class=\"po-progress-bar\" [p-indeterminate]=\"indeterminate\" [p-value]=\"value\"> </po-progress-bar>\n\n  <div *ngIf=\"text\" class=\"po-progress-description\">\n    <label class=\"po-progress-description-text\">\n      {{ text }}\n    </label>\n  </div>\n\n  <div *ngIf=\"isAllowProgressInfo\" class=\"po-progress-info\">\n    <span *ngIf=\"infoIcon\" class=\"po-progress-info-icon po-icon {{ infoIcon }}\"></span>\n    <span *ngIf=\"info\" class=\"po-progress-info-text\">{{ info }}</span>\n\n    <button\n      *ngIf=\"isAllowRetry\"\n      class=\"po-progress-info-icon-action po-icon po-icon-refresh po-clickable\"\n      (click)=\"emitRetry()\"\n    ></button>\n\n    <button\n      *ngIf=\"isAllowCancel\"\n      class=\"po-progress-info-icon-action po-icon po-icon-close po-clickable\"\n      (click)=\"emitCancellation()\"\n    ></button>\n  </div>\n</div>\n" }]
     }], null, null); })();
 /**
@@ -16152,7 +16154,7 @@ class PoDialogComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDialogComponent, [{
         type: Component,
-        args: [{ template: "<po-modal [p-title]=\"title\" [p-primary-action]=\"primaryAction\" [p-secondary-action]=\"secondaryAction\">\r\n  <div [innerHtml]=\"message\"></div>\r\n</po-modal>\r\n" }]
+        args: [{ template: "<po-modal [p-title]=\"title\" [p-primary-action]=\"primaryAction\" [p-secondary-action]=\"secondaryAction\">\n  <div [innerHtml]=\"message\"></div>\n</po-modal>\n" }]
     }], function () { return [{ type: PoLanguageService }]; }, { poModal: [{
             type: ViewChild,
             args: [PoModalComponent, { static: true }]
@@ -16546,7 +16548,7 @@ class PoToasterComponent extends PoToasterBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoToasterComponent, [{
         type: Component,
-        args: [{ selector: 'po-toaster', template: "<div #toaster class=\"po-toaster {{ getToasterType() }} {{ getToasterPosition() }}\">\r\n  <div class=\"po-toaster-icon\">\r\n    <po-icon [p-icon]=\"getIcon()\"></po-icon>\r\n  </div>\r\n\r\n  <div class=\"po-toaster-actions\">\r\n    <div class=\"po-toaster-message\">{{ message }}</div>\r\n    <div class=\"po-toaster-action\">\r\n      <po-button\r\n        *ngIf=\"action && actionLabel\"\r\n        (p-click)=\"poToasterAction($event)\"\r\n        [p-label]=\"actionLabel\"\r\n        p-kind=\"tertiary\"\r\n      ></po-button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"po-toaster-close\">\r\n    <div class=\"po-toaster-divider\"></div>\r\n    <po-button\r\n      #buttonClose\r\n      class=\"po-toaster-button-close\"\r\n      (p-click)=\"onButtonClose($event)\"\r\n      p-icon=\"po-icon-close\"\r\n      p-kind=\"tertiary\"\r\n    ></po-button>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-toaster', template: "<div #toaster class=\"po-toaster {{ getToasterType() }} {{ getToasterPosition() }}\">\n  <div class=\"po-toaster-icon\">\n    <po-icon [p-icon]=\"getIcon()\"></po-icon>\n  </div>\n\n  <div class=\"po-toaster-actions\">\n    <div class=\"po-toaster-message\">{{ message }}</div>\n    <div class=\"po-toaster-action\">\n      <po-button\n        *ngIf=\"action && actionLabel\"\n        (p-click)=\"poToasterAction($event)\"\n        [p-label]=\"actionLabel\"\n        p-kind=\"tertiary\"\n      ></po-button>\n    </div>\n  </div>\n\n  <div class=\"po-toaster-close\">\n    <div class=\"po-toaster-divider\"></div>\n    <po-button\n      #buttonClose\n      class=\"po-toaster-button-close\"\n      (p-click)=\"onButtonClose($event)\"\n      p-icon=\"po-icon-close\"\n      p-kind=\"tertiary\"\n    ></po-button>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: PoLanguageService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, { toaster: [{
             type: ViewChild,
             args: ['toaster']
@@ -16970,7 +16972,7 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPopoverComponent, [{
         type: Component,
-        args: [{ selector: 'po-popover', providers: [PoControlPositionService], template: "<div [hidden]=\"isHidden\" class=\"po-popover\" #popoverElement>\r\n  <div *ngIf=\"!hideArrow\" class=\"po-popover-arrow po-arrow-{{ arrowDirection }}\"></div>\r\n\r\n  <div class=\"po-popover-content\">\r\n    <span *ngIf=\"title\" class=\"po-popover-title\">{{ title }}</span>\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-popover', providers: [PoControlPositionService], template: "<div [hidden]=\"isHidden\" class=\"po-popover\" #popoverElement>\n  <div *ngIf=\"!hideArrow\" class=\"po-popover-arrow po-arrow-{{ arrowDirection }}\"></div>\n\n  <div class=\"po-popover-content\">\n    <span *ngIf=\"title\" class=\"po-popover-title\">{{ title }}</span>\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: i0.Renderer2 }, { type: PoControlPositionService }]; }, { popoverElement: [{
             type: ViewChild,
             args: ['popoverElement', { read: ElementRef, static: true }]
@@ -17225,7 +17227,7 @@ class PoLinkComponent extends PoLinkBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLinkComponent, [{
         type: Component,
-        args: [{ selector: 'po-link', template: "<ng-container [ngSwitch]=\"type\">\r\n  <button *ngSwitchCase=\"'action'\" class=\"po-link\" type=\"button\" (click)=\"onClick()\">{{ label }}</button>\r\n\r\n  <a *ngSwitchCase=\"'externalLink'\" class=\"po-link\" [href]=\"url\" [target]=\"openNewTab ? '_blank' : '_self'\">{{\r\n    label\r\n  }}</a>\r\n\r\n  <a *ngSwitchCase=\"'internalLink'\" class=\"po-link\" [routerLink]=\"url\">{{ label }}</a>\r\n\r\n  <a *ngSwitchDefault class=\"po-link\" [href]=\"url\">{{ label }}</a>\r\n</ng-container>\r\n" }]
+        args: [{ selector: 'po-link', template: "<ng-container [ngSwitch]=\"type\">\n  <button *ngSwitchCase=\"'action'\" class=\"po-link\" type=\"button\" (click)=\"onClick()\">{{ label }}</button>\n\n  <a *ngSwitchCase=\"'externalLink'\" class=\"po-link\" [href]=\"url\" [target]=\"openNewTab ? '_blank' : '_self'\">{{\n    label\n  }}</a>\n\n  <a *ngSwitchCase=\"'internalLink'\" class=\"po-link\" [routerLink]=\"url\">{{ label }}</a>\n\n  <a *ngSwitchDefault class=\"po-link\" [href]=\"url\">{{ label }}</a>\n</ng-container>\n" }]
     }], null, null); })();
 /**
@@ -17583,7 +17585,7 @@ class PoPageSlideComponent extends PoPageSlideBaseComponent {
                         ]),
                         transition(':leave', [animate('150ms', style({ transform: 'translateX(50px)' }))])
                     ])
-                ], template: "<div class=\"po-page-slide\" tabindex=\"0\" *ngIf=\"!hidden\" [@fade]>\r\n  <div class=\"po-page-slide-overlay\" (mousedown)=\"onClickOut($event)\"></div>\r\n  <div class=\"po-page-slide-container po-page-slide-right po-page-slide-{{ size }}\" [@slide]>\r\n    <div class=\"po-page-slide-content\" tabindex=\"-1\" #pageContent>\r\n      <div class=\"po-page-slide-header\">\r\n        <div class=\"po-page-slide-title\">\r\n          <span>{{ title }}</span>\r\n          <div class=\"po-page-slide-subtitle\" *ngIf=\"subtitle\">{{ subtitle }}</div>\r\n        </div>\r\n        <po-button *ngIf=\"!hideClose\" p-icon=\"po-icon-close\" p-kind=\"tertiary\" (p-click)=\"close()\"> </po-button>\r\n      </div>\r\n      <div class=\"po-page-slide-body\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+                ], template: "<div class=\"po-page-slide\" tabindex=\"0\" *ngIf=\"!hidden\" [@fade]>\n  <div class=\"po-page-slide-overlay\" (mousedown)=\"onClickOut($event)\"></div>\n  <div class=\"po-page-slide-container po-page-slide-right po-page-slide-{{ size }}\" [@slide]>\n    <div class=\"po-page-slide-content\" tabindex=\"-1\" #pageContent>\n      <div class=\"po-page-slide-header\">\n        <div class=\"po-page-slide-title\">\n          <span>{{ title }}</span>\n          <div class=\"po-page-slide-subtitle\" *ngIf=\"subtitle\">{{ subtitle }}</div>\n        </div>\n        <po-button *ngIf=\"!hideClose\" p-icon=\"po-icon-close\" p-kind=\"tertiary\" (p-click)=\"close()\"> </po-button>\n      </div>\n      <div class=\"po-page-slide-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: PoActiveOverlayService }]; }, { pageContent: [{
             type: ViewChild,
             args: ['pageContent', { read: ElementRef }]
@@ -17654,7 +17656,7 @@ class PoTableIconComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableIconComponent, [{
         type: Component,
-        args: [{ selector: 'po-table-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-icon\r\n  class=\"po-table-icon-content {{ disabled ? '' : color }}\"\r\n  [ngClass]=\"{ 'po-clickable': clickable, 'po-table-icon-disabled': disabled }\"\r\n  [p-icon]=\"icon\"\r\n  [p-tooltip]=\"tooltip\"\r\n  [p-append-in-body]=\"true\"\r\n  (click)=\"onClick($event)\"\r\n  (mouseenter)=\"tooltipMouseEnter()\"\r\n  (mouseleave)=\"tooltipMouseLeave()\"\r\n></po-icon>\r\n" }]
+        args: [{ selector: 'po-table-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-icon\n  class=\"po-table-icon-content {{ disabled ? '' : color }}\"\n  [ngClass]=\"{ 'po-clickable': clickable, 'po-table-icon-disabled': disabled }\"\n  [p-icon]=\"icon\"\n  [p-tooltip]=\"tooltip\"\n  [p-append-in-body]=\"true\"\n  (click)=\"onClick($event)\"\n  (mouseenter)=\"tooltipMouseEnter()\"\n  (mouseleave)=\"tooltipMouseLeave()\"\n></po-icon>\n" }]
     }], null, { clickable: [{
             type: Input,
             args: ['p-clickable']
@@ -17753,7 +17755,7 @@ class PoTableColumnIconComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableColumnIconComponent, [{
         type: Component,
-        args: [{ selector: 'po-table-column-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-table-icon\r\n  *ngFor=\"let column of icons; trackBy: trackByFunction\"\r\n  [p-clickable]=\"isClickable(column)\"\r\n  [p-color]=\"getColor(column)\"\r\n  [p-disabled]=\"isDisabled(column)\"\r\n  [p-icon]=\"getIcon(column)\"\r\n  [p-icon-tooltip]=\"column.tooltip\"\r\n  (p-click)=\"click(column, $event)\"\r\n>\r\n</po-table-icon>\r\n" }]
+        args: [{ selector: 'po-table-column-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-table-icon\n  *ngFor=\"let column of icons; trackBy: trackByFunction\"\n  [p-clickable]=\"isClickable(column)\"\n  [p-color]=\"getColor(column)\"\n  [p-disabled]=\"isDisabled(column)\"\n  [p-icon]=\"getIcon(column)\"\n  [p-icon-tooltip]=\"column.tooltip\"\n  (p-click)=\"click(column, $event)\"\n>\n</po-table-icon>\n" }]
     }], null, { column: [{
             type: Input,
             args: ['p-column']
@@ -17796,7 +17798,7 @@ class PoTableColumnLabelComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableColumnLabelComponent, [{
         type: Component,
-        args: [{ selector: 'po-table-column-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-tag\r\n  *ngIf=\"hasLabel\"\r\n  [p-color]=\"value?.color\"\r\n  [p-value]=\"value?.label\"\r\n  [p-text-color]=\"value?.textColor\"\r\n  [p-icon]=\"value?.icon\"\r\n  [p-type]=\"value?.type\"\r\n>\r\n</po-tag>\r\n" }]
+        args: [{ selector: 'po-table-column-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-tag\n  *ngIf=\"hasLabel\"\n  [p-color]=\"value?.color\"\n  [p-value]=\"value?.label\"\n  [p-text-color]=\"value?.textColor\"\n  [p-icon]=\"value?.icon\"\n  [p-type]=\"value?.type\"\n>\n</po-tag>\n" }]
     }], null, { value: [{
             type: Input,
             args: ['p-value']
@@ -17867,7 +17869,7 @@ class PoTableColumnLinkComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableColumnLinkComponent, [{
         type: Component,
-        args: [{ selector: 'po-table-column-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-table-link\" [ngClass]=\"{ 'po-table-link-disabled': disabled }\">\r\n  <ng-container [ngSwitch]=\"type\">\r\n    <po-link\r\n      *ngSwitchCase=\"'action'\"\r\n      [p-label]=\"value\"\r\n      [p-open-new-tab]=\"openNewTab\"\r\n      (p-action)=\"action?.(value, row)\"\r\n    ></po-link>\r\n    <po-link *ngSwitchCase=\"'externalLink'\" [p-label]=\"value\" [p-open-new-tab]=\"openNewTab\" [p-url]=\"link\"></po-link>\r\n    <po-link *ngSwitchCase=\"'internalLink'\" [p-label]=\"value\" [p-open-new-tab]=\"openNewTab\" [p-url]=\"link\"></po-link>\r\n  </ng-container>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-table-column-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-table-link\" [ngClass]=\"{ 'po-table-link-disabled': disabled }\">\n  <ng-container [ngSwitch]=\"type\">\n    <po-link\n      *ngSwitchCase=\"'action'\"\n      [p-label]=\"value\"\n      [p-open-new-tab]=\"openNewTab\"\n      (p-action)=\"action?.(value, row)\"\n    ></po-link>\n    <po-link *ngSwitchCase=\"'externalLink'\" [p-label]=\"value\" [p-open-new-tab]=\"openNewTab\" [p-url]=\"link\"></po-link>\n    <po-link *ngSwitchCase=\"'internalLink'\" [p-label]=\"value\" [p-open-new-tab]=\"openNewTab\" [p-url]=\"link\"></po-link>\n  </ng-container>\n</div>\n" }]
     }], null, { action: [{
             type: Input,
             args: ['p-action']
@@ -18157,7 +18159,7 @@ class PoSwitchComponent extends PoFieldModel {
                         useExisting: forwardRef(() => PoSwitchComponent),
                         multi: true
                     }
-                ], template: "<po-field-container [p-disabled]=\"disabled\" [p-id]=\"id\" [p-label]=\"label\">\r\n  <div class=\"po-field-container-content\" [attr.name]=\"name\">\r\n    <div class=\"po-switch\" [attr.data-label-position]=\"getLabelPosition()\">\r\n      <div\r\n        #switchContainer\r\n        class=\"po-switch-container\"\r\n        role=\"switch\"\r\n        [attr.aria-checked]=\"value\"\r\n        [attr.aria-disabled]=\"disabled\"\r\n        [id]=\"id\"\r\n        [tabindex]=\"disabled ? -1 : 0\"\r\n        (blur)=\"onBlur()\"\r\n        (click)=\"eventClick()\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n      >\r\n        <div class=\"po-switch-track\">\r\n          <div class=\"po-switch-toggle\" [attr.aria-label]=\"value === true ? labelOn : labelOff\">\r\n            <po-icon *ngIf=\"value === true\" class=\"po-switch-icon\" p-icon=\"po-icon-ok\"></po-icon>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <po-label\r\n        *ngIf=\"label\"\r\n        [p-disabled]=\"disabled\"\r\n        [p-label]=\"value === true ? labelOn : labelOff\"\r\n        (click)=\"eventClick()\"\r\n      >\r\n      </po-label>\r\n    </div>\r\n  </div>\r\n\r\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+                ], template: "<po-field-container [p-disabled]=\"disabled\" [p-id]=\"id\" [p-label]=\"label\">\n  <div class=\"po-field-container-content\" [attr.name]=\"name\">\n    <div class=\"po-switch\" [attr.data-label-position]=\"getLabelPosition()\">\n      <div\n        #switchContainer\n        class=\"po-switch-container\"\n        role=\"switch\"\n        [attr.aria-checked]=\"value\"\n        [attr.aria-disabled]=\"disabled\"\n        [id]=\"id\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        (blur)=\"onBlur()\"\n        (click)=\"eventClick()\"\n        (keydown)=\"onKeyDown($event)\"\n      >\n        <div class=\"po-switch-track\">\n          <div class=\"po-switch-toggle\" [attr.aria-label]=\"value === true ? labelOn : labelOff\">\n            <po-icon *ngIf=\"value === true\" class=\"po-switch-icon\" p-icon=\"po-icon-ok\"></po-icon>\n          </div>\n        </div>\n      </div>\n\n      <po-label\n        *ngIf=\"label\"\n        [p-disabled]=\"disabled\"\n        [p-label]=\"value === true ? labelOn : labelOff\"\n        (click)=\"eventClick()\"\n      >\n      </po-label>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { switchContainer: [{
             type: ViewChild,
             args: ['switchContainer', { static: true }]
@@ -18451,7 +18453,7 @@ class PoTableListManagerComponent extends PoCheckboxGroupComponent {
                         useExisting: forwardRef(() => PoTableListManagerComponent),
                         multi: true
                     }
-                ], template: "<section class=\"po-table-list-manager-section\" *ngIf=\"existedFixedItem()\">\r\n  <p class=\"po-table-list-manager-title-group-items\">{{ literals.fixedColumns }}</p>\r\n  <ng-container *ngFor=\"let option of checkboxGroupOptionsView; trackBy: trackByFn\">\r\n    <ng-container *ngIf=\"isFixed(option)\">\r\n      <li class=\"po-table-list-manager-container\" [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\">\r\n        <ng-container *ngTemplateOutlet=\"listItemsManagerDefault; context: { $implicit: option }\"></ng-container>\r\n      </li>\r\n    </ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<section class=\"po-table-list-manager-section\">\r\n  <p class=\"po-table-list-manager-title-group-items\">{{ literals.otherColumns }}</p>\r\n  <ng-container *ngFor=\"let option of checkboxGroupOptionsView; trackBy: trackByFn\">\r\n    <ng-container *ngIf=\"!isFixed(option)\">\r\n      <li class=\"po-table-list-manager-container\" [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\">\r\n        <ng-container *ngIf=\"!isFixed(option)\">\r\n          <ng-container *ngTemplateOutlet=\"listItemsManagerDefault; context: { $implicit: option }\"></ng-container>\r\n        </ng-container>\r\n      </li>\r\n    </ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #listItemsManagerDefault let-option>\r\n  <div class=\"po-table-list-manager-item\">\r\n    <div class=\"po-table-list-manager-item-switch\">\r\n      <po-switch\r\n        name=\"switch\"\r\n        (p-change)=\"clickSwitch(option)\"\r\n        (keydown)=\"onKeyDown($event, option)\"\r\n        [p-disabled]=\"option.disabled || disabled || isFixed(option)\"\r\n        [p-value]=\"checkedOptions[option.value]\"\r\n        p-label-off=\" \"\r\n        p-label-on=\" \"\r\n      >\r\n      </po-switch>\r\n      <span class=\"po-table-list-manager-item-text\">\r\n        {{ option.label }}\r\n      </span>\r\n    </div>\r\n\r\n    <div class=\"po-table-list-manager-item-buttons\">\r\n      <po-button\r\n        *ngIf=\"!hideActionFixedColumns\"\r\n        [p-icon]=\"isFixed(option) ? templateIconFixed : templateIconNotFixed\"\r\n        (p-click)=\"emitFixed(option)\"\r\n        [p-disabled]=\"!option.visible || checksIfHasFiveFixed(option)\"\r\n      >\r\n      </po-button>\r\n\r\n      <po-button\r\n        [p-tooltip]=\"literals.up\"\r\n        p-tooltip-position=\"left\"\r\n        p-icon=\"po-icon po-icon-arrow-up\"\r\n        [p-disabled]=\"verifyArrowDisabled(option, 'up') || isFixed(option)\"\r\n        (p-click)=\"emitChangePosition(option, 'up')\"\r\n      >\r\n      </po-button>\r\n\r\n      <po-button\r\n        [p-tooltip]=\"literals.down\"\r\n        p-tooltip-position=\"top\"\r\n        p-icon=\"po-icon po-icon-arrow-down\"\r\n        [p-disabled]=\"verifyArrowDisabled(option, 'down') || isFixed(option)\"\r\n        (p-click)=\"emitChangePosition(option, 'down')\"\r\n      >\r\n      </po-button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #templateIconNotFixed>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n    <g clip-path=\"url(#clip0_12562_15948)\">\r\n      <path\r\n        d=\"M13.7143 5.71429V10C13.7143 10.96 14.0314 11.8514 14.5714 12.5714H9.42857C9.98571 11.8343 10.2857 10.9429 10.2857 10V5.71429H13.7143ZM16.2857 4H7.71429C7.24286 4 6.85714 4.38571 6.85714 4.85714C6.85714 5.32857 7.24286 5.71429 7.71429 5.71429H8.57143V10C8.57143 11.4229 7.42286 12.5714 6 12.5714V14.2857H11.1171V20.2857L11.9743 21.1429L12.8314 20.2857V14.2857H18V12.5714C16.5771 12.5714 15.4286 11.4229 15.4286 10V5.71429H16.2857C16.7571 5.71429 17.1429 5.32857 17.1429 4.85714C17.1429 4.38571 16.7571 4 16.2857 4Z\"\r\n        fill=\"black\"\r\n      />\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_12562_15948\">\r\n        <rect width=\"24\" height=\"24\" fill=\"white\" />\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #templateIconFixed>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n    <g clip-path=\"url(#clip0_12562_17487)\">\r\n      <path\r\n        d=\"M16.2857 4H7.71429C7.24286 4 6.85714 4.38571 6.85714 4.85714C6.85714 5.32857 7.24286 5.71429 7.71429 5.71429H8.57143V10C8.57143 11.4229 7.42286 12.5714 6 12.5714V14.2857H11.1171V20.2857L11.9743 21.1429L12.8314 20.2857V14.2857H18V12.5714C16.5771 12.5714 15.4286 11.4229 15.4286 10V5.71429H16.2857C16.7571 5.71429 17.1429 5.32857 17.1429 4.85714C17.1429 4.38571 16.7571 4 16.2857 4Z\"\r\n        fill=\"#B4B4C0\"\r\n      />\r\n    </g>\r\n    <defs>\r\n      <clipPath id=\"clip0_12562_17487\">\r\n        <rect width=\"24\" height=\"24\" fill=\"black\" />\r\n      </clipPath>\r\n    </defs>\r\n  </svg>\r\n</ng-template>\r\n" }]
+                ], template: "<section class=\"po-table-list-manager-section\" *ngIf=\"existedFixedItem()\">\n  <p class=\"po-table-list-manager-title-group-items\">{{ literals.fixedColumns }}</p>\n  <ng-container *ngFor=\"let option of checkboxGroupOptionsView; trackBy: trackByFn\">\n    <ng-container *ngIf=\"isFixed(option)\">\n      <li class=\"po-table-list-manager-container\" [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\">\n        <ng-container *ngTemplateOutlet=\"listItemsManagerDefault; context: { $implicit: option }\"></ng-container>\n      </li>\n    </ng-container>\n  </ng-container>\n</section>\n\n<section class=\"po-table-list-manager-section\">\n  <p class=\"po-table-list-manager-title-group-items\">{{ literals.otherColumns }}</p>\n  <ng-container *ngFor=\"let option of checkboxGroupOptionsView; trackBy: trackByFn\">\n    <ng-container *ngIf=\"!isFixed(option)\">\n      <li class=\"po-table-list-manager-container\" [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\">\n        <ng-container *ngIf=\"!isFixed(option)\">\n          <ng-container *ngTemplateOutlet=\"listItemsManagerDefault; context: { $implicit: option }\"></ng-container>\n        </ng-container>\n      </li>\n    </ng-container>\n  </ng-container>\n</section>\n\n<ng-template #listItemsManagerDefault let-option>\n  <div class=\"po-table-list-manager-item\">\n    <div class=\"po-table-list-manager-item-switch\">\n      <po-switch\n        name=\"switch\"\n        (p-change)=\"clickSwitch(option)\"\n        (keydown)=\"onKeyDown($event, option)\"\n        [p-disabled]=\"option.disabled || disabled || isFixed(option)\"\n        [p-value]=\"checkedOptions[option.value]\"\n        p-label-off=\" \"\n        p-label-on=\" \"\n      >\n      </po-switch>\n      <span class=\"po-table-list-manager-item-text\">\n        {{ option.label }}\n      </span>\n    </div>\n\n    <div class=\"po-table-list-manager-item-buttons\">\n      <po-button\n        *ngIf=\"!hideActionFixedColumns\"\n        [p-icon]=\"isFixed(option) ? templateIconFixed : templateIconNotFixed\"\n        (p-click)=\"emitFixed(option)\"\n        [p-disabled]=\"!option.visible || checksIfHasFiveFixed(option)\"\n      >\n      </po-button>\n\n      <po-button\n        [p-tooltip]=\"literals.up\"\n        p-tooltip-position=\"left\"\n        p-icon=\"po-icon po-icon-arrow-up\"\n        [p-disabled]=\"verifyArrowDisabled(option, 'up') || isFixed(option)\"\n        (p-click)=\"emitChangePosition(option, 'up')\"\n      >\n      </po-button>\n\n      <po-button\n        [p-tooltip]=\"literals.down\"\n        p-tooltip-position=\"top\"\n        p-icon=\"po-icon po-icon-arrow-down\"\n        [p-disabled]=\"verifyArrowDisabled(option, 'down') || isFixed(option)\"\n        (p-click)=\"emitChangePosition(option, 'down')\"\n      >\n      </po-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #templateIconNotFixed>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <g clip-path=\"url(#clip0_12562_15948)\">\n      <path\n        d=\"M13.7143 5.71429V10C13.7143 10.96 14.0314 11.8514 14.5714 12.5714H9.42857C9.98571 11.8343 10.2857 10.9429 10.2857 10V5.71429H13.7143ZM16.2857 4H7.71429C7.24286 4 6.85714 4.38571 6.85714 4.85714C6.85714 5.32857 7.24286 5.71429 7.71429 5.71429H8.57143V10C8.57143 11.4229 7.42286 12.5714 6 12.5714V14.2857H11.1171V20.2857L11.9743 21.1429L12.8314 20.2857V14.2857H18V12.5714C16.5771 12.5714 15.4286 11.4229 15.4286 10V5.71429H16.2857C16.7571 5.71429 17.1429 5.32857 17.1429 4.85714C17.1429 4.38571 16.7571 4 16.2857 4Z\"\n        fill=\"black\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_12562_15948\">\n        <rect width=\"24\" height=\"24\" fill=\"white\" />\n      </clipPath>\n    </defs>\n  </svg>\n</ng-template>\n\n<ng-template #templateIconFixed>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <g clip-path=\"url(#clip0_12562_17487)\">\n      <path\n        d=\"M16.2857 4H7.71429C7.24286 4 6.85714 4.38571 6.85714 4.85714C6.85714 5.32857 7.24286 5.71429 7.71429 5.71429H8.57143V10C8.57143 11.4229 7.42286 12.5714 6 12.5714V14.2857H11.1171V20.2857L11.9743 21.1429L12.8314 20.2857V14.2857H18V12.5714C16.5771 12.5714 15.4286 11.4229 15.4286 10V5.71429H16.2857C16.7571 5.71429 17.1429 5.32857 17.1429 4.85714C17.1429 4.38571 16.7571 4 16.2857 4Z\"\n        fill=\"#B4B4C0\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_12562_17487\">\n        <rect width=\"24\" height=\"24\" fill=\"black\" />\n      </clipPath>\n    </defs>\n  </svg>\n</ng-template>\n" }]
     }], function () { return [{ type: PoLanguageService }, { type: i0.ChangeDetectorRef }]; }, { changePosition: [{
             type: Output,
             args: ['p-change-position']
@@ -18797,7 +18799,7 @@ class PoTableColumnManagerComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableColumnManagerComponent, [{
         type: Component,
-        args: [{ selector: 'po-table-column-manager', template: "<po-page-slide\r\n  #pageSlideColumnsManager\r\n  p-size=\"auto\"\r\n  [p-title]=\"literals.columnsManager\"\r\n  [p-click-out]=\"true\"\r\n  (p-close)=\"checkChanges([], true)\"\r\n>\r\n  <div>\r\n    <div class=\"po-table-column-manager-body\">\r\n      <po-table-list-manager\r\n        name=\"visibleColumns\"\r\n        [(ngModel)]=\"visibleColumns\"\r\n        p-columns=\"1\"\r\n        [p-options]=\"columnsOptions\"\r\n        [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\r\n        (p-change)=\"checkChanges($event, false)\"\r\n        (p-change-position)=\"changePosition($event)\"\r\n        (p-change-fixed)=\"emitColumnFixed($event)\"\r\n        [p-columns-manager]=\"columns\"\r\n      >\r\n      </po-table-list-manager>\r\n    </div>\r\n\r\n    <div class=\"po-table-column-manager-footer\">\r\n      <po-button\r\n        class=\"po-table-column-manager-footer-restore\"\r\n        p-kind=\"tertiary\"\r\n        [p-label]=\"literals.restoreDefault\"\r\n        (p-click)=\"restore()\"\r\n      >\r\n      </po-button>\r\n    </div>\r\n  </div>\r\n</po-page-slide>\r\n" }]
+        args: [{ selector: 'po-table-column-manager', template: "<po-page-slide\n  #pageSlideColumnsManager\n  p-size=\"auto\"\n  [p-title]=\"literals.columnsManager\"\n  [p-click-out]=\"true\"\n  (p-close)=\"checkChanges([], true)\"\n>\n  <div>\n    <div class=\"po-table-column-manager-body\">\n      <po-table-list-manager\n        name=\"visibleColumns\"\n        [(ngModel)]=\"visibleColumns\"\n        p-columns=\"1\"\n        [p-options]=\"columnsOptions\"\n        [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n        (p-change)=\"checkChanges($event, false)\"\n        (p-change-position)=\"changePosition($event)\"\n        (p-change-fixed)=\"emitColumnFixed($event)\"\n        [p-columns-manager]=\"columns\"\n      >\n      </po-table-list-manager>\n    </div>\n\n    <div class=\"po-table-column-manager-footer\">\n      <po-button\n        class=\"po-table-column-manager-footer-restore\"\n        p-kind=\"tertiary\"\n        [p-label]=\"literals.restoreDefault\"\n        (p-click)=\"restore()\"\n      >\n      </po-button>\n    </div>\n  </div>\n</po-page-slide>\n" }]
     }], function () { return [{ type: i0.Renderer2 }, { type: PoLanguageService }]; }, { popover: [{
             type: ViewChild,
             args: [PoPopoverComponent]
@@ -19582,8 +19584,8 @@ class PoTableBaseComponent {
         else if (!this.hasColumns) {
             this.columns = this.getDefaultColumns(items[0]);
         }
-        this.filteredItems = [...this.items];
-        // timeout necessario para os itens serem refletidos na tabela
+        this.filteredItems = this.height ? [...this.items] : this.items;
+        // timeout necessário para os itens serem refletidos na tabela
         setTimeout(() => this.checkInfiniteScroll());
     }
     get items() {
@@ -22939,7 +22941,7 @@ class PoTableComponent extends PoTableBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableComponent, [{
         type: Component,
-        args: [{ selector: 'po-table', providers: [PoDateService], template: "<div class=\"po-table-actions\">\r\n  <div\r\n    #columnBatchActions\r\n    *ngIf=\"hasValidColumns && itemsSelected.length > 0 && !hideBatchActions\"\r\n    class=\"po-table-actions-batch-actions\"\r\n  >\r\n    <div [ngPlural]=\"itemsSelected.length\" class=\"po-table-actions-batch-actions__label\">\r\n      <strong>\r\n        <ng-template ngPluralCase=\"=0\">{{ literals.noItem }}</ng-template>\r\n        <ng-template ngPluralCase=\"=1\">{{ literals.oneItem }}</ng-template>\r\n        <ng-template ngPluralCase=\"other\">{{ itemsSelected.length }} {{ literals.multipleItems }}</ng-template>\r\n      </strong>\r\n    </div>\r\n\r\n    <div class=\"po-table-actions-batch-actions__buttons\">\r\n      <po-button\r\n        p-icon=\"po-icon-delete\"\r\n        [p-danger]=\"true\"\r\n        [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\r\n        [p-label]=\"literals.delete\"\r\n        (p-click)=\"modalDelete.open()\"\r\n      ></po-button>\r\n    </div>\r\n  </div>\r\n\r\n  <div #columnManager *ngIf=\"hasValidColumns && !hideColumnsManager\" class=\"po-table-actions-column-manager\">\r\n    <po-button\r\n      #columnManagerTarget\r\n      p-icon=\"po-icon-settings\"\r\n      p-kind=\"tertiary\"\r\n      p-tooltip-position=\"left\"\r\n      [p-aria-label]=\"literals.columnsManager\"\r\n      [p-tooltip]=\"literals.columnsManager\"\r\n      (p-click)=\"onOpenColumnManager()\"\r\n    ></po-button>\r\n  </div>\r\n\r\n  <div *ngIf=\"!hideTableSearch && hasValidColumns\" class=\"po-table-search\">\r\n    <po-search\r\n      [p-items]=\"items\"\r\n      [p-filter-keys]=\"filteredColumns\"\r\n      [p-filter-type]=\"filterType\"\r\n      (p-filtered-items-change)=\"onFilteredItemsChange($event)\"\r\n    >\r\n    </po-search>\r\n  </div>\r\n</div>\r\n<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding>\r\n  <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\r\n</po-container>\r\n\r\n<ng-template #tableContainerTemplate>\r\n  <div [class.po-table-container-relative]=\"loading\">\r\n    <div *ngIf=\"loading\" class=\"po-table-overlay\">\r\n      <po-loading class=\"po-table-overlay-content\" [p-text]=\"literals.loadingData\"></po-loading>\r\n    </div>\r\n\r\n    <div class=\"po-table-main-container\">\r\n      <div\r\n        #tableWrapper\r\n        class=\"po-table-wrapper\"\r\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\r\n        [style.opacity]=\"tableOpacity\"\r\n      >\r\n        <div *ngIf=\"height\" class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\r\n          <div #poTableTbody class=\"po-table-container-fixed-inner\">\r\n            <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"!height\">\r\n          <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"po-table-footer\" *ngIf=\"hasFooter\">\r\n    <ng-container *ngFor=\"let column of subtitleColumns; trackBy: trackBy\">\r\n      <po-table-subtitle-footer [p-literals]=\"literals\" [p-subtitles]=\"column.subtitles\"> </po-table-subtitle-footer>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Show More Button -->\r\n<div\r\n  *ngIf=\"!infiniteScroll\"\r\n  class=\"po-row po-table-footer-show-more\"\r\n  [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\r\n  #tableFooter\r\n>\r\n  <po-button\r\n    class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\r\n    [p-disabled]=\"showMoreDisabled\"\r\n    [p-label]=\"literals.loadMoreData\"\r\n    [p-loading]=\"loadingShowMore\"\r\n    (p-click)=\"onShowMore()\"\r\n  >\r\n  </po-button>\r\n</div>\r\n\r\n<!-- Table default-->\r\n<ng-template #tableTemplate>\r\n  <table\r\n    class=\"po-table\"\r\n    [ngClass]=\"{\r\n      'po-table-interactive': selectable || sort,\r\n      'po-table-selectable': selectable,\r\n      'po-table-striped': striped\r\n    }\"\r\n    [attr.p-spacing]=\"spacing\"\r\n  >\r\n    <thead>\r\n      <tr\r\n        [ngClass]=\"{ 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable }\"\r\n        [class.po-table-header]=\"!height\"\r\n        cdkDropList\r\n        cdkDropListOrientation=\"horizontal\"\r\n        (cdkDropListDropped)=\"drop($event)\"\r\n      >\r\n        <th\r\n          *ngIf=\"hasSelectableColumn\"\r\n          [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\r\n          class=\"po-table-column-selectable\"\r\n        >\r\n          <div [class.po-table-header-fixed-inner]=\"height\">\r\n            <po-checkbox\r\n              name=\"selectAll\"\r\n              *ngIf=\"!hideSelectAll\"\r\n              (p-change)=\"selectAllRows()\"\r\n              [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\r\n            ></po-checkbox>\r\n          </div>\r\n        </th>\r\n\r\n        <th\r\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\r\n          class=\"po-table-header-column po-table-header-master-detail\"\r\n        ></th>\r\n\r\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\r\n        <th\r\n          #columnActionLeft\r\n          *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\r\n          [class.po-table-header-master-detail]=\"!isSingleAction\"\r\n          [class.po-table-header-single-action]=\"isSingleAction\"\r\n        ></th>\r\n\r\n        <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\r\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\r\n        </th>\r\n\r\n        <ng-container\r\n          *ngIf=\"this.isDraggable || hasSomeFixed(); then tableDefaultThDragDrop; else tableDefaultThDefault\"\r\n        >\r\n        </ng-container>\r\n        <ng-template #tableDefaultThDragDrop>\r\n          <th\r\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\r\n            class=\"po-table-header-ellipsis p-element po-frozen-column\"\r\n            [style.width]=\"column.width\"\r\n            [style.max-width]=\"column.width\"\r\n            [style.min-width]=\"column.width\"\r\n            [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\r\n            [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\r\n            [ngClass]=\"{\r\n              'po-table-header-sorted':\r\n                sort &&\r\n                JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\r\n                (sortedColumn.ascending || !sortedColumn.ascending)\r\n            }\"\r\n            [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\r\n            [class.po-table-column-drag-box]=\"this.isDraggable\"\r\n            (click)=\"sortColumn(column)\"\r\n            cdkDrag\r\n            cdkDragLockAxis=\"x\"\r\n            [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\r\n            [pFrozenColumn]=\"column.fixed\"\r\n          >\r\n            <div\r\n              class=\"po-table-header-flex\"\r\n              [class.po-table-header-fixed-inner]=\"height\"\r\n              [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\r\n              [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\r\n            >\r\n              <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\r\n                <svg\r\n                  cdkDragHandle\r\n                  width=\"24\"\r\n                  height=\"24\"\r\n                  viewBox=\"0 0 24 24\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\r\n                  <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\r\n                  <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\r\n                  <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\r\n                  <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\r\n                  <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\r\n                </svg>\r\n              </ng-container>\r\n              <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\r\n            </div>\r\n          </th>\r\n        </ng-template>\r\n        <ng-template #tableDefaultThDefault>\r\n          <th\r\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\r\n            class=\"po-table-header-ellipsis p-element po-frozen-column\"\r\n            [style.width]=\"column.width\"\r\n            [style.max-width]=\"column.width\"\r\n            [style.min-width]=\"column.width\"\r\n            [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\r\n            [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\r\n            [ngClass]=\"{\r\n              'po-table-header-sorted':\r\n                sort &&\r\n                JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\r\n                (sortedColumn.ascending || !sortedColumn.ascending)\r\n            }\"\r\n            [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\r\n            (click)=\"sortColumn(column)\"\r\n            [pFrozenColumn]=\"column.fixed\"\r\n          >\r\n            <div\r\n              class=\"po-table-header-flex\"\r\n              [class.po-table-header-fixed-inner]=\"height\"\r\n              [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\r\n              [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\r\n            >\r\n              <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\r\n            </div>\r\n          </th>\r\n        </ng-template>\r\n\r\n        <th\r\n          *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager)\"\r\n          class=\"po-table-header-column po-table-header-master-detail\"\r\n        ></th>\r\n\r\n        <th\r\n          *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\r\n          [class.po-table-header-single-action]=\"isSingleAction\"\r\n          [class.po-table-header-actions]=\"!isSingleAction\"\r\n        ></th>\r\n      </tr>\r\n    </thead>\r\n\r\n    <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\r\n      <tr class=\"po-table-row po-table-row-no-data\">\r\n        <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\r\n          <span> {{ literals.noData }} </span>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n\r\n    <ng-container *ngIf=\"hasMainColumns\">\r\n      <tbody class=\"po-table-group-row\" *ngFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\">\r\n        <tr class=\"po-table-row\" [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\">\r\n          <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\r\n            <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\r\n            </ng-container>\r\n          </td>\r\n\r\n          <!-- Valida se a origem do detail \u00E9 pelo input do po-table -->\r\n          <td\r\n            *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\r\n            class=\"po-table-column-detail-toggle\"\r\n            (click)=\"toggleDetail(row)\"\r\n          >\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\r\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\r\n            >\r\n            </ng-template>\r\n          </td>\r\n\r\n          <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\r\n          <ng-template\r\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\r\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\r\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\r\n          >\r\n          </ng-template>\r\n\r\n          <!-- Valida se a origem do detail \u00E9 pela diretiva -->\r\n          <td\r\n            *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\r\n            class=\"po-table-column-detail-toggle\"\r\n            (click)=\"toggleDetail(row)\"\r\n          >\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\r\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\r\n            >\r\n            </ng-template>\r\n          </td>\r\n\r\n          <td\r\n            *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\r\n            [style.width]=\"column.width\"\r\n            [style.max-width]=\"column.width\"\r\n            [style.min-width]=\"column.width\"\r\n            [class.po-table-column]=\"column.type !== 'icon'\"\r\n            [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\r\n            [class.po-table-column-center]=\"column.type === 'subtitle'\"\r\n            [class.po-table-column-icons]=\"column.type === 'icon'\"\r\n            [pFrozenColumn]=\"column.fixed\"\r\n            class=\"p-element po-frozen-column\"\r\n            [ngClass]=\"getClassColor(row, column)\"\r\n            (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\r\n          >\r\n            <div\r\n              class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\r\n              [ngSwitch]=\"column.type\"\r\n              [p-tooltip]=\"tooltipText\"\r\n              [p-append-in-body]=\"true\"\r\n              (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\r\n              (mouseleave)=\"tooltipMouseLeave()\"\r\n            >\r\n              <span *ngSwitchCase=\"'columnTemplate'\">\r\n                <ng-container *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\">\r\n                </ng-container>\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'cellTemplate'\">\r\n                <ng-container *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\">\r\n                </ng-container>\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'boolean'\">\r\n                {{ getBooleanLabel(getCellData(row, column), column) }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                {{ getCellData(row, column) | currency: column.format:'symbol':'1.2-2' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'date'\">\r\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'time'\">\r\n                {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'dateTime'\">\r\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'number'\">\r\n                {{ formatNumber(getCellData(row, column), column.format) }}\r\n              </span>\r\n\r\n              <po-table-column-link\r\n                *ngSwitchCase=\"'link'\"\r\n                [p-action]=\"column.action\"\r\n                [p-disabled]=\"checkDisabled(row, column)\"\r\n                [p-link]=\"row[column.link]\"\r\n                [p-row]=\"row\"\r\n                [p-value]=\"getCellData(row, column)\"\r\n                (click)=\"onClickLink($event, row, column)\"\r\n              >\r\n              </po-table-column-link>\r\n\r\n              <po-table-column-icon\r\n                *ngSwitchCase=\"'icon'\"\r\n                [p-column]=\"column\"\r\n                [p-icons]=\"getColumnIcons(row, column)\"\r\n                [p-row]=\"row\"\r\n              >\r\n              </po-table-column-icon>\r\n\r\n              <span *ngSwitchCase=\"'subtitle'\">\r\n                <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\r\n              </span>\r\n              <span *ngSwitchCase=\"'label'\">\r\n                <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\r\n              </span>\r\n              <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\r\n            </div>\r\n          </td>\r\n\r\n          <td\r\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\r\n            class=\"po-table-column-detail-toggle\"\r\n            (click)=\"toggleDetail(row)\"\r\n          >\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\r\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\r\n            >\r\n            </ng-template>\r\n          </td>\r\n\r\n          <!-- Coluna de a\u00E7oes na direita -->\r\n          <ng-template\r\n            *ngIf=\"actionRight\"\r\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\r\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\r\n          >\r\n          </ng-template>\r\n        </tr>\r\n\r\n        <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\r\n          <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\r\n            >\r\n            </ng-template>\r\n          </td>\r\n        </tr>\r\n\r\n        <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\r\n          <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\r\n            <po-table-detail\r\n              [p-selectable]=\"selectable && !detailHideSelect\"\r\n              [p-detail]=\"columnMasterDetail.detail\"\r\n              [p-items]=\"row[nameColumnDetail]\"\r\n              (p-select-row)=\"selectDetailRow($event)\"\r\n            >\r\n            </po-table-detail>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </ng-container>\r\n  </table>\r\n</ng-template>\r\n\r\n<!-- Table with virtual scroll -->\r\n<ng-template #tableVirtualScrollTemplate>\r\n  <cdk-virtual-scroll-viewport\r\n    #tableVirtualScroll\r\n    [itemSize]=\"itemSize\"\r\n    [style.height.px]=\"heightTableContainer\"\r\n    [minBufferPx]=\"heightTableContainer < 100 ? 100 : heightTableContainer\"\r\n    [maxBufferPx]=\"heightTableContainer < 200 ? 200 : heightTableContainer\"\r\n  >\r\n    <table\r\n      class=\"po-table\"\r\n      [ngClass]=\"{\r\n        'po-table-interactive': selectable || sort,\r\n        'po-table-selectable': selectable,\r\n        'po-table-striped': striped\r\n      }\"\r\n      [ngStyle]=\"{ 'table-layout': !hasItems ? 'fixed' : 'auto' }\"\r\n      [attr.p-spacing]=\"spacing\"\r\n    >\r\n      <thead class=\"po-table-header-sticky\" [style.top]=\"inverseOfTranslation\">\r\n        <tr\r\n          [class.po-table-header]=\"!height\"\r\n          cdkDropList\r\n          cdkDropListOrientation=\"horizontal\"\r\n          (cdkDropListDropped)=\"drop($event)\"\r\n        >\r\n          <th\r\n            *ngIf=\"hasSelectableColumn\"\r\n            [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\r\n            class=\"po-table-column-selectable\"\r\n          >\r\n            <div [class.po-table-header-fixed-inner]=\"height\">\r\n              <po-checkbox\r\n                name=\"selectAll\"\r\n                *ngIf=\"!hideSelectAll\"\r\n                (p-change)=\"selectAllRows()\"\r\n                [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\r\n              ></po-checkbox>\r\n            </div>\r\n          </th>\r\n\r\n          <th\r\n            *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\r\n            class=\"po-table-header-column po-table-header-master-detail\"\r\n          ></th>\r\n\r\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\r\n          <th\r\n            #columnActionLeft\r\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\r\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\r\n            [class.po-table-header-single-action]=\"isSingleAction\"\r\n          ></th>\r\n\r\n          <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\r\n            <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\r\n          </th>\r\n\r\n          <ng-container\r\n            *ngIf=\"\r\n              this.isDraggable || hasSomeFixed();\r\n              then tableVirtualScrollThDragDrop;\r\n              else tableVirtualScrollThDefault\r\n            \"\r\n          >\r\n          </ng-container>\r\n          <ng-template #tableVirtualScrollThDragDrop>\r\n            <th\r\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\r\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\r\n              [style.width]=\"column.width\"\r\n              [style.max-width]=\"column.width\"\r\n              [style.min-width]=\"column.width\"\r\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\r\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\r\n              [ngClass]=\"{\r\n                'po-table-header-sorted':\r\n                  sort &&\r\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\r\n                  (sortedColumn.ascending || !sortedColumn.ascending)\r\n              }\"\r\n              [ngStyle]=\"{ 'width': !hasItems ? '100%' : 'auto' }\"\r\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\r\n              [class.po-table-column-drag-box]=\"this.isDraggable\"\r\n              (click)=\"sortColumn(column)\"\r\n              cdkDrag\r\n              cdkDragLockAxis=\"x\"\r\n              [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\r\n              [pFrozenColumn]=\"column.fixed\"\r\n            >\r\n              <div\r\n                class=\"po-table-header-flex\"\r\n                [class.po-table-header-fixed-inner]=\"height\"\r\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\r\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\r\n              >\r\n                <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\r\n                  <svg\r\n                    cdkDragHandle\r\n                    width=\"24\"\r\n                    height=\"24\"\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\r\n                    <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\r\n                    <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\r\n                    <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\r\n                    <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\r\n                    <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\r\n                  </svg>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\r\n              </div>\r\n            </th>\r\n          </ng-template>\r\n          <ng-template #tableVirtualScrollThDefault>\r\n            <th\r\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\r\n              class=\"po-table-header-ellipsis p-element po-frozen-column example-box\"\r\n              [style.width]=\"column.width\"\r\n              [style.max-width]=\"column.width\"\r\n              [style.min-width]=\"column.width\"\r\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\r\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\r\n              [ngClass]=\"{\r\n                'po-table-header-sorted':\r\n                  sort &&\r\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\r\n                  (sortedColumn.ascending || !sortedColumn.ascending)\r\n              }\"\r\n              [ngStyle]=\"{ 'width': !hasItems ? '100%' : 'auto' }\"\r\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\r\n              (click)=\"sortColumn(column)\"\r\n              [pFrozenColumn]=\"column.fixed\"\r\n            >\r\n              <div\r\n                class=\"po-table-header-flex\"\r\n                [class.po-table-header-fixed-inner]=\"height\"\r\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\r\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\r\n              >\r\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\r\n              </div>\r\n            </th>\r\n          </ng-template>\r\n\r\n          <th\r\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager)\"\r\n            class=\"po-table-header-column po-table-header-master-detail\"\r\n          ></th>\r\n\r\n          <th\r\n            *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\r\n            [class.po-table-header-single-action]=\"isSingleAction\"\r\n            [class.po-table-header-actions]=\"!isSingleAction\"\r\n          ></th>\r\n        </tr>\r\n      </thead>\r\n\r\n      <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\r\n        <tr class=\"po-table-row po-table-row-no-data\">\r\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\r\n            <span> {{ literals.noData }} </span>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n\r\n      <ng-container *ngIf=\"hasMainColumns\">\r\n        <tbody\r\n          class=\"po-table-group-row\"\r\n          *cdkVirtualFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\"\r\n        >\r\n          <tr\r\n            class=\"po-table-row\"\r\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\r\n          >\r\n            <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\r\n              <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\r\n              </ng-container>\r\n            </td>\r\n\r\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table -->\r\n            <td\r\n              *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\r\n              class=\"po-table-column-detail-toggle\"\r\n              (click)=\"toggleDetail(row)\"\r\n            >\r\n              <ng-template\r\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\r\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\r\n              >\r\n              </ng-template>\r\n            </td>\r\n\r\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\r\n            <ng-template\r\n              *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\r\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\r\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\r\n            >\r\n            </ng-template>\r\n\r\n            <!-- Valida se a origem do detail \u00E9 pela diretiva -->\r\n            <td\r\n              *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\r\n              class=\"po-table-column-detail-toggle\"\r\n              (click)=\"toggleDetail(row)\"\r\n            >\r\n              <ng-template\r\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\r\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\r\n              >\r\n              </ng-template>\r\n            </td>\r\n\r\n            <td\r\n              *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\r\n              [style.width]=\"column.width\"\r\n              [style.max-width]=\"column.width\"\r\n              [style.min-width]=\"column.width\"\r\n              [class.po-table-column]=\"column.type !== 'icon'\"\r\n              [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\r\n              [class.po-table-column-center]=\"column.type === 'subtitle'\"\r\n              [class.po-table-column-icons]=\"column.type === 'icon'\"\r\n              [ngClass]=\"getClassColor(row, column)\"\r\n              [pFrozenColumn]=\"column.fixed\"\r\n              class=\"p-element po-frozen-column\"\r\n              (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\r\n            >\r\n              <div\r\n                class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\r\n                [ngSwitch]=\"column.type\"\r\n                [p-tooltip]=\"tooltipText\"\r\n                [p-append-in-body]=\"true\"\r\n                (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\r\n                (mouseleave)=\"tooltipMouseLeave()\"\r\n              >\r\n                <span *ngSwitchCase=\"'columnTemplate'\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\r\n                  >\r\n                  </ng-container>\r\n                </span>\r\n\r\n                <span *ngSwitchCase=\"'cellTemplate'\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\r\n                  >\r\n                  </ng-container>\r\n                </span>\r\n\r\n                <span *ngSwitchCase=\"'boolean'\">\r\n                  {{ getBooleanLabel(getCellData(row, column), column) }}\r\n                </span>\r\n\r\n                <span *ngSwitchCase=\"'currency'\">\r\n                  {{ getCellData(row, column) | currency: column.format:'symbol':'1.2-2' }}\r\n                </span>\r\n\r\n                <span *ngSwitchCase=\"'date'\">\r\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\r\n                </span>\r\n\r\n                <span *ngSwitchCase=\"'time'\">\r\n                  {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\r\n                </span>\r\n\r\n                <span *ngSwitchCase=\"'dateTime'\">\r\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\r\n                </span>\r\n\r\n                <span *ngSwitchCase=\"'number'\">\r\n                  {{ formatNumber(getCellData(row, column), column.format) }}\r\n                </span>\r\n\r\n                <po-table-column-link\r\n                  *ngSwitchCase=\"'link'\"\r\n                  [p-action]=\"column.action\"\r\n                  [p-disabled]=\"checkDisabled(row, column)\"\r\n                  [p-link]=\"row[column.link]\"\r\n                  [p-row]=\"row\"\r\n                  [p-value]=\"getCellData(row, column)\"\r\n                  (click)=\"onClickLink($event, row, column)\"\r\n                >\r\n                </po-table-column-link>\r\n\r\n                <po-table-column-icon\r\n                  *ngSwitchCase=\"'icon'\"\r\n                  [p-column]=\"column\"\r\n                  [p-icons]=\"getColumnIcons(row, column)\"\r\n                  [p-row]=\"row\"\r\n                >\r\n                </po-table-column-icon>\r\n\r\n                <span *ngSwitchCase=\"'subtitle'\">\r\n                  <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\r\n                </span>\r\n                <span *ngSwitchCase=\"'label'\">\r\n                  <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\r\n                </span>\r\n                <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\r\n              </div>\r\n            </td>\r\n\r\n            <td\r\n              *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\r\n              class=\"po-table-column-detail-toggle\"\r\n              (click)=\"toggleDetail(row)\"\r\n            >\r\n              <ng-template\r\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\r\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\r\n              >\r\n              </ng-template>\r\n            </td>\r\n\r\n            <!-- Coluna de a\u00E7oes na direita -->\r\n            <ng-template\r\n              *ngIf=\"actionRight\"\r\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\r\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\r\n            >\r\n            </ng-template>\r\n          </tr>\r\n\r\n          <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\r\n            <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\r\n              <ng-template\r\n                [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\r\n              >\r\n              </ng-template>\r\n            </td>\r\n          </tr>\r\n\r\n          <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\r\n            <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\r\n              <po-table-detail\r\n                [p-selectable]=\"selectable && !detailHideSelect\"\r\n                [p-detail]=\"columnMasterDetail.detail\"\r\n                [p-items]=\"row[nameColumnDetail]\"\r\n                (p-select-row)=\"selectDetailRow($event)\"\r\n              >\r\n              </po-table-detail>\r\n            </td>\r\n          </tr>\r\n        </tbody>\r\n      </ng-container>\r\n    </table>\r\n  </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<po-popup #popup [p-actions]=\"actions\" [p-target]=\"popupTarget\"> </po-popup>\r\n\r\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\r\n  <span\r\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\r\n    class=\"po-icon po-clickable\"\r\n    [class.po-icon-arrow-up]=\"row.$showDetail\"\r\n    [class.po-icon-arrow-down]=\"!row.$showDetail\"\r\n  >\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #inputRadio let-row>\r\n  <po-radio [name]=\"idRadio\" [p-checked]=\"row.$selected\" (p-change-selected)=\"selectRow(row)\"></po-radio>\r\n</ng-template>\r\n\r\n<ng-template #inputCheckbox let-row>\r\n  <po-checkbox\r\n    name=\"checkbox\"\r\n    (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\r\n    [p-checkboxValue]=\"row.$selected\"\r\n  ></po-checkbox>\r\n</ng-template>\r\n\r\n<ng-template #contentHeaderTemplate let-column>\r\n  <span\r\n    #columnHeader\r\n    class=\"po-table-header-ellipsis\"\r\n    [p-tooltip]=\"tooltipText\"\r\n    [p-append-in-body]=\"true\"\r\n    (mouseenter)=\"tooltipMouseEnter($event)\"\r\n    (mouseleave)=\"tooltipMouseLeave()\"\r\n  >\r\n    {{ column.label || (column.property | titlecase) }}\r\n  </span>\r\n\r\n  <span\r\n    *ngIf=\"sort && column.sortable !== false\"\r\n    [class.po-table-header-icon-unselected]=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\"\r\n    [class.po-table-header-icon-descending]=\"\r\n      JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\r\n    \"\r\n    [class.po-table-header-icon-ascending]=\"\r\n      JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\r\n    \"\r\n  >\r\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\">\r\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z\"\r\n          fill=\"#1D1D30\"\r\n        />\r\n      </svg>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\">\r\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z\"\r\n          fill=\"black\"\r\n        />\r\n      </svg>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\">\r\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path\r\n          fill-rule=\"evenodd\"\r\n          clip-rule=\"evenodd\"\r\n          d=\"M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z\"\r\n          fill=\"black\"\r\n        />\r\n      </svg>\r\n    </ng-container>\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #noColumnsWithHeight>\r\n  <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"noColumnsHeader?.nativeElement.offsetWidth\">\r\n    {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #noColumnsWithoutHeight>\r\n  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\r\n</ng-template>\r\n\r\n<!-- Template de a\u00E7\u00F5es -->\r\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\r\n  <td\r\n    *ngIf=\"isSingleAction\"\r\n    class=\"po-table-column po-table-column-single-action\"\r\n    [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\r\n    [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\r\n    [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\r\n  >\r\n    <div\r\n      *ngIf=\"firstAction.visible !== false\"\r\n      class=\"po-table-single-action po-clickable\"\r\n      [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\r\n      (click)=\"executeTableAction(row, firstAction)\"\r\n    >\r\n      <po-icon *ngIf=\"firstAction.icon\" class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\r\n      {{ firstAction.label }}\r\n    </div>\r\n  </td>\r\n\r\n  <td *ngIf=\"visibleActions.length > 1\" class=\"po-table-column-actions\">\r\n    <span #popupTarget class=\"po-icon po-icon-more po-clickable\" (click)=\"togglePopup(row, popupTarget)\"></span>\r\n  </td>\r\n</ng-template>\r\n\r\n<po-table-column-manager\r\n  *ngIf=\"!hideColumnsManager\"\r\n  [p-columns]=\"columns\"\r\n  [p-max-columns]=\"maxColumns\"\r\n  [p-target]=\"columnManagerTarget\"\r\n  [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\r\n  [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\r\n  (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\r\n  (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\r\n  [p-columns-default]=\"initialColumns\"\r\n  (p-initial-columns)=\"onColumnRestoreManager($event)\"\r\n>\r\n</po-table-column-manager>\r\n\r\n<po-modal\r\n  #modalDelete\r\n  [p-title]=\"literals.delete\"\r\n  [p-primary-action]=\"confirm\"\r\n  [p-secondary-action]=\"close\"\r\n  [p-click-out]=\"true\"\r\n>\r\n  <p class=\"po-font-text-large\">{{ literals.bodyDelete }}</p>\r\n</po-modal>\r\n" }]
+        args: [{ selector: 'po-table', providers: [PoDateService], template: "<div class=\"po-table-actions\">\n  <div\n    #columnBatchActions\n    *ngIf=\"hasValidColumns && itemsSelected.length > 0 && !hideBatchActions\"\n    class=\"po-table-actions-batch-actions\"\n  >\n    <div [ngPlural]=\"itemsSelected.length\" class=\"po-table-actions-batch-actions__label\">\n      <strong>\n        <ng-template ngPluralCase=\"=0\">{{ literals.noItem }}</ng-template>\n        <ng-template ngPluralCase=\"=1\">{{ literals.oneItem }}</ng-template>\n        <ng-template ngPluralCase=\"other\">{{ itemsSelected.length }} {{ literals.multipleItems }}</ng-template>\n      </strong>\n    </div>\n\n    <div class=\"po-table-actions-batch-actions__buttons\">\n      <po-button\n        p-icon=\"po-icon-delete\"\n        [p-danger]=\"true\"\n        [p-disabled]=\"itemsSelected.length > 1 && serviceDeleteApi !== undefined\"\n        [p-label]=\"literals.delete\"\n        (p-click)=\"modalDelete.open()\"\n      ></po-button>\n    </div>\n  </div>\n\n  <div #columnManager *ngIf=\"hasValidColumns && !hideColumnsManager\" class=\"po-table-actions-column-manager\">\n    <po-button\n      #columnManagerTarget\n      p-icon=\"po-icon-settings\"\n      p-kind=\"tertiary\"\n      p-tooltip-position=\"left\"\n      [p-aria-label]=\"literals.columnsManager\"\n      [p-tooltip]=\"literals.columnsManager\"\n      (p-click)=\"onOpenColumnManager()\"\n    ></po-button>\n  </div>\n\n  <div *ngIf=\"!hideTableSearch && hasValidColumns\" class=\"po-table-search\">\n    <po-search\n      [p-items]=\"items\"\n      [p-filter-keys]=\"filteredColumns\"\n      [p-filter-type]=\"filterType\"\n      (p-filtered-items-change)=\"onFilteredItemsChange($event)\"\n    >\n    </po-search>\n  </div>\n</div>\n<po-container *ngIf=\"container; else tableContainerTemplate\" p-no-padding>\n  <ng-container *ngTemplateOutlet=\"tableContainerTemplate\"></ng-container>\n</po-container>\n\n<ng-template #tableContainerTemplate>\n  <div [class.po-table-container-relative]=\"loading\">\n    <div *ngIf=\"loading\" class=\"po-table-overlay\">\n      <po-loading class=\"po-table-overlay-content\" [p-text]=\"literals.loadingData\"></po-loading>\n    </div>\n\n    <div class=\"po-table-main-container\">\n      <div\n        #tableWrapper\n        class=\"po-table-wrapper\"\n        [class.po-table-header-fixed-columns-pixels]=\"allColumnsWidthPixels\"\n        [style.opacity]=\"tableOpacity\"\n      >\n        <div *ngIf=\"height\" class=\"po-table-container\" [style.height.px]=\"heightTableContainer\">\n          <div #poTableTbody class=\"po-table-container-fixed-inner\">\n            <ng-container *ngTemplateOutlet=\"tableVirtualScrollTemplate\"></ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"!height\">\n          <ng-container *ngTemplateOutlet=\"tableTemplate\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-table-footer\" *ngIf=\"hasFooter\">\n    <ng-container *ngFor=\"let column of subtitleColumns; trackBy: trackBy\">\n      <po-table-subtitle-footer [p-literals]=\"literals\" [p-subtitles]=\"column.subtitles\"> </po-table-subtitle-footer>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Show More Button -->\n<div\n  *ngIf=\"!infiniteScroll\"\n  class=\"po-row po-table-footer-show-more\"\n  [class.po-invisible]=\"showMore.observers.length === 0 && !hasService\"\n  #tableFooter\n>\n  <po-button\n    class=\"po-offset-xl-4 po-offset-lg-4 po-offset-md-3 po-lg-4 po-md-6\"\n    [p-disabled]=\"showMoreDisabled\"\n    [p-label]=\"literals.loadMoreData\"\n    [p-loading]=\"loadingShowMore\"\n    (p-click)=\"onShowMore()\"\n  >\n  </po-button>\n</div>\n\n<!-- Table default-->\n<ng-template #tableTemplate>\n  <table\n    class=\"po-table\"\n    [ngClass]=\"{\n      'po-table-interactive': selectable || sort,\n      'po-table-selectable': selectable,\n      'po-table-striped': striped\n    }\"\n    [attr.p-spacing]=\"spacing\"\n  >\n    <thead>\n      <tr\n        [ngClass]=\"{ 'no-hover': hideSelectAll, 'po-table-column-drag': this.isDraggable }\"\n        [class.po-table-header]=\"!height\"\n        cdkDropList\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <th\n          *ngIf=\"hasSelectableColumn\"\n          [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n          class=\"po-table-column-selectable\"\n        >\n          <div [class.po-table-header-fixed-inner]=\"height\">\n            <po-checkbox\n              name=\"selectAll\"\n              *ngIf=\"!hideSelectAll\"\n              (p-change)=\"selectAllRows()\"\n              [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n            ></po-checkbox>\n          </div>\n        </th>\n\n        <th\n          *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n        <th\n          #columnActionLeft\n          *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-master-detail]=\"!isSingleAction\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n        ></th>\n\n        <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n          <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n        </th>\n\n        <ng-container\n          *ngIf=\"this.isDraggable || hasSomeFixed(); then tableDefaultThDragDrop; else tableDefaultThDefault\"\n        >\n        </ng-container>\n        <ng-template #tableDefaultThDragDrop>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n            class=\"po-table-header-ellipsis p-element po-frozen-column\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n            [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n            [ngClass]=\"{\n              'po-table-header-sorted':\n                sort &&\n                JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                (sortedColumn.ascending || !sortedColumn.ascending)\n            }\"\n            [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n            [class.po-table-column-drag-box]=\"this.isDraggable\"\n            (click)=\"sortColumn(column)\"\n            cdkDrag\n            cdkDragLockAxis=\"x\"\n            [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n            [pFrozenColumn]=\"column.fixed\"\n          >\n            <div\n              class=\"po-table-header-flex\"\n              [class.po-table-header-fixed-inner]=\"height\"\n              [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n            >\n              <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                <svg\n                  cdkDragHandle\n                  width=\"24\"\n                  height=\"24\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                </svg>\n              </ng-container>\n              <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n            </div>\n          </th>\n        </ng-template>\n        <ng-template #tableDefaultThDefault>\n          <th\n            *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n            class=\"po-table-header-ellipsis p-element po-frozen-column\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n            [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n            [ngClass]=\"{\n              'po-table-header-sorted':\n                sort &&\n                JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                (sortedColumn.ascending || !sortedColumn.ascending)\n            }\"\n            [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n            (click)=\"sortColumn(column)\"\n            [pFrozenColumn]=\"column.fixed\"\n          >\n            <div\n              class=\"po-table-header-flex\"\n              [class.po-table-header-fixed-inner]=\"height\"\n              [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n            >\n              <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n            </div>\n          </th>\n        </ng-template>\n\n        <th\n          *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager)\"\n          class=\"po-table-header-column po-table-header-master-detail\"\n        ></th>\n\n        <th\n          *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n          [class.po-table-header-single-action]=\"isSingleAction\"\n          [class.po-table-header-actions]=\"!isSingleAction\"\n        ></th>\n      </tr>\n    </thead>\n\n    <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n      <tr class=\"po-table-row po-table-row-no-data\">\n        <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n          <span> {{ literals.noData }} </span>\n        </td>\n      </tr>\n    </tbody>\n\n    <ng-container *ngIf=\"hasMainColumns\">\n      <tbody class=\"po-table-group-row\" *ngFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\">\n        <tr class=\"po-table-row\" [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\">\n          <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n            <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n            </ng-container>\n          </td>\n\n          <!-- Valida se a origem do detail \u00E9 pelo input do po-table -->\n          <td\n            *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n          <ng-template\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n\n          <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n          <td\n            *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <td\n            *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n            [style.width]=\"column.width\"\n            [style.max-width]=\"column.width\"\n            [style.min-width]=\"column.width\"\n            [class.po-table-column]=\"column.type !== 'icon'\"\n            [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n            [class.po-table-column-center]=\"column.type === 'subtitle'\"\n            [class.po-table-column-icons]=\"column.type === 'icon'\"\n            [pFrozenColumn]=\"column.fixed\"\n            class=\"p-element po-frozen-column\"\n            [ngClass]=\"getClassColor(row, column)\"\n            (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n          >\n            <div\n              class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n              [ngSwitch]=\"column.type\"\n              [p-tooltip]=\"tooltipText\"\n              [p-append-in-body]=\"true\"\n              (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n              (mouseleave)=\"tooltipMouseLeave()\"\n            >\n              <span *ngSwitchCase=\"'columnTemplate'\">\n                <ng-container *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'cellTemplate'\">\n                <ng-container *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\">\n                </ng-container>\n              </span>\n\n              <span *ngSwitchCase=\"'boolean'\">\n                {{ getBooleanLabel(getCellData(row, column), column) }}\n              </span>\n\n              <span *ngSwitchCase=\"'currency'\">\n                {{ getCellData(row, column) | currency: column.format:'symbol':'1.2-2' }}\n              </span>\n\n              <span *ngSwitchCase=\"'date'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n              </span>\n\n              <span *ngSwitchCase=\"'time'\">\n                {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n              </span>\n\n              <span *ngSwitchCase=\"'dateTime'\">\n                {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n              </span>\n\n              <span *ngSwitchCase=\"'number'\">\n                {{ formatNumber(getCellData(row, column), column.format) }}\n              </span>\n\n              <po-table-column-link\n                *ngSwitchCase=\"'link'\"\n                [p-action]=\"column.action\"\n                [p-disabled]=\"checkDisabled(row, column)\"\n                [p-link]=\"row[column.link]\"\n                [p-row]=\"row\"\n                [p-value]=\"getCellData(row, column)\"\n                (click)=\"onClickLink($event, row, column)\"\n              >\n              </po-table-column-link>\n\n              <po-table-column-icon\n                *ngSwitchCase=\"'icon'\"\n                [p-column]=\"column\"\n                [p-icons]=\"getColumnIcons(row, column)\"\n                [p-row]=\"row\"\n              >\n              </po-table-column-icon>\n\n              <span *ngSwitchCase=\"'subtitle'\">\n                <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n              </span>\n              <span *ngSwitchCase=\"'label'\">\n                <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n              </span>\n              <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n            </div>\n          </td>\n\n          <td\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-column-detail-toggle\"\n            (click)=\"toggleDetail(row)\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"poTableColumnDetail\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n\n          <!-- Coluna de a\u00E7oes na direita -->\n          <ng-template\n            *ngIf=\"actionRight\"\n            [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n            [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n          >\n          </ng-template>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n          <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n            <ng-template\n              [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </td>\n        </tr>\n\n        <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n          <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n            <po-table-detail\n              [p-selectable]=\"selectable && !detailHideSelect\"\n              [p-detail]=\"columnMasterDetail.detail\"\n              [p-items]=\"row[nameColumnDetail]\"\n              (p-select-row)=\"selectDetailRow($event)\"\n            >\n            </po-table-detail>\n          </td>\n        </tr>\n      </tbody>\n    </ng-container>\n  </table>\n</ng-template>\n\n<!-- Table with virtual scroll -->\n<ng-template #tableVirtualScrollTemplate>\n  <cdk-virtual-scroll-viewport\n    #tableVirtualScroll\n    [itemSize]=\"itemSize\"\n    [style.height.px]=\"heightTableContainer\"\n    [minBufferPx]=\"heightTableContainer < 100 ? 100 : heightTableContainer\"\n    [maxBufferPx]=\"heightTableContainer < 200 ? 200 : heightTableContainer\"\n  >\n    <table\n      class=\"po-table\"\n      [ngClass]=\"{\n        'po-table-interactive': selectable || sort,\n        'po-table-selectable': selectable,\n        'po-table-striped': striped\n      }\"\n      [ngStyle]=\"{ 'table-layout': !hasItems ? 'fixed' : 'auto' }\"\n      [attr.p-spacing]=\"spacing\"\n    >\n      <thead class=\"po-table-header-sticky\" [style.top]=\"inverseOfTranslation\">\n        <tr\n          [class.po-table-header]=\"!height\"\n          cdkDropList\n          cdkDropListOrientation=\"horizontal\"\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          <th\n            *ngIf=\"hasSelectableColumn\"\n            [style.pointer-events]=\"hideSelectAll ? 'none' : 'auto'\"\n            class=\"po-table-column-selectable\"\n          >\n            <div [class.po-table-header-fixed-inner]=\"height\">\n              <po-checkbox\n                name=\"selectAll\"\n                *ngIf=\"!hideSelectAll\"\n                (p-change)=\"selectAllRows()\"\n                [p-checkboxValue]=\"selectAll === null ? 'mixed' : selectAll\"\n              ></po-checkbox>\n            </div>\n          </th>\n\n          <th\n            *ngIf=\"(hasMasterDetailColumn || hasRowTemplate) && !hasRowTemplateWithArrowDirectionRight\"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <!-- Coluna criada para caso as a\u00E7\u00F5es fiquem no lado esquerdo -->\n          <th\n            #columnActionLeft\n            *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-master-detail]=\"!isSingleAction\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n          ></th>\n\n          <th *ngIf=\"!hasMainColumns\" #noColumnsHeader class=\"po-table-header-column po-text-center\">\n            <ng-container *ngIf=\"height; then noColumnsWithHeight; else noColumnsWithoutHeight\"> </ng-container>\n          </th>\n\n          <ng-container\n            *ngIf=\"\n              this.isDraggable || hasSomeFixed();\n              then tableVirtualScrollThDragDrop;\n              else tableVirtualScrollThDefault\n            \"\n          >\n          </ng-container>\n          <ng-template #tableVirtualScrollThDragDrop>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n              class=\"po-table-header-ellipsis p-element po-frozen-column\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{ 'width': !hasItems ? '100%' : 'auto' }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              [class.po-table-column-drag-box]=\"this.isDraggable\"\n              (click)=\"sortColumn(column)\"\n              cdkDrag\n              cdkDragLockAxis=\"x\"\n              [cdkDragDisabled]=\"column.fixed ? 'true' : 'false'\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                <ng-container *ngIf=\"this.isDraggable && !column.fixed\">\n                  <svg\n                    cdkDragHandle\n                    width=\"24\"\n                    height=\"24\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <circle cx=\"9\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"12\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"9\" cy=\"18\" r=\"2\" fill=\"black\" />\n                    <circle cx=\"15\" cy=\"18\" r=\"2\" fill=\"black\" />\n                  </svg>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n          <ng-template #tableVirtualScrollThDefault>\n            <th\n              *ngFor=\"let column of mainColumns; let i = index; trackBy: trackBy\"\n              class=\"po-table-header-ellipsis p-element po-frozen-column example-box\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [attr.data-po-table-column-name]=\"column.label || (column.property | titlecase) | lowercase\"\n              [class.po-clickable]=\"(sort && column.sortable !== false) || hasService\"\n              [ngClass]=\"{\n                'po-table-header-sorted':\n                  sort &&\n                  JSON.stringify(sortedColumn?.property) === JSON.stringify(column) &&\n                  (sortedColumn.ascending || !sortedColumn.ascending)\n              }\"\n              [ngStyle]=\"{ 'width': !hasItems ? '100%' : 'auto' }\"\n              [class.po-table-header-subtitle]=\"column.type === 'subtitle'\"\n              (click)=\"sortColumn(column)\"\n              [pFrozenColumn]=\"column.fixed\"\n            >\n              <div\n                class=\"po-table-header-flex\"\n                [class.po-table-header-fixed-inner]=\"height\"\n                [class.po-table-header-flex-right]=\"column.type === 'currency' || column.type === 'number'\"\n                [class.po-table-header-flex-center]=\"column.type === 'subtitle'\"\n              >\n                <ng-container *ngTemplateOutlet=\"contentHeaderTemplate; context: { $implicit: column }\"> </ng-container>\n              </div>\n            </th>\n          </ng-template>\n\n          <th\n            *ngIf=\"hasRowTemplateWithArrowDirectionRight && (hasVisibleActions || hideColumnsManager)\"\n            class=\"po-table-header-column po-table-header-master-detail\"\n          ></th>\n\n          <th\n            *ngIf=\"hasVisibleActions && actionRight && (visibleActions.length > 1 || isSingleAction)\"\n            [class.po-table-header-single-action]=\"isSingleAction\"\n            [class.po-table-header-actions]=\"!isSingleAction\"\n          ></th>\n        </tr>\n      </thead>\n\n      <tbody class=\"po-table-group-row\" *ngIf=\"!hasItems || !hasMainColumns\">\n        <tr class=\"po-table-row po-table-row-no-data\">\n          <td [colSpan]=\"columnCount\" class=\"po-table-no-data po-text-center\">\n            <span> {{ literals.noData }} </span>\n          </td>\n        </tr>\n      </tbody>\n\n      <ng-container *ngIf=\"hasMainColumns\">\n        <tbody\n          class=\"po-table-group-row\"\n          *cdkVirtualFor=\"let row of filteredItems; let rowIndex = index; trackBy: trackBy\"\n        >\n          <tr\n            class=\"po-table-row\"\n            [class.po-table-row-active]=\"row.$selected || (row.$selected === null && selectable)\"\n          >\n            <td *ngIf=\"selectable\" class=\"po-table-column-selectable\">\n              <ng-container *ngTemplateOutlet=\"singleSelect ? inputRadio : inputCheckbox; context: { $implicit: row }\">\n              </ng-container>\n            </td>\n\n            <!-- Valida se a origem do detail \u00E9 pelo input do po-table -->\n            <td\n              *ngIf=\"columnMasterDetail && !hideDetail && !hasRowTemplate\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna com as a\u00E7\u00F5es na esquerda (padr\u00E3o)-->\n            <ng-template\n              *ngIf=\"!actionRight && (visibleActions.length > 1 || isSingleAction)\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n\n            <!-- Valida se a origem do detail \u00E9 pela diretiva -->\n            <td\n              *ngIf=\"hasRowTemplate && !hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <td\n              *ngFor=\"let column of mainColumns; let columnIndex = index; trackBy: trackBy\"\n              [style.width]=\"column.width\"\n              [style.max-width]=\"column.width\"\n              [style.min-width]=\"column.width\"\n              [class.po-table-column]=\"column.type !== 'icon'\"\n              [class.po-table-column-right]=\"column.type === 'currency' || column.type === 'number'\"\n              [class.po-table-column-center]=\"column.type === 'subtitle'\"\n              [class.po-table-column-icons]=\"column.type === 'icon'\"\n              [ngClass]=\"getClassColor(row, column)\"\n              [pFrozenColumn]=\"column.fixed\"\n              class=\"p-element po-frozen-column\"\n              (click)=\"hasSelectableRow() ? selectRow(row) : 'javascript:;'\"\n            >\n              <div\n                class=\"po-table-column-cell po-table-body-ellipsis notranslate\"\n                [ngSwitch]=\"column.type\"\n                [p-tooltip]=\"tooltipText\"\n                [p-append-in-body]=\"true\"\n                (mouseenter)=\"tooltipMouseEnter($event, column, row)\"\n                (mouseleave)=\"tooltipMouseLeave()\"\n              >\n                <span *ngSwitchCase=\"'columnTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"getTemplate(column); context: { $implicit: getCellData(row, column) }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'cellTemplate'\">\n                  <ng-container\n                    *ngTemplateOutlet=\"tableCellTemplate?.templateRef; context: { row: row, column: column }\"\n                  >\n                  </ng-container>\n                </span>\n\n                <span *ngSwitchCase=\"'boolean'\">\n                  {{ getBooleanLabel(getCellData(row, column), column) }}\n                </span>\n\n                <span *ngSwitchCase=\"'currency'\">\n                  {{ getCellData(row, column) | currency: column.format:'symbol':'1.2-2' }}\n                </span>\n\n                <span *ngSwitchCase=\"'date'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy' }}\n                </span>\n\n                <span *ngSwitchCase=\"'time'\">\n                  {{ getCellData(row, column) | po_time: column.format || 'HH:mm:ss.ffffff' }}\n                </span>\n\n                <span *ngSwitchCase=\"'dateTime'\">\n                  {{ getCellData(row, column) | date: column.format || 'dd/MM/yyyy HH:mm:ss' }}\n                </span>\n\n                <span *ngSwitchCase=\"'number'\">\n                  {{ formatNumber(getCellData(row, column), column.format) }}\n                </span>\n\n                <po-table-column-link\n                  *ngSwitchCase=\"'link'\"\n                  [p-action]=\"column.action\"\n                  [p-disabled]=\"checkDisabled(row, column)\"\n                  [p-link]=\"row[column.link]\"\n                  [p-row]=\"row\"\n                  [p-value]=\"getCellData(row, column)\"\n                  (click)=\"onClickLink($event, row, column)\"\n                >\n                </po-table-column-link>\n\n                <po-table-column-icon\n                  *ngSwitchCase=\"'icon'\"\n                  [p-column]=\"column\"\n                  [p-icons]=\"getColumnIcons(row, column)\"\n                  [p-row]=\"row\"\n                >\n                </po-table-column-icon>\n\n                <span *ngSwitchCase=\"'subtitle'\">\n                  <po-table-subtitle-circle [p-subtitle]=\"getSubtitleColumn(row, column)\"></po-table-subtitle-circle>\n                </span>\n                <span *ngSwitchCase=\"'label'\">\n                  <po-table-column-label [p-value]=\"getColumnLabel(row, column)\"> </po-table-column-label>\n                </span>\n                <span *ngSwitchDefault>{{ getCellData(row, column) }}</span>\n              </div>\n            </td>\n\n            <td\n              *ngIf=\"hasRowTemplateWithArrowDirectionRight\"\n              class=\"po-table-column-detail-toggle\"\n              (click)=\"toggleDetail(row)\"\n            >\n              <ng-template\n                [ngTemplateOutlet]=\"poTableColumnDetail\"\n                [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n\n            <!-- Coluna de a\u00E7oes na direita -->\n            <ng-template\n              *ngIf=\"actionRight\"\n              [ngTemplateOutlet]=\"ActionsColumnTemplate\"\n              [ngTemplateOutletContext]=\"{ row: row, rowIndex: rowIndex }\"\n            >\n            </ng-template>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && hasRowTemplate && row.$showDetail && isShowRowTemplate(row, rowIndex)\">\n            <td class=\"po-table-row-template-container\" [colSpan]=\"columnCountForMasterDetail\">\n              <ng-template\n                [ngTemplateOutlet]=\"tableRowTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: row, rowIndex: rowIndex }\"\n              >\n              </ng-template>\n            </td>\n          </tr>\n\n          <tr *ngIf=\"hasMainColumns && isShowMasterDetail(row)\">\n            <td class=\"po-table-column-detail\" [colSpan]=\"columnCountForMasterDetail\">\n              <po-table-detail\n                [p-selectable]=\"selectable && !detailHideSelect\"\n                [p-detail]=\"columnMasterDetail.detail\"\n                [p-items]=\"row[nameColumnDetail]\"\n                (p-select-row)=\"selectDetailRow($event)\"\n              >\n              </po-table-detail>\n            </td>\n          </tr>\n        </tbody>\n      </ng-container>\n    </table>\n  </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<po-popup #popup [p-actions]=\"actions\" [p-target]=\"popupTarget\"> </po-popup>\n\n<ng-template #poTableColumnDetail let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <span\n    *ngIf=\"(containsMasterDetail(row) && !hasRowTemplate) || (isShowRowTemplate(row, rowIndex) && hasRowTemplate)\"\n    class=\"po-icon po-clickable\"\n    [class.po-icon-arrow-up]=\"row.$showDetail\"\n    [class.po-icon-arrow-down]=\"!row.$showDetail\"\n  >\n  </span>\n</ng-template>\n\n<ng-template #inputRadio let-row>\n  <po-radio [name]=\"idRadio\" [p-checked]=\"row.$selected\" (p-change-selected)=\"selectRow(row)\"></po-radio>\n</ng-template>\n\n<ng-template #inputCheckbox let-row>\n  <po-checkbox\n    name=\"checkbox\"\n    (p-change)=\"selectable ? selectRow(row) : 'javascript:;'\"\n    [p-checkboxValue]=\"row.$selected\"\n  ></po-checkbox>\n</ng-template>\n\n<ng-template #contentHeaderTemplate let-column>\n  <span\n    #columnHeader\n    class=\"po-table-header-ellipsis\"\n    [p-tooltip]=\"tooltipText\"\n    [p-append-in-body]=\"true\"\n    (mouseenter)=\"tooltipMouseEnter($event)\"\n    (mouseleave)=\"tooltipMouseLeave()\"\n  >\n    {{ column.label || (column.property | titlecase) }}\n  </span>\n\n  <span\n    *ngIf=\"sort && column.sortable !== false\"\n    [class.po-table-header-icon-unselected]=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\"\n    [class.po-table-header-icon-descending]=\"\n      JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\n    \"\n    [class.po-table-header-icon-ascending]=\"\n      JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\n    \"\n  >\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) !== JSON.stringify(column)\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M18.2929 15.2929L17 16.5858L17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10L15 16.5858L13.7071 15.2929C13.3166 14.9024 12.6834 14.9024 12.2929 15.2929C11.9024 15.6834 11.9024 16.3166 12.2929 16.7071L15.2929 19.7071C15.6834 20.0976 16.3166 20.0976 16.7071 19.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929ZM5.70716 8.7071L7.00006 7.4142L7.00003 14C7.00002 14.5523 7.44774 15 8.00002 15C8.55231 15 9.00002 14.5523 9.00003 14L9.00006 7.41418L10.2929 8.70707C10.6835 9.09759 11.3166 9.09758 11.7072 8.70706C12.0977 8.31653 12.0977 7.68336 11.7072 7.29284L8.70718 4.29286C8.31665 3.90234 7.68349 3.90235 7.29296 4.29287L4.29295 7.29289C3.90242 7.68342 3.90242 8.31658 4.29294 8.70711C4.68347 9.09763 5.31663 9.09762 5.70716 8.7071Z\"\n          fill=\"#1D1D30\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && sortedColumn.ascending\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M11 9.41421L9.70711 10.7071C9.31658 11.0976 8.68342 11.0976 8.29289 10.7071C7.90237 10.3166 7.90237 9.68342 8.29289 9.29289L11.2929 6.29289C11.6834 5.90237 12.3166 5.90237 12.7071 6.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071C15.3166 11.0976 14.6834 11.0976 14.2929 10.7071L13 9.41421V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V9.41421Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n\n    <ng-container *ngIf=\"JSON.stringify(sortedColumn?.property) === JSON.stringify(column) && !sortedColumn.ascending\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M9.70711 13.2929L11 14.5858V7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7V14.5858L14.2929 13.2929C14.6834 12.9024 15.3166 12.9024 15.7071 13.2929C16.0976 13.6834 16.0976 14.3166 15.7071 14.7071L12.7071 17.7071C12.3166 18.0976 11.6834 18.0976 11.2929 17.7071L8.29289 14.7071C7.90237 14.3166 7.90237 13.6834 8.29289 13.2929C8.68342 12.9024 9.31658 12.9024 9.70711 13.2929Z\"\n          fill=\"black\"\n        />\n      </svg>\n    </ng-container>\n  </span>\n</ng-template>\n\n<ng-template #noColumnsWithHeight>\n  <div class=\"po-table-header-fixed-inner\" [style.width.px]=\"noColumnsHeader?.nativeElement.offsetWidth\">\n    {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n  </div>\n</ng-template>\n\n<ng-template #noColumnsWithoutHeight>\n  {{ hasValidColumns ? literals.noVisibleColumn : literals.noColumns }}\n</ng-template>\n\n<!-- Template de a\u00E7\u00F5es -->\n<ng-template #ActionsColumnTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <td\n    *ngIf=\"isSingleAction\"\n    class=\"po-table-column po-table-column-single-action\"\n    [style.width.px]=\"height && actionRight ? getWidthColumnManager() : ''\"\n    [style.max-width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n    [style.width.px]=\"height && !actionRight ? getColumnWidthActionsLeft() : ''\"\n  >\n    <div\n      *ngIf=\"firstAction.visible !== false\"\n      class=\"po-table-single-action po-clickable\"\n      [class.po-table-action-disabled]=\"firstAction.disabled ? validateTableAction(row, firstAction) : false\"\n      (click)=\"executeTableAction(row, firstAction)\"\n    >\n      <po-icon *ngIf=\"firstAction.icon\" class=\"po-table-single-action-content\" [p-icon]=\"firstAction.icon\"></po-icon>\n      {{ firstAction.label }}\n    </div>\n  </td>\n\n  <td *ngIf=\"visibleActions.length > 1\" class=\"po-table-column-actions\">\n    <span #popupTarget class=\"po-icon po-icon-more po-clickable\" (click)=\"togglePopup(row, popupTarget)\"></span>\n  </td>\n</ng-template>\n\n<po-table-column-manager\n  *ngIf=\"!hideColumnsManager\"\n  [p-columns]=\"columns\"\n  [p-max-columns]=\"maxColumns\"\n  [p-target]=\"columnManagerTarget\"\n  [p-last-visible-columns-selected]=\"lastVisibleColumnsSelected\"\n  [p-hide-action-fixed-columns]=\"hideActionFixedColumns\"\n  (p-visible-columns-change)=\"onVisibleColumnsChange($event)\"\n  (p-change-visible-columns)=\"onChangeVisibleColumns($event)\"\n  [p-columns-default]=\"initialColumns\"\n  (p-initial-columns)=\"onColumnRestoreManager($event)\"\n>\n</po-table-column-manager>\n\n<po-modal\n  #modalDelete\n  [p-title]=\"literals.delete\"\n  [p-primary-action]=\"confirm\"\n  [p-secondary-action]=\"close\"\n  [p-click-out]=\"true\"\n>\n  <p class=\"po-font-text-large\">{{ literals.bodyDelete }}</p>\n</po-modal>\n" }]
     }], function () { return [{ type: PoDateService }, { type: i0.IterableDiffers }, { type: i0.Renderer2 }, { type: PoLanguageService }, { type: i0.ChangeDetectorRef }, { type: i1.DecimalPipe }, { type: i2.Router }, { type: PoTableService }]; }, { tableRowTemplate: [{
             type: ContentChild,
             args: [PoTableRowTemplateDirective, { static: true }]
@@ -23278,7 +23280,7 @@ class PoTableDetailComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableDetailComponent, [{
         type: Component,
-        args: [{ selector: 'po-table-detail', template: "<table class=\"po-table-master-detail\">\r\n  <thead *ngIf=\"typeHeaderTop\">\r\n    <tr>\r\n      <th class=\"po-table-header po-table-column-selectable\" *ngIf=\"isSelectable\"></th>\r\n      <th class=\"po-table-header po-table-header-column po-table-header-master-detail\"></th>\r\n      <th class=\"po-table-header po-table-header-ellipsis\" *ngFor=\"let detail of detail.columns\">\r\n        <div\r\n          class=\"po-table-header-flex\"\r\n          [class.po-table-header-flex-right]=\"detail.type === 'currency' || detail.type === 'number'\"\r\n        >\r\n          {{ getColumnTitleLabel(detail) }}\r\n        </div>\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr\r\n      class=\"po-table-detail-row\"\r\n      [class.po-table-row-active]=\"item.$selected && isSelectable\"\r\n      *ngFor=\"let item of items\"\r\n    >\r\n      <ng-container *ngIf=\"isSelectable; else masterDetailSpace\">\r\n        <td class=\"po-table-column-master-detail-space-checkbox\"></td>\r\n        <td class=\"po-table-column po-table-column-selectable\">\r\n          <po-checkbox\r\n            name=\"checkbox\"\r\n            (click)=\"onSelectRow(item)\"\r\n            (p-change)=\"onSelectRow(item)\"\r\n            [(ngModel)]=\"item.$selected\"\r\n          ></po-checkbox>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-template #masterDetailSpace>\r\n        <td class=\"po-table-column-master-detail-space\"></td>\r\n      </ng-template>\r\n\r\n      <td\r\n        class=\"po-table-column-master-detail po-table-master-detail-label\"\r\n        (click)=\"isSelectable ? onSelectRow(item) : 'javascript:;'\"\r\n        *ngFor=\"let detail of detailColumns\"\r\n        [class.po-table-column-right]=\"typeHeaderTop && (detail.type === 'currency' || detail.type === 'number')\"\r\n      >\r\n        <strong *ngIf=\"typeHeaderInline\"> {{ getColumnTitleLabel(detail) }}: </strong>\r\n\r\n        <ng-container [ngSwitch]=\"detail.type\">\r\n          <span *ngSwitchCase=\"'currency'\">{{\r\n            getDetailData(item, detail) | currency: detail.format:'symbol':'1.2-2'\r\n          }}</span>\r\n          <span *ngSwitchCase=\"'date'\">{{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy' }}</span>\r\n          <span *ngSwitchCase=\"'time'\">{{\r\n            getDetailData(item, detail) | po_time: detail.format || 'HH:mm:ss.ffffff'\r\n          }}</span>\r\n          <span *ngSwitchCase=\"'dateTime'\">\r\n            {{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy HH:mm:ss' }}\r\n          </span>\r\n          <span *ngSwitchCase=\"'number'\">{{ formatNumberDetail(getDetailData(item, detail), detail.format) }}</span>\r\n          <span *ngSwitchDefault>{{ getDetailData(item, detail) }}</span>\r\n        </ng-container>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n" }]
+        args: [{ selector: 'po-table-detail', template: "<table class=\"po-table-master-detail\">\n  <thead *ngIf=\"typeHeaderTop\">\n    <tr>\n      <th class=\"po-table-header po-table-column-selectable\" *ngIf=\"isSelectable\"></th>\n      <th class=\"po-table-header po-table-header-column po-table-header-master-detail\"></th>\n      <th class=\"po-table-header po-table-header-ellipsis\" *ngFor=\"let detail of detail.columns\">\n        <div\n          class=\"po-table-header-flex\"\n          [class.po-table-header-flex-right]=\"detail.type === 'currency' || detail.type === 'number'\"\n        >\n          {{ getColumnTitleLabel(detail) }}\n        </div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr\n      class=\"po-table-detail-row\"\n      [class.po-table-row-active]=\"item.$selected && isSelectable\"\n      *ngFor=\"let item of items\"\n    >\n      <ng-container *ngIf=\"isSelectable; else masterDetailSpace\">\n        <td class=\"po-table-column-master-detail-space-checkbox\"></td>\n        <td class=\"po-table-column po-table-column-selectable\">\n          <po-checkbox\n            name=\"checkbox\"\n            (click)=\"onSelectRow(item)\"\n            (p-change)=\"onSelectRow(item)\"\n            [(ngModel)]=\"item.$selected\"\n          ></po-checkbox>\n        </td>\n      </ng-container>\n\n      <ng-template #masterDetailSpace>\n        <td class=\"po-table-column-master-detail-space\"></td>\n      </ng-template>\n\n      <td\n        class=\"po-table-column-master-detail po-table-master-detail-label\"\n        (click)=\"isSelectable ? onSelectRow(item) : 'javascript:;'\"\n        *ngFor=\"let detail of detailColumns\"\n        [class.po-table-column-right]=\"typeHeaderTop && (detail.type === 'currency' || detail.type === 'number')\"\n      >\n        <strong *ngIf=\"typeHeaderInline\"> {{ getColumnTitleLabel(detail) }}: </strong>\n\n        <ng-container [ngSwitch]=\"detail.type\">\n          <span *ngSwitchCase=\"'currency'\">{{\n            getDetailData(item, detail) | currency: detail.format:'symbol':'1.2-2'\n          }}</span>\n          <span *ngSwitchCase=\"'date'\">{{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy' }}</span>\n          <span *ngSwitchCase=\"'time'\">{{\n            getDetailData(item, detail) | po_time: detail.format || 'HH:mm:ss.ffffff'\n          }}</span>\n          <span *ngSwitchCase=\"'dateTime'\">\n            {{ getDetailData(item, detail) | date: detail.format || 'dd/MM/yyyy HH:mm:ss' }}\n          </span>\n          <span *ngSwitchCase=\"'number'\">{{ formatNumberDetail(getDetailData(item, detail), detail.format) }}</span>\n          <span *ngSwitchDefault>{{ getDetailData(item, detail) }}</span>\n        </ng-container>\n      </td>\n    </tr>\n  </tbody>\n</table>\n" }]
     }], function () { return [{ type: i1.DecimalPipe }]; }, { items: [{
             type: Input,
             args: ['p-items']
@@ -23332,7 +23334,7 @@ class PoTableSubtitleCircleComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableSubtitleCircleComponent, [{
         type: Component,
-        args: [{ selector: 'po-table-subtitle-circle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [title]=\"hideTitle ? '' : subtitle?.label\" class=\"po-table-subtitle-circle po-{{ subtitle?.color }}\">\r\n  {{ subtitle?.content }}\r\n</span>\r\n" }]
+        args: [{ selector: 'po-table-subtitle-circle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [title]=\"hideTitle ? '' : subtitle?.label\" class=\"po-table-subtitle-circle po-{{ subtitle?.color }}\">\n  {{ subtitle?.content }}\n</span>\n" }]
     }], function () { return [{ type: PoColorPaletteService }]; }, { hideTitle: [{
             type: Input,
             args: ['p-hide-title']
@@ -23388,7 +23390,7 @@ class PoTableShowSubtitleComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableShowSubtitleComponent, [{
         type: Component,
-        args: [{ selector: 'po-table-show-subtitle', template: "<div class=\"po-table-footer-show-subtitle\" (click)=\"modal.open()\">\r\n  <div class=\"po-table-footer-show-subtitle-container\">\r\n    <span class=\"po-table-show-subtitle\">{{ literals.seeCompleteSubtitle }}</span>\r\n  </div>\r\n</div>\r\n\r\n<po-modal #modal p-size=\"sm\" [p-title]=\"literals.completeSubtitle\">\r\n  <div *ngFor=\"let subtitle of subtitles\" class=\"po-table-subtitle-footer-modal po-row\">\r\n    <po-table-subtitle-circle p-hide-title=\"true\" [p-subtitle]=\"subtitle\"> </po-table-subtitle-circle>\r\n    <span class=\"po-table-subtitle-text\">{{ subtitle.label }}</span>\r\n  </div>\r\n</po-modal>\r\n" }]
+        args: [{ selector: 'po-table-show-subtitle', template: "<div class=\"po-table-footer-show-subtitle\" (click)=\"modal.open()\">\n  <div class=\"po-table-footer-show-subtitle-container\">\n    <span class=\"po-table-show-subtitle\">{{ literals.seeCompleteSubtitle }}</span>\n  </div>\n</div>\n\n<po-modal #modal p-size=\"sm\" [p-title]=\"literals.completeSubtitle\">\n  <div *ngFor=\"let subtitle of subtitles\" class=\"po-table-subtitle-footer-modal po-row\">\n    <po-table-subtitle-circle p-hide-title=\"true\" [p-subtitle]=\"subtitle\"> </po-table-subtitle-circle>\n    <span class=\"po-table-subtitle-text\">{{ subtitle.label }}</span>\n  </div>\n</po-modal>\n" }]
     }], null, { subtitles: [{
             type: Input,
             args: ['p-subtitles']
@@ -23494,7 +23496,7 @@ class PoTableSubtitleFooterComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableSubtitleFooterComponent, [{
         type: Component,
-        args: [{ selector: 'po-table-subtitle-footer', template: "<div class=\"po-table-subtitle-footer-container\">\r\n  <div *ngFor=\"let subtitle of subtitles\" class=\"po-table-subtitle-footer\">\r\n    <po-table-subtitle-circle p-hide-title=\"true\" [p-subtitle]=\"subtitle\"> </po-table-subtitle-circle>\r\n    <span class=\"po-table-subtitle-text\">{{ subtitle.label }}</span>\r\n  </div>\r\n  <po-table-show-subtitle *ngIf=\"showSubtitle\" [p-literals]=\"literals\" [p-subtitles]=\"subtitles\">\r\n  </po-table-show-subtitle>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-table-subtitle-footer', template: "<div class=\"po-table-subtitle-footer-container\">\n  <div *ngFor=\"let subtitle of subtitles\" class=\"po-table-subtitle-footer\">\n    <po-table-subtitle-circle p-hide-title=\"true\" [p-subtitle]=\"subtitle\"> </po-table-subtitle-circle>\n    <span class=\"po-table-subtitle-text\">{{ subtitle.label }}</span>\n  </div>\n  <po-table-show-subtitle *ngIf=\"showSubtitle\" [p-literals]=\"literals\" [p-subtitles]=\"subtitles\">\n  </po-table-show-subtitle>\n</div>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, { literals: [{
             type: Input,
             args: ['p-literals']
@@ -24828,7 +24830,7 @@ class PoComboFilterService {
         return { label, value };
     }
     addMessage(item, property) {
-        this.messages.push(`Cannot read property "${property}" of ${JSON.stringify(item)},
+        this.messages.push(`Cannot read property "${property}" of ${JSON.stringify(item)},
       see [p-field-value] property at https://po-ui.io/documentation/po-combo`);
     }
     displayMessages() {
@@ -24849,24 +24851,35 @@ const _c1$l = ["contentElement"];
 const _c2$8 = ["iconArrow"];
 const _c3$4 = ["inp"];
 const _c4$2 = ["poListbox"];
-function PoComboComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵelement(1, "po-icon", 15);
+function PoComboComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵelement(1, "po-icon", 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵclassProp("po-field-icon-disabled", ctx_r0.disabled);
-    i0.ɵɵproperty("p-icon", ctx_r0.icon);
+    i0.ɵɵclassProp("po-field-icon-disabled", ctx_r1.disabled);
+    i0.ɵɵproperty("p-icon", ctx_r1.icon);
 } }
-function PoComboComponent_po_clean_6_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-clean", 16);
-    i0.ɵɵlistener("p-change-event", function PoComboComponent_po_clean_6_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.clear($event)); });
+function PoComboComponent_po_clean_7_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "po-clean", 14);
+    i0.ɵɵlistener("p-change-event", function PoComboComponent_po_clean_7_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.clear($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("p-element-ref", ctx_r2.inputEl);
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("p-element-ref", ctx_r3.inputEl);
+} }
+function PoComboComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15, 16)(2, "po-listbox", 17, 18);
+    i0.ɵɵlistener("p-selectcombo-item", function PoComboComponent_ng_template_10_Template_po_listbox_p_selectcombo_item_2_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.onOptionClick($event, $event.event)); })("p-update-infinite-scroll", function PoComboComponent_ng_template_10_Template_po_listbox_p_update_infinite_scroll_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.showMoreInfiniteScroll()); })("p-close", function PoComboComponent_ng_template_10_Template_po_listbox_p_close_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.onCloseCombo()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r5 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("hidden", !ctx_r5.comboOpen && !ctx_r5.isServerSearching);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("p-items", ctx_r5.visibleOptions)("p-field-value", ctx_r5.dynamicValue)("p-field-label", ctx_r5.dynamicLabel)("p-template", ctx_r5.comboOptionTemplate)("p-search-value", ctx_r5.getInputValue())("p-infinite-loading", ctx_r5.infiniteLoading)("p-infinite-scroll", ctx_r5.infiniteScroll)("p-filtering", ctx_r5.isFiltering)("p-cache", ctx_r5.cache)("p-filter-mode", ctx_r5.filterMode)("p-visible", ctx_r5.comboOpen)("p-is-searching", ctx_r5.isServerSearching)("p-should-mark-letter", ctx_r5.shouldMarkLetters)("p-compare-cache", ctx_r5.compareObjects(ctx_r5.cacheOptions, ctx_r5.visibleOptions))("p-combo-service", ctx_r5.service)("p-infinite-scroll-distance", ctx_r5.infiniteScrollDistance);
 } }
 const poComboContainerOffset = 8;
 const poComboContainerPositionDefault = 'bottom';
@@ -25359,30 +25372,29 @@ class PoComboComponent extends PoComboBaseComponent {
                     useExisting: forwardRef(() => PoComboComponent),
                     multi: true
                 }
-            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 15, vars: 42, consts: [[3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-input", "po-combo-input", 3, "ngClass", "disabled", "id", "placeholder", "required", "click", "keyup", "blur", "keyup.enter", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "click"], ["iconArrow", ""], [1, "po-combo-container", 3, "hidden"], ["containerElement", ""], ["p-type", "option", 3, "p-items", "p-field-value", "p-field-label", "p-template", "p-search-value", "p-infinite-loading", "p-infinite-scroll", "p-filtering", "p-cache", "p-filter-mode", "p-visible", "p-is-searching", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-infinite-scroll-distance", "p-selectcombo-item", "p-update-infinite-scroll", "p-close"], ["poListbox", "", "contentElement", ""], [3, "p-help", "p-disabled"], [1, "po-field-icon-container-left"], [1, "po-field-icon", "po-icon-input", 3, "p-icon"], [1, "po-icon-input", 3, "p-element-ref", "p-change-event"]], template: function PoComboComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1);
-            i0.ɵɵtemplate(2, PoComboComponent_div_2_Template, 2, 3, "div", 2);
-            i0.ɵɵelementStart(3, "input", 3, 4);
-            i0.ɵɵlistener("click", function PoComboComponent_Template_input_click_3_listener() { return ctx.toggleComboVisibility(); })("keyup", function PoComboComponent_Template_input_keyup_3_listener($event) { return ctx.onKeyUp($event); })("blur", function PoComboComponent_Template_input_blur_3_listener() { return ctx.onBlur(); })("keyup.enter", function PoComboComponent_Template_input_keyup_enter_3_listener($event) { return ctx.searchOnEnter($event.target.value); })("keydown", function PoComboComponent_Template_input_keydown_3_listener($event) { return ctx.onKeyDown($event); });
+            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 12, vars: 27, consts: [[3, "p-disabled", "p-id", "p-label", "p-optional", "p-required", "p-show-required"], ["cdkOverlayOrigin", "", 1, "po-field-container-content"], ["trigger", "cdkOverlayOrigin"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["autocomplete", "off", "type", "text", 1, "po-input", "po-combo-input", 3, "ngClass", "disabled", "id", "placeholder", "required", "click", "keyup", "blur", "keyup.enter", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "click"], ["iconArrow", ""], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [3, "p-help", "p-disabled"], [1, "po-field-icon-container-left"], [1, "po-field-icon", "po-icon-input", 3, "p-icon"], [1, "po-icon-input", 3, "p-element-ref", "p-change-event"], [1, "po-combo-container", 3, "hidden"], ["containerElement", ""], ["p-type", "option", 3, "p-items", "p-field-value", "p-field-label", "p-template", "p-search-value", "p-infinite-loading", "p-infinite-scroll", "p-filtering", "p-cache", "p-filter-mode", "p-visible", "p-is-searching", "p-should-mark-letter", "p-compare-cache", "p-combo-service", "p-infinite-scroll-distance", "p-selectcombo-item", "p-update-infinite-scroll", "p-close"], ["poListbox", "", "contentElement", ""]], template: function PoComboComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1, 2);
+            i0.ɵɵtemplate(3, PoComboComponent_div_3_Template, 2, 3, "div", 3);
+            i0.ɵɵelementStart(4, "input", 4, 5);
+            i0.ɵɵlistener("click", function PoComboComponent_Template_input_click_4_listener() { return ctx.toggleComboVisibility(); })("keyup", function PoComboComponent_Template_input_keyup_4_listener($event) { return ctx.onKeyUp($event); })("blur", function PoComboComponent_Template_input_blur_4_listener() { return ctx.onBlur(); })("keyup.enter", function PoComboComponent_Template_input_keyup_enter_4_listener($event) { return ctx.searchOnEnter($event.target.value); })("keydown", function PoComboComponent_Template_input_keydown_4_listener($event) { return ctx.onKeyDown($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "div", 5);
-            i0.ɵɵtemplate(6, PoComboComponent_po_clean_6_Template, 1, 1, "po-clean", 6);
-            i0.ɵɵelementStart(7, "span", 7, 8);
-            i0.ɵɵlistener("click", function PoComboComponent_Template_span_click_7_listener() { return ctx.toggleComboVisibility(); });
+            i0.ɵɵelementStart(6, "div", 6);
+            i0.ɵɵtemplate(7, PoComboComponent_po_clean_7_Template, 1, 1, "po-clean", 7);
+            i0.ɵɵelementStart(8, "span", 8, 9);
+            i0.ɵɵlistener("click", function PoComboComponent_Template_span_click_8_listener() { return ctx.toggleComboVisibility(); });
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(9, "div", 9, 10)(11, "po-listbox", 11, 12);
-            i0.ɵɵlistener("p-selectcombo-item", function PoComboComponent_Template_po_listbox_p_selectcombo_item_11_listener($event) { return ctx.onOptionClick($event, $event.event); })("p-update-infinite-scroll", function PoComboComponent_Template_po_listbox_p_update_infinite_scroll_11_listener() { return ctx.showMoreInfiniteScroll(); })("p-close", function PoComboComponent_Template_po_listbox_p_close_11_listener() { return ctx.onCloseCombo(); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelement(14, "po-field-container-bottom", 13);
+            i0.ɵɵtemplate(10, PoComboComponent_ng_template_10_Template, 5, 17, "ng-template", 10);
+            i0.ɵɵelement(11, "po-field-container-bottom", 11);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            const _r1 = i0.ɵɵreference(4);
+            const _r0 = i0.ɵɵreference(2);
+            const _r2 = i0.ɵɵreference(5);
             i0.ɵɵproperty("p-disabled", ctx.disabled)("p-id", ctx.id)("p-label", ctx.label)("p-optional", ctx.optional)("p-required", ctx.required)("p-show-required", ctx.showRequired);
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.icon);
             i0.ɵɵadvance(1);
             i0.ɵɵclassProp("po-input-icon-left", ctx.icon);
-            i0.ɵɵproperty("ngClass", ctx.clean && _r1.value ? "po-input-double-icon-right" : "po-input-icon-right")("disabled", ctx.disabled)("id", ctx.id)("placeholder", ctx.disabled ? "" : ctx.placeholder)("required", ctx.required);
+            i0.ɵɵproperty("ngClass", ctx.clean && _r2.value ? "po-input-double-icon-right" : "po-input-icon-right")("disabled", ctx.disabled)("id", ctx.id)("placeholder", ctx.disabled ? "" : ctx.placeholder)("required", ctx.required);
             i0.ɵɵattribute("name", ctx.name);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled);
@@ -25390,12 +25402,10 @@ class PoComboComponent extends PoComboBaseComponent {
             i0.ɵɵclassMapInterpolate1("po-icon po-field-icon ", ctx.comboIcon, " po-icon-input");
             i0.ɵɵclassProp("po-field-icon-disabled", ctx.disabled)("po-field-icon", !ctx.disabled);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("hidden", !ctx.comboOpen && !ctx.isServerSearching);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("p-items", ctx.visibleOptions)("p-field-value", ctx.dynamicValue)("p-field-label", ctx.dynamicLabel)("p-template", ctx.comboOptionTemplate)("p-search-value", ctx.getInputValue())("p-infinite-loading", ctx.infiniteLoading)("p-infinite-scroll", ctx.infiniteScroll)("p-filtering", ctx.isFiltering)("p-cache", ctx.cache)("p-filter-mode", ctx.filterMode)("p-visible", ctx.comboOpen)("p-is-searching", ctx.isServerSearching)("p-should-mark-letter", ctx.shouldMarkLetters)("p-compare-cache", ctx.compareObjects(ctx.cacheOptions, ctx.visibleOptions))("p-combo-service", ctx.service)("p-infinite-scroll-distance", ctx.infiniteScrollDistance);
-            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("cdkConnectedOverlayOrigin", _r0)("cdkConnectedOverlayOpen", true);
+            i0.ɵɵadvance(1);
             i0.ɵɵproperty("p-help", ctx.help)("p-disabled", ctx.disabled);
-        } }, dependencies: [i1.NgClass, i1.NgIf, PoCleanComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent, PoListBoxComponent], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [i1.NgClass, i1.NgIf, i5.CdkConnectedOverlay, i5.CdkOverlayOrigin, PoCleanComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent, PoListBoxComponent], encapsulation: 2, changeDetection: 0 });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoComboComponent, [{
         type: Component,
@@ -25412,7 +25422,7 @@ class PoComboComponent extends PoComboBaseComponent {
                         useExisting: forwardRef(() => PoComboComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-id]=\"id\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\">\r\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\r\n      <po-icon class=\"po-field-icon po-icon-input\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\r\n    </div>\r\n\r\n    <input\r\n      #inp\r\n      class=\"po-input po-combo-input\"\r\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\r\n      [class.po-input-icon-left]=\"icon\"\r\n      autocomplete=\"off\"\r\n      type=\"text\"\r\n      [attr.name]=\"name\"\r\n      [disabled]=\"disabled\"\r\n      [id]=\"id\"\r\n      [placeholder]=\"disabled ? '' : placeholder\"\r\n      [required]=\"required\"\r\n      (click)=\"toggleComboVisibility()\"\r\n      (keyup)=\"onKeyUp($event)\"\r\n      (blur)=\"onBlur()\"\r\n      (keyup.enter)=\"searchOnEnter($event.target.value)\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n    />\r\n\r\n    <div class=\"po-field-icon-container-right\">\r\n      <po-clean\r\n        class=\"po-icon-input\"\r\n        *ngIf=\"clean && !disabled\"\r\n        (p-change-event)=\"clear($event)\"\r\n        [p-element-ref]=\"inputEl\"\r\n      >\r\n      </po-clean>\r\n      <span\r\n        #iconArrow\r\n        class=\"po-icon po-field-icon {{ comboIcon }} po-icon-input\"\r\n        [class.po-field-icon-disabled]=\"disabled\"\r\n        [class.po-field-icon]=\"!disabled\"\r\n        (click)=\"toggleComboVisibility()\"\r\n      >\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\r\n    <po-listbox\r\n      #poListbox\r\n      #contentElement\r\n      p-type=\"option\"\r\n      [p-items]=\"visibleOptions\"\r\n      [p-field-value]=\"dynamicValue\"\r\n      [p-field-label]=\"dynamicLabel\"\r\n      [p-template]=\"comboOptionTemplate\"\r\n      [p-search-value]=\"getInputValue()\"\r\n      [p-infinite-loading]=\"infiniteLoading\"\r\n      [p-infinite-scroll]=\"infiniteScroll\"\r\n      [p-filtering]=\"isFiltering\"\r\n      [p-cache]=\"cache\"\r\n      (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\r\n      [p-filter-mode]=\"filterMode\"\r\n      [p-visible]=\"comboOpen\"\r\n      [p-is-searching]=\"isServerSearching\"\r\n      [p-should-mark-letter]=\"shouldMarkLetters\"\r\n      [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\r\n      [p-combo-service]=\"service\"\r\n      [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\r\n      (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\r\n      (p-close)=\"onCloseCombo()\"\r\n    ></po-listbox>\r\n  </div>\r\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon po-icon-input\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-combo-input\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [class.po-input-icon-left]=\"icon\"\n      autocomplete=\"off\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [required]=\"required\"\n      (click)=\"toggleComboVisibility()\"\n      (keyup)=\"onKeyUp($event)\"\n      (blur)=\"onBlur()\"\n      (keyup.enter)=\"searchOnEnter($event.target.value)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"po-icon-input\"\n        *ngIf=\"clean && !disabled\"\n        (p-change-event)=\"clear($event)\"\n        [p-element-ref]=\"inputEl\"\n      >\n      </po-clean>\n      <span\n        #iconArrow\n        class=\"po-icon po-field-icon {{ comboIcon }} po-icon-input\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [class.po-field-icon]=\"!disabled\"\n        (click)=\"toggleComboVisibility()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"true\">\n    <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n      <po-listbox\n        #poListbox\n        #contentElement\n        p-type=\"option\"\n        [p-items]=\"visibleOptions\"\n        [p-field-value]=\"dynamicValue\"\n        [p-field-label]=\"dynamicLabel\"\n        [p-template]=\"comboOptionTemplate\"\n        [p-search-value]=\"getInputValue()\"\n        [p-infinite-loading]=\"infiniteLoading\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        [p-filtering]=\"isFiltering\"\n        [p-cache]=\"cache\"\n        (p-selectcombo-item)=\"onOptionClick($event, $event.event)\"\n        [p-filter-mode]=\"filterMode\"\n        [p-visible]=\"comboOpen\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-should-mark-letter]=\"shouldMarkLetters\"\n        [p-compare-cache]=\"compareObjects(cacheOptions, visibleOptions)\"\n        [p-combo-service]=\"service\"\n        [p-infinite-scroll-distance]=\"infiniteScrollDistance\"\n        (p-update-infinite-scroll)=\"showMoreInfiniteScroll()\"\n        (p-close)=\"onCloseCombo()\"\n      ></po-listbox>\n    </div>\n  </ng-template>\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: PoComboFilterService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: PoControlPositionService }, { type: PoLanguageService }]; }, { comboOptionTemplate: [{
             type: ContentChild,
             args: [PoComboOptionTemplateDirective, { static: true }]
@@ -26541,7 +26551,7 @@ class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDatepickerRangeComponent, [{
         type: Component,
-        args: [{ selector: 'po-datepicker-range', providers: providers$5, changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container\r\n  [class.po-date-picker-container-disabled]=\"disabled\"\r\n  [p-disabled]=\"disabled\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div\r\n    #dateRangeField\r\n    class=\"po-datepicker-range-field po-input\"\r\n    [class.po-datepicker-range-field-disabled]=\"disabled\"\r\n    [attr.disabled]=\"disabled\"\r\n  >\r\n    <div class=\"po-datepicker-range-start-date\">\r\n      <input\r\n        #startDateInput\r\n        class=\"po-datepicker-range-input\"\r\n        maxlength=\"10\"\r\n        type=\"text\"\r\n        [attr.aria-label]=\"label\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [disabled]=\"disabled\"\r\n        [name]=\"startDateInputName\"\r\n        [readonly]=\"readonly\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (keydown)=\"onKeydown($event)\"\r\n        (keyup)=\"onKeyup($event)\"\r\n        (click)=\"eventOnClick($event)\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"po-datepicker-range-separator\">-</div>\r\n\r\n    <div class=\"po-datepicker-range-end-date\">\r\n      <input\r\n        #endDateInput\r\n        class=\"po-datepicker-range-input\"\r\n        maxlength=\"10\"\r\n        type=\"text\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [disabled]=\"disabled\"\r\n        [name]=\"endDateInputName\"\r\n        [readonly]=\"readonly\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"onFocus($event)\"\r\n        (keydown)=\"onKeydown($event)\"\r\n        (keyup)=\"onKeyup($event)\"\r\n        (click)=\"eventOnClick($event)\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"po-datepicker-range-icon\">\r\n      <po-clean class=\"po-icon-input\" *ngIf=\"enableCleaner\" (p-change-event)=\"clear()\"></po-clean>\r\n    </div>\r\n\r\n    <div class=\"po-datepicker-range-icon\">\r\n      <span\r\n        #iconCalendar\r\n        class=\"po-icon po-field-icon po-icon-calendar {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\r\n        [class.po-clickable]=\"!disabled && !readonly\"\r\n        [class.po-field-icon-disabled]=\"disabled || readonly\"\r\n        (click)=\"toggleCalendar()\"\r\n      >\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <po-field-container-bottom\r\n    [p-help]=\"help\"\r\n    [p-disabled]=\"disabled\"\r\n    [p-error-pattern]=\"getErrorMessage\"\r\n  ></po-field-container-bottom>\r\n</po-field-container>\r\n\r\n<ng-container *ngIf=\"isCalendarVisible\">\r\n  <div #calendarPicker class=\"po-calendar-range-picker\">\r\n    <po-calendar\r\n      p-mode=\"range\"\r\n      [ngModel]=\"dateRange\"\r\n      [p-max-date]=\"maxDate\"\r\n      [p-min-date]=\"minDate\"\r\n      [p-locale]=\"locale\"\r\n      (ngModelChange)=\"onCalendarChange($event)\"\r\n    ></po-calendar>\r\n  </div>\r\n</ng-container>\r\n" }]
+        args: [{ selector: 'po-datepicker-range', providers: providers$5, changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container\n  [class.po-date-picker-container-disabled]=\"disabled\"\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div\n    #dateRangeField\n    class=\"po-datepicker-range-field po-input\"\n    [class.po-datepicker-range-field-disabled]=\"disabled\"\n    [attr.disabled]=\"disabled\"\n  >\n    <div class=\"po-datepicker-range-start-date\">\n      <input\n        #startDateInput\n        class=\"po-datepicker-range-input\"\n        maxlength=\"10\"\n        type=\"text\"\n        [attr.aria-label]=\"label\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [name]=\"startDateInputName\"\n        [readonly]=\"readonly\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (click)=\"eventOnClick($event)\"\n      />\n    </div>\n\n    <div class=\"po-datepicker-range-separator\">-</div>\n\n    <div class=\"po-datepicker-range-end-date\">\n      <input\n        #endDateInput\n        class=\"po-datepicker-range-input\"\n        maxlength=\"10\"\n        type=\"text\"\n        [autocomplete]=\"autocomplete\"\n        [disabled]=\"disabled\"\n        [name]=\"endDateInputName\"\n        [readonly]=\"readonly\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (click)=\"eventOnClick($event)\"\n      />\n    </div>\n\n    <div class=\"po-datepicker-range-icon\">\n      <po-clean class=\"po-icon-input\" *ngIf=\"enableCleaner\" (p-change-event)=\"clear()\"></po-clean>\n    </div>\n\n    <div class=\"po-datepicker-range-icon\">\n      <span\n        #iconCalendar\n        class=\"po-icon po-field-icon po-icon-calendar {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-clickable]=\"!disabled && !readonly\"\n        [class.po-field-icon-disabled]=\"disabled || readonly\"\n        (click)=\"toggleCalendar()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <po-field-container-bottom\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorMessage\"\n  ></po-field-container-bottom>\n</po-field-container>\n\n<ng-container *ngIf=\"isCalendarVisible\">\n  <div #calendarPicker class=\"po-calendar-range-picker\">\n    <po-calendar\n      p-mode=\"range\"\n      [ngModel]=\"dateRange\"\n      [p-max-date]=\"maxDate\"\n      [p-min-date]=\"minDate\"\n      [p-locale]=\"locale\"\n      (ngModelChange)=\"onCalendarChange($event)\"\n    ></po-calendar>\n  </div>\n</ng-container>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: PoControlPositionService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: PoLanguageService }, { type: PoDateService }, { type: i0.ElementRef }]; }, { dateRangeField: [{
             type: ViewChild,
             args: ['dateRangeField', { read: ElementRef, static: true }]
@@ -27694,7 +27704,7 @@ class PoDecimalComponent extends PoInputBaseComponent {
                         useExisting: forwardRef(() => PoDecimalComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-id]=\"id\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\">\r\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\r\n      <po-icon class=\"po-field-icon po-icon-input\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\r\n    </div>\r\n\r\n    <input\r\n      #inp\r\n      class=\"po-input\"\r\n      [attr.max]=\"max\"\r\n      [attr.min]=\"min\"\r\n      [attr.name]=\"name\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [class.po-input-icon-left]=\"icon\"\r\n      [class.po-input-icon-right]=\"clean\"\r\n      [disabled]=\"disabled\"\r\n      [id]=\"id\"\r\n      [placeholder]=\"disabled ? '' : placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [required]=\"required\"\r\n      inputmode=\"decimal\"\r\n      type=\"text\"\r\n      (blur)=\"onBlur($event)\"\r\n      (focus)=\"onFocus($event)\"\r\n      (input)=\"onInput($event)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n    />\r\n\r\n    <div class=\"po-field-icon-container-right\">\r\n      <po-clean\r\n        class=\"po-icon-input\"\r\n        *ngIf=\"clean && !disabled && !readonly\"\r\n        [p-element-ref]=\"inputEl\"\r\n        (p-change-event)=\"clear($event)\"\r\n      >\r\n      </po-clean>\r\n    </div>\r\n  </div>\r\n\r\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\" [p-error-pattern]=\"getErrorPatternMessage()\">\r\n  </po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon po-icon-input\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      inputmode=\"decimal\"\n      type=\"text\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event)\"\n      (keypress)=\"onKeyPress($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"po-icon-input\"\n        *ngIf=\"clean && !disabled && !readonly\"\n        [p-element-ref]=\"inputEl\"\n        (p-change-event)=\"clear($event)\"\n      >\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\" [p-error-pattern]=\"getErrorPatternMessage()\">\n  </po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: PoLanguageService }, { type: i0.ChangeDetectorRef }]; }, { inputEl: [{
             type: ViewChild,
             args: ['inp', { read: ElementRef, static: true }]
@@ -28056,7 +28066,7 @@ class PoEmailComponent extends PoInputGeneric {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoEmailComponent, [{
         type: Component,
-        args: [{ selector: 'po-email', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$4, template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-id]=\"id\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\">\r\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\r\n      <po-icon\r\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\r\n        [class.po-field-icon-disabled]=\"disabled\"\r\n        [p-icon]=\"icon\"\r\n      ></po-icon>\r\n    </div>\r\n\r\n    <input\r\n      #inp\r\n      class=\"po-input\"\r\n      [attr.name]=\"name\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [class.po-input-icon-left]=\"icon\"\r\n      [class.po-input-icon-right]=\"clean\"\r\n      [disabled]=\"disabled\"\r\n      [id]=\"id\"\r\n      [placeholder]=\"disabled ? '' : placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [required]=\"required\"\r\n      [type]=\"type\"\r\n      (blur)=\"eventOnBlur($event)\"\r\n      (click)=\"eventOnClick($event)\"\r\n      (focus)=\"eventOnFocus($event)\"\r\n      (input)=\"eventOnInput($event)\"\r\n    />\r\n\r\n    <div class=\"po-field-icon-container-right\">\r\n      <po-clean\r\n        class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\r\n        *ngIf=\"clean && !disabled && !readonly\"\r\n        [p-element-ref]=\"inputEl\"\r\n        (p-change-event)=\"clear($event)\"\r\n      >\r\n      </po-clean>\r\n    </div>\r\n  </div>\r\n\r\n  <po-field-container-bottom\r\n    [p-help]=\"help\"\r\n    [p-disabled]=\"disabled\"\r\n    [p-error-pattern]=\"getErrorPattern()\"\r\n  ></po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+        args: [{ selector: 'po-email', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$4, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [p-icon]=\"icon\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        *ngIf=\"clean && !disabled && !readonly\"\n        [p-element-ref]=\"inputEl\"\n        (p-change-event)=\"clear($event)\"\n      >\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, null); })();
 const _c0$P = ["inp"];
@@ -28166,7 +28176,7 @@ class PoInputComponent extends PoInputGeneric {
                         useExisting: forwardRef(() => PoInputComponent),
                         multi: true
                     }
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-id]=\"id\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\">\r\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\r\n      <po-icon\r\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\r\n        [class.po-field-icon-disabled]=\"disabled\"\r\n        [p-icon]=\"icon\"\r\n      ></po-icon>\r\n    </div>\r\n\r\n    <input\r\n      #inp\r\n      class=\"po-input\"\r\n      [attr.name]=\"name\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [class.po-input-icon-left]=\"icon\"\r\n      [class.po-input-icon-right]=\"clean\"\r\n      [disabled]=\"disabled\"\r\n      [id]=\"id\"\r\n      [placeholder]=\"disabled ? '' : placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [required]=\"required\"\r\n      [type]=\"type\"\r\n      (blur)=\"eventOnBlur($event)\"\r\n      (click)=\"eventOnClick($event)\"\r\n      (focus)=\"eventOnFocus($event)\"\r\n      (input)=\"eventOnInput($event)\"\r\n    />\r\n\r\n    <div class=\"po-field-icon-container-right\">\r\n      <po-clean\r\n        class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\r\n        *ngIf=\"clean && !disabled && !readonly\"\r\n        [p-element-ref]=\"inputEl\"\r\n        (p-change-event)=\"clear($event)\"\r\n      >\r\n      </po-clean>\r\n    </div>\r\n  </div>\r\n\r\n  <po-field-container-bottom\r\n    [p-help]=\"help\"\r\n    [p-disabled]=\"disabled\"\r\n    [p-error-pattern]=\"getErrorPattern()\"\r\n  ></po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [p-icon]=\"icon\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        *ngIf=\"clean && !disabled && !readonly\"\n        [p-element-ref]=\"inputEl\"\n        (p-change-event)=\"clear($event)\"\n      >\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, { inp: [{
             type: ViewChild,
             args: ['inp', { static: true }]
@@ -28260,7 +28270,7 @@ class PoLoginComponent extends PoInputGeneric {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLoginComponent, [{
         type: Component,
-        args: [{ selector: 'po-login', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$3, template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-id]=\"id\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\">\r\n    <div class=\"po-field-icon-container-left\">\r\n      <span\r\n        class=\"po-icon po-field-icon po-icon-user {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\r\n        [class.po-field-icon-disabled]=\"disabled\"\r\n      ></span>\r\n    </div>\r\n\r\n    <input\r\n      #inp\r\n      class=\"po-input po-input-icon-left\"\r\n      [attr.name]=\"name\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [class.po-input-icon-right]=\"clean\"\r\n      [disabled]=\"disabled\"\r\n      [id]=\"id\"\r\n      [placeholder]=\"disabled ? '' : placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [required]=\"required\"\r\n      [type]=\"type\"\r\n      (blur)=\"eventOnBlur($event)\"\r\n      (click)=\"eventOnClick($event)\"\r\n      (focus)=\"eventOnFocus($event)\"\r\n      (input)=\"eventOnInput($event)\"\r\n    />\r\n\r\n    <div class=\"po-field-icon-container-right\">\r\n      <po-clean\r\n        class=\"po-icon-input\"\r\n        *ngIf=\"clean && !disabled && !readonly\"\r\n        [p-element-ref]=\"inputEl\"\r\n        (p-change-event)=\"clear($event)\"\r\n      >\r\n      </po-clean>\r\n    </div>\r\n  </div>\r\n\r\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\" [p-error-pattern]=\"getErrorPattern()\">\r\n  </po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+        args: [{ selector: 'po-login', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$3, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\">\n    <div class=\"po-field-icon-container-left\">\n      <span\n        class=\"po-icon po-field-icon po-icon-user {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n      ></span>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"po-icon-input\"\n        *ngIf=\"clean && !disabled && !readonly\"\n        [p-element-ref]=\"inputEl\"\n        (p-change-event)=\"clear($event)\"\n      >\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\" [p-error-pattern]=\"getErrorPattern()\">\n  </po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, null); })();
 const poLookupLiteralsDefault = {
@@ -29307,7 +29317,7 @@ class PoDynamicFormComponent extends PoDynamicFormBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDynamicFormComponent, [{
         type: Component,
-        args: [{ selector: 'po-dynamic-form', template: "<ng-container *ngIf=\"groupForm; then reuseFormTemplate; else uniqueFormTemplate\"></ng-container>\r\n\r\n<ng-template #reuseFormTemplate>\r\n  <po-dynamic-form-fields #fieldsComponent [p-auto-focus]=\"autoFocus\" [p-fields]=\"fields\" [p-value]=\"value\">\r\n  </po-dynamic-form-fields>\r\n</ng-template>\r\n\r\n<ng-template #uniqueFormTemplate>\r\n  <form #dynamicForm=\"ngForm\">\r\n    <po-dynamic-form-fields\r\n      #fieldsComponent\r\n      [(p-fields)]=\"fields\"\r\n      [p-auto-focus]=\"autoFocus\"\r\n      [p-disabled-form]=\"disabledForm\"\r\n      [p-validate]=\"validate\"\r\n      [p-validate-fields]=\"validateFields\"\r\n      [p-validate-on-input]=\"validateOnInput\"\r\n      [p-value]=\"value\"\r\n      (p-object-value)=\"sendObjectValue($event)\"\r\n      (p-form-validate)=\"validateForm($event)\"\r\n    >\r\n    </po-dynamic-form-fields>\r\n  </form>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-dynamic-form', template: "<ng-container *ngIf=\"groupForm; then reuseFormTemplate; else uniqueFormTemplate\"></ng-container>\n\n<ng-template #reuseFormTemplate>\n  <po-dynamic-form-fields #fieldsComponent [p-auto-focus]=\"autoFocus\" [p-fields]=\"fields\" [p-value]=\"value\">\n  </po-dynamic-form-fields>\n</ng-template>\n\n<ng-template #uniqueFormTemplate>\n  <form #dynamicForm=\"ngForm\">\n    <po-dynamic-form-fields\n      #fieldsComponent\n      [(p-fields)]=\"fields\"\n      [p-auto-focus]=\"autoFocus\"\n      [p-disabled-form]=\"disabledForm\"\n      [p-validate]=\"validate\"\n      [p-validate-fields]=\"validateFields\"\n      [p-validate-on-input]=\"validateOnInput\"\n      [p-value]=\"value\"\n      (p-object-value)=\"sendObjectValue($event)\"\n      (p-form-validate)=\"validateForm($event)\"\n    >\n    </po-dynamic-form-fields>\n  </form>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: PoDynamicFormLoadService }, { type: PoDynamicFormValidationService }]; }, { fieldsComponent: [{
             type: ViewChild,
             args: ['fieldsComponent']
@@ -29495,7 +29505,7 @@ class PoLookupModalComponent extends PoLookupModalBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLookupModalComponent, [{
         type: Component,
-        args: [{ selector: 'po-lookup-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-modal\r\n  p-click-out=\"false\"\r\n  p-hide-close=\"false\"\r\n  p-size=\"lg\"\r\n  [p-primary-action]=\"isAdvancedFilter ? primaryActionAdvancedFilter : primaryAction\"\r\n  [p-secondary-action]=\"isAdvancedFilter ? secondaryActionAdvancedFilter : secondaryAction\"\r\n  [p-title]=\"isAdvancedFilter ? advancedFilterModalTitle : title\"\r\n>\r\n  <div [hidden]=\"isAdvancedFilter\">\r\n    <po-field-container class=\"po-lookup-header po-pull-right\" [p-optional]=\"false\">\r\n      <div class=\"po-lookup-filter-content\">\r\n        <div class=\"po-field-icon-container-right\">\r\n          <span #iconLookup class=\"po-icon po-field-icon po-icon-search po-icon-input\" (click)=\"search()\"> </span>\r\n        </div>\r\n\r\n        <input\r\n          #inpsearch\r\n          class=\"po-input po-input-icon-right\"\r\n          name=\"contentSearch\"\r\n          [(ngModel)]=\"searchValue\"\r\n          [placeholder]=\"literals.modalPlaceholder\"\r\n          type=\"text\"\r\n        />\r\n      </div>\r\n\r\n      <div *ngIf=\"advancedFilters && advancedFilters.length > 0\" class=\"po-lookup-advanced-search\">\r\n        <span\r\n          class=\"po-lookup-advanced-search-link po-icon-input\"\r\n          tabindex=\"0\"\r\n          (click)=\"onAdvancedFilter()\"\r\n          (keydown.enter)=\"onAdvancedFilter()\"\r\n        >\r\n          {{ literals.modalAdvancedSearch }}\r\n        </span>\r\n      </div>\r\n    </po-field-container>\r\n\r\n    <!-- DISCLAIMER -->\r\n    <po-disclaimer-group\r\n      *ngIf=\"!!disclaimerGroup\"\r\n      class=\"po-md-12\"\r\n      [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\r\n      [p-title]=\"disclaimerGroup?.title\"\r\n      (p-change)=\"onChangeDisclaimerGroup()\"\r\n    >\r\n    </po-disclaimer-group>\r\n\r\n    <div class=\"po-row po-lookup-container-table\" [attr.data-multiple]=\"multiple\">\r\n      <po-table\r\n        #poTable\r\n        class=\"po-md-12\"\r\n        [p-selectable]=\"true\"\r\n        [p-hide-detail]=\"true\"\r\n        [p-single-select]=\"!multiple\"\r\n        [p-hide-action-fixed-columns]=\"true\"\r\n        [p-sort]=\"true\"\r\n        [p-hide-table-search]=\"true\"\r\n        [p-columns]=\"columns\"\r\n        [p-height]=\"tableHeight\"\r\n        [p-items]=\"items\"\r\n        [p-literals]=\"tableLiterals\"\r\n        [p-loading]=\"isLoading\"\r\n        [p-show-more-disabled]=\"!hasNext\"\r\n        [p-infinite-scroll]=\"infiniteScroll\"\r\n        [p-hide-batch-actions]=\"true\"\r\n        (p-selected)=\"onSelect($event)\"\r\n        (p-unselected)=\"onUnselect($event)\"\r\n        (p-all-selected)=\"onAllSelected($event)\"\r\n        (p-all-unselected)=\"onAllUnselected($event)\"\r\n        (p-show-more)=\"showMoreEvent()\"\r\n        (p-sort-by)=\"sortBy($event)\"\r\n        (p-change-visible-columns)=\"changeVisibleColumns.emit($event)\"\r\n        (p-restore-column-manager)=\"columnRestoreManager.emit($event)\"\r\n      >\r\n      </po-table>\r\n    </div>\r\n\r\n    <!-- DISCLAIMER -->\r\n    <po-disclaimer-group\r\n      *ngIf=\"multiple\"\r\n      class=\"po-md-12\"\r\n      [p-disclaimers]=\"selecteds\"\r\n      (p-remove)=\"onUnselectFromDisclaimer($event.removedDisclaimer)\"\r\n      (p-remove-all)=\"onAllUnselected($event)\"\r\n    >\r\n    </po-disclaimer-group>\r\n  </div>\r\n  <div [hidden]=\"!isAdvancedFilter\">\r\n    <ng-container #container> </ng-container>\r\n  </div>\r\n</po-modal>\r\n" }]
+        args: [{ selector: 'po-lookup-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-modal\n  p-click-out=\"false\"\n  p-hide-close=\"false\"\n  p-size=\"lg\"\n  [p-primary-action]=\"isAdvancedFilter ? primaryActionAdvancedFilter : primaryAction\"\n  [p-secondary-action]=\"isAdvancedFilter ? secondaryActionAdvancedFilter : secondaryAction\"\n  [p-title]=\"isAdvancedFilter ? advancedFilterModalTitle : title\"\n>\n  <div [hidden]=\"isAdvancedFilter\">\n    <po-field-container class=\"po-lookup-header po-pull-right\" [p-optional]=\"false\">\n      <div class=\"po-lookup-filter-content\">\n        <div class=\"po-field-icon-container-right\">\n          <span #iconLookup class=\"po-icon po-field-icon po-icon-search po-icon-input\" (click)=\"search()\"> </span>\n        </div>\n\n        <input\n          #inpsearch\n          class=\"po-input po-input-icon-right\"\n          name=\"contentSearch\"\n          [(ngModel)]=\"searchValue\"\n          [placeholder]=\"literals.modalPlaceholder\"\n          type=\"text\"\n        />\n      </div>\n\n      <div *ngIf=\"advancedFilters && advancedFilters.length > 0\" class=\"po-lookup-advanced-search\">\n        <span\n          class=\"po-lookup-advanced-search-link po-icon-input\"\n          tabindex=\"0\"\n          (click)=\"onAdvancedFilter()\"\n          (keydown.enter)=\"onAdvancedFilter()\"\n        >\n          {{ literals.modalAdvancedSearch }}\n        </span>\n      </div>\n    </po-field-container>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"!!disclaimerGroup\"\n      class=\"po-md-12\"\n      [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\n      [p-title]=\"disclaimerGroup?.title\"\n      (p-change)=\"onChangeDisclaimerGroup()\"\n    >\n    </po-disclaimer-group>\n\n    <div class=\"po-row po-lookup-container-table\" [attr.data-multiple]=\"multiple\">\n      <po-table\n        #poTable\n        class=\"po-md-12\"\n        [p-selectable]=\"true\"\n        [p-hide-detail]=\"true\"\n        [p-single-select]=\"!multiple\"\n        [p-hide-action-fixed-columns]=\"true\"\n        [p-sort]=\"true\"\n        [p-hide-table-search]=\"true\"\n        [p-columns]=\"columns\"\n        [p-height]=\"tableHeight\"\n        [p-items]=\"items\"\n        [p-literals]=\"tableLiterals\"\n        [p-loading]=\"isLoading\"\n        [p-show-more-disabled]=\"!hasNext\"\n        [p-infinite-scroll]=\"infiniteScroll\"\n        [p-hide-batch-actions]=\"true\"\n        (p-selected)=\"onSelect($event)\"\n        (p-unselected)=\"onUnselect($event)\"\n        (p-all-selected)=\"onAllSelected($event)\"\n        (p-all-unselected)=\"onAllUnselected($event)\"\n        (p-show-more)=\"showMoreEvent()\"\n        (p-sort-by)=\"sortBy($event)\"\n        (p-change-visible-columns)=\"changeVisibleColumns.emit($event)\"\n        (p-restore-column-manager)=\"columnRestoreManager.emit($event)\"\n      >\n      </po-table>\n    </div>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"multiple\"\n      class=\"po-md-12\"\n      [p-disclaimers]=\"selecteds\"\n      (p-remove)=\"onUnselectFromDisclaimer($event.removedDisclaimer)\"\n      (p-remove-all)=\"onAllUnselected($event)\"\n    >\n    </po-disclaimer-group>\n  </div>\n  <div [hidden]=\"!isAdvancedFilter\">\n    <ng-container #container> </ng-container>\n  </div>\n</po-modal>\n" }]
     }], function () { return [{ type: i0.ComponentFactoryResolver }, { type: PoLanguageService }, { type: i0.ChangeDetectorRef }]; }, { inputSearchEl: [{
             type: ViewChild,
             args: ['inpsearch']
@@ -30739,7 +30749,7 @@ class PoLookupComponent extends PoLookupBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLookupComponent, [{
         type: Component,
-        args: [{ selector: 'po-lookup', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$2, template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-id]=\"id\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\" *ngIf=\"!disclaimers.length; else disclaimersTemplate\">\r\n    <input\r\n      #inp\r\n      class=\"po-input\"\r\n      [id]=\"id\"\r\n      type=\"text\"\r\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [disabled]=\"disabled\"\r\n      [placeholder]=\"disabled ? '' : placeholder\"\r\n      [required]=\"required\"\r\n      (blur)=\"searchEvent()\"\r\n    />\r\n\r\n    <div class=\"po-field-icon-container-right\">\r\n      <po-clean\r\n        class=\"po-icon-input\"\r\n        *ngIf=\"clean && !disabled\"\r\n        [p-element-ref]=\"inputEl\"\r\n        (p-change-event)=\"cleanModel()\"\r\n      >\r\n      </po-clean>\r\n\r\n      <span\r\n        #iconLookup\r\n        class=\"po-icon po-field-icon po-icon-search po-icon-input\"\r\n        tabindex=\"-1\"\r\n        [class.po-field-icon]=\"!disabled\"\r\n        [class.po-field-icon-disabled]=\"disabled\"\r\n        (click)=\"openLookup()\"\r\n        (focus)=\"inp.focus()\"\r\n      >\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\r\n</po-field-container>\r\n\r\n<ng-template #disclaimersTemplate>\r\n  <div class=\"po-field-container-content\">\r\n    <div\r\n      #inp\r\n      [tabindex]=\"disabled ? -1 : 0\"\r\n      class=\"po-input po-input-icon-right po-lookup-input po-icon-input\"\r\n      [class.po-lookup-input-auto]=\"autoHeight\"\r\n      [class.po-lookup-input-static]=\"!autoHeight\"\r\n      [class.po-lookup-input-disabled]=\"disabled\"\r\n    >\r\n      <span *ngIf=\"placeholder && !disclaimers?.length\" class=\"po-lookup-input-placeholder\">\r\n        {{ placeholder }}\r\n      </span>\r\n\r\n      <po-disclaimer\r\n        *ngFor=\"let disclaimer of visibleDisclaimers\"\r\n        class=\"po-lookup-input-disclaimer\"\r\n        [p-label]=\"disclaimer.label\"\r\n        [p-value]=\"disclaimer.value\"\r\n        [p-hide-close]=\"disclaimer.value === '' || disabled\"\r\n        [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\r\n        (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\r\n      >\r\n      </po-disclaimer>\r\n    </div>\r\n\r\n    <div class=\"po-field-icon-container-right\">\r\n      <span\r\n        #iconLookup\r\n        class=\"po-icon po-field-icon po-icon-search po-icon-input\"\r\n        tabindex=\"-1\"\r\n        [class.po-field-icon]=\"!disabled\"\r\n        [class.po-field-icon-disabled]=\"disabled\"\r\n        (click)=\"openLookup()\"\r\n        (focus)=\"inp.focus()\"\r\n      >\r\n      </span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-lookup', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$2, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\" *ngIf=\"!disclaimers.length; else disclaimersTemplate\">\n    <input\n      #inp\n      class=\"po-input\"\n      [id]=\"id\"\n      type=\"text\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      [autocomplete]=\"autocomplete\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [required]=\"required\"\n      (blur)=\"searchEvent()\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"po-icon-input\"\n        *ngIf=\"clean && !disabled\"\n        [p-element-ref]=\"inputEl\"\n        (p-change-event)=\"cleanModel()\"\n      >\n      </po-clean>\n\n      <span\n        #iconLookup\n        class=\"po-icon po-field-icon po-icon-search po-icon-input\"\n        tabindex=\"-1\"\n        [class.po-field-icon]=\"!disabled\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        (click)=\"openLookup()\"\n        (focus)=\"inp.focus()\"\n      >\n      </span>\n    </div>\n  </div>\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #disclaimersTemplate>\n  <div class=\"po-field-container-content\">\n    <div\n      #inp\n      [tabindex]=\"disabled ? -1 : 0\"\n      class=\"po-input po-input-icon-right po-lookup-input po-icon-input\"\n      [class.po-lookup-input-auto]=\"autoHeight\"\n      [class.po-lookup-input-static]=\"!autoHeight\"\n      [class.po-lookup-input-disabled]=\"disabled\"\n    >\n      <span *ngIf=\"placeholder && !disclaimers?.length\" class=\"po-lookup-input-placeholder\">\n        {{ placeholder }}\n      </span>\n\n      <po-disclaimer\n        *ngFor=\"let disclaimer of visibleDisclaimers\"\n        class=\"po-lookup-input-disclaimer\"\n        [p-label]=\"disclaimer.label\"\n        [p-value]=\"disclaimer.value\"\n        [p-hide-close]=\"disclaimer.value === '' || disabled\"\n        [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\n        (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\n      >\n      </po-disclaimer>\n    </div>\n\n    <div class=\"po-field-icon-container-right\">\n      <span\n        #iconLookup\n        class=\"po-icon po-field-icon po-icon-search po-icon-input\"\n        tabindex=\"-1\"\n        [class.po-field-icon]=\"!disabled\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        (click)=\"openLookup()\"\n        (focus)=\"inp.focus()\"\n      >\n      </span>\n    </div>\n  </div>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.Renderer2 }, { type: PoLookupFilterService }, { type: PoLookupModalService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, { inputEl: [{
             type: ViewChild,
             args: ['inp', { read: ElementRef, static: false }]
@@ -31960,7 +31970,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectComponent, [{
         type: Component,
-        args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\" [class.po-multiselect-show]=\"dropdownOpen\">\r\n    <div\r\n      #inputElement\r\n      [tabindex]=\"disabled ? -1 : 0\"\r\n      [attr.disabled]=\"disabled\"\r\n      [attr.aria-label]=\"label\"\r\n      class=\"po-input po-input-icon-right po-multiselect-input po-clickable\"\r\n      [class.po-multiselect-input-auto]=\"autoHeight\"\r\n      [class.po-multiselect-input-static]=\"!autoHeight\"\r\n      [class.po-multiselect-input-disabled]=\"disabled\"\r\n      (keyup.enter)=\"toggleDropdownVisibility()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (click)=\"toggleDropdownVisibility()\"\r\n      (blur)=\"onBlur()\"\r\n    >\r\n      <span *ngIf=\"placeholder && !disabled && !visibleDisclaimers?.length\" class=\"po-multiselect-input-placeholder\">\r\n        {{ placeholder }}\r\n      </span>\r\n\r\n      <po-disclaimer\r\n        *ngFor=\"let disclaimer of visibleDisclaimers\"\r\n        class=\"po-multiselect-input-disclaimer\"\r\n        [p-label]=\"disclaimer[fieldLabel]\"\r\n        [p-value]=\"disclaimer[fieldValue]\"\r\n        [p-hide-close]=\"disclaimer[fieldValue] === '' || disabled\"\r\n        [class.po-clickable]=\"disclaimer[fieldValue] === '' && !disabled\"\r\n        (click)=\"openDropdown(disclaimer[fieldValue] === '')\"\r\n        (p-close-action)=\"closeDisclaimer(disclaimer[fieldValue])\"\r\n      >\r\n      </po-disclaimer>\r\n\r\n      <div class=\"po-field-icon-container-right\">\r\n        <span\r\n          #iconElement\r\n          class=\"po-icon po-field-icon {{ dropdownIcon }} {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\r\n          [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\r\n        >\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <po-multiselect-dropdown\r\n    #dropdownElement\r\n    [p-searching]=\"isServerSearching\"\r\n    [p-hide-search]=\"hideSearch\"\r\n    [p-hide-select-all]=\"hideSelectAll\"\r\n    [p-literals]=\"literals\"\r\n    [p-options]=\"options\"\r\n    [p-visible-options]=\"visibleOptionsDropdown\"\r\n    [p-selected-options]=\"selectedOptions\"\r\n    [p-placeholder-search]=\"placeholderSearch\"\r\n    [p-field-value]=\"fieldValue\"\r\n    [p-field-label]=\"fieldLabel\"\r\n    [p-multiselect-template]=\"multiselectOptionTemplate\"\r\n    (p-change)=\"changeItems($event)\"\r\n    (p-change-search)=\"changeSearch($event)\"\r\n    (p-close-dropdown)=\"controlDropdownVisibility(false)\"\r\n  >\r\n  </po-multiselect-dropdown>\r\n\r\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+        args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\" [class.po-multiselect-show]=\"dropdownOpen\">\n    <div\n      #inputElement\n      [tabindex]=\"disabled ? -1 : 0\"\n      [attr.disabled]=\"disabled\"\n      [attr.aria-label]=\"label\"\n      class=\"po-input po-input-icon-right po-multiselect-input po-clickable\"\n      [class.po-multiselect-input-auto]=\"autoHeight\"\n      [class.po-multiselect-input-static]=\"!autoHeight\"\n      [class.po-multiselect-input-disabled]=\"disabled\"\n      (keyup.enter)=\"toggleDropdownVisibility()\"\n      (keydown)=\"onKeyDown($event)\"\n      (click)=\"toggleDropdownVisibility()\"\n      (blur)=\"onBlur()\"\n    >\n      <span *ngIf=\"placeholder && !disabled && !visibleDisclaimers?.length\" class=\"po-multiselect-input-placeholder\">\n        {{ placeholder }}\n      </span>\n\n      <po-disclaimer\n        *ngFor=\"let disclaimer of visibleDisclaimers\"\n        class=\"po-multiselect-input-disclaimer\"\n        [p-label]=\"disclaimer[fieldLabel]\"\n        [p-value]=\"disclaimer[fieldValue]\"\n        [p-hide-close]=\"disclaimer[fieldValue] === '' || disabled\"\n        [class.po-clickable]=\"disclaimer[fieldValue] === '' && !disabled\"\n        (click)=\"openDropdown(disclaimer[fieldValue] === '')\"\n        (p-close-action)=\"closeDisclaimer(disclaimer[fieldValue])\"\n      >\n      </po-disclaimer>\n\n      <div class=\"po-field-icon-container-right\">\n        <span\n          #iconElement\n          class=\"po-icon po-field-icon {{ dropdownIcon }} {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n          [ngClass]=\"disabled ? 'po-field-icon-disabled' : ''\"\n        >\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <po-multiselect-dropdown\n    #dropdownElement\n    [p-searching]=\"isServerSearching\"\n    [p-hide-search]=\"hideSearch\"\n    [p-hide-select-all]=\"hideSelectAll\"\n    [p-literals]=\"literals\"\n    [p-options]=\"options\"\n    [p-visible-options]=\"visibleOptionsDropdown\"\n    [p-selected-options]=\"selectedOptions\"\n    [p-placeholder-search]=\"placeholderSearch\"\n    [p-field-value]=\"fieldValue\"\n    [p-field-label]=\"fieldLabel\"\n    [p-multiselect-template]=\"multiselectOptionTemplate\"\n    (p-change)=\"changeItems($event)\"\n    (p-change-search)=\"changeSearch($event)\"\n    (p-close-dropdown)=\"controlDropdownVisibility(false)\"\n  >\n  </po-multiselect-dropdown>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: PoControlPositionService }, { type: PoMultiselectFilterService }, { type: PoLanguageService }]; }, { multiselectOptionTemplate: [{
             type: ContentChild,
             args: [PoMultiselectOptionTemplateDirective, { static: true }]
@@ -32261,7 +32271,7 @@ class PoNumberComponent extends PoNumberBaseComponent {
                         useExisting: forwardRef(() => PoNumberComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-id]=\"id\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\">\r\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\r\n      <po-icon class=\"po-field-icon po-icon-input\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\r\n    </div>\r\n    <input\r\n      #inp\r\n      class=\"po-input\"\r\n      type=\"number\"\r\n      [attr.max]=\"max\"\r\n      [attr.min]=\"min\"\r\n      [attr.name]=\"name\"\r\n      [attr.step]=\"step\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [class.po-input-icon-left]=\"icon\"\r\n      [class.po-input-icon-right]=\"clean\"\r\n      [disabled]=\"disabled\"\r\n      [id]=\"id\"\r\n      [placeholder]=\"disabled ? '' : placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [required]=\"required\"\r\n      [tabindex]=\"disabled ? -1 : 0\"\r\n      (blur)=\"onBlur($event)\"\r\n      (focus)=\"eventOnFocus($event)\"\r\n      (input)=\"eventOnInput($event)\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n    />\r\n\r\n    <div class=\"po-field-icon-container-right\">\r\n      <po-clean\r\n        class=\"po-icon-input\"\r\n        *ngIf=\"clean && !disabled && !readonly\"\r\n        [p-default-value]=\"null\"\r\n        [p-element-ref]=\"inputEl\"\r\n        (p-change-event)=\"clear($event)\"\r\n      >\r\n      </po-clean>\r\n    </div>\r\n  </div>\r\n\r\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\" [p-error-pattern]=\"getErrorPatternMessage()\">\r\n  </po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon po-icon-input\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></po-icon>\n    </div>\n    <input\n      #inp\n      class=\"po-input\"\n      type=\"number\"\n      [attr.max]=\"max\"\n      [attr.min]=\"min\"\n      [attr.name]=\"name\"\n      [attr.step]=\"step\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"po-icon-input\"\n        *ngIf=\"clean && !disabled && !readonly\"\n        [p-default-value]=\"null\"\n        [p-element-ref]=\"inputEl\"\n        (p-change-event)=\"clear($event)\"\n      >\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\" [p-error-pattern]=\"getErrorPatternMessage()\">\n  </po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, { step: [{
             type: Input,
             args: ['p-step']
@@ -32411,7 +32421,7 @@ class PoPasswordComponent extends PoInputGeneric {
                         useExisting: forwardRef(() => PoPasswordComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-id]=\"id\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\">\r\n    <div class=\"po-field-icon-container-left\">\r\n      <span\r\n        class=\"po-icon po-field-icon po-icon-lock {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\r\n        [class.po-field-icon-disabled]=\"disabled\"\r\n      >\r\n      </span>\r\n    </div>\r\n\r\n    <input\r\n      #inp\r\n      class=\"po-input po-input-icon-left\"\r\n      [attr.name]=\"name\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [class.po-input-double-icon-right]=\"clean && inp.value && !hidePasswordPeek\"\r\n      [class.po-input-icon-right]=\"clean || !hidePasswordPeek\"\r\n      [disabled]=\"disabled\"\r\n      [id]=\"id\"\r\n      [placeholder]=\"disabled ? '' : placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [required]=\"required\"\r\n      [type]=\"disabled ? 'password' : type\"\r\n      (blur)=\"eventOnBlur($event)\"\r\n      (click)=\"eventOnClick($event)\"\r\n      (focus)=\"eventOnFocus($event)\"\r\n      (input)=\"eventOnInput($event)\"\r\n    />\r\n\r\n    <div class=\"po-field-icon-container-right\">\r\n      <po-clean\r\n        class=\"po-icon-input\"\r\n        *ngIf=\"clean && !disabled && !readonly\"\r\n        [p-element-ref]=\"inputEl\"\r\n        (p-change-event)=\"clear($event)\"\r\n      >\r\n      </po-clean>\r\n\r\n      <span\r\n        *ngIf=\"!hidePasswordPeek && !disabled\"\r\n        class=\"po-icon po-field-icon po-icon-input\"\r\n        [ngClass]=\"visiblePassword ? 'po-icon-eye' : 'po-icon-eye-off po-field-icon-disabled'\"\r\n        (click)=\"showPassword()\"\r\n      >\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\" [p-error-pattern]=\"getErrorPattern()\">\r\n  </po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\">\n    <div class=\"po-field-icon-container-left\">\n      <span\n        class=\"po-icon po-field-icon po-icon-lock {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n      >\n      </span>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input po-input-icon-left\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-double-icon-right]=\"clean && inp.value && !hidePasswordPeek\"\n      [class.po-input-icon-right]=\"clean || !hidePasswordPeek\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"disabled ? 'password' : type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"po-icon-input\"\n        *ngIf=\"clean && !disabled && !readonly\"\n        [p-element-ref]=\"inputEl\"\n        (p-change-event)=\"clear($event)\"\n      >\n      </po-clean>\n\n      <span\n        *ngIf=\"!hidePasswordPeek && !disabled\"\n        class=\"po-icon po-field-icon po-icon-input\"\n        [ngClass]=\"visiblePassword ? 'po-icon-eye' : 'po-icon-eye-off po-field-icon-disabled'\"\n        (click)=\"showPassword()\"\n      >\n      </span>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\" [p-error-pattern]=\"getErrorPattern()\">\n  </po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, { hidePasswordPeek: [{
             type: Input,
             args: ['p-hide-password-peek']
@@ -33000,7 +33010,7 @@ class PoRichTextBodyComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRichTextBodyComponent, [{
         type: Component,
-        args: [{ selector: 'po-rich-text-body', template: "<div\r\n  #bodyElement\r\n  class=\"po-rich-text-body\"\r\n  tabindex=\"0\"\r\n  [attr.aria-label]=\"label\"\r\n  [attr.contenteditable]=\"!readonly\"\r\n  [attr.data-placeholder]=\"placeholder\"\r\n  [style.height.px]=\"height\"\r\n  (blur)=\"onBlur()\"\r\n  (click)=\"onClick()\"\r\n  (cut)=\"update()\"\r\n  (focus)=\"onFocus()\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  (keyup)=\"onKeyUp($event)\"\r\n  (paste)=\"onPaste()\"\r\n></div>\r\n" }]
+        args: [{ selector: 'po-rich-text-body', template: "<div\n  #bodyElement\n  class=\"po-rich-text-body\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"label\"\n  [attr.contenteditable]=\"!readonly\"\n  [attr.data-placeholder]=\"placeholder\"\n  [style.height.px]=\"height\"\n  (blur)=\"onBlur()\"\n  (click)=\"onClick()\"\n  (cut)=\"update()\"\n  (focus)=\"onFocus()\"\n  (keydown)=\"onKeyDown($event)\"\n  (keyup)=\"onKeyUp($event)\"\n  (paste)=\"onPaste()\"\n></div>\n" }]
     }], function () { return [{ type: PoRichTextService }]; }, { bodyElement: [{
             type: ViewChild,
             args: ['bodyElement', { static: true }]
@@ -34064,7 +34074,7 @@ class PoUploadDragDropAreaComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoUploadDragDropAreaComponent, [{
         type: Component,
-        args: [{ selector: 'po-upload-drag-drop-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"po-upload-drag-drop-area\"\r\n  [ngClass]=\"{ 'po-upload-drag-drop-area-disabled': disabled }\"\r\n  [style.height.px]=\"height\"\r\n>\r\n  <div class=\"po-upload-drag-drop-area-container\">\r\n    <ng-container *ngIf=\"overlay && !disabled; then overlayTemplate; else defaultTemplate\"> </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #overlayTemplate>\r\n  <span class=\"po-upload-drag-drop-area-overlay-icon po-icon po-icon-upload-cloud\"></span>\r\n\r\n  <div class=\"po-upload-drag-drop-area-overlay-label\">\r\n    {{ directoryCompatible ? literals?.dropFoldersHere : literals?.dropFilesHere }}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultTemplate>\r\n  <span class=\"po-upload-drag-drop-area-icon po-icon po-icon-upload-cloud\"></span>\r\n\r\n  <div class=\"po-upload-drag-drop-area-label\">\r\n    {{ directoryCompatible ? literals?.dragFoldersHere : literals?.dragFilesHere }}\r\n  </div>\r\n\r\n  <button\r\n    #selectFilesLink\r\n    class=\"po-upload-drag-drop-area-select-files\"\r\n    [disabled]=\"disabled\"\r\n    [ngClass]=\"{ 'po-clickable': !disabled }\"\r\n    (click)=\"selectFiles.emit()\"\r\n  >\r\n    {{ directoryCompatible ? literals?.selectFolderOnComputer : literals?.selectFilesOnComputer }}\r\n  </button>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-upload-drag-drop-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"po-upload-drag-drop-area\"\n  [ngClass]=\"{ 'po-upload-drag-drop-area-disabled': disabled }\"\n  [style.height.px]=\"height\"\n>\n  <div class=\"po-upload-drag-drop-area-container\">\n    <ng-container *ngIf=\"overlay && !disabled; then overlayTemplate; else defaultTemplate\"> </ng-container>\n  </div>\n</div>\n\n<ng-template #overlayTemplate>\n  <span class=\"po-upload-drag-drop-area-overlay-icon po-icon po-icon-upload-cloud\"></span>\n\n  <div class=\"po-upload-drag-drop-area-overlay-label\">\n    {{ directoryCompatible ? literals?.dropFoldersHere : literals?.dropFilesHere }}\n  </div>\n</ng-template>\n\n<ng-template #defaultTemplate>\n  <span class=\"po-upload-drag-drop-area-icon po-icon po-icon-upload-cloud\"></span>\n\n  <div class=\"po-upload-drag-drop-area-label\">\n    {{ directoryCompatible ? literals?.dragFoldersHere : literals?.dragFilesHere }}\n  </div>\n\n  <button\n    #selectFilesLink\n    class=\"po-upload-drag-drop-area-select-files\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{ 'po-clickable': !disabled }\"\n    (click)=\"selectFiles.emit()\"\n  >\n    {{ directoryCompatible ? literals?.selectFolderOnComputer : literals?.selectFilesOnComputer }}\n  </button>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.ElementRef }]; }, { directoryCompatible: [{
             type: Input,
             args: ['p-directory-compatible']
@@ -34314,7 +34324,7 @@ class PoUploadDragDropAreaOverlayComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoUploadDragDropAreaOverlayComponent, [{
         type: Component,
-        args: [{ selector: 'po-upload-drag-drop-area-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-overlay-fixed\">\r\n  <po-upload-drag-drop-area\r\n    #DragDropAreaFixed\r\n    class=\"po-upload-drag-drop-area-overlay\"\r\n    [p-directory-compatible]=\"directoryCompatible\"\r\n    [p-disabled]=\"disabled\"\r\n    [p-literals]=\"literals\"\r\n    [p-overlay]=\"true\"\r\n  >\r\n  </po-upload-drag-drop-area>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-upload-drag-drop-area-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-overlay-fixed\">\n  <po-upload-drag-drop-area\n    #DragDropAreaFixed\n    class=\"po-upload-drag-drop-area-overlay\"\n    [p-directory-compatible]=\"directoryCompatible\"\n    [p-disabled]=\"disabled\"\n    [p-literals]=\"literals\"\n    [p-overlay]=\"true\"\n  >\n  </po-upload-drag-drop-area>\n</div>\n" }]
     }], function () { return [{ type: i0.Renderer2 }]; }, { DragDropAreaFixed: [{
             type: ViewChild,
             args: ['DragDropAreaFixed', { read: ElementRef, static: true }]
@@ -34408,7 +34418,7 @@ class PoUploadDragDropComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoUploadDragDropComponent, [{
         type: Component,
-        args: [{ selector: 'po-upload-drag-drop', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-upload-drag-drop-area-overlay\r\n  #dragDropOverlay\r\n  *ngIf=\"isDragOver\"\r\n  [p-directory-compatible]=\"directoryCompatible\"\r\n  [p-disabled]=\"disabled\"\r\n  [p-literals]=\"literals\"\r\n  [p-target]=\"dragDropAreaComponent.elementRef\"\r\n  (p-area-element)=\"onAreaElement($event)\"\r\n>\r\n</po-upload-drag-drop-area-overlay>\r\n\r\n<po-upload-drag-drop-area\r\n  p-upload-drag-drop\r\n  [p-area-element]=\"areaElement\"\r\n  [p-directory-compatible]=\"directoryCompatible\"\r\n  [p-disabled]=\"disabled\"\r\n  [p-height]=\"dragDropHeight\"\r\n  [p-literals]=\"literals\"\r\n  [p-overlay]=\"false\"\r\n  (p-drag-leave)=\"onDragLeave()\"\r\n  (p-drag-over)=\"onDragOver()\"\r\n  (p-file-change)=\"onFileChange($event)\"\r\n  (p-select-files)=\"selectFiles.emit()\"\r\n>\r\n</po-upload-drag-drop-area>\r\n" }]
+        args: [{ selector: 'po-upload-drag-drop', changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-upload-drag-drop-area-overlay\n  #dragDropOverlay\n  *ngIf=\"isDragOver\"\n  [p-directory-compatible]=\"directoryCompatible\"\n  [p-disabled]=\"disabled\"\n  [p-literals]=\"literals\"\n  [p-target]=\"dragDropAreaComponent.elementRef\"\n  (p-area-element)=\"onAreaElement($event)\"\n>\n</po-upload-drag-drop-area-overlay>\n\n<po-upload-drag-drop-area\n  p-upload-drag-drop\n  [p-area-element]=\"areaElement\"\n  [p-directory-compatible]=\"directoryCompatible\"\n  [p-disabled]=\"disabled\"\n  [p-height]=\"dragDropHeight\"\n  [p-literals]=\"literals\"\n  [p-overlay]=\"false\"\n  (p-drag-leave)=\"onDragLeave()\"\n  (p-drag-over)=\"onDragOver()\"\n  (p-file-change)=\"onFileChange($event)\"\n  (p-select-files)=\"selectFiles.emit()\"\n>\n</po-upload-drag-drop-area>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { dragDropOverlayElement: [{
             type: ViewChild,
             args: ['dragDropOverlay', { read: ElementRef }]
@@ -34569,7 +34579,7 @@ class PoUploadFileRestrictionsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoUploadFileRestrictionsComponent, [{
         type: Component,
-        args: [{ selector: 'po-upload-file-restrictions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p class=\"po-font-text-small\" *ngIf=\"maxFiles > 1\">\r\n  {{ literals?.numberOfFilesAllowed | poI18n: maxFiles }}\r\n</p>\r\n\r\n<p class=\"po-font-text-small\" *ngIf=\"allowedExtensions\">\r\n  {{ literals?.allowedFormats | poI18n: allowedExtensions }}\r\n</p>\r\n\r\n<p class=\"po-font-text-small\" *ngIf=\"minFileSize || maxFileSize\">\r\n  <span>{{ literals?.allowedSizes }}</span>\r\n\r\n  <span *ngIf=\"minFileSize && maxFileSize\">\r\n    {{ literals?.allowedFileSizeRange | poI18n: [minFileSize, maxFileSize] }}\r\n  </span>\r\n\r\n  <span *ngIf=\"minFileSize && !maxFileSize\">\r\n    {{ literals?.minFileSizeAllowed | poI18n: minFileSize }}\r\n  </span>\r\n\r\n  <span *ngIf=\"maxFileSize && !minFileSize\">\r\n    {{ literals?.maxFileSizeAllowed | poI18n: maxFileSize }}\r\n  </span>\r\n</p>\r\n" }]
+        args: [{ selector: 'po-upload-file-restrictions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p class=\"po-font-text-small\" *ngIf=\"maxFiles > 1\">\n  {{ literals?.numberOfFilesAllowed | poI18n: maxFiles }}\n</p>\n\n<p class=\"po-font-text-small\" *ngIf=\"allowedExtensions\">\n  {{ literals?.allowedFormats | poI18n: allowedExtensions }}\n</p>\n\n<p class=\"po-font-text-small\" *ngIf=\"minFileSize || maxFileSize\">\n  <span>{{ literals?.allowedSizes }}</span>\n\n  <span *ngIf=\"minFileSize && maxFileSize\">\n    {{ literals?.allowedFileSizeRange | poI18n: [minFileSize, maxFileSize] }}\n  </span>\n\n  <span *ngIf=\"minFileSize && !maxFileSize\">\n    {{ literals?.minFileSizeAllowed | poI18n: minFileSize }}\n  </span>\n\n  <span *ngIf=\"maxFileSize && !minFileSize\">\n    {{ literals?.maxFileSizeAllowed | poI18n: maxFileSize }}\n  </span>\n</p>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: PoLanguageService }]; }, { maxFiles: [{
             type: Input,
             args: ['p-max-files']
@@ -35012,7 +35022,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
                         useExisting: forwardRef(() => PoUploadComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\r\n  [p-disabled]=\"isDisabled\"\r\n  [p-id]=\"id\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\">\r\n    <div class=\"po-upload\">\r\n      <input\r\n        #inputFile\r\n        class=\"po-upload-input\"\r\n        type=\"file\"\r\n        [accept]=\"allowedExtensions\"\r\n        [attr.name]=\"name\"\r\n        [id]=\"id\"\r\n        [disabled]=\"isDisabled\"\r\n        [multiple]=\"isMultiple\"\r\n        [required]=\"required\"\r\n        (change)=\"onFileChange($event)\"\r\n      />\r\n\r\n      <po-upload-drag-drop\r\n        *ngIf=\"displayDragDrop\"\r\n        [p-directory-compatible]=\"canHandleDirectory\"\r\n        [p-disabled]=\"isDisabled\"\r\n        [p-drag-drop-height]=\"dragDropHeight\"\r\n        [p-literals]=\"literals\"\r\n        (p-file-change)=\"onFileChangeDragDrop($event)\"\r\n        (p-select-files)=\"selectFiles()\"\r\n      >\r\n      </po-upload-drag-drop>\r\n\r\n      <po-button\r\n        *ngIf=\"!hideSelectButton && !displayDragDrop\"\r\n        #uploadButton\r\n        class=\"po-upload-button\"\r\n        for=\"file\"\r\n        [p-disabled]=\"isDisabled\"\r\n        [p-label]=\"selectFileButtonLabel\"\r\n        (p-click)=\"selectFiles()\"\r\n      >\r\n      </po-button>\r\n\r\n      <po-upload-file-restrictions\r\n        *ngIf=\"fileRestrictions && !hideRestrictionsInfo\"\r\n        class=\"po-upload-file-restrictions\"\r\n        [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\r\n        [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\r\n        [p-max-files]=\"maxFiles\"\r\n        [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\r\n        [p-min-file-size]=\"fileRestrictions?.minFileSize\"\r\n      >\r\n      </po-upload-file-restrictions>\r\n\r\n      <div *ngIf=\"currentFiles && currentFiles.length\" class=\"po-upload-progress-container\">\r\n        <po-container\r\n          [p-height]=\"hasMoreThanFourItems ? 280 : 'auto'\"\r\n          [p-no-border]=\"!hasMoreThanFourItems\"\r\n          [p-no-padding]=\"!hasMoreThanFourItems\"\r\n        >\r\n          <div [ngClass]=\"{ 'po-upload-progress-container-area po-pt-2 po-pl-1': hasMoreThanFourItems }\">\r\n            <po-progress\r\n              *ngFor=\"let file of currentFiles; trackBy: trackByFn\"\r\n              [p-info]=\"infoByUploadStatus[file.status]?.text(file.percent)\"\r\n              [p-info-icon]=\"infoByUploadStatus[file.status]?.icon\"\r\n              [p-status]=\"progressStatusByFileStatus[file.status]\"\r\n              [p-text]=\"file.displayName\"\r\n              [p-value]=\"file.percent\"\r\n              (p-cancel)=\"cancel(file)\"\r\n              (p-retry)=\"uploadFiles([file])\"\r\n            >\r\n            </po-progress>\r\n          </div>\r\n        </po-container>\r\n      </div>\r\n\r\n      <po-button\r\n        *ngIf=\"displaySendButton\"\r\n        class=\"po-upload-send-button\"\r\n        [class.po-mt-3]=\"hasMoreThanFourItems\"\r\n        p-kind=\"primary\"\r\n        [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\r\n        [p-label]=\"literals.startSending\"\r\n        (p-click)=\"uploadFiles(currentFiles)\"\r\n      ></po-button>\r\n    </div>\r\n  </div>\r\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+                ], template: "<po-field-container\n  [p-disabled]=\"isDisabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\">\n    <div class=\"po-upload\">\n      <input\n        #inputFile\n        class=\"po-upload-input\"\n        type=\"file\"\n        [accept]=\"allowedExtensions\"\n        [attr.name]=\"name\"\n        [id]=\"id\"\n        [disabled]=\"isDisabled\"\n        [multiple]=\"isMultiple\"\n        [required]=\"required\"\n        (change)=\"onFileChange($event)\"\n      />\n\n      <po-upload-drag-drop\n        *ngIf=\"displayDragDrop\"\n        [p-directory-compatible]=\"canHandleDirectory\"\n        [p-disabled]=\"isDisabled\"\n        [p-drag-drop-height]=\"dragDropHeight\"\n        [p-literals]=\"literals\"\n        (p-file-change)=\"onFileChangeDragDrop($event)\"\n        (p-select-files)=\"selectFiles()\"\n      >\n      </po-upload-drag-drop>\n\n      <po-button\n        *ngIf=\"!hideSelectButton && !displayDragDrop\"\n        #uploadButton\n        class=\"po-upload-button\"\n        for=\"file\"\n        [p-disabled]=\"isDisabled\"\n        [p-label]=\"selectFileButtonLabel\"\n        (p-click)=\"selectFiles()\"\n      >\n      </po-button>\n\n      <po-upload-file-restrictions\n        *ngIf=\"fileRestrictions && !hideRestrictionsInfo\"\n        class=\"po-upload-file-restrictions\"\n        [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n        [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n        [p-max-files]=\"maxFiles\"\n        [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n        [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n      >\n      </po-upload-file-restrictions>\n\n      <div *ngIf=\"currentFiles && currentFiles.length\" class=\"po-upload-progress-container\">\n        <po-container\n          [p-height]=\"hasMoreThanFourItems ? 280 : 'auto'\"\n          [p-no-border]=\"!hasMoreThanFourItems\"\n          [p-no-padding]=\"!hasMoreThanFourItems\"\n        >\n          <div [ngClass]=\"{ 'po-upload-progress-container-area po-pt-2 po-pl-1': hasMoreThanFourItems }\">\n            <po-progress\n              *ngFor=\"let file of currentFiles; trackBy: trackByFn\"\n              [p-info]=\"infoByUploadStatus[file.status]?.text(file.percent)\"\n              [p-info-icon]=\"infoByUploadStatus[file.status]?.icon\"\n              [p-status]=\"progressStatusByFileStatus[file.status]\"\n              [p-text]=\"file.displayName\"\n              [p-value]=\"file.percent\"\n              (p-cancel)=\"cancel(file)\"\n              (p-retry)=\"uploadFiles([file])\"\n            >\n            </po-progress>\n          </div>\n        </po-container>\n      </div>\n\n      <po-button\n        *ngIf=\"displaySendButton\"\n        class=\"po-upload-send-button\"\n        [class.po-mt-3]=\"hasMoreThanFourItems\"\n        p-kind=\"primary\"\n        [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n        [p-label]=\"literals.startSending\"\n        (p-click)=\"uploadFiles(currentFiles)\"\n      ></po-button>\n    </div>\n  </div>\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: PoUploadService }, { type: i0.Renderer2 }, { type: PoI18nPipe }, { type: PoNotificationService }, { type: i0.ChangeDetectorRef }, { type: PoLanguageService }]; }, { inputFile: [{
             type: ViewChild,
             args: ['inputFile', { read: ElementRef, static: true }]
@@ -35154,7 +35164,7 @@ class PoUrlComponent extends PoInputGeneric {
                         useExisting: forwardRef(() => PoUrlComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-id]=\"id\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\">\r\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\r\n      <po-icon\r\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\r\n        [class.po-field-icon-disabled]=\"disabled\"\r\n        [p-icon]=\"icon\"\r\n      ></po-icon>\r\n    </div>\r\n\r\n    <input\r\n      #inp\r\n      class=\"po-input\"\r\n      [attr.name]=\"name\"\r\n      [autocomplete]=\"autocomplete\"\r\n      [class.po-input-icon-left]=\"icon\"\r\n      [class.po-input-icon-right]=\"clean\"\r\n      [disabled]=\"disabled\"\r\n      [id]=\"id\"\r\n      [placeholder]=\"disabled ? '' : placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [required]=\"required\"\r\n      [type]=\"type\"\r\n      (blur)=\"eventOnBlur($event)\"\r\n      (click)=\"eventOnClick($event)\"\r\n      (focus)=\"eventOnFocus($event)\"\r\n      (input)=\"eventOnInput($event)\"\r\n    />\r\n\r\n    <div class=\"po-field-icon-container-right\">\r\n      <po-clean\r\n        class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\r\n        *ngIf=\"clean && !disabled && !readonly\"\r\n        [p-element-ref]=\"inputEl\"\r\n        (p-change-event)=\"clear($event)\"\r\n      >\r\n      </po-clean>\r\n    </div>\r\n  </div>\r\n\r\n  <po-field-container-bottom\r\n    [p-help]=\"help\"\r\n    [p-disabled]=\"disabled\"\r\n    [p-error-pattern]=\"getErrorPattern()\"\r\n  ></po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon\n        class=\"po-field-icon {{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        [class.po-field-icon-disabled]=\"disabled\"\n        [p-icon]=\"icon\"\n      ></po-icon>\n    </div>\n\n    <input\n      #inp\n      class=\"po-input\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [type]=\"type\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n      (focus)=\"eventOnFocus($event)\"\n      (input)=\"eventOnInput($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean\n        class=\"{{ disabled ? 'po-icon-input-disabled' : 'po-icon-input' }}\"\n        *ngIf=\"clean && !disabled && !readonly\"\n        [p-element-ref]=\"inputEl\"\n        (p-change-event)=\"clear($event)\"\n      >\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom\n    [p-help]=\"help\"\n    [p-disabled]=\"disabled\"\n    [p-error-pattern]=\"getErrorPattern()\"\n  ></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, null); })();
 const _c0$E = ["modal"];
@@ -35270,7 +35280,7 @@ class PoRichTextImageModalComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRichTextImageModalComponent, [{
         type: Component,
-        args: [{ selector: 'po-rich-text-image-modal', template: "<po-modal\r\n  #modal\r\n  p-hide-close\r\n  [p-primary-action]=\"modalConfirmAction\"\r\n  [p-secondary-action]=\"modalCancelAction\"\r\n  [p-title]=\"literals.insertImage\"\r\n>\r\n  <form #modalImageForm=\"ngForm\">\r\n    <div class=\"po-row\">\r\n      <!-- po-upload desabilita o drag drop caso n\u00E3o tenha valor atribuido para a propriedade p-url -->\r\n      <po-upload\r\n        #upload\r\n        class=\"po-md-12\"\r\n        name=\"upload\"\r\n        [(ngModel)]=\"uploadModel\"\r\n        p-drag-drop-height=\"160\"\r\n        p-hide-restrictions-info\r\n        p-hide-send-button\r\n        p-url=\"x\"\r\n        [p-drag-drop]=\"!modal.isHidden\"\r\n        [p-disabled]=\"isUrlValid\"\r\n        [p-restrictions]=\"uploadRestrictions\"\r\n      >\r\n      </po-upload>\r\n    </div>\r\n\r\n    <div class=\"po-row\">\r\n      <po-url\r\n        class=\"po-md-12 po-mt-3\"\r\n        name=\"url\"\r\n        [(ngModel)]=\"urlImage\"\r\n        [p-label]=\"literals.urlImage\"\r\n        [p-disabled]=\"isUploadValid\"\r\n      >\r\n      </po-url>\r\n    </div>\r\n  </form>\r\n</po-modal>\r\n" }]
+        args: [{ selector: 'po-rich-text-image-modal', template: "<po-modal\n  #modal\n  p-hide-close\n  [p-primary-action]=\"modalConfirmAction\"\n  [p-secondary-action]=\"modalCancelAction\"\n  [p-title]=\"literals.insertImage\"\n>\n  <form #modalImageForm=\"ngForm\">\n    <div class=\"po-row\">\n      <!-- po-upload desabilita o drag drop caso n\u00E3o tenha valor atribuido para a propriedade p-url -->\n      <po-upload\n        #upload\n        class=\"po-md-12\"\n        name=\"upload\"\n        [(ngModel)]=\"uploadModel\"\n        p-drag-drop-height=\"160\"\n        p-hide-restrictions-info\n        p-hide-send-button\n        p-url=\"x\"\n        [p-drag-drop]=\"!modal.isHidden\"\n        [p-disabled]=\"isUrlValid\"\n        [p-restrictions]=\"uploadRestrictions\"\n      >\n      </po-upload>\n    </div>\n\n    <div class=\"po-row\">\n      <po-url\n        class=\"po-md-12 po-mt-3\"\n        name=\"url\"\n        [(ngModel)]=\"urlImage\"\n        [p-label]=\"literals.urlImage\"\n        [p-disabled]=\"isUploadValid\"\n      >\n      </po-url>\n    </div>\n  </form>\n</po-modal>\n" }]
     }], function () { return [{ type: PoLanguageService }]; }, { modal: [{
             type: ViewChild,
             args: ['modal', { static: true }]
@@ -35453,7 +35463,7 @@ class PoRichTextLinkModalComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRichTextLinkModalComponent, [{
         type: Component,
-        args: [{ selector: 'po-rich-text-link-modal', template: "<po-modal\r\n  #modal\r\n  p-hide-close\r\n  [p-primary-action]=\"modalConfirmAction\"\r\n  [p-secondary-action]=\"modalCancelAction\"\r\n  [p-title]=\"linkConfirmAction()\"\r\n>\r\n  <form #modalLinkForm=\"ngForm\">\r\n    <div class=\"po-row\">\r\n      <po-input\r\n        class=\"po-md-12 po-mb-2\"\r\n        name=\"urlLinkText\"\r\n        [(ngModel)]=\"urlLinkText\"\r\n        p-optional\r\n        [p-label]=\"literals.linkTextLabel\"\r\n        [p-placeholder]=\"literals.linkTextLabel\"\r\n      >\r\n      </po-input>\r\n\r\n      <po-url\r\n        class=\"po-md-12\"\r\n        name=\"urlLink\"\r\n        [(ngModel)]=\"urlLink\"\r\n        p-label=\"Link\"\r\n        p-required\r\n        [p-help]=\"literals.linkUrlTextHelper\"\r\n        [p-placeholder]=\"literals.linkUrlTextPlaceholder\"\r\n        (p-change-model)=\"formModelValidate()\"\r\n      >\r\n      </po-url>\r\n    </div>\r\n  </form>\r\n</po-modal>\r\n" }]
+        args: [{ selector: 'po-rich-text-link-modal', template: "<po-modal\n  #modal\n  p-hide-close\n  [p-primary-action]=\"modalConfirmAction\"\n  [p-secondary-action]=\"modalCancelAction\"\n  [p-title]=\"linkConfirmAction()\"\n>\n  <form #modalLinkForm=\"ngForm\">\n    <div class=\"po-row\">\n      <po-input\n        class=\"po-md-12 po-mb-2\"\n        name=\"urlLinkText\"\n        [(ngModel)]=\"urlLinkText\"\n        p-optional\n        [p-label]=\"literals.linkTextLabel\"\n        [p-placeholder]=\"literals.linkTextLabel\"\n      >\n      </po-input>\n\n      <po-url\n        class=\"po-md-12\"\n        name=\"urlLink\"\n        [(ngModel)]=\"urlLink\"\n        p-label=\"Link\"\n        p-required\n        [p-help]=\"literals.linkUrlTextHelper\"\n        [p-placeholder]=\"literals.linkUrlTextPlaceholder\"\n        (p-change-model)=\"formModelValidate()\"\n      >\n      </po-url>\n    </div>\n  </form>\n</po-modal>\n" }]
     }], function () { return [{ type: PoLanguageService }]; }, { modal: [{
             type: ViewChild,
             args: ['modal', { static: true }]
@@ -35704,7 +35714,7 @@ class PoRichTextToolbarComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRichTextToolbarComponent, [{
         type: Component,
-        args: [{ selector: 'po-rich-text-toolbar', template: "<div class=\"po-rich-text-toolbar\" #toolbarElement>\r\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"format\">\r\n    <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\"> </po-button-group>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isInternetExplorer\" class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"color\">\r\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\r\n      <button\r\n        class=\"po-button po-button-default po-rich-text-toolbar-color-picker-button\"\r\n        [disabled]=\"readonly\"\r\n        [p-tooltip]=\"literals.textColor\"\r\n        [attr.aria-label]=\"literals.textColor\"\r\n      >\r\n        <input\r\n          #colorPickerInput\r\n          class=\"po-rich-text-toolbar-color-picker-input\"\r\n          type=\"color\"\r\n          [disabled]=\"readonly\"\r\n          (change)=\"changeTextColor($event.target.value)\"\r\n          [attr.aria-label]=\"literals.textColor\"\r\n        />\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!disabledTextAlign\" class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"align\">\r\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\"> </po-button-group>\r\n  </div>\r\n\r\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"list\">\r\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\"> </po-button-group>\r\n  </div>\r\n\r\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"link\">\r\n    <po-button-group [p-buttons]=\"linkButtons\"> </po-button-group>\r\n  </div>\r\n\r\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"media\">\r\n    <po-button-group [p-buttons]=\"mediaButtons\"> </po-button-group>\r\n  </div>\r\n</div>\r\n\r\n<po-rich-text-image-modal #richTextImageModal (p-command)=\"emitCommand($event)\"> </po-rich-text-image-modal>\r\n\r\n<po-rich-text-link-modal\r\n  #richTextLinkModal\r\n  (p-command)=\"emitCommand($event)\"\r\n  (p-link-editing)=\"emitLinkEditing($event)\"\r\n>\r\n</po-rich-text-link-modal>\r\n" }]
+        args: [{ selector: 'po-rich-text-toolbar', template: "<div class=\"po-rich-text-toolbar\" #toolbarElement>\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"format\">\n    <po-button-group p-toggle=\"multiple\" [p-buttons]=\"formatButtons\"> </po-button-group>\n  </div>\n\n  <div *ngIf=\"!isInternetExplorer\" class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"color\">\n    <div class=\"po-rich-text-toolbar-color-picker-container\">\n      <button\n        class=\"po-button po-button-default po-rich-text-toolbar-color-picker-button\"\n        [disabled]=\"readonly\"\n        [p-tooltip]=\"literals.textColor\"\n        [attr.aria-label]=\"literals.textColor\"\n      >\n        <input\n          #colorPickerInput\n          class=\"po-rich-text-toolbar-color-picker-input\"\n          type=\"color\"\n          [disabled]=\"readonly\"\n          (change)=\"changeTextColor($event.target.value)\"\n          [attr.aria-label]=\"literals.textColor\"\n        />\n      </button>\n    </div>\n  </div>\n\n  <div *ngIf=\"!disabledTextAlign\" class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"align\">\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"alignButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"list\">\n    <po-button-group p-toggle=\"single\" [p-buttons]=\"listButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"link\">\n    <po-button-group [p-buttons]=\"linkButtons\"> </po-button-group>\n  </div>\n\n  <div class=\"po-rich-text-toolbar-button-align\" data-rich-text-toolbar=\"media\">\n    <po-button-group [p-buttons]=\"mediaButtons\"> </po-button-group>\n  </div>\n</div>\n\n<po-rich-text-image-modal #richTextImageModal (p-command)=\"emitCommand($event)\"> </po-rich-text-image-modal>\n\n<po-rich-text-link-modal\n  #richTextLinkModal\n  (p-command)=\"emitCommand($event)\"\n  (p-link-editing)=\"emitLinkEditing($event)\"\n>\n</po-rich-text-link-modal>\n" }]
     }], function () { return [{ type: PoLanguageService }]; }, { colorPickerInput: [{
             type: ViewChild,
             args: ['colorPickerInput', { read: ElementRef }]
@@ -35890,7 +35900,7 @@ class PoRichTextComponent extends PoRichTextBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRichTextComponent, [{
         type: Component,
-        args: [{ selector: 'po-rich-text', providers: providers, changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container [p-label]=\"label\" [p-optional]=\"optional\" [p-required]=\"required\" [p-show-required]=\"showRequired\">\r\n  <div class=\"po-field-container-content\">\r\n    <po-rich-text-body\r\n      #richTextBody\r\n      [p-height]=\"height\"\r\n      [p-label]=\"label\"\r\n      [p-model-value]=\"value\"\r\n      [p-placeholder]=\"placeholder\"\r\n      [p-readonly]=\"readonly\"\r\n      (p-change)=\"onChangeValue($event)\"\r\n      (p-commands)=\"richTextToolbar.setButtonsStates($event)\"\r\n      (p-selected-link)=\"richTextToolbar.selectedLink($event)\"\r\n      (p-shortcut-command)=\"richTextToolbar.shortcutTrigger()\"\r\n      (p-value)=\"updateValue($event)\"\r\n      (p-blur)=\"onBlur()\"\r\n    >\r\n    </po-rich-text-body>\r\n\r\n    <po-rich-text-toolbar\r\n      #richTextToolbar\r\n      [p-readonly]=\"readonly\"\r\n      [p-disabled-text-align]=\"disabledTextAlign\"\r\n      (p-link-editing)=\"richTextBody.linkEditing($event)\"\r\n      (p-command)=\"richTextBody.executeCommand($event)\"\r\n    >\r\n    </po-rich-text-toolbar>\r\n  </div>\r\n\r\n  <po-field-container-bottom [p-help]=\"help\" [p-error-pattern]=\"errorMsg\"></po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+        args: [{ selector: 'po-rich-text', providers: providers, changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container [p-label]=\"label\" [p-optional]=\"optional\" [p-required]=\"required\" [p-show-required]=\"showRequired\">\n  <div class=\"po-field-container-content\">\n    <po-rich-text-body\n      #richTextBody\n      [p-height]=\"height\"\n      [p-label]=\"label\"\n      [p-model-value]=\"value\"\n      [p-placeholder]=\"placeholder\"\n      [p-readonly]=\"readonly\"\n      (p-change)=\"onChangeValue($event)\"\n      (p-commands)=\"richTextToolbar.setButtonsStates($event)\"\n      (p-selected-link)=\"richTextToolbar.selectedLink($event)\"\n      (p-shortcut-command)=\"richTextToolbar.shortcutTrigger()\"\n      (p-value)=\"updateValue($event)\"\n      (p-blur)=\"onBlur()\"\n    >\n    </po-rich-text-body>\n\n    <po-rich-text-toolbar\n      #richTextToolbar\n      [p-readonly]=\"readonly\"\n      [p-disabled-text-align]=\"disabledTextAlign\"\n      (p-link-editing)=\"richTextBody.linkEditing($event)\"\n      (p-command)=\"richTextBody.executeCommand($event)\"\n    >\n    </po-rich-text-toolbar>\n  </div>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-error-pattern]=\"errorMsg\"></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: PoRichTextService }]; }, { bodyElement: [{
             type: ViewChild,
             args: [PoRichTextBodyComponent, { static: true }]
@@ -36416,7 +36426,7 @@ class PoSelectComponent extends PoFieldValidateModel {
                         useExisting: forwardRef(() => PoSelectComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-id]=\"id\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\">\r\n    <select\r\n      #select\r\n      class=\"po-select\"\r\n      [attr.name]=\"name\"\r\n      [class.po-select-placeholder]=\"!selectedValue?.toString() && !!placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [id]=\"id\"\r\n      [required]=\"required\"\r\n      (change)=\"onSelectChange($event.target.value)\"\r\n    >\r\n      <option\r\n        *ngIf=\"!selectedValue?.toString() || !!placeholder\"\r\n        [disabled]=\"!!placeholder\"\r\n        [hidden]=\"!selectedValue?.toString() && !placeholder\"\r\n        [selected]=\"!selectedValue?.toString()\"\r\n        [value]=\"placeholder ?? ''\"\r\n      >\r\n        {{ placeholder }}\r\n      </option>\r\n      <!-- necess\u00E1rio manter essa option para uso do select com ReactiveForms -->\r\n      <option [hidden]=\"true\">\r\n        {{ displayValue }}\r\n      </option>\r\n      <ng-container *ngIf=\"optionWithoutGroup.length > 0\">\r\n        <option *ngFor=\"let item of optionWithoutGroup\" [disabled]=\"readonly\" [value]=\"item?.[this.fieldValue]\">\r\n          {{ item?.[this.fieldLabel] }}\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"listGroupOptions.length > 0\">\r\n        <ng-container *ngFor=\"let item of listGroupOptions\">\r\n          <optgroup *ngIf=\"item?.options.length > 0\" label=\"{{ item?.label }}\" [disabled]=\"readonly\">\r\n            <option *ngFor=\"let subItem of item.options\" [value]=\"subItem?.[this.fieldValue]\" [disabled]=\"readonly\">\r\n              {{ subItem?.[this.fieldLabel]  }}\r\n            </option>\r\n          </optgroup>\r\n        </ng-container>\r\n      </ng-container>\r\n    </select>\r\n  </div>\r\n\r\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\">\n    <select\n      #select\n      class=\"po-select\"\n      [attr.name]=\"name\"\n      [class.po-select-placeholder]=\"!selectedValue?.toString() && !!placeholder\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [required]=\"required\"\n      (change)=\"onSelectChange($event.target.value)\"\n    >\n      <option\n        *ngIf=\"!selectedValue?.toString() || !!placeholder\"\n        [disabled]=\"!!placeholder\"\n        [hidden]=\"!selectedValue?.toString() && !placeholder\"\n        [selected]=\"!selectedValue?.toString()\"\n        [value]=\"placeholder ?? ''\"\n      >\n        {{ placeholder }}\n      </option>\n      <!-- necess\u00E1rio manter essa option para uso do select com ReactiveForms -->\n      <option [hidden]=\"true\">\n        {{ displayValue }}\n      </option>\n      <ng-container *ngIf=\"optionWithoutGroup.length > 0\">\n        <option *ngFor=\"let item of optionWithoutGroup\" [disabled]=\"readonly\" [value]=\"item?.[this.fieldValue]\">\n          {{ item?.[this.fieldLabel] }}\n        </option>\n      </ng-container>\n      <ng-container *ngIf=\"listGroupOptions.length > 0\">\n        <ng-container *ngFor=\"let item of listGroupOptions\">\n          <optgroup *ngIf=\"item?.options.length > 0\" label=\"{{ item?.label }}\" [disabled]=\"readonly\">\n            <option *ngFor=\"let subItem of item.options\" [value]=\"subItem?.[this.fieldValue]\" [disabled]=\"readonly\">\n              {{ subItem?.[this.fieldLabel]  }}\n            </option>\n          </optgroup>\n        </ng-container>\n      </ng-container>\n    </select>\n  </div>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, { selectElement: [{
             type: ViewChild,
             args: ['select', { read: ElementRef, static: true }]
@@ -36922,7 +36932,7 @@ class PoTextareaComponent extends PoTextareaBaseComponent {
                         useExisting: forwardRef(() => PoTextareaComponent),
                         multi: true
                     }
-                ], template: "<po-field-container\r\n  [p-disabled]=\"disabled\"\r\n  [p-id]=\"id\"\r\n  [p-label]=\"label\"\r\n  [p-optional]=\"optional\"\r\n  [p-required]=\"required\"\r\n  [p-show-required]=\"showRequired\"\r\n>\r\n  <div class=\"po-field-container-content\">\r\n    <textarea\r\n      #inp\r\n      class=\"po-textarea\"\r\n      (blur)=\"eventOnBlur()\"\r\n      (focus)=\"eventOnFocus()\"\r\n      (input)=\"eventOnInput($event)\"\r\n      [attr.name]=\"name\"\r\n      [disabled]=\"disabled\"\r\n      [id]=\"id\"\r\n      [placeholder]=\"disabled ? '' : placeholder\"\r\n      [readonly]=\"readonly\"\r\n      [required]=\"required\"\r\n      [rows]=\"rows\"\r\n    ></textarea>\r\n  </div>\r\n\r\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\r\n</po-field-container>\r\n" }]
+                ], template: "<po-field-container\n  [p-disabled]=\"disabled\"\n  [p-id]=\"id\"\n  [p-label]=\"label\"\n  [p-optional]=\"optional\"\n  [p-required]=\"required\"\n  [p-show-required]=\"showRequired\"\n>\n  <div class=\"po-field-container-content\">\n    <textarea\n      #inp\n      class=\"po-textarea\"\n      (blur)=\"eventOnBlur()\"\n      (focus)=\"eventOnFocus()\"\n      (input)=\"eventOnInput($event)\"\n      [attr.name]=\"name\"\n      [disabled]=\"disabled\"\n      [id]=\"id\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [rows]=\"rows\"\n    ></textarea>\n  </div>\n\n  <po-field-container-bottom [p-help]=\"help\" [p-disabled]=\"disabled\"></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { inputEl: [{
             type: ViewChild,
             args: ['inp', { read: ElementRef, static: true }]
@@ -37075,7 +37085,7 @@ class PoSearchComponent extends PoSearchBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoSearchComponent, [{
         type: Component,
-        args: [{ selector: 'po-search', template: "<div class=\"po-search\">\r\n  <div class=\"po-search-icon\">\r\n    <po-icon *ngIf=\"!loading\" p-icon=\"po-icon-search\"></po-icon>\r\n    <po-loading-icon *ngIf=\"loading\"></po-loading-icon>\r\n  </div>\r\n\r\n  <input\r\n    #poSearchInput\r\n    type=\"text\"\r\n    [disabled]=\"disabled\"\r\n    [placeholder]=\"literals.search\"\r\n    (blur)=\"onBlur()\"\r\n    (focus)=\"onFocus()\"\r\n    (input)=\"onSearchChange($event.target.value)\"\r\n  />\r\n\r\n  <div *ngIf=\"!!poSearchInput.value && !disabled\" class=\"po-search-clean\" [tabindex]=\"!disabled ? 0 : -1\">\r\n    <po-clean [p-element-ref]=\"poSearchInput\" (p-change-event)=\"clearSearch()\"></po-clean>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-search', template: "<div class=\"po-search\">\n  <div class=\"po-search-icon\">\n    <po-icon *ngIf=\"!loading\" p-icon=\"po-icon-search\"></po-icon>\n    <po-loading-icon *ngIf=\"loading\"></po-loading-icon>\n  </div>\n\n  <input\n    #poSearchInput\n    type=\"text\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"literals.search\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n    (input)=\"onSearchChange($event.target.value)\"\n  />\n\n  <div *ngIf=\"!!poSearchInput.value && !disabled\" class=\"po-search-clean\" [tabindex]=\"!disabled ? 0 : -1\">\n    <po-clean [p-element-ref]=\"poSearchInput\" (p-change-event)=\"clearSearch()\"></po-clean>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: PoLanguageService }, { type: i0.Renderer2 }]; }, { poSearchInput: [{
             type: ViewChild,
             args: ['poSearchInput', { read: ElementRef, static: true }]
@@ -37387,7 +37397,7 @@ class PoMultiselectDropdownComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectDropdownComponent, [{
         type: Component,
-        args: [{ selector: 'po-multiselect-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #container class=\"po-multiselect-container\" [hidden]=\"!show\">\r\n  <div [scrollTop]=\"scrollTop\" #divElement>\r\n    <ng-container>\r\n      <po-listbox\r\n        #listbox\r\n        p-type=\"check\"\r\n        [p-items]=\"visibleOptions\"\r\n        [p-selected-options]=\"selectedOptions\"\r\n        [p-checkboxAllValue]=\"getStateSelectAll()\"\r\n        [p-field-value]=\"fieldValue\"\r\n        [p-field-value-search]=\"fieldValue\"\r\n        [p-field-label]=\"fieldLabel\"\r\n        [p-literal-search]=\"literals\"\r\n        [p-literals]=\"literals\"\r\n        [p-is-searching]=\"isServerSearching\"\r\n        [p-hide-search]=\"hideSearch\"\r\n        [p-hide-select-all]=\"hideSelectAll\"\r\n        [p-template]=\"multiselectTemplate\"\r\n        [p-placeholder-search]=\"placeholderSearch\"\r\n        (p-change)=\"clickItem($event)\"\r\n        (p-change-all)=\"onClickSelectAll()\"\r\n        (p-change-search)=\"callChangeSearch($event)\"\r\n      >\r\n      </po-listbox>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-multiselect-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #container class=\"po-multiselect-container\" [hidden]=\"!show\">\n  <div [scrollTop]=\"scrollTop\" #divElement>\n    <ng-container>\n      <po-listbox\n        #listbox\n        p-type=\"check\"\n        [p-items]=\"visibleOptions\"\n        [p-selected-options]=\"selectedOptions\"\n        [p-checkboxAllValue]=\"getStateSelectAll()\"\n        [p-field-value]=\"fieldValue\"\n        [p-field-value-search]=\"fieldValue\"\n        [p-field-label]=\"fieldLabel\"\n        [p-literal-search]=\"literals\"\n        [p-literals]=\"literals\"\n        [p-is-searching]=\"isServerSearching\"\n        [p-hide-search]=\"hideSearch\"\n        [p-hide-select-all]=\"hideSelectAll\"\n        [p-template]=\"multiselectTemplate\"\n        [p-placeholder-search]=\"placeholderSearch\"\n        (p-change)=\"clickItem($event)\"\n        (p-change-all)=\"onClickSelectAll()\"\n        (p-change-search)=\"callChangeSearch($event)\"\n      >\n      </po-listbox>\n    </ng-container>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { isServerSearching: [{
             type: Input,
             args: ['p-searching']
@@ -37511,7 +37521,7 @@ class PoMultiselectSearchComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectSearchComponent, [{
         type: Component,
-        args: [{ selector: 'po-multiselect-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-field-container-content po-multiselect-container-search\">\r\n  <div class=\"po-field-icon-container-left\">\r\n    <span class=\"po-icon po-icon-search po-field-icon po-icon-input\"></span>\r\n  </div>\r\n\r\n  <input\r\n    #inputElement\r\n    class=\"po-input po-input-icon-left po-multiselect-search-input\"\r\n    type=\"text\"\r\n    [placeholder]=\"placeholder\"\r\n    (keyup)=\"onChange($event)\"\r\n  />\r\n</div>\r\n" }]
+        args: [{ selector: 'po-multiselect-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-field-container-content po-multiselect-container-search\">\n  <div class=\"po-field-icon-container-left\">\n    <span class=\"po-icon po-icon-search po-field-icon po-icon-input\"></span>\n  </div>\n\n  <input\n    #inputElement\n    class=\"po-input po-input-icon-left po-multiselect-search-input\"\n    type=\"text\"\n    [placeholder]=\"placeholder\"\n    (keyup)=\"onChange($event)\"\n  />\n</div>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { inputElement: [{
             type: ViewChild,
             args: ['inputElement', { read: ElementRef, static: true }]
@@ -37547,6 +37557,7 @@ class PoFieldModule {
             FormsModule.withConfig({
                 callSetDisabledState: 'whenDisabledForLegacyCode'
             }),
+            OverlayModule,
             PoButtonGroupModule,
             PoButtonModule,
             PoCleanModule,
@@ -37588,6 +37599,7 @@ class PoFieldModule {
                     FormsModule.withConfig({
                         callSetDisabledState: 'whenDisabledForLegacyCode'
                     }),
+                    OverlayModule,
                     PoButtonGroupModule,
                     PoButtonModule,
                     PoCleanModule,
@@ -37704,7 +37716,8 @@ class PoFieldModule {
         PoUploadDragDropAreaComponent,
         PoUploadFileRestrictionsComponent,
         PoUrlComponent], imports: [CommonModule,
-        FormsModule, i2$1.FormsModule, PoButtonGroupModule,
+        FormsModule, i2$1.FormsModule, OverlayModule,
+        PoButtonGroupModule,
         PoButtonModule,
         PoCleanModule,
         PoCalendarModule,
@@ -37949,7 +37962,7 @@ class PoInfoComponent extends PoInfoBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoInfoComponent, [{
         type: Component,
-        args: [{ selector: 'po-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-info\" [class.po-row]=\"orientation === poInfoOrientation.Horizontal && labelSize\">\r\n  <div\r\n    class=\"po-info-container-title\"\r\n    [ngClass]=\"labelSize && orientation === poInfoOrientation.Horizontal ? 'po-sm-' + labelSize : ''\"\r\n    [class.po-info-label-horizontal]=\"orientation === poInfoOrientation.Horizontal\"\r\n    [class.po-text-nowrap]=\"orientation === poInfoOrientation.Horizontal && !labelSize\"\r\n  >\r\n    <span class=\"po-info-label\">\r\n      {{ orientation === poInfoOrientation.Horizontal ? label + ':' : label }}\r\n    </span>\r\n  </div>\r\n\r\n  <div\r\n    [ngClass]=\"labelSize && orientation === poInfoOrientation.Horizontal ? 'po-sm-' + (12 - labelSize) : ''\"\r\n    [class.po-info-container-content]=\"orientation !== poInfoOrientation.Horizontal\"\r\n    [class.po-info-value-horizontal]=\"orientation === poInfoOrientation.Horizontal\"\r\n  >\r\n    <ng-container *ngIf=\"url; then infoLink; else infoValue\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #infoLink>\r\n  <ng-container *ngIf=\"isExternalLink; then externalLink; else internalLink\"> </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #infoValue>\r\n  <span class=\"po-info-value\">{{ value }}</span>\r\n</ng-template>\r\n\r\n<ng-template #externalLink>\r\n  <a class=\"po-info-value po-info-link\" [href]=\"url\" target=\"_blank\">{{ value }}</a>\r\n</ng-template>\r\n\r\n<ng-template #internalLink>\r\n  <a class=\"po-info-value po-info-link\" [routerLink]=\"url\">{{ value }}</a>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-info\" [class.po-row]=\"orientation === poInfoOrientation.Horizontal && labelSize\">\n  <div\n    class=\"po-info-container-title\"\n    [ngClass]=\"labelSize && orientation === poInfoOrientation.Horizontal ? 'po-sm-' + labelSize : ''\"\n    [class.po-info-label-horizontal]=\"orientation === poInfoOrientation.Horizontal\"\n    [class.po-text-nowrap]=\"orientation === poInfoOrientation.Horizontal && !labelSize\"\n  >\n    <span class=\"po-info-label\">\n      {{ orientation === poInfoOrientation.Horizontal ? label + ':' : label }}\n    </span>\n  </div>\n\n  <div\n    [ngClass]=\"labelSize && orientation === poInfoOrientation.Horizontal ? 'po-sm-' + (12 - labelSize) : ''\"\n    [class.po-info-container-content]=\"orientation !== poInfoOrientation.Horizontal\"\n    [class.po-info-value-horizontal]=\"orientation === poInfoOrientation.Horizontal\"\n  >\n    <ng-container *ngIf=\"url; then infoLink; else infoValue\"></ng-container>\n  </div>\n</div>\n\n<ng-template #infoLink>\n  <ng-container *ngIf=\"isExternalLink; then externalLink; else internalLink\"> </ng-container>\n</ng-template>\n\n<ng-template #infoValue>\n  <span class=\"po-info-value\">{{ value }}</span>\n</ng-template>\n\n<ng-template #externalLink>\n  <a class=\"po-info-value po-info-link\" [href]=\"url\" target=\"_blank\">{{ value }}</a>\n</ng-template>\n\n<ng-template #internalLink>\n  <a class=\"po-info-value po-info-link\" [routerLink]=\"url\">{{ value }}</a>\n</ng-template>\n" }]
     }], null, null); })();
 /**
@@ -38628,7 +38641,7 @@ class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDynamicFormFieldsComponent, [{
         type: Component,
-        args: [{ selector: 'po-dynamic-form-fields', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [PoDynamicFormValidationService], template: "<div class=\"po-row\" *ngIf=\"visibleFields && visibleFields.length > 0\">\r\n  <ng-container *ngFor=\"let field of visibleFields; trackBy: trackBy\">\r\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\r\n\r\n    <po-datepicker\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'datepicker')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-clean]=\"field.clean\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-error-pattern]=\"field.errorMessage\"\r\n      [p-auto-focus]=\"field.focus\"\r\n      [p-format]=\"field.format\"\r\n      [p-help]=\"field.help\"\r\n      [p-iso-format]=\"field.isoFormat\"\r\n      [p-label]=\"field.label\"\r\n      [p-locale]=\"field.locale\"\r\n      [p-max-date]=\"field.maxValue\"\r\n      [p-min-date]=\"field.minValue\"\r\n      [p-no-autocomplete]=\"field.noAutocomplete\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-readonly]=\"field.readonly\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      (p-change)=\"onChangeField(field)\"\r\n      [p-placeholder]=\"field.placeholder\"\r\n    >\r\n    </po-datepicker>\r\n\r\n    <po-datepicker-range\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'datepickerrange')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-clean]=\"field.clean\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-auto-focus]=\"field.focus\"\r\n      [p-help]=\"field.help\"\r\n      [p-label]=\"field.label\"\r\n      [p-literals]=\"field.literals\"\r\n      [p-max-date]=\"field.maxValue\"\r\n      [p-min-date]=\"field.minValue\"\r\n      [p-no-autocomplete]=\"field.noAutocomplete\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-readonly]=\"field.readonly\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      (p-change)=\"onChangeField(field)\"\r\n    >\r\n    </po-datepicker-range>\r\n\r\n    <po-input\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'input')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-clean]=\"field.clean\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-error-pattern]=\"field.errorMessage\"\r\n      [p-auto-focus]=\"field.focus\"\r\n      [p-help]=\"field.help\"\r\n      [p-label]=\"field.label\"\r\n      [p-mask-format-model]=\"field.maskFormatModel\"\r\n      [p-mask]=\"field.mask\"\r\n      [p-maxlength]=\"field.maxLength\"\r\n      [p-minlength]=\"field.minLength\"\r\n      [p-no-autocomplete]=\"field.noAutocomplete\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-pattern]=\"field.pattern\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      (p-change)=\"onChangeField(field)\"\r\n      (p-change-model)=\"onChangeFieldModel(field)\"\r\n      [p-icon]=\"field.icon\"\r\n      [p-placeholder]=\"field.placeholder\"\r\n      [p-readonly]=\"field.readonly\"\r\n    >\r\n    </po-input>\r\n\r\n    <po-number\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'number')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-clean]=\"field.clean\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-error-pattern]=\"field.errorMessage\"\r\n      [p-auto-focus]=\"field.focus\"\r\n      [p-help]=\"field.help\"\r\n      [p-label]=\"field.label\"\r\n      [p-min]=\"field.minValue\"\r\n      [p-max]=\"field.maxValue\"\r\n      [p-maxlength]=\"field.maxLength\"\r\n      [p-minlength]=\"field.minLength\"\r\n      [p-no-autocomplete]=\"field.noAutocomplete\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-step]=\"field.step\"\r\n      [p-readonly]=\"field.readonly\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      (p-change)=\"onChangeField(field)\"\r\n      (p-change-model)=\"onChangeFieldModel(field)\"\r\n      [p-icon]=\"field.icon\"\r\n      [p-placeholder]=\"field.placeholder\"\r\n    >\r\n    </po-number>\r\n\r\n    <po-decimal\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'decimal')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-clean]=\"field.clean\"\r\n      [p-error-pattern]=\"field.errorMessage\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-decimals-length]=\"field.decimalsLength\"\r\n      [p-thousand-maxlength]=\"field.thousandMaxlength\"\r\n      [p-icon]=\"field.icon\"\r\n      [p-auto-focus]=\"field.focus\"\r\n      [p-help]=\"field.help\"\r\n      [p-label]=\"field.label\"\r\n      [p-locale]=\"field.locale\"\r\n      [p-min]=\"field.minValue\"\r\n      [p-max]=\"field.maxValue\"\r\n      [p-maxlength]=\"field.maxLength\"\r\n      [p-minlength]=\"field.minLength\"\r\n      [p-no-autocomplete]=\"field.noAutocomplete\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-readonly]=\"field.readonly\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      (p-change)=\"onChangeField(field)\"\r\n      (p-change-model)=\"onChangeFieldModel(field)\"\r\n      [p-placeholder]=\"field.placeholder\"\r\n    >\r\n    </po-decimal>\r\n\r\n    <po-select\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'select')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-field-label]=\"field.fieldLabel\"\r\n      [p-field-value]=\"field.fieldValue\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-help]=\"field.help\"\r\n      [p-label]=\"field.label\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-options]=\"field.options\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      (p-change)=\"onChangeField(field)\"\r\n      [p-placeholder]=\"field.placeholder\"\r\n      [p-readonly]=\"field.readonly\"\r\n    >\r\n    </po-select>\r\n\r\n    <po-radio-group\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'radioGroup')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-columns]=\"field.columns || 3\"\r\n      [p-auto-focus]=\"field.focus\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-help]=\"field.help\"\r\n      [p-label]=\"field.label\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-options]=\"field.options\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      (p-change)=\"onChangeField(field)\"\r\n    >\r\n    </po-radio-group>\r\n\r\n    <po-switch\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'switch')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-format-model]=\"field.formatModel\"\r\n      [p-help]=\"field.help\"\r\n      [p-label]=\"field.label\"\r\n      [p-label-off]=\"field.booleanFalse\"\r\n      [p-label-on]=\"field.booleanTrue\"\r\n      [p-label-position]=\"field.labelPosition\"\r\n      (p-change)=\"onChangeField(field)\"\r\n    >\r\n    </po-switch>\r\n\r\n    <po-combo\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'combo')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      p-emit-object-value\r\n      [p-auto-focus]=\"field.focus\"\r\n      [p-clean]=\"field.clean\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-field-label]=\"field.fieldLabel\"\r\n      [p-field-value]=\"field.fieldValue\"\r\n      [p-filter-params]=\"field.params\"\r\n      [p-filter-service]=\"field.optionsService\"\r\n      [p-help]=\"field.help\"\r\n      [p-infinite-scroll]=\"field.infiniteScroll\"\r\n      [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\r\n      [p-label]=\"field.label\"\r\n      [p-literals]=\"field.literals\"\r\n      [p-options]=\"field.options\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-sort]=\"field.sort\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      (p-change)=\"onChangeField(field, $event)\"\r\n      [p-icon]=\"field.icon\"\r\n      [p-placeholder]=\"field.placeholder\"\r\n      [p-filter-minlength]=\"field.filterMinlength\"\r\n      [p-filter-mode]=\"field.filterMode\"\r\n      [p-disabled-init-filter]=\"field.disabledInitFilter\"\r\n      [p-disabled-tab-filter]=\"field.disabledTabFilter\"\r\n      [p-debounce-time]=\"field.debounceTime\"\r\n      [p-change-on-enter]=\"field.changeOnEnter\"\r\n    >\r\n    </po-combo>\r\n\r\n    <po-lookup\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'lookup')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      p-field-label=\"label\"\r\n      p-field-value=\"value\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-clean]=\"field.clean\"\r\n      [p-columns]=\"field.columns\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-field-label]=\"field.fieldLabel || 'label'\"\r\n      [p-field-value]=\"field.fieldValue || 'value'\"\r\n      [p-filter-params]=\"field.params\"\r\n      [p-filter-service]=\"field.searchService\"\r\n      [p-auto-focus]=\"field.focus\"\r\n      [p-auto-height]=\"field.autoHeight\"\r\n      [p-help]=\"field.help\"\r\n      [p-field-format]=\"field.format\"\r\n      [p-infinite-scroll]=\"field.infiniteScroll\"\r\n      [p-label]=\"field.label\"\r\n      [p-literals]=\"field.literals\"\r\n      [p-multiple]=\"field.multiple\"\r\n      [p-no-autocomplete]=\"field.noAutocomplete\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      (p-change)=\"onChangeField(field)\"\r\n      [p-placeholder]=\"field.placeholder\"\r\n      [p-advanced-filters]=\"field.advancedFilters\"\r\n      (p-change-visible-columns)=\"field.changeVisibleColumns?.($event)\"\r\n      (p-restore-column-manager)=\"field.columnRestoreManager?.($event)\"\r\n    >\r\n    </po-lookup>\r\n\r\n    <po-checkbox-group\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'checkboxGroup')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-columns]=\"field.columns || 3\"\r\n      [p-auto-focus]=\"field.focus\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-help]=\"field.help\"\r\n      [p-label]=\"field.label\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-options]=\"field.options\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      (p-change)=\"onChangeField(field)\"\r\n    >\r\n    </po-checkbox-group>\r\n\r\n    <po-multiselect\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'multiselect')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-auto-focus]=\"field.focus\"\r\n      [p-auto-height]=\"field.autoHeight\"\r\n      [p-help]=\"field.help\"\r\n      [p-label]=\"field.label\"\r\n      [p-literals]=\"field.literals\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-options]=\"field.options\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      (p-change)=\"onChangeField(field)\"\r\n      [p-placeholder]=\"field.placeholder\"\r\n      [p-field-label]=\"field.fieldLabel\"\r\n      [p-field-value]=\"field.fieldValue\"\r\n      [p-filter-service]=\"field.optionsService\"\r\n      [p-filter-mode]=\"field.filterMode\"\r\n      [p-debounce-time]=\"field.debounceTime\"\r\n      [p-sort]=\"field.sort\"\r\n      [p-placeholder-search]=\"field.placeholderSearch\"\r\n      [p-hide-search]=\"field.hideSearch\"\r\n      [p-hide-select-all]=\"field.hideSelectAll\"\r\n    >\r\n    </po-multiselect>\r\n\r\n    <po-textarea\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'textarea')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-auto-focus]=\"field.focus\"\r\n      [p-help]=\"field.help\"\r\n      [p-label]=\"field.label\"\r\n      [p-maxlength]=\"field.maxLength\"\r\n      [p-minlength]=\"field.minLength\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-readonly]=\"field.readonly\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      [p-rows]=\"field.rows\"\r\n      (p-change)=\"onChangeField(field)\"\r\n      (p-change-model)=\"onChangeFieldModel(field)\"\r\n      [p-placeholder]=\"field.placeholder\"\r\n    >\r\n    </po-textarea>\r\n\r\n    <po-password\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'password')\"\r\n      [name]=\"field.property\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-clean]=\"field.clean\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-error-pattern]=\"field.errorMessage\"\r\n      [p-auto-focus]=\"field.focus\"\r\n      [p-help]=\"field.help\"\r\n      [p-hide-password-peek]=\"field.hidePasswordPeek\"\r\n      [p-icon]=\"field.icon\"\r\n      [p-label]=\"field.label\"\r\n      [p-maxlength]=\"field.maxLength\"\r\n      [p-minlength]=\"field.minLength\"\r\n      [p-no-autocomplete]=\"field.noAutocomplete\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-pattern]=\"field.pattern\"\r\n      [p-readonly]=\"field.readonly\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      (p-change)=\"onChangeField(field)\"\r\n      (p-change-model)=\"onChangeFieldModel(field)\"\r\n      [p-placeholder]=\"field.placeholder\"\r\n    >\r\n    </po-password>\r\n\r\n    <po-upload\r\n      #component\r\n      *ngIf=\"compareTo(field.control, 'upload')\"\r\n      [(ngModel)]=\"value[field.property]\"\r\n      [ngClass]=\"field.componentClass\"\r\n      [p-auto-upload]=\"field.autoUpload\"\r\n      [p-directory]=\"field.directory\"\r\n      [p-disabled]=\"isDisabled(field)\"\r\n      [p-drag-drop]=\"field.dragDrop\"\r\n      [p-drag-drop-height]=\"field.dragDropHeight\"\r\n      [p-restrictions]=\"field.restrictions\"\r\n      [p-headers]=\"field.headers\"\r\n      [p-help]=\"field.help\"\r\n      [p-hide-restrictions-info]=\"field.hideRestrictionsInfo\"\r\n      [p-hide-select-button]=\"field.hideSelectButton\"\r\n      [p-hide-send-button]=\"field.hideSendButton\"\r\n      [p-multiple]=\"field.multiple\"\r\n      [p-label]=\"field.label\"\r\n      [p-literals]=\"field.literals\"\r\n      [name]=\"field.property\"\r\n      (p-error)=\"field.onError($event)\"\r\n      (p-success)=\"field.onSuccess($event)\"\r\n      (p-upload)=\"field.onUpload($event)\"\r\n      [p-optional]=\"field.optional\"\r\n      [p-required]=\"field.required\"\r\n      [p-show-required]=\"field.showRequired\"\r\n      (p-change)=\"onChangeField(field)\"\r\n      (p-change-model)=\"onChangeFieldModel(field)\"\r\n      [p-url]=\"field.url\"\r\n    >\r\n    </po-upload>\r\n  </ng-container>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-dynamic-form-fields', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], providers: [PoDynamicFormValidationService], template: "<div class=\"po-row\" *ngIf=\"visibleFields && visibleFields.length > 0\">\n  <ng-container *ngFor=\"let field of visibleFields; trackBy: trackBy\">\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n\n    <po-datepicker\n      #component\n      *ngIf=\"compareTo(field.control, 'datepicker')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-format]=\"field.format\"\n      [p-help]=\"field.help\"\n      [p-iso-format]=\"field.isoFormat\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-datepicker>\n\n    <po-datepicker-range\n      #component\n      *ngIf=\"compareTo(field.control, 'datepickerrange')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-max-date]=\"field.maxValue\"\n      [p-min-date]=\"field.minValue\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-datepicker-range>\n\n    <po-input\n      #component\n      *ngIf=\"compareTo(field.control, 'input')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-mask-format-model]=\"field.maskFormatModel\"\n      [p-mask]=\"field.mask\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-input>\n\n    <po-number\n      #component\n      *ngIf=\"compareTo(field.control, 'number')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-step]=\"field.step\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-number>\n\n    <po-decimal\n      #component\n      *ngIf=\"compareTo(field.control, 'decimal')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-decimals-length]=\"field.decimalsLength\"\n      [p-thousand-maxlength]=\"field.thousandMaxlength\"\n      [p-icon]=\"field.icon\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-locale]=\"field.locale\"\n      [p-min]=\"field.minValue\"\n      [p-max]=\"field.maxValue\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-decimal>\n\n    <po-select\n      #component\n      *ngIf=\"compareTo(field.control, 'select')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-readonly]=\"field.readonly\"\n    >\n    </po-select>\n\n    <po-radio-group\n      #component\n      *ngIf=\"compareTo(field.control, 'radioGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-radio-group>\n\n    <po-switch\n      #component\n      *ngIf=\"compareTo(field.control, 'switch')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-format-model]=\"field.formatModel\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-label-off]=\"field.booleanFalse\"\n      [p-label-on]=\"field.booleanTrue\"\n      [p-label-position]=\"field.labelPosition\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-switch>\n\n    <po-combo\n      #component\n      *ngIf=\"compareTo(field.control, 'combo')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      p-emit-object-value\n      [p-auto-focus]=\"field.focus\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-help]=\"field.help\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-infinite-scroll-distance]=\"field.infiniteScrollDistance || 100\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-options]=\"field.options\"\n      [p-optional]=\"field.optional\"\n      [p-sort]=\"field.sort\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field, $event)\"\n      [p-icon]=\"field.icon\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-filter-minlength]=\"field.filterMinlength\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-disabled-init-filter]=\"field.disabledInitFilter\"\n      [p-disabled-tab-filter]=\"field.disabledTabFilter\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-change-on-enter]=\"field.changeOnEnter\"\n    >\n    </po-combo>\n\n    <po-lookup\n      #component\n      *ngIf=\"compareTo(field.control, 'lookup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      p-field-label=\"label\"\n      p-field-value=\"value\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-columns]=\"field.columns\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-field-label]=\"field.fieldLabel || 'label'\"\n      [p-field-value]=\"field.fieldValue || 'value'\"\n      [p-filter-params]=\"field.params\"\n      [p-filter-service]=\"field.searchService\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-field-format]=\"field.format\"\n      [p-infinite-scroll]=\"field.infiniteScroll\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-multiple]=\"field.multiple\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-advanced-filters]=\"field.advancedFilters\"\n      (p-change-visible-columns)=\"field.changeVisibleColumns?.($event)\"\n      (p-restore-column-manager)=\"field.columnRestoreManager?.($event)\"\n    >\n    </po-lookup>\n\n    <po-checkbox-group\n      #component\n      *ngIf=\"compareTo(field.control, 'checkboxGroup')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-columns]=\"field.columns || 3\"\n      [p-auto-focus]=\"field.focus\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n    >\n    </po-checkbox-group>\n\n    <po-multiselect\n      #component\n      *ngIf=\"compareTo(field.control, 'multiselect')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-auto-height]=\"field.autoHeight\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [p-optional]=\"field.optional\"\n      [p-options]=\"field.options\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      [p-placeholder]=\"field.placeholder\"\n      [p-field-label]=\"field.fieldLabel\"\n      [p-field-value]=\"field.fieldValue\"\n      [p-filter-service]=\"field.optionsService\"\n      [p-filter-mode]=\"field.filterMode\"\n      [p-debounce-time]=\"field.debounceTime\"\n      [p-sort]=\"field.sort\"\n      [p-placeholder-search]=\"field.placeholderSearch\"\n      [p-hide-search]=\"field.hideSearch\"\n      [p-hide-select-all]=\"field.hideSelectAll\"\n    >\n    </po-multiselect>\n\n    <po-textarea\n      #component\n      *ngIf=\"compareTo(field.control, 'textarea')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-optional]=\"field.optional\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      [p-rows]=\"field.rows\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-textarea>\n\n    <po-password\n      #component\n      *ngIf=\"compareTo(field.control, 'password')\"\n      [name]=\"field.property\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-clean]=\"field.clean\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-error-pattern]=\"field.errorMessage\"\n      [p-auto-focus]=\"field.focus\"\n      [p-help]=\"field.help\"\n      [p-hide-password-peek]=\"field.hidePasswordPeek\"\n      [p-icon]=\"field.icon\"\n      [p-label]=\"field.label\"\n      [p-maxlength]=\"field.maxLength\"\n      [p-minlength]=\"field.minLength\"\n      [p-no-autocomplete]=\"field.noAutocomplete\"\n      [p-optional]=\"field.optional\"\n      [p-pattern]=\"field.pattern\"\n      [p-readonly]=\"field.readonly\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-placeholder]=\"field.placeholder\"\n    >\n    </po-password>\n\n    <po-upload\n      #component\n      *ngIf=\"compareTo(field.control, 'upload')\"\n      [(ngModel)]=\"value[field.property]\"\n      [ngClass]=\"field.componentClass\"\n      [p-auto-upload]=\"field.autoUpload\"\n      [p-directory]=\"field.directory\"\n      [p-disabled]=\"isDisabled(field)\"\n      [p-drag-drop]=\"field.dragDrop\"\n      [p-drag-drop-height]=\"field.dragDropHeight\"\n      [p-restrictions]=\"field.restrictions\"\n      [p-headers]=\"field.headers\"\n      [p-help]=\"field.help\"\n      [p-hide-restrictions-info]=\"field.hideRestrictionsInfo\"\n      [p-hide-select-button]=\"field.hideSelectButton\"\n      [p-hide-send-button]=\"field.hideSendButton\"\n      [p-multiple]=\"field.multiple\"\n      [p-label]=\"field.label\"\n      [p-literals]=\"field.literals\"\n      [name]=\"field.property\"\n      (p-error)=\"field.onError($event)\"\n      (p-success)=\"field.onSuccess($event)\"\n      (p-upload)=\"field.onUpload($event)\"\n      [p-optional]=\"field.optional\"\n      [p-required]=\"field.required\"\n      [p-show-required]=\"field.showRequired\"\n      (p-change)=\"onChangeField(field)\"\n      (p-change-model)=\"onChangeFieldModel(field)\"\n      [p-url]=\"field.url\"\n    >\n    </po-upload>\n  </ng-container>\n</div>\n" }]
     }], function () { return [{ type: i1.TitleCasePipe }, { type: PoDynamicFormValidationService }, { type: i0.ChangeDetectorRef }, { type: i2$1.NgForm }]; }, { components: [{
             type: ViewChildren,
             args: ['component']
@@ -39034,7 +39047,7 @@ class PoImageComponent extends PoImageBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoImageComponent, [{
         type: Component,
-        args: [{ selector: 'po-image', template: "<po-container class=\"po-container-image\" *ngIf=\"source\" [p-height]=\"height\">\r\n  <img\r\n    *ngIf=\"!isBase64; else imageBase64\"\r\n    class=\"po-image\"\r\n    [attr.alt]=\"alternate\"\r\n    [priority]=\"priority\"\r\n    [loading]=\"loading\"\r\n    [fill]=\"true\"\r\n    [ngSrc]=\"source\"\r\n  />\r\n</po-container>\r\n\r\n<ng-template #imageBase64>\r\n  <img class=\"po-image\" [attr.alt]=\"alternate\" [loading]=\"loading\" [src]=\"source\" />\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-image', template: "<po-container class=\"po-container-image\" *ngIf=\"source\" [p-height]=\"height\">\n  <img\n    *ngIf=\"!isBase64; else imageBase64\"\n    class=\"po-image\"\n    [attr.alt]=\"alternate\"\n    [priority]=\"priority\"\n    [loading]=\"loading\"\n    [fill]=\"true\"\n    [ngSrc]=\"source\"\n  />\n</po-container>\n\n<ng-template #imageBase64>\n  <img class=\"po-image\" [attr.alt]=\"alternate\" [loading]=\"loading\" [src]=\"source\" />\n</ng-template>\n" }]
     }], null, null); })();
 function PoDynamicViewComponent_div_0_ng_template_1_po_divider_0_Template(rf, ctx) { if (rf & 1) {
@@ -39185,7 +39198,7 @@ class PoDynamicViewComponent extends PoDynamicViewBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDynamicViewComponent, [{
         type: Component,
-        args: [{ selector: 'po-dynamic-view', template: "<div class=\"po-dynamic-view po-row\" *ngIf=\"visibleFields.length\">\r\n  <ng-template ngFor let-field [ngForOf]=\"visibleFields\">\r\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\r\n\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        !field.tag && !field.image ? poInfo : !field.image ? poTag : poImage;\r\n        context: { $implicit: field }\r\n      \"\r\n    >\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #poInfo let-field>\r\n  <po-info [ngClass]=\"field.cssClass\" [p-label]=\"field.label\" [p-value]=\"setFieldValue(field)\"> </po-info>\r\n</ng-template>\r\n\r\n<ng-template #poTag let-field>\r\n  <po-tag\r\n    [ngClass]=\"field.cssClass\"\r\n    [p-color]=\"field.color\"\r\n    [p-icon]=\"field.icon\"\r\n    [p-inverse]=\"field.inverse\"\r\n    [p-label]=\"field.label\"\r\n    [p-value]=\"setFieldValue(field)\"\r\n  >\r\n  </po-tag>\r\n</ng-template>\r\n\r\n<ng-template #poImage let-field>\r\n  <po-image [p-alt]=\"field.alt\" [p-height]=\"field.height\" [p-src]=\"field.value\"> </po-image>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-dynamic-view', template: "<div class=\"po-dynamic-view po-row\" *ngIf=\"visibleFields.length\">\n  <ng-template ngFor let-field [ngForOf]=\"visibleFields\">\n    <po-divider *ngIf=\"field?.divider?.trim()\" class=\"po-sm-12\" [p-label]=\"field.divider\"> </po-divider>\n\n    <ng-container\n      *ngTemplateOutlet=\"\n        !field.tag && !field.image ? poInfo : !field.image ? poTag : poImage;\n        context: { $implicit: field }\n      \"\n    >\n    </ng-container>\n  </ng-template>\n</div>\n\n<ng-template #poInfo let-field>\n  <po-info [ngClass]=\"field.cssClass\" [p-label]=\"field.label\" [p-value]=\"setFieldValue(field)\"> </po-info>\n</ng-template>\n\n<ng-template #poTag let-field>\n  <po-tag\n    [ngClass]=\"field.cssClass\"\n    [p-color]=\"field.color\"\n    [p-icon]=\"field.icon\"\n    [p-inverse]=\"field.inverse\"\n    [p-label]=\"field.label\"\n    [p-value]=\"setFieldValue(field)\"\n  >\n  </po-tag>\n</ng-template>\n\n<ng-template #poImage let-field>\n  <po-image [p-alt]=\"field.alt\" [p-height]=\"field.height\" [p-src]=\"field.value\"> </po-image>\n</ng-template>\n" }]
     }], function () { return [{ type: i1.CurrencyPipe }, { type: i1.DatePipe }, { type: i1.DecimalPipe }, { type: PoTimePipe }, { type: i1.TitleCasePipe }, { type: PoDynamicViewService }]; }, null); })();
 /**
@@ -39450,7 +39463,7 @@ class PoGaugeTitleComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoGaugeTitleComponent, [{
         type: Component,
-        args: [{ selector: 'po-gauge-title', template: "<div *ngIf=\"title\" class=\"po-gauge-title\">{{ title }}</div>\r\n" }]
+        args: [{ selector: 'po-gauge-title', template: "<div *ngIf=\"title\" class=\"po-gauge-title\">{{ title }}</div>\n" }]
     }], null, { title: [{
             type: Input,
             args: ['p-title']
@@ -39517,7 +39530,7 @@ class PoGaugeLegendComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoGaugeLegendComponent, [{
         type: Component,
-        args: [{ selector: 'po-gauge-legend', template: "<ul class=\"po-gauge-legend\">\r\n  <li class=\"po-gauge-legend-item\" *ngFor=\"let range of ranges; trackBy: trackBy\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"range.color?.includes('po-color') ? colorpalette : colorstyle; context: { $implicit: range }\"\r\n    ></ng-container>\r\n    <p class=\"po-gauge-legend-text\">{{ range.label }}</p>\r\n  </li>\r\n</ul>\r\n\r\n<ng-template #colorpalette let-range>\r\n  <span class=\"po-gauge-legend-square\" [class]=\"range.color\"></span>\r\n</ng-template>\r\n\r\n<ng-template #colorstyle let-range>\r\n  <span class=\"po-gauge-legend-square\" [style.background]=\"range.color\"></span>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-gauge-legend', template: "<ul class=\"po-gauge-legend\">\n  <li class=\"po-gauge-legend-item\" *ngFor=\"let range of ranges; trackBy: trackBy\">\n    <ng-container\n      *ngTemplateOutlet=\"range.color?.includes('po-color') ? colorpalette : colorstyle; context: { $implicit: range }\"\n    ></ng-container>\n    <p class=\"po-gauge-legend-text\">{{ range.label }}</p>\n  </li>\n</ul>\n\n<ng-template #colorpalette let-range>\n  <span class=\"po-gauge-legend-square\" [class]=\"range.color\"></span>\n</ng-template>\n\n<ng-template #colorstyle let-range>\n  <span class=\"po-gauge-legend-square\" [style.background]=\"range.color\"></span>\n</ng-template>\n" }]
     }], function () { return []; }, { ranges: [{
             type: Input,
             args: ['p-ranges']
@@ -39556,7 +39569,7 @@ class PoGaugePathComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoGaugePathComponent, [{
         type: Component,
-        args: [{ selector: '[po-gauge-path]', template: "<svg:g>\r\n  <svg:path\r\n    class=\"po-gauge-base\"\r\n    [attr.d]=\"baseCoordinates?.coordinates\">\r\n  </svg:path> \r\n\r\n  <svg:path *ngFor=\"let range of rangesCoordinates; trackBy: trackBy\"\r\n    [class]=\"range?.color?.includes('po-color') ? range.color : ''\"\r\n    [attr.d]=\"range?.coordinates\"\r\n    [attr.fill]=\"range?.color\">\r\n  </svg:path> \r\n</svg:g>\r\n" }]
+        args: [{ selector: '[po-gauge-path]', template: "<svg:g>\n  <svg:path\n    class=\"po-gauge-base\"\n    [attr.d]=\"baseCoordinates?.coordinates\">\n  </svg:path> \n\n  <svg:path *ngFor=\"let range of rangesCoordinates; trackBy: trackBy\"\n    [class]=\"range?.color?.includes('po-color') ? range.color : ''\"\n    [attr.d]=\"range?.coordinates\"\n    [attr.fill]=\"range?.color\">\n  </svg:path> \n</svg:g>\n" }]
     }], function () { return []; }, { baseCoordinates: [{
             type: Input,
             args: ['p-base-coordinates']
@@ -39623,7 +39636,7 @@ class PoGaugePointerComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoGaugePointerComponent, [{
         type: Component,
-        args: [{ selector: '[po-gauge-pointer]', template: "<svg:g>\r\n  <svg:path #pointer\r\n    class=\"po-gauge-pointer\"\r\n    [attr.d]=\"coordinates?.coordinates\"\r\n  >\r\n  </svg:path> \r\n\r\n  <svg:circle \r\n    class=\"po-gauge-pointer-circle\" \r\n    [attr.cx]=\"coordinates?.radius\" \r\n    [attr.cy]=\"coordinates?.radius\" \r\n    [attr.r]=\"radiusScale\"\r\n  >\r\n  </svg:circle>\r\n</svg:g>" }]
+        args: [{ selector: '[po-gauge-pointer]', template: "<svg:g>\n  <svg:path #pointer\n    class=\"po-gauge-pointer\"\n    [attr.d]=\"coordinates?.coordinates\"\n  >\n  </svg:path> \n\n  <svg:circle \n    class=\"po-gauge-pointer-circle\" \n    [attr.cx]=\"coordinates?.radius\" \n    [attr.cy]=\"coordinates?.radius\" \n    [attr.r]=\"radiusScale\"\n  >\n  </svg:circle>\n</svg:g>" }]
     }], function () { return [{ type: i0.Renderer2 }]; }, { pointer: [{
             type: ViewChild,
             args: ['pointer']
@@ -39854,7 +39867,7 @@ class PoGaugeSvgComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoGaugeSvgComponent, [{
         type: Component,
-        args: [{ selector: 'po-gauge-svg', template: "<svg:svg\r\n  *ngIf=\"addSvgElement\"\r\n  class=\"po-gauge-svg\"\r\n  preserveAspectRatio=\"xMidYMax meet\"\r\n  width=\"100%\"\r\n  [attr.viewBox]=\"viewBox\"\r\n  [attr.height]=\"container?.height\"\r\n>\r\n  <!-- GAUGE PATHS -->\r\n  <svg:g po-gauge-path [p-base-coordinates]=\"baseCoordinates\" [p-ranges-coordinates]=\"coordinates\"></svg:g>\r\n\r\n  <!-- GAUGE POINTER -->\r\n  <svg:g *ngIf=\"hasRanges\" po-gauge-pointer [p-coordinates]=\"pointerCoordinates\"></svg:g>\r\n</svg:svg>\r\n" }]
+        args: [{ selector: 'po-gauge-svg', template: "<svg:svg\n  *ngIf=\"addSvgElement\"\n  class=\"po-gauge-svg\"\n  preserveAspectRatio=\"xMidYMax meet\"\n  width=\"100%\"\n  [attr.viewBox]=\"viewBox\"\n  [attr.height]=\"container?.height\"\n>\n  <!-- GAUGE PATHS -->\n  <svg:g po-gauge-path [p-base-coordinates]=\"baseCoordinates\" [p-ranges-coordinates]=\"coordinates\"></svg:g>\n\n  <!-- GAUGE POINTER -->\n  <svg:g *ngIf=\"hasRanges\" po-gauge-pointer [p-coordinates]=\"pointerCoordinates\"></svg:g>\n</svg:svg>\n" }]
     }], null, { container: [{
             type: Input,
             args: ['p-container']
@@ -39960,7 +39973,7 @@ class PoGaugeDescriptionComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoGaugeDescriptionComponent, [{
         type: Component,
-        args: [{ selector: 'po-gauge-description', template: "<div class=\"po-gauge-description\">\r\n  <ng-container *ngTemplateOutlet=\"hasRanges ? rangesDescription : percentageDescription\"> </ng-container>\r\n</div>\r\n\r\n<ng-template #rangesDescription>\r\n  <p\r\n    #descriptionText\r\n    *ngIf=\"description\"\r\n    class=\"po-gauge-description-text po-gauge-description-upper-text\"\r\n    [p-tooltip]=\"tooltip\"\r\n    (mouseenter)=\"verifyIfHasEllipsis()\"\r\n  >\r\n    {{ description }}\r\n  </p>\r\n</ng-template>\r\n\r\n<ng-template #percentageDescription>\r\n  <div class=\"po-gauge-description-bottom\" tabindex=\"0\" [style.width.px]=\"descriptionWidth\">\r\n    <p *ngIf=\"isValidValue\" class=\"po-gauge-description-bottom-value\">{{ value }}%</p>\r\n    <p\r\n      #descriptionText\r\n      *ngIf=\"description\"\r\n      class=\"po-gauge-description-text po-gauge-description-bottom-text\"\r\n      [p-tooltip]=\"tooltip\"\r\n      (mouseenter)=\"verifyIfHasEllipsis()\"\r\n    >\r\n      {{ description }}\r\n    </p>\r\n  </div>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-gauge-description', template: "<div class=\"po-gauge-description\">\n  <ng-container *ngTemplateOutlet=\"hasRanges ? rangesDescription : percentageDescription\"> </ng-container>\n</div>\n\n<ng-template #rangesDescription>\n  <p\n    #descriptionText\n    *ngIf=\"description\"\n    class=\"po-gauge-description-text po-gauge-description-upper-text\"\n    [p-tooltip]=\"tooltip\"\n    (mouseenter)=\"verifyIfHasEllipsis()\"\n  >\n    {{ description }}\n  </p>\n</ng-template>\n\n<ng-template #percentageDescription>\n  <div class=\"po-gauge-description-bottom\" tabindex=\"0\" [style.width.px]=\"descriptionWidth\">\n    <p *ngIf=\"isValidValue\" class=\"po-gauge-description-bottom-value\">{{ value }}%</p>\n    <p\n      #descriptionText\n      *ngIf=\"description\"\n      class=\"po-gauge-description-text po-gauge-description-bottom-text\"\n      [p-tooltip]=\"tooltip\"\n      (mouseenter)=\"verifyIfHasEllipsis()\"\n    >\n      {{ description }}\n    </p>\n  </div>\n</ng-template>\n" }]
     }], null, { description: [{
             type: Input,
             args: ['p-description']
@@ -40067,7 +40080,7 @@ class PoGaugeComponent extends PoGaugeBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoGaugeComponent, [{
         type: Component,
-        args: [{ selector: 'po-gauge', template: "<div class=\"po-gauge-wrapper\" [style.height.px]=\"height\">\r\n  <po-gauge-title #titleEl [p-title]=\"title\"></po-gauge-title>\r\n\r\n  <po-gauge-description\r\n    #descriptionEl\r\n    [p-description]=\"description\"\r\n    [p-description-width]=\"height\"\r\n    [p-has-ranges]=\"hasRanges\"\r\n    [p-value]=\"value\"\r\n  ></po-gauge-description>\r\n\r\n  <po-gauge-svg #svgEl [p-container]=\"svgContainer\" [p-ranges]=\"ranges\" [p-value]=\"value\"></po-gauge-svg>\r\n\r\n  <po-gauge-legend #legendEl [p-ranges]=\"ranges\"> </po-gauge-legend>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-gauge', template: "<div class=\"po-gauge-wrapper\" [style.height.px]=\"height\">\n  <po-gauge-title #titleEl [p-title]=\"title\"></po-gauge-title>\n\n  <po-gauge-description\n    #descriptionEl\n    [p-description]=\"description\"\n    [p-description-width]=\"height\"\n    [p-has-ranges]=\"hasRanges\"\n    [p-value]=\"value\"\n  ></po-gauge-description>\n\n  <po-gauge-svg #svgEl [p-container]=\"svgContainer\" [p-ranges]=\"ranges\" [p-value]=\"value\"></po-gauge-svg>\n\n  <po-gauge-legend #legendEl [p-ranges]=\"ranges\"> </po-gauge-legend>\n</div>\n" }]
     }], function () { return [{ type: PoColorService }, { type: i0.ChangeDetectorRef }]; }, { descriptionEl: [{
             type: ViewChild,
             args: ['descriptionEl', { read: ElementRef }]
@@ -40141,7 +40154,7 @@ class PoGridCellActionComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoGridCellActionComponent, [{
         type: Component,
-        args: [{ selector: 'po-grid-cell-action', template: "<div>\r\n  <div\r\n    #contentElement\r\n    [id]=\"position\"\r\n    class=\"po-grid-cell-action-content\"\r\n    tabindex=\"0\"\r\n    (keydown)=\"onKeyDownContent($event)\"\r\n  >\r\n    <span>{{ value || '&nbsp;' }}</span>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-grid-cell-action', template: "<div>\n  <div\n    #contentElement\n    [id]=\"position\"\n    class=\"po-grid-cell-action-content\"\n    tabindex=\"0\"\n    (keydown)=\"onKeyDownContent($event)\"\n  >\n    <span>{{ value || '&nbsp;' }}</span>\n  </div>\n</div>\n" }]
     }], function () { return []; }, { position: [{
             type: Input,
             args: ['p-position']
@@ -40292,7 +40305,7 @@ class PoGridCellComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoGridCellComponent, [{
         type: Component,
-        args: [{ selector: 'po-grid-cell', template: "<div>\r\n  <ng-container *ngIf=\"edit; then input; else content\"></ng-container>\r\n\r\n  <ng-template #content>\r\n    <div\r\n      #contentElement\r\n      [id]=\"position\"\r\n      class=\"po-grid-cell-content po-grid-cell-{{ align }} {{ !value && required ? 'po-grid-cell-required' : '' }}\"\r\n      (keydown)=\"onKeyDownContent($event)\"\r\n      tabindex=\"{{ readonly ? -1 : 0 }}\"\r\n      (dblclick)=\"dblclick($event)\"\r\n    >\r\n      <span>{{ value || '&nbsp;' }}</span>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #input>\r\n    <input\r\n      [id]=\"position\"\r\n      #inputElement\r\n      class=\"po-grid-cell-input\"\r\n      [(ngModel)]=\"editValue\"\r\n      (keydown.arrowup)=\"$event.stopPropagation()\"\r\n      (keydown.arrowdown)=\"$event.stopPropagation()\"\r\n      (keydown.arrowleft)=\"$event.stopPropagation()\"\r\n      (keydown.arrowright)=\"$event.stopPropagation()\"\r\n      (keydown)=\"onKeyDownInput($event)\"\r\n      (blur)=\"onBlurInput()\"\r\n    />\r\n  </ng-template>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-grid-cell', template: "<div>\n  <ng-container *ngIf=\"edit; then input; else content\"></ng-container>\n\n  <ng-template #content>\n    <div\n      #contentElement\n      [id]=\"position\"\n      class=\"po-grid-cell-content po-grid-cell-{{ align }} {{ !value && required ? 'po-grid-cell-required' : '' }}\"\n      (keydown)=\"onKeyDownContent($event)\"\n      tabindex=\"{{ readonly ? -1 : 0 }}\"\n      (dblclick)=\"dblclick($event)\"\n    >\n      <span>{{ value || '&nbsp;' }}</span>\n    </div>\n  </ng-template>\n\n  <ng-template #input>\n    <input\n      [id]=\"position\"\n      #inputElement\n      class=\"po-grid-cell-input\"\n      [(ngModel)]=\"editValue\"\n      (keydown.arrowup)=\"$event.stopPropagation()\"\n      (keydown.arrowdown)=\"$event.stopPropagation()\"\n      (keydown.arrowleft)=\"$event.stopPropagation()\"\n      (keydown.arrowright)=\"$event.stopPropagation()\"\n      (keydown)=\"onKeyDownInput($event)\"\n      (blur)=\"onBlurInput()\"\n    />\n  </ng-template>\n</div>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { align: [{
             type: Input,
             args: ['p-align']
@@ -40357,7 +40370,7 @@ class PoGridHeadComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoGridHeadComponent, [{
         type: Component,
-        args: [{ selector: 'po-grid-head', template: "<div>\r\n  <div [id]=\"position\" class=\"po-grid-head-content po-grid-head-{{ align }}\" tabindex=\"{{ title ? 0 : -1 }}\">\r\n    <span>{{ title || '&nbsp;' }}</span>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-grid-head', template: "<div>\n  <div [id]=\"position\" class=\"po-grid-head-content po-grid-head-{{ align }}\" tabindex=\"{{ title ? 0 : -1 }}\">\n    <span>{{ title || '&nbsp;' }}</span>\n  </div>\n</div>\n" }]
     }], null, { align: [{
             type: Input,
             args: ['p-align']
@@ -40916,7 +40929,7 @@ class PoGridComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoGridComponent, [{
         type: Component,
-        args: [{ selector: 'po-grid', template: "<div class=\"po-grid-wrapper po-grid-row-wrapper\" #wrapper>\r\n  <div *ngIf=\"logger\">\r\n    lastCell: {{ lastCell }} | currencyCell: {{ currencyCell }} <br />\r\n    lastRow: {{ lastRow }} | currencyRow: {{ currencyRow }} <br />\r\n    lastColumn: {{ lastColumn }} | currencyColumn: {{ currencyColumn }} <br />\r\n    <hr />\r\n    currencyObj: {{ currencyObj | json }}\r\n    <hr />\r\n  </div>\r\n\r\n  <div class=\"po-grid\">\r\n    <div class=\"po-grid-body\">\r\n      <div\r\n        class=\"po-grid-row\"\r\n        #table\r\n        (keydown.arrowup)=\"tableKeydown($event, 'up')\"\r\n        (keydown.arrowdown)=\"tableKeydown($event, 'down')\"\r\n        (keydown.arrowleft)=\"tableKeydown($event, 'left')\"\r\n        (keydown.arrowright)=\"tableKeydown($event, 'right')\"\r\n        (keydown.tab)=\"tableKeydown($event, 'next')\"\r\n        (keydown.shift.tab)=\"tableKeydown($event, 'prior')\"\r\n        (click)=\"tableClick($event)\"\r\n        (contextmenu)=\"tableClick($event)\"\r\n        (dblclick)=\"tableClick($event)\"\r\n      >\r\n        <div class=\"po-grid-cell po-grid-cell-freeze\" *ngIf=\"freezeColumns.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"divFreezeColumns\"></ng-container>\r\n        </div>\r\n\r\n        <div\r\n          class=\"po-grid-cell po-grid-cell-normal\"\r\n          [style.width]=\"width\"\r\n          [style.max-width]=\"width\"\r\n          [style.min-width]=\"width\"\r\n        >\r\n          <ng-container *ngTemplateOutlet=\"divColumns\"></ng-container>\r\n        </div>\r\n\r\n        <div class=\"po-grid-cell po-grid-cell-action\" *ngIf=\"actionColumns.length > 0\">\r\n          <ng-container *ngTemplateOutlet=\"divActionColumns\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Coluna com as colunas congeladas -->\r\n<ng-template #divFreezeColumns>\r\n  <div class=\"po-grid po-grid-freeze\">\r\n    <div class=\"po-grid-header-group\">\r\n      <div class=\"po-grid-row\">\r\n        <po-grid-head\r\n          *ngFor=\"let column of freezeColumns; index as i\"\r\n          class=\"po-grid-title\"\r\n          [style.width]=\"column.cssWidth\"\r\n          [style.max-width]=\"column.cssWidth\"\r\n          [style.min-width]=\"column.cssWidth\"\r\n          p-freeze=\"true\"\r\n          p-position=\"{{ '0-' + i }}\"\r\n          [p-width]=\"column.width\"\r\n          [p-align]=\"column.align\"\r\n          [p-title]=\"column.label\"\r\n        >\r\n        </po-grid-head>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"po-grid-body\">\r\n      <div\r\n        class=\"po-grid-row\"\r\n        *ngFor=\"let row of data; index as j\"\r\n        (keydown.control.delete)=\"removeRow($event, row)\"\r\n        (keydown.esc)=\"cancelRow($event, row)\"\r\n      >\r\n        <po-grid-cell\r\n          *ngFor=\"let column of freezeColumns; index as i\"\r\n          class=\"po-grid-cell\"\r\n          [style.width]=\"column.cssWidth\"\r\n          [style.max-width]=\"column.cssWidth\"\r\n          [style.min-width]=\"column.cssWidth\"\r\n          p-freeze=\"true\"\r\n          [p-align]=\"column.align\"\r\n          [p-readonly]=\"column.readonly\"\r\n          [p-required]=\"column.required\"\r\n          p-position=\"{{ j + 1 + '-' + i }}\"\r\n          [p-width]=\"column.width\"\r\n          [(p-value)]=\"row[column.property]\"\r\n        >\r\n        </po-grid-cell>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<!-- FIM: Coluna com as colunas congeladas -->\r\n\r\n<!-- Coluna com as colunas nornais -->\r\n<ng-template #divColumns>\r\n  <div class=\"po-grid po-grid-normal\">\r\n    <div class=\"po-grid-header-group\">\r\n      <div class=\"po-grid-row\">\r\n        <po-grid-head\r\n          *ngFor=\"let column of columns; index as i\"\r\n          class=\"po-grid-title\"\r\n          [style.width]=\"column.cssWidth\"\r\n          [style.max-width]=\"column.cssWidth\"\r\n          [style.min-width]=\"column.cssWidth\"\r\n          [p-align]=\"column.align\"\r\n          p-position=\"{{ '0-' + (i + freezeColumns.length) }}\"\r\n          [p-title]=\"column.label\"\r\n          [p-width]=\"column.width\"\r\n        >\r\n        </po-grid-head>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"po-grid-body\">\r\n      <div\r\n        class=\"po-grid-row\"\r\n        *ngFor=\"let row of data; index as j\"\r\n        (keydown.control.delete)=\"removeRow($event, row)\"\r\n        (keydown.esc)=\"cancelRow($event, row)\"\r\n      >\r\n        <po-grid-cell\r\n          *ngFor=\"let column of columns; index as i\"\r\n          class=\"po-grid-cell\"\r\n          [style.width]=\"column.cssWidth\"\r\n          [style.max-width]=\"column.cssWidth\"\r\n          [style.min-width]=\"column.cssWidth\"\r\n          [p-align]=\"column.align\"\r\n          [p-readonly]=\"column.readonly\"\r\n          [p-required]=\"column.required\"\r\n          p-position=\"{{ j + 1 + '-' + (i + freezeColumns.length) }}\"\r\n          [(p-value)]=\"row[column.property]\"\r\n          [p-width]=\"column.width\"\r\n        >\r\n        </po-grid-cell>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<!-- FIM: Coluna com as colunas nornais -->\r\n\r\n<!-- Coluna com as colunas de a\u00E7\u00E3o -->\r\n<ng-template #divActionColumns>\r\n  <div class=\"po-grid po-grid-actions\">\r\n    <div class=\"po-grid-header-group\">\r\n      <div class=\"po-grid-row\">\r\n        <po-grid-head\r\n          *ngFor=\"let column of actionColumns; index as i\"\r\n          class=\"po-grid-title\"\r\n          p-position=\"{{ '0-' + (i + freezeColumns.length + columns.length) }}\"\r\n          [p-title]=\"column.label\"\r\n          [p-align]=\"column.align\"\r\n        >\r\n        </po-grid-head>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"po-grid-body\">\r\n      <div\r\n        class=\"po-grid-row\"\r\n        *ngFor=\"let row of data; index as j\"\r\n        (keydown.control.delete)=\"removeRow($event, row)\"\r\n        (keydown.esc)=\"cancelRow($event, row)\"\r\n      >\r\n        <po-grid-cell-action\r\n          *ngFor=\"let column of actionColumns; index as i\"\r\n          class=\"po-grid-cell\"\r\n          p-position=\"{{ j + 1 + '-' + (i + freezeColumns.length + columns.length) }}\"\r\n          [p-value]=\"row[column.property]\"\r\n        >\r\n        </po-grid-cell-action>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<!-- FIM: Coluna com as colunas de a\u00E7\u00E3o -->\r\n" }]
+        args: [{ selector: 'po-grid', template: "<div class=\"po-grid-wrapper po-grid-row-wrapper\" #wrapper>\n  <div *ngIf=\"logger\">\n    lastCell: {{ lastCell }} | currencyCell: {{ currencyCell }} <br />\n    lastRow: {{ lastRow }} | currencyRow: {{ currencyRow }} <br />\n    lastColumn: {{ lastColumn }} | currencyColumn: {{ currencyColumn }} <br />\n    <hr />\n    currencyObj: {{ currencyObj | json }}\n    <hr />\n  </div>\n\n  <div class=\"po-grid\">\n    <div class=\"po-grid-body\">\n      <div\n        class=\"po-grid-row\"\n        #table\n        (keydown.arrowup)=\"tableKeydown($event, 'up')\"\n        (keydown.arrowdown)=\"tableKeydown($event, 'down')\"\n        (keydown.arrowleft)=\"tableKeydown($event, 'left')\"\n        (keydown.arrowright)=\"tableKeydown($event, 'right')\"\n        (keydown.tab)=\"tableKeydown($event, 'next')\"\n        (keydown.shift.tab)=\"tableKeydown($event, 'prior')\"\n        (click)=\"tableClick($event)\"\n        (contextmenu)=\"tableClick($event)\"\n        (dblclick)=\"tableClick($event)\"\n      >\n        <div class=\"po-grid-cell po-grid-cell-freeze\" *ngIf=\"freezeColumns.length > 0\">\n          <ng-container *ngTemplateOutlet=\"divFreezeColumns\"></ng-container>\n        </div>\n\n        <div\n          class=\"po-grid-cell po-grid-cell-normal\"\n          [style.width]=\"width\"\n          [style.max-width]=\"width\"\n          [style.min-width]=\"width\"\n        >\n          <ng-container *ngTemplateOutlet=\"divColumns\"></ng-container>\n        </div>\n\n        <div class=\"po-grid-cell po-grid-cell-action\" *ngIf=\"actionColumns.length > 0\">\n          <ng-container *ngTemplateOutlet=\"divActionColumns\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Coluna com as colunas congeladas -->\n<ng-template #divFreezeColumns>\n  <div class=\"po-grid po-grid-freeze\">\n    <div class=\"po-grid-header-group\">\n      <div class=\"po-grid-row\">\n        <po-grid-head\n          *ngFor=\"let column of freezeColumns; index as i\"\n          class=\"po-grid-title\"\n          [style.width]=\"column.cssWidth\"\n          [style.max-width]=\"column.cssWidth\"\n          [style.min-width]=\"column.cssWidth\"\n          p-freeze=\"true\"\n          p-position=\"{{ '0-' + i }}\"\n          [p-width]=\"column.width\"\n          [p-align]=\"column.align\"\n          [p-title]=\"column.label\"\n        >\n        </po-grid-head>\n      </div>\n    </div>\n\n    <div class=\"po-grid-body\">\n      <div\n        class=\"po-grid-row\"\n        *ngFor=\"let row of data; index as j\"\n        (keydown.control.delete)=\"removeRow($event, row)\"\n        (keydown.esc)=\"cancelRow($event, row)\"\n      >\n        <po-grid-cell\n          *ngFor=\"let column of freezeColumns; index as i\"\n          class=\"po-grid-cell\"\n          [style.width]=\"column.cssWidth\"\n          [style.max-width]=\"column.cssWidth\"\n          [style.min-width]=\"column.cssWidth\"\n          p-freeze=\"true\"\n          [p-align]=\"column.align\"\n          [p-readonly]=\"column.readonly\"\n          [p-required]=\"column.required\"\n          p-position=\"{{ j + 1 + '-' + i }}\"\n          [p-width]=\"column.width\"\n          [(p-value)]=\"row[column.property]\"\n        >\n        </po-grid-cell>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<!-- FIM: Coluna com as colunas congeladas -->\n\n<!-- Coluna com as colunas nornais -->\n<ng-template #divColumns>\n  <div class=\"po-grid po-grid-normal\">\n    <div class=\"po-grid-header-group\">\n      <div class=\"po-grid-row\">\n        <po-grid-head\n          *ngFor=\"let column of columns; index as i\"\n          class=\"po-grid-title\"\n          [style.width]=\"column.cssWidth\"\n          [style.max-width]=\"column.cssWidth\"\n          [style.min-width]=\"column.cssWidth\"\n          [p-align]=\"column.align\"\n          p-position=\"{{ '0-' + (i + freezeColumns.length) }}\"\n          [p-title]=\"column.label\"\n          [p-width]=\"column.width\"\n        >\n        </po-grid-head>\n      </div>\n    </div>\n\n    <div class=\"po-grid-body\">\n      <div\n        class=\"po-grid-row\"\n        *ngFor=\"let row of data; index as j\"\n        (keydown.control.delete)=\"removeRow($event, row)\"\n        (keydown.esc)=\"cancelRow($event, row)\"\n      >\n        <po-grid-cell\n          *ngFor=\"let column of columns; index as i\"\n          class=\"po-grid-cell\"\n          [style.width]=\"column.cssWidth\"\n          [style.max-width]=\"column.cssWidth\"\n          [style.min-width]=\"column.cssWidth\"\n          [p-align]=\"column.align\"\n          [p-readonly]=\"column.readonly\"\n          [p-required]=\"column.required\"\n          p-position=\"{{ j + 1 + '-' + (i + freezeColumns.length) }}\"\n          [(p-value)]=\"row[column.property]\"\n          [p-width]=\"column.width\"\n        >\n        </po-grid-cell>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<!-- FIM: Coluna com as colunas nornais -->\n\n<!-- Coluna com as colunas de a\u00E7\u00E3o -->\n<ng-template #divActionColumns>\n  <div class=\"po-grid po-grid-actions\">\n    <div class=\"po-grid-header-group\">\n      <div class=\"po-grid-row\">\n        <po-grid-head\n          *ngFor=\"let column of actionColumns; index as i\"\n          class=\"po-grid-title\"\n          p-position=\"{{ '0-' + (i + freezeColumns.length + columns.length) }}\"\n          [p-title]=\"column.label\"\n          [p-align]=\"column.align\"\n        >\n        </po-grid-head>\n      </div>\n    </div>\n\n    <div class=\"po-grid-body\">\n      <div\n        class=\"po-grid-row\"\n        *ngFor=\"let row of data; index as j\"\n        (keydown.control.delete)=\"removeRow($event, row)\"\n        (keydown.esc)=\"cancelRow($event, row)\"\n      >\n        <po-grid-cell-action\n          *ngFor=\"let column of actionColumns; index as i\"\n          class=\"po-grid-cell\"\n          p-position=\"{{ j + 1 + '-' + (i + freezeColumns.length + columns.length) }}\"\n          [p-value]=\"row[column.property]\"\n        >\n        </po-grid-cell-action>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<!-- FIM: Coluna com as colunas de a\u00E7\u00E3o -->\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, { tableElement: [{
             type: ViewChild,
             args: ['table', { static: true }]
@@ -41804,7 +41817,7 @@ class PoListViewComponent extends PoListViewBaseComponent {
                         transition('* => void', [style({ height: '*', 'overflow-y': 'hidden' }), animate(100, style({ height: 0 }))]),
                         transition('void => *', [style({ height: '0' }), animate(100, style({ height: '*' }))])
                     ])
-                ], template: "<div\r\n  [class.po-list-view-main-container-header]=\"showHeader\"\r\n  [class.po-list-view-main-container]=\"!showHeader\"\r\n  [style.height.px]=\"height\"\r\n>\r\n  <div *ngIf=\"showHeader\" class=\"po-list-view-main-header\">\r\n    <div class=\"po-checkbox-group-item\">\r\n      <div class=\"po-list-view-main-select\">\r\n        <po-checkbox\r\n          name=\"selectAll\"\r\n          [(ngModel)]=\"selectAll\"\r\n          [p-label]=\"literals.selectAll\"\r\n          (p-change)=\"selectAllListItems()\"\r\n          (click)=\"selectAllListItems()\"\r\n        ></po-checkbox>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"po-list-view-main-content\">\r\n    <po-container [p-no-padding]=\"true\" *ngIf=\"!hasItems()\">\r\n      <div class=\"po-list-view-container-no-data po-text-center\">\r\n        <span> {{ literals.noData }} </span>\r\n      </div>\r\n    </po-container>\r\n\r\n    <ng-container *ngFor=\"let item of items; let index = index; trackBy: trackBy\">\r\n      <po-container [p-no-padding]=\"true\">\r\n        <div class=\"po-list-view-container\">\r\n          <div class=\"po-list-view-header\">\r\n            <div class=\"po-list-view-title\" [ngSwitch]=\"checkTitleType(item)\">\r\n              <div *ngIf=\"select\" class=\"po-list-view-select\">\r\n                <po-checkbox\r\n                  [(ngModel)]=\"item.$selected\"\r\n                  name=\"checkbox\"\r\n                  (p-change)=\"selectListItem(item)\"\r\n                  (click)=\"selectListItem(item)\"\r\n                ></po-checkbox>\r\n              </div>\r\n              <a\r\n                *ngSwitchCase=\"'externalLink'\"\r\n                class=\"po-list-view-title-link\"\r\n                target=\"_blank\"\r\n                [href]=\"item[propertyLink]\"\r\n                (click)=\"runTitleAction(item)\"\r\n              >\r\n                {{ getItemTitle(item) }}\r\n              </a>\r\n              <a\r\n                *ngSwitchCase=\"'internalLink'\"\r\n                class=\"po-list-view-title-link\"\r\n                [routerLink]=\"item[propertyLink]\"\r\n                (click)=\"runTitleAction(item)\"\r\n              >\r\n                {{ getItemTitle(item) }}\r\n              </a>\r\n              <span\r\n                *ngSwitchCase=\"'noLink'\"\r\n                class=\"po-list-view-title-no-link\"\r\n                [class.po-list-view-title-link]=\"titleHasAction\"\r\n                (click)=\"titleHasAction && runTitleAction(item)\"\r\n              >\r\n                {{ getItemTitle(item) }}\r\n              </span>\r\n            </div>\r\n\r\n            <div *ngIf=\"showButtonsActions\" class=\"po-list-view-actions\">\r\n              <po-button\r\n                *ngFor=\"let action of visibleActions\"\r\n                [p-disabled]=\"returnBooleanValue(action, item, 'disabled')\"\r\n                [p-icon]=\"action.icon\"\r\n                [p-label]=\"action.label\"\r\n                [p-kind]=\"action.type\"\r\n                (p-click)=\"onClickAction(action, item)\"\r\n              >\r\n              </po-button>\r\n            </div>\r\n\r\n            <div *ngIf=\"showPopupActions\" class=\"po-list-view-more-actions\">\r\n              <span\r\n                #popupTarget\r\n                class=\"po-icon po-icon-more po-list-view-more-icon po-clickable\"\r\n                (click)=\"togglePopup(item, popupTarget)\"\r\n              >\r\n              </span>\r\n            </div>\r\n          </div>\r\n\r\n          <div *ngIf=\"hasContentTemplate\" class=\"po-list-view-content\">\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"listViewContentTemplate.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\r\n            >\r\n            </ng-template>\r\n          </div>\r\n\r\n          <div\r\n            @showHideDetail\r\n            (@showHideDetail.start)=\"item.$showDetail ? onAnimationEvent($event, item) : 'undefined'\"\r\n            *ngIf=\"hasDetailTemplate && item.$showDetail\"\r\n            class=\"po-list-view-detail\"\r\n          >\r\n            <ng-template\r\n              [ngTemplateOutlet]=\"listViewDetailTemplate.templateRef\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\r\n            >\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"hasDetailTemplate\" class=\"po-list-view-detail-button\">\r\n          <po-button\r\n            p-kind=\"tertiary\"\r\n            [p-label]=\"item.$showDetail ? literals.hideDetails : literals.showDetails\"\r\n            (p-click)=\"item.$showDetail = !item.$showDetail\"\r\n          >\r\n          </po-button>\r\n        </div>\r\n      </po-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"displayShowMoreButton\" class=\"po-mb-2 po-text-center\">\r\n  <po-button [p-disabled]=\"showMoreDisabled\" [p-label]=\"literals.loadMoreData\" (p-click)=\"onShowMore()\"> </po-button>\r\n</div>\r\n\r\n<po-popup #popup [p-actions]=\"actions\" [p-target]=\"popupTarget\"> </po-popup>\r\n" }]
+                ], template: "<div\n  [class.po-list-view-main-container-header]=\"showHeader\"\n  [class.po-list-view-main-container]=\"!showHeader\"\n  [style.height.px]=\"height\"\n>\n  <div *ngIf=\"showHeader\" class=\"po-list-view-main-header\">\n    <div class=\"po-checkbox-group-item\">\n      <div class=\"po-list-view-main-select\">\n        <po-checkbox\n          name=\"selectAll\"\n          [(ngModel)]=\"selectAll\"\n          [p-label]=\"literals.selectAll\"\n          (p-change)=\"selectAllListItems()\"\n          (click)=\"selectAllListItems()\"\n        ></po-checkbox>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"po-list-view-main-content\">\n    <po-container [p-no-padding]=\"true\" *ngIf=\"!hasItems()\">\n      <div class=\"po-list-view-container-no-data po-text-center\">\n        <span> {{ literals.noData }} </span>\n      </div>\n    </po-container>\n\n    <ng-container *ngFor=\"let item of items; let index = index; trackBy: trackBy\">\n      <po-container [p-no-padding]=\"true\">\n        <div class=\"po-list-view-container\">\n          <div class=\"po-list-view-header\">\n            <div class=\"po-list-view-title\" [ngSwitch]=\"checkTitleType(item)\">\n              <div *ngIf=\"select\" class=\"po-list-view-select\">\n                <po-checkbox\n                  [(ngModel)]=\"item.$selected\"\n                  name=\"checkbox\"\n                  (p-change)=\"selectListItem(item)\"\n                  (click)=\"selectListItem(item)\"\n                ></po-checkbox>\n              </div>\n              <a\n                *ngSwitchCase=\"'externalLink'\"\n                class=\"po-list-view-title-link\"\n                target=\"_blank\"\n                [href]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <a\n                *ngSwitchCase=\"'internalLink'\"\n                class=\"po-list-view-title-link\"\n                [routerLink]=\"item[propertyLink]\"\n                (click)=\"runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </a>\n              <span\n                *ngSwitchCase=\"'noLink'\"\n                class=\"po-list-view-title-no-link\"\n                [class.po-list-view-title-link]=\"titleHasAction\"\n                (click)=\"titleHasAction && runTitleAction(item)\"\n              >\n                {{ getItemTitle(item) }}\n              </span>\n            </div>\n\n            <div *ngIf=\"showButtonsActions\" class=\"po-list-view-actions\">\n              <po-button\n                *ngFor=\"let action of visibleActions\"\n                [p-disabled]=\"returnBooleanValue(action, item, 'disabled')\"\n                [p-icon]=\"action.icon\"\n                [p-label]=\"action.label\"\n                [p-kind]=\"action.type\"\n                (p-click)=\"onClickAction(action, item)\"\n              >\n              </po-button>\n            </div>\n\n            <div *ngIf=\"showPopupActions\" class=\"po-list-view-more-actions\">\n              <span\n                #popupTarget\n                class=\"po-icon po-icon-more po-list-view-more-icon po-clickable\"\n                (click)=\"togglePopup(item, popupTarget)\"\n              >\n              </span>\n            </div>\n          </div>\n\n          <div *ngIf=\"hasContentTemplate\" class=\"po-list-view-content\">\n            <ng-template\n              [ngTemplateOutlet]=\"listViewContentTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n            >\n            </ng-template>\n          </div>\n\n          <div\n            @showHideDetail\n            (@showHideDetail.start)=\"item.$showDetail ? onAnimationEvent($event, item) : 'undefined'\"\n            *ngIf=\"hasDetailTemplate && item.$showDetail\"\n            class=\"po-list-view-detail\"\n          >\n            <ng-template\n              [ngTemplateOutlet]=\"listViewDetailTemplate.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: item, index: index }\"\n            >\n            </ng-template>\n          </div>\n        </div>\n\n        <div *ngIf=\"hasDetailTemplate\" class=\"po-list-view-detail-button\">\n          <po-button\n            p-kind=\"tertiary\"\n            [p-label]=\"item.$showDetail ? literals.hideDetails : literals.showDetails\"\n            (p-click)=\"item.$showDetail = !item.$showDetail\"\n          >\n          </po-button>\n        </div>\n      </po-container>\n    </ng-container>\n  </div>\n</div>\n\n<div *ngIf=\"displayShowMoreButton\" class=\"po-mb-2 po-text-center\">\n  <po-button [p-disabled]=\"showMoreDisabled\" [p-label]=\"literals.loadMoreData\" (p-click)=\"onShowMore()\"> </po-button>\n</div>\n\n<po-popup #popup [p-actions]=\"actions\" [p-target]=\"popupTarget\"> </po-popup>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }, { type: PoLanguageService }]; }, { listViewContentTemplate: [{
             type: ContentChild,
             args: [PoListViewContentTemplateDirective, { static: true }]
@@ -41981,7 +41994,7 @@ class PoLogoComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLogoComponent, [{
         type: Component,
-        args: [{ selector: 'po-logo', template: "<a *ngIf=\"link; else noLink\" href=\"/\">\r\n  <img [alt]=\"logoAlt\" [class]=\"className\" [src]=\"logo\" [title]=\"logoAlt\" />\r\n</a>\r\n\r\n<ng-template #noLink>\r\n  <img [alt]=\"logoAlt\" [class]=\"className\" [src]=\"logo\" [title]=\"logoAlt\" />\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-logo', template: "<a *ngIf=\"link; else noLink\" href=\"/\">\n  <img [alt]=\"logoAlt\" [class]=\"className\" [src]=\"logo\" [title]=\"logoAlt\" />\n</a>\n\n<ng-template #noLink>\n  <img [alt]=\"logoAlt\" [class]=\"className\" [src]=\"logo\" [title]=\"logoAlt\" />\n</ng-template>\n" }]
     }], function () { return [{ type: PoLanguageService }]; }, { className: [{
             type: Input,
             args: ['p-class']
@@ -42155,7 +42168,7 @@ class PoMenuPanelItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMenuPanelItemComponent, [{
         type: Component,
-        args: [{ selector: 'po-menu-panel-item', template: "<!-- menu com link interno -->\r\n<a *ngIf=\"menuItemInternal.type === 'internalLink'\" [routerLink]=\"menuItemInternal.link\">\r\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\r\n</a>\r\n\r\n<!-- menu com link externo -->\r\n<a *ngIf=\"menuItemInternal.type === 'externalLink'\" [href]=\"menuItemInternal.link\">\r\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\r\n</a>\r\n\r\n<!-- menu sem link -->\r\n<a *ngIf=\"menuItemInternal.type === 'noLink'\" href=\"javascript:;\">\r\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\r\n</a>\r\n\r\n<ng-template #menuItemTemplate>\r\n  <div\r\n    class=\"po-menu-panel-item\"\r\n    p-tooltip-position=\"right\"\r\n    [class.po-menu-panel-item-selected]=\"menuItemInternal.isSelected\"\r\n    [p-tooltip]=\"menuItemInternal.label\"\r\n    (click)=\"clickMenuItem($event)\"\r\n  >\r\n    <span class=\"po-icon {{ menuItemInternal.icon }}\"></span>\r\n  </div>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-menu-panel-item', template: "<!-- menu com link interno -->\n<a *ngIf=\"menuItemInternal.type === 'internalLink'\" [routerLink]=\"menuItemInternal.link\">\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</a>\n\n<!-- menu com link externo -->\n<a *ngIf=\"menuItemInternal.type === 'externalLink'\" [href]=\"menuItemInternal.link\">\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</a>\n\n<!-- menu sem link -->\n<a *ngIf=\"menuItemInternal.type === 'noLink'\" href=\"javascript:;\">\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</a>\n\n<ng-template #menuItemTemplate>\n  <div\n    class=\"po-menu-panel-item\"\n    p-tooltip-position=\"right\"\n    [class.po-menu-panel-item-selected]=\"menuItemInternal.isSelected\"\n    [p-tooltip]=\"menuItemInternal.label\"\n    (click)=\"clickMenuItem($event)\"\n  >\n    <span class=\"po-icon {{ menuItemInternal.icon }}\"></span>\n  </div>\n</ng-template>\n" }]
     }], function () { return [{ type: PoMenuPanelItemsService }]; }, { menuItemInternal: [{
             type: Input,
             args: ['p-menu-item-internal']
@@ -42417,7 +42430,7 @@ class PoMenuPanelComponent extends PoMenuPanelBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMenuPanelComponent, [{
         type: Component,
-        args: [{ selector: 'po-menu-panel', template: "<div class=\"po-menu-panel\">\r\n  <div class=\"po-menu-panel-logo-container\">\r\n    <po-logo *ngIf=\"logo\" p-class=\"po-menu-panel-logo\" [p-logo]=\"logo\" [p-logo-alt]=\"logoAlt\"></po-logo>\r\n  </div>\r\n\r\n  <nav class=\"po-menu-panel-container\">\r\n    <div class=\"po-menu-panel-inner\">\r\n      <div *ngFor=\"let menu of menus; let menuIndex = index\" class=\"po-menu-panel-item-wrapper\">\r\n        <po-menu-panel-item\r\n          [class.po-menu-panel-item-first]=\"menuIndex === 0\"\r\n          [p-menu-item-internal]=\"menu\"\r\n        ></po-menu-panel-item>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-menu-panel', template: "<div class=\"po-menu-panel\">\n  <div class=\"po-menu-panel-logo-container\">\n    <po-logo *ngIf=\"logo\" p-class=\"po-menu-panel-logo\" [p-logo]=\"logo\" [p-logo-alt]=\"logoAlt\"></po-logo>\n  </div>\n\n  <nav class=\"po-menu-panel-container\">\n    <div class=\"po-menu-panel-inner\">\n      <div *ngFor=\"let menu of menus; let menuIndex = index\" class=\"po-menu-panel-item-wrapper\">\n        <po-menu-panel-item\n          [class.po-menu-panel-item-first]=\"menuIndex === 0\"\n          [p-menu-item-internal]=\"menu\"\n        ></po-menu-panel-item>\n      </div>\n    </div>\n  </nav>\n</div>\n" }]
     }], function () { return [{ type: i0.ViewContainerRef }, { type: i1.Location }, { type: PoMenuPanelItemsService }, { type: i2.Router }]; }, null); })();
 /**
@@ -42554,7 +42567,7 @@ class PoBadgeComponent extends PoBadgeBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoBadgeComponent, [{
         type: Component,
-        args: [{ selector: 'po-badge', template: "<div class=\"po-badge po-{{ color }}\">\r\n  <span class=\"po-badge-value\">{{ badgeValue }}</span>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-badge', template: "<div class=\"po-badge po-{{ color }}\">\n  <span class=\"po-badge-value\">{{ badgeValue }}</span>\n</div>\n" }]
     }], null, null); })();
 /**
@@ -42647,7 +42660,7 @@ class PoMenuFilterComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMenuFilterComponent, [{
         type: Component,
-        args: [{ selector: 'po-menu-filter', template: "<div class=\"po-menu-filter-container\" [class.po-menu-filter-container-hidden]=\"enableCollapse\">\r\n  <input\r\n    #inputFilter\r\n    type=\"text\"\r\n    class=\"po-menu-filter\"\r\n    [placeholder]=\"literals.search\"\r\n    (keyup)=\"filterItems(inputFilter.value)\"\r\n  />\r\n\r\n  <div class=\"po-menu-filter-search-icon-container\">\r\n    <span *ngIf=\"!loading\" class=\"po-icon po-menu-filter-icon po-icon-search\"></span>\r\n    <po-loading-icon *ngIf=\"loading\"></po-loading-icon>\r\n  </div>\r\n  <div class=\"po-menu-filter-close-icon-container\">\r\n    <po-clean [p-element-ref]=\"inputFilterElement\" (p-change-event)=\"filterItems(inputFilter.value)\"></po-clean>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-menu-filter', template: "<div class=\"po-menu-filter-container\" [class.po-menu-filter-container-hidden]=\"enableCollapse\">\n  <input\n    #inputFilter\n    type=\"text\"\n    class=\"po-menu-filter\"\n    [placeholder]=\"literals.search\"\n    (keyup)=\"filterItems(inputFilter.value)\"\n  />\n\n  <div class=\"po-menu-filter-search-icon-container\">\n    <span *ngIf=\"!loading\" class=\"po-icon po-menu-filter-icon po-icon-search\"></span>\n    <po-loading-icon *ngIf=\"loading\"></po-loading-icon>\n  </div>\n  <div class=\"po-menu-filter-close-icon-container\">\n    <po-clean [p-element-ref]=\"inputFilterElement\" (p-change-event)=\"filterItems(inputFilter.value)\"></po-clean>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: PoLanguageService }]; }, { loading: [{
             type: Input,
             args: ['p-loading']
@@ -43087,7 +43100,7 @@ class PoMenuItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMenuItemComponent, [{
         type: Component,
-        args: [{ selector: 'po-menu-item', template: "<!-- menu com link interno -->\r\n<a\r\n  *ngIf=\"type === 'internalLink'\"\r\n  class=\"po-menu-item-link\"\r\n  role=\"menuitem\"\r\n  [attr.aria-label]=\"label\"\r\n  [routerLink]=\"link\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\r\n</a>\r\n<!-- menu com link externo -->\r\n<a *ngIf=\"type === 'externalLink'\" class=\"po-menu-item-link\" role=\"menuitem\" [attr.aria-label]=\"label\" [href]=\"link\">\r\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\r\n</a>\r\n<!-- menu sem link -->\r\n<a *ngIf=\"type === 'noLink'\" class=\"po-menu-item-link\" href=\"javascript:;\" role=\"menuitem\" [attr.aria-label]=\"label\">\r\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\r\n</a>\r\n<!-- menu sem dados -->\r\n<div *ngIf=\"type === 'noData'\" class=\"po-menu-item-link\" role=\"none\">\r\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\r\n</div>\r\n<!-- menu com sub itens -->\r\n<div\r\n  *ngIf=\"type === 'subItems'\"\r\n  class=\"po-menu-item-link po-clickable\"\r\n  role=\"menuitem\"\r\n  [attr.aria-expanded]=\"isOpened ? true : false\"\r\n>\r\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\r\n\r\n  <div\r\n    #menuSubItems\r\n    class=\"po-menu-sub-items\"\r\n    [hidden]=\"collapsedMenu || !isOpened\"\r\n    [attr.aria-expanded]=\"isOpened ? true : false\"\r\n    [attr.aria-hidden]=\"!isOpened ? true : false\"\r\n    role=\"group\"\r\n    [style.maxHeight.px]=\"maxHeight\"\r\n  >\r\n    <ul class=\"po-menu-sub-items-list\">\r\n      <li class=\"po-menu-subm-items-list-item\" *ngFor=\"let subItem of subItems\" [attr.aria-level]=\"subItem.level\">\r\n        <po-menu-item\r\n          p-is-sub-item\r\n          [p-action]=\"subItem.action\"\r\n          [p-badge-alert]=\"subItem.badgeAlert\"\r\n          [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\r\n          [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\r\n          [p-id]=\"subItem.id\"\r\n          [p-label]=\"subItem.label\"\r\n          [p-level]=\"subItem.level\"\r\n          [p-link]=\"subItem.link\"\r\n          [p-sub-items]=\"subItem.subItems\"\r\n          [p-type]=\"subItem.type\"\r\n        ></po-menu-item>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #menuItemTemplate>\r\n  <div\r\n    class=\"po-menu-item\"\r\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\r\n    [attr.aria-label]=\"label\"\r\n    [attr.aria-hidden]=\"type === 'subItems' ? false : true\"\r\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\r\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\r\n    [class.po-menu-item-selected]=\"isSelected\"\r\n    [class.po-menu-item-level-two]=\"level === 2\"\r\n    [class.po-menu-item-level-three]=\"level === 3\"\r\n    [class.po-menu-item-level-four]=\"level === 4\"\r\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\r\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\r\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\r\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\r\n    (click)=\"clickMenuItem($event)\"\r\n    (keydown.enter)=\"clickMenuItem($event)\"\r\n    (keydown.space)=\"clickMenuItem($event)\"\r\n  >\r\n    <po-icon *ngIf=\"level === 1 && icon\" aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\r\n\r\n    <span\r\n      *ngIf=\"type === 'subItems' && !collapsedMenu\"\r\n      class=\"po-icon po-menu-group-icon\"\r\n      [class.po-icon-arrow-up]=\"isOpened\"\r\n      [class.po-icon-arrow-down]=\"!isOpened\"\r\n    ></span>\r\n\r\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\r\n      {{ label }}\r\n    </span>\r\n\r\n    <po-badge\r\n      *ngIf=\"canShowBadge\"\r\n      aria-hidden=\"true\"\r\n      [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\r\n      [p-color]=\"badgeColor\"\r\n      [p-value]=\"badgeValue\"\r\n    ></po-badge>\r\n\r\n    <span\r\n      *ngIf=\"badgeAlert\"\r\n      aria-hidden=\"true\"\r\n      class=\"po-color-07\"\r\n      [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\r\n    ></span>\r\n  </div>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-menu-item', template: "<!-- menu com link interno -->\n<a\n  *ngIf=\"type === 'internalLink'\"\n  class=\"po-menu-item-link\"\n  role=\"menuitem\"\n  [attr.aria-label]=\"label\"\n  [routerLink]=\"link\"\n>\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</a>\n<!-- menu com link externo -->\n<a *ngIf=\"type === 'externalLink'\" class=\"po-menu-item-link\" role=\"menuitem\" [attr.aria-label]=\"label\" [href]=\"link\">\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</a>\n<!-- menu sem link -->\n<a *ngIf=\"type === 'noLink'\" class=\"po-menu-item-link\" href=\"javascript:;\" role=\"menuitem\" [attr.aria-label]=\"label\">\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</a>\n<!-- menu sem dados -->\n<div *ngIf=\"type === 'noData'\" class=\"po-menu-item-link\" role=\"none\">\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n</div>\n<!-- menu com sub itens -->\n<div\n  *ngIf=\"type === 'subItems'\"\n  class=\"po-menu-item-link po-clickable\"\n  role=\"menuitem\"\n  [attr.aria-expanded]=\"isOpened ? true : false\"\n>\n  <ng-container *ngTemplateOutlet=\"menuItemTemplate\"></ng-container>\n\n  <div\n    #menuSubItems\n    class=\"po-menu-sub-items\"\n    [hidden]=\"collapsedMenu || !isOpened\"\n    [attr.aria-expanded]=\"isOpened ? true : false\"\n    [attr.aria-hidden]=\"!isOpened ? true : false\"\n    role=\"group\"\n    [style.maxHeight.px]=\"maxHeight\"\n  >\n    <ul class=\"po-menu-sub-items-list\">\n      <li class=\"po-menu-subm-items-list-item\" *ngFor=\"let subItem of subItems\" [attr.aria-level]=\"subItem.level\">\n        <po-menu-item\n          p-is-sub-item\n          [p-action]=\"subItem.action\"\n          [p-badge-alert]=\"subItem.badgeAlert\"\n          [p-badge-color]=\"subItem.badge ? subItem.badge.color : undefined\"\n          [p-badge-value]=\"subItem.badge ? subItem.badge.value : undefined\"\n          [p-id]=\"subItem.id\"\n          [p-label]=\"subItem.label\"\n          [p-level]=\"subItem.level\"\n          [p-link]=\"subItem.link\"\n          [p-sub-items]=\"subItem.subItems\"\n          [p-type]=\"subItem.type\"\n        ></po-menu-item>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template #menuItemTemplate>\n  <div\n    class=\"po-menu-item\"\n    [tabindex]=\"type === 'subItems' ? 0 : -1\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-hidden]=\"type === 'subItems' ? false : true\"\n    [attr.role]=\"type === 'subItems' ? 'menuitem' : undefined\"\n    [class.po-menu-icon-container]=\"level === 1 && icon\"\n    [class.po-menu-item-selected]=\"isSelected\"\n    [class.po-menu-item-level-two]=\"level === 2\"\n    [class.po-menu-item-level-three]=\"level === 3\"\n    [class.po-menu-item-level-four]=\"level === 4\"\n    [class.po-menu-item-grouper-up]=\"type === 'subItems' && isOpened\"\n    [class.po-menu-item-grouper-down]=\"type === 'subItems' && !isOpened\"\n    [class.po-menu-item-no-data]=\"type === 'noData'\"\n    [class.po-menu-sub-item-selected]=\"isSelectedSubItem\"\n    (click)=\"clickMenuItem($event)\"\n    (keydown.enter)=\"clickMenuItem($event)\"\n    (keydown.space)=\"clickMenuItem($event)\"\n  >\n    <po-icon *ngIf=\"level === 1 && icon\" aria-hidden=\"true\" class=\"po-menu-icon-item\" [p-icon]=\"icon\"></po-icon>\n\n    <span\n      *ngIf=\"type === 'subItems' && !collapsedMenu\"\n      class=\"po-icon po-menu-group-icon\"\n      [class.po-icon-arrow-up]=\"isOpened\"\n      [class.po-icon-arrow-down]=\"!isOpened\"\n    ></span>\n\n    <span [class.po-menu-icon-label]=\"level === 1 && icon\">\n      {{ label }}\n    </span>\n\n    <po-badge\n      *ngIf=\"canShowBadge\"\n      aria-hidden=\"true\"\n      [ngClass]=\"!collapsedMenu ? 'po-menu-badge-align' : 'po-menu-badge-align-collapsed'\"\n      [p-color]=\"badgeColor\"\n      [p-value]=\"badgeValue\"\n    ></po-badge>\n\n    <span\n      *ngIf=\"badgeAlert\"\n      aria-hidden=\"true\"\n      class=\"po-color-07\"\n      [ngClass]=\"!collapsedMenu ? 'po-menu-badge-alert' : 'po-menu-badge-alert-collapsed'\"\n    ></span>\n  </div>\n</ng-template>\n" }]
     }], function () { return [{ type: PoMenuItemsService }]; }, { action: [{
             type: Input,
             args: ['p-action']
@@ -44165,7 +44178,7 @@ class PoMenuComponent extends PoMenuBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMenuComponent, [{
         type: Component,
-        args: [{ selector: 'po-menu', providers: [PoMenuItemsService, PoMenuService], template: "<div *ngIf=\"mobileOpened\" class=\"po-menu-overlay\" (click)=\"toggleMenuMobile()\"></div>\r\n\r\n<div>\r\n  <div class=\"po-menu-mobile po-clickable\" (click)=\"toggleMenuMobile()\">\r\n    <po-icon p-icon=\"po-icon-menu\"></po-icon>\r\n  </div>\r\n\r\n  <div class=\"po-menu\" [attr.aria-expanded]=\"!collapsed\" [ngClass]=\"{ 'po-menu-animation': mobileOpened }\">\r\n    <div class=\"po-menu-container\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n      <div class=\"po-menu-header\">\r\n        <div *ngIf=\"logo || (shortLogo && enableCollapse)\" class=\"po-menu-header-container-logo\">\r\n          <po-logo\r\n            [p-class]=\"enableCollapse ? 'po-menu-short-logo' : 'po-menu-logo'\"\r\n            [p-logo]=\"enableCollapse ? shortLogo || logo : logo\"\r\n            [p-logo-alt]=\"logoAlt\"\r\n          ></po-logo>\r\n        </div>\r\n\r\n        <div *ngIf=\"!enableCollapse && menuHeaderTemplate\" class=\"po-menu-header-template\">\r\n          <ng-container *ngTemplateOutlet=\"menuHeaderTemplate.templateRef\"></ng-container>\r\n        </div>\r\n\r\n        <po-menu-filter\r\n          *ngIf=\"filter\"\r\n          [p-enable-collapse]=\"enableCollapse\"\r\n          [p-loading]=\"filterLoading\"\r\n          (p-filter)=\"debounceFilter($event)\"\r\n        ></po-menu-filter>\r\n      </div>\r\n\r\n      <div class=\"po-menu-body\">\r\n        <div class=\"po-menu-outer\">\r\n          <div class=\"po-menu-inner\">\r\n            <nav class=\"po-menu-nav\">\r\n              <ul class=\"po-menu-list\" role=\"menu\">\r\n                <li *ngIf=\"noData\" class=\"po-menu-list-item\" role=\"presentation\">\r\n                  <po-menu-item\r\n                    p-icon=\"po-icon-info\"\r\n                    p-type=\"noData\"\r\n                    [p-level]=\"1\"\r\n                    [p-label]=\"literals.itemNotFound\"\r\n                    [p-short-label]=\"literals.itemNotFound\"\r\n                  ></po-menu-item>\r\n                </li>\r\n                <li\r\n                  *ngFor=\"let menu of filteredItems; let menuIndex = index\"\r\n                  class=\"po-menu-list-item\"\r\n                  role=\"presentation\"\r\n                  [attr.aria-level]=\"menu.level\"\r\n                  [class.po-menu-item-first]=\"menuIndex === 0\"\r\n                >\r\n                  <po-menu-item\r\n                    [p-action]=\"menu.action\"\r\n                    [p-badge-alert]=\"menu.badgeAlert\"\r\n                    [p-badge-color]=\"menu.badge ? menu.badge.color : undefined\"\r\n                    [p-badge-value]=\"menu.badge ? menu.badge.value : undefined\"\r\n                    [p-collapsed-menu]=\"enableCollapse\"\r\n                    [p-icon]=\"allowIcons ? menu.icon : null\"\r\n                    [p-id]=\"menu.id\"\r\n                    [p-label]=\"menu.label\"\r\n                    [p-level]=\"menu.level\"\r\n                    [p-link]=\"menu.link\"\r\n                    [p-short-label]=\"menu.shortLabel\"\r\n                    [p-sub-items]=\"menu.subItems\"\r\n                    [p-type]=\"menu.type\"\r\n                  ></po-menu-item>\r\n                </li>\r\n              </ul>\r\n            </nav>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasFooter\" class=\"po-menu-footer\">\r\n      <button\r\n        class=\"po-menu-collapse-button-icon\"\r\n        type=\"button\"\r\n        [attr.aria-label]=\"enableCollapseButton ? literals.close : literals.open\"\r\n        (click)=\"toggle()\"\r\n      >\r\n        <span *ngIf=\"enableCollapseButton\" aria-hidden=\"true\">{{ literals.close }}</span>\r\n\r\n        <po-icon [p-icon]=\"enableCollapse ? 'po-icon-menu-open' : 'po-icon-menu-close'\"></po-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-menu', providers: [PoMenuItemsService, PoMenuService], template: "<div *ngIf=\"mobileOpened\" class=\"po-menu-overlay\" (click)=\"toggleMenuMobile()\"></div>\n\n<div>\n  <div class=\"po-menu-mobile po-clickable\" (click)=\"toggleMenuMobile()\">\n    <po-icon p-icon=\"po-icon-menu\"></po-icon>\n  </div>\n\n  <div class=\"po-menu\" [attr.aria-expanded]=\"!collapsed\" [ngClass]=\"{ 'po-menu-animation': mobileOpened }\">\n    <div class=\"po-menu-container\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n      <div class=\"po-menu-header\">\n        <div *ngIf=\"logo || (shortLogo && enableCollapse)\" class=\"po-menu-header-container-logo\">\n          <po-logo\n            [p-class]=\"enableCollapse ? 'po-menu-short-logo' : 'po-menu-logo'\"\n            [p-logo]=\"enableCollapse ? shortLogo || logo : logo\"\n            [p-logo-alt]=\"logoAlt\"\n          ></po-logo>\n        </div>\n\n        <div *ngIf=\"!enableCollapse && menuHeaderTemplate\" class=\"po-menu-header-template\">\n          <ng-container *ngTemplateOutlet=\"menuHeaderTemplate.templateRef\"></ng-container>\n        </div>\n\n        <po-menu-filter\n          *ngIf=\"filter\"\n          [p-enable-collapse]=\"enableCollapse\"\n          [p-loading]=\"filterLoading\"\n          (p-filter)=\"debounceFilter($event)\"\n        ></po-menu-filter>\n      </div>\n\n      <div class=\"po-menu-body\">\n        <div class=\"po-menu-outer\">\n          <div class=\"po-menu-inner\">\n            <nav class=\"po-menu-nav\">\n              <ul class=\"po-menu-list\" role=\"menu\">\n                <li *ngIf=\"noData\" class=\"po-menu-list-item\" role=\"presentation\">\n                  <po-menu-item\n                    p-icon=\"po-icon-info\"\n                    p-type=\"noData\"\n                    [p-level]=\"1\"\n                    [p-label]=\"literals.itemNotFound\"\n                    [p-short-label]=\"literals.itemNotFound\"\n                  ></po-menu-item>\n                </li>\n                <li\n                  *ngFor=\"let menu of filteredItems; let menuIndex = index\"\n                  class=\"po-menu-list-item\"\n                  role=\"presentation\"\n                  [attr.aria-level]=\"menu.level\"\n                  [class.po-menu-item-first]=\"menuIndex === 0\"\n                >\n                  <po-menu-item\n                    [p-action]=\"menu.action\"\n                    [p-badge-alert]=\"menu.badgeAlert\"\n                    [p-badge-color]=\"menu.badge ? menu.badge.color : undefined\"\n                    [p-badge-value]=\"menu.badge ? menu.badge.value : undefined\"\n                    [p-collapsed-menu]=\"enableCollapse\"\n                    [p-icon]=\"allowIcons ? menu.icon : null\"\n                    [p-id]=\"menu.id\"\n                    [p-label]=\"menu.label\"\n                    [p-level]=\"menu.level\"\n                    [p-link]=\"menu.link\"\n                    [p-short-label]=\"menu.shortLabel\"\n                    [p-sub-items]=\"menu.subItems\"\n                    [p-type]=\"menu.type\"\n                  ></po-menu-item>\n                </li>\n              </ul>\n            </nav>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"hasFooter\" class=\"po-menu-footer\">\n      <button\n        class=\"po-menu-collapse-button-icon\"\n        type=\"button\"\n        [attr.aria-label]=\"enableCollapseButton ? literals.close : literals.open\"\n        (click)=\"toggle()\"\n      >\n        <span *ngIf=\"enableCollapseButton\" aria-hidden=\"true\">{{ literals.close }}</span>\n\n        <po-icon [p-icon]=\"enableCollapse ? 'po-icon-menu-open' : 'po-icon-menu-close'\"></po-icon>\n      </button>\n    </div>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.Router }, { type: PoMenuItemsService }, { type: PoMenuGlobalService }, { type: PoMenuService }, { type: PoLanguageService }]; }, { menuHeaderTemplate: [{
             type: ContentChild,
             args: [PoMenuHeaderTemplateDirective, { static: true }]
@@ -44229,7 +44242,7 @@ class PoNavbarActionComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoNavbarActionComponent, [{
         type: Component,
-        args: [{ selector: 'po-navbar-action', template: "<po-icon\r\n  tabindex=\"0\"\r\n  class=\"po-navbar-action-content po-clickable\"\r\n  [p-icon]=\"icon\"\r\n  [p-tooltip]=\"tooltip\"\r\n  (click)=\"click()\"\r\n></po-icon>\r\n" }]
+        args: [{ selector: 'po-navbar-action', template: "<po-icon\n  tabindex=\"0\"\n  class=\"po-navbar-action-content po-clickable\"\n  [p-icon]=\"icon\"\n  [p-tooltip]=\"tooltip\"\n  (click)=\"click()\"\n></po-icon>\n" }]
     }], function () { return [{ type: i0.ViewContainerRef }, { type: i2.Router }]; }, { action: [{
             type: Input,
             args: ['p-action']
@@ -44272,7 +44285,7 @@ class PoNavbarActionPopupComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoNavbarActionPopupComponent, [{
         type: Component,
-        args: [{ selector: 'po-navbar-action-popup', template: "<div tabindex=\"0\" #target class=\"po-navbar-action-popup-content po-clickable\" (click)=\"popup.toggle()\">\r\n  <span class=\"po-icon {{ getLastIconAction() }}\"></span>\r\n</div>\r\n\r\n<po-popup #popup [p-actions]=\"iconActions\" [p-target]=\"target\"> </po-popup>\r\n" }]
+        args: [{ selector: 'po-navbar-action-popup', template: "<div tabindex=\"0\" #target class=\"po-navbar-action-popup-content po-clickable\" (click)=\"popup.toggle()\">\n  <span class=\"po-icon {{ getLastIconAction() }}\"></span>\n</div>\n\n<po-popup #popup [p-actions]=\"iconActions\" [p-target]=\"target\"> </po-popup>\n" }]
     }], null, { iconActions: [{
             type: Input,
             args: ['p-icon-actions']
@@ -44304,7 +44317,7 @@ class PoNavbarActionsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoNavbarActionsComponent, [{
         type: Component,
-        args: [{ selector: 'po-navbar-actions', template: "<po-navbar-action\r\n  *ngFor=\"let iconAction of iconActions\"\r\n  class=\"po-navbar-action\"\r\n  [p-action]=\"iconAction.action\"\r\n  [p-icon]=\"iconAction.icon\"\r\n  [p-label]=\"iconAction.label\"\r\n  [p-link]=\"iconAction.link\"\r\n  [p-tooltip-text]=\"iconAction.tooltip\"\r\n>\r\n</po-navbar-action>\r\n\r\n<po-navbar-action-popup class=\"po-navbar-action-popup\" [p-icon-actions]=\"iconActions\"> </po-navbar-action-popup>\r\n" }]
+        args: [{ selector: 'po-navbar-actions', template: "<po-navbar-action\n  *ngFor=\"let iconAction of iconActions\"\n  class=\"po-navbar-action\"\n  [p-action]=\"iconAction.action\"\n  [p-icon]=\"iconAction.icon\"\n  [p-label]=\"iconAction.label\"\n  [p-link]=\"iconAction.link\"\n  [p-tooltip-text]=\"iconAction.tooltip\"\n>\n</po-navbar-action>\n\n<po-navbar-action-popup class=\"po-navbar-action-popup\" [p-icon-actions]=\"iconActions\"> </po-navbar-action-popup>\n" }]
     }], null, { iconActions: [{
             type: Input,
             args: ['p-icon-actions']
@@ -44344,7 +44357,7 @@ class PoNavbarItemNavigationIconComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoNavbarItemNavigationIconComponent, [{
         type: Component,
-        args: [{ selector: 'po-navbar-item-navigation-icon', template: "<div\r\n  [ngClass]=\"{ 'po-navbar-item-navigation-icon-disabled': disabled, 'po-clickable': !disabled }\"\r\n  tabindex=\"0\"\r\n  (click)=\"disabled ? undefined : click.emit(icon)\"\r\n>\r\n  <span class=\"po-icon po-icon-arrow-{{ icon }}\"></span>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-navbar-item-navigation-icon', template: "<div\n  [ngClass]=\"{ 'po-navbar-item-navigation-icon-disabled': disabled, 'po-clickable': !disabled }\"\n  tabindex=\"0\"\n  (click)=\"disabled ? undefined : click.emit(icon)\"\n>\n  <span class=\"po-icon po-icon-arrow-{{ icon }}\"></span>\n</div>\n" }]
     }], null, { disabled: [{
             type: Input,
             args: ['p-disabled']
@@ -44376,7 +44389,7 @@ class PoNavbarItemNavigationComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoNavbarItemNavigationComponent, [{
         type: Component,
-        args: [{ selector: 'po-navbar-item-navigation', template: "<po-navbar-item-navigation-icon\r\n  class=\"po-navbar-item-navigation-icon\"\r\n  p-icon=\"left\"\r\n  [p-disabled]=\"disableLeft\"\r\n  (p-click)=\"click.emit($event)\"\r\n>\r\n</po-navbar-item-navigation-icon>\r\n\r\n<po-navbar-item-navigation-icon\r\n  class=\"po-navbar-item-navigation-icon\"\r\n  p-icon=\"right\"\r\n  [p-disabled]=\"disableRight\"\r\n  (p-click)=\"click.emit($event)\"\r\n>\r\n</po-navbar-item-navigation-icon>\r\n" }]
+        args: [{ selector: 'po-navbar-item-navigation', template: "<po-navbar-item-navigation-icon\n  class=\"po-navbar-item-navigation-icon\"\n  p-icon=\"left\"\n  [p-disabled]=\"disableLeft\"\n  (p-click)=\"click.emit($event)\"\n>\n</po-navbar-item-navigation-icon>\n\n<po-navbar-item-navigation-icon\n  class=\"po-navbar-item-navigation-icon\"\n  p-icon=\"right\"\n  [p-disabled]=\"disableRight\"\n  (p-click)=\"click.emit($event)\"\n>\n</po-navbar-item-navigation-icon>\n" }]
     }], null, { disableLeft: [{
             type: Input,
             args: ['p-disable-left']
@@ -44460,7 +44473,7 @@ class PoNavbarItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoNavbarItemComponent, [{
         type: Component,
-        args: [{ selector: 'po-navbar-item', template: "<ng-container [ngSwitch]=\"type\">\r\n  <a\r\n    *ngSwitchCase=\"'externalLink'\"\r\n    class=\"po-navbar-item-link\"\r\n    [class.po-clickable]=\"clickable\"\r\n    [href]=\"link\"\r\n    target=\"_blank\"\r\n    (click)=\"itemClick()\"\r\n  >\r\n    {{ label }}\r\n  </a>\r\n\r\n  <a\r\n    *ngSwitchCase=\"'internalLink'\"\r\n    class=\"po-navbar-item-link\"\r\n    [class.po-clickable]=\"clickable\"\r\n    [routerLink]=\"link\"\r\n    (click)=\"itemClick(label, link)\"\r\n  >\r\n    {{ label }}\r\n  </a>\r\n</ng-container>\r\n" }]
+        args: [{ selector: 'po-navbar-item', template: "<ng-container [ngSwitch]=\"type\">\n  <a\n    *ngSwitchCase=\"'externalLink'\"\n    class=\"po-navbar-item-link\"\n    [class.po-clickable]=\"clickable\"\n    [href]=\"link\"\n    target=\"_blank\"\n    (click)=\"itemClick()\"\n  >\n    {{ label }}\n  </a>\n\n  <a\n    *ngSwitchCase=\"'internalLink'\"\n    class=\"po-navbar-item-link\"\n    [class.po-clickable]=\"clickable\"\n    [routerLink]=\"link\"\n    (click)=\"itemClick(label, link)\"\n  >\n    {{ label }}\n  </a>\n</ng-container>\n" }]
     }], null, { action: [{
             type: Input,
             args: ['p-action']
@@ -44549,7 +44562,7 @@ class PoNavbarItemsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoNavbarItemsComponent, [{
         type: Component,
-        args: [{ selector: 'po-navbar-items', template: "<nav>\r\n  <ul class=\"po-navbar-items-container\" #navbarItemsContainer>\r\n    <li *ngFor=\"let item of items\" class=\"po-navbar-item\" [class.po-navbar-item-selected]=\"selectedItem === item\">\r\n      <po-navbar-item\r\n        [p-action]=\"item.action\"\r\n        [p-clickable]=\"selectedItem !== item\"\r\n        [p-label]=\"item.label\"\r\n        [p-link]=\"item.link\"\r\n      >\r\n      </po-navbar-item>\r\n    </li>\r\n  </ul>\r\n</nav>\r\n" }]
+        args: [{ selector: 'po-navbar-items', template: "<nav>\n  <ul class=\"po-navbar-items-container\" #navbarItemsContainer>\n    <li *ngFor=\"let item of items\" class=\"po-navbar-item\" [class.po-navbar-item-selected]=\"selectedItem === item\">\n      <po-navbar-item\n        [p-action]=\"item.action\"\n        [p-clickable]=\"selectedItem !== item\"\n        [p-label]=\"item.label\"\n        [p-link]=\"item.link\"\n      >\n      </po-navbar-item>\n    </li>\n  </ul>\n</nav>\n" }]
     }], function () { return [{ type: i2.Router }]; }, { navbarItemsContainer: [{
             type: ViewChild,
             args: ['navbarItemsContainer', { read: ElementRef, static: true }]
@@ -44594,7 +44607,7 @@ class PoNavbarLogoComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoNavbarLogoComponent, [{
         type: Component,
-        args: [{ selector: 'po-navbar-logo', template: "<po-logo *ngIf=\"logo\" p-class=\"po-navbar-logo-image\" [p-logo]=\"logo\" [p-logo-alt]=\"logoAlt\"></po-logo>\r\n" }]
+        args: [{ selector: 'po-navbar-logo', template: "<po-logo *ngIf=\"logo\" p-class=\"po-navbar-logo-image\" [p-logo]=\"logo\" [p-logo-alt]=\"logoAlt\"></po-logo>\n" }]
     }], null, { logo: [{
             type: Input,
             args: ['p-logo']
@@ -45024,7 +45037,7 @@ class PoNavbarComponent extends PoNavbarBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoNavbarComponent, [{
         type: Component,
-        args: [{ selector: 'po-navbar', template: "<header class=\"po-navbar\" [ngClass]=\"{ 'po-navbar-shadow': shadow }\">\r\n  <po-navbar-logo\r\n    class=\"po-navbar-logo\"\r\n    [ngClass]=\"{ 'po-navbar-logo-menu': !!applicationMenu, 'po-navbar-no-logo': !logo }\"\r\n    [p-logo]=\"logo\"\r\n  >\r\n  </po-navbar-logo>\r\n\r\n  <po-navbar-items class=\"po-navbar-items\" [p-items]=\"items\"> </po-navbar-items>\r\n\r\n  <po-navbar-item-navigation\r\n    *ngIf=\"showItemsNavigation\"\r\n    class=\"po-navbar-item-navigation\"\r\n    [p-disable-left]=\"navbarItemNavigationDisableLeft\"\r\n    [p-disable-right]=\"navbarItemNavigationDisableRight\"\r\n    (p-click)=\"navigateItems($event)\"\r\n  >\r\n  </po-navbar-item-navigation>\r\n\r\n  <po-navbar-actions class=\"po-navbar-actions\" [p-icon-actions]=\"iconActions\"> </po-navbar-actions>\r\n</header>\r\n\r\n<po-menu *ngIf=\"!applicationMenu\" [p-menus]=\"items\"> </po-menu>\r\n" }]
+        args: [{ selector: 'po-navbar', template: "<header class=\"po-navbar\" [ngClass]=\"{ 'po-navbar-shadow': shadow }\">\n  <po-navbar-logo\n    class=\"po-navbar-logo\"\n    [ngClass]=\"{ 'po-navbar-logo-menu': !!applicationMenu, 'po-navbar-no-logo': !logo }\"\n    [p-logo]=\"logo\"\n  >\n  </po-navbar-logo>\n\n  <po-navbar-items class=\"po-navbar-items\" [p-items]=\"items\"> </po-navbar-items>\n\n  <po-navbar-item-navigation\n    *ngIf=\"showItemsNavigation\"\n    class=\"po-navbar-item-navigation\"\n    [p-disable-left]=\"navbarItemNavigationDisableLeft\"\n    [p-disable-right]=\"navbarItemNavigationDisableRight\"\n    (p-click)=\"navigateItems($event)\"\n  >\n  </po-navbar-item-navigation>\n\n  <po-navbar-actions class=\"po-navbar-actions\" [p-icon-actions]=\"iconActions\"> </po-navbar-actions>\n</header>\n\n<po-menu *ngIf=\"!applicationMenu\" [p-menus]=\"items\"> </po-menu>\n" }]
     }], function () { return [{ type: PoLanguageService }, { type: i0.Renderer2 }, { type: i2$3.AnimationBuilder }, { type: i0.ChangeDetectorRef }, { type: PoMenuGlobalService }]; }, { navbarItemsElement: [{
             type: ViewChild,
             args: [PoNavbarItemsComponent, { read: ElementRef, static: true }]
@@ -45168,7 +45181,7 @@ class PoPageContentComponent extends PoPageContentBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageContentComponent, [{
         type: Component,
-        args: [{ selector: 'po-page-content', template: "<div class=\"po-page-content\" [style.height]=\"height\" [style.opacity]=\"contentOpacity\" [style.overflow-y]=\"overflowY\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-page-content', template: "<div class=\"po-page-content\" [style.height]=\"height\" [style.opacity]=\"contentOpacity\" [style.overflow-y]=\"overflowY\">\n  <ng-content></ng-content>\n</div>\n" }]
     }], function () { return [{ type: i0.Renderer2 }]; }, null); })();
 const poPageDefaultLiteralsDefault = {
@@ -45340,7 +45353,7 @@ class PoPageComponent extends PoPageBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageComponent, [{
         type: Component,
-        args: [{ selector: 'po-page', template: "<div class=\"po-page\">\r\n  <ng-content> </ng-content>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-page', template: "<div class=\"po-page\">\n  <ng-content> </ng-content>\n</div>\n" }]
     }], null, null); })();
 /**
@@ -45417,7 +45430,7 @@ class PoPageHeaderComponent extends PoPageHeaderBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageHeaderComponent, [{
         type: Component,
-        args: [{ selector: 'po-page-header', template: "<div class=\"po-page-header\">\r\n  <!-- Breadcrumb -->\r\n  <div class=\"po-page-header-breadcrumb\" *ngIf=\"breadcrumb && breadcrumb.items.length\">\r\n    <po-breadcrumb\r\n      [p-favorite-service]=\"breadcrumb.favorite\"\r\n      [p-items]=\"breadcrumb.items\"\r\n      [p-params-service]=\"breadcrumb.params\"\r\n    >\r\n    </po-breadcrumb>\r\n  </div>\r\n\r\n  <div class=\"po-pt-1\">\r\n    <!-- Titulo -->\r\n    <h1 class=\"po-page-header-title\" *ngIf=\"title\">\r\n      {{ title }}\r\n    </h1>\r\n\r\n    <!-- Opera\u00E7\u00F5es -->\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-page-header', template: "<div class=\"po-page-header\">\n  <!-- Breadcrumb -->\n  <div class=\"po-page-header-breadcrumb\" *ngIf=\"breadcrumb && breadcrumb.items.length\">\n    <po-breadcrumb\n      [p-favorite-service]=\"breadcrumb.favorite\"\n      [p-items]=\"breadcrumb.items\"\n      [p-params-service]=\"breadcrumb.params\"\n    >\n    </po-breadcrumb>\n  </div>\n\n  <div class=\"po-pt-1\">\n    <!-- Titulo -->\n    <h1 class=\"po-page-header-title\" *ngIf=\"title\">\n      {{ title }}\n    </h1>\n\n    <!-- Opera\u00E7\u00F5es -->\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
     }], null, null); })();
 function PoPageDefaultComponent_po_page_header_1_po_dropdown_2_Template(rf, ctx) { if (rf & 1) {
@@ -45571,7 +45584,7 @@ class PoPageDefaultComponent extends PoPageDefaultBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageDefaultComponent, [{
         type: Component,
-        args: [{ selector: 'po-page-default', template: "<po-page>\r\n  <!-- HEADER -->\r\n  <po-page-header *ngIf=\"hasPageHeader()\" [p-breadcrumb]=\"breadcrumb\" [p-title]=\"title\">\r\n    <!-- OPERATIONS -->\r\n    <div class=\"po-page-header-actions\">\r\n      <po-dropdown\r\n        *ngIf=\"visibleActions.length > limitPrimaryActions\"\r\n        [p-label]=\"literals.otherActions\"\r\n        [p-actions]=\"dropdownActions\"\r\n      >\r\n      </po-dropdown>\r\n\r\n      <po-button\r\n        *ngIf=\"visibleActions.length === 3 && visibleActions[2] && !isMobile\"\r\n        [p-disabled]=\"actionIsDisabled(visibleActions[2])\"\r\n        [p-label]=\"visibleActions[2].label\"\r\n        (p-click)=\"callAction(visibleActions[2])\"\r\n      >\r\n      </po-button>\r\n\r\n      <po-button\r\n        *ngIf=\"visibleActions[1] && (visibleActions.length === 2 || !isMobile)\"\r\n        [p-disabled]=\"actionIsDisabled(visibleActions[1])\"\r\n        [p-label]=\"visibleActions[1].label\"\r\n        (p-click)=\"callAction(visibleActions[1])\"\r\n      >\r\n      </po-button>\r\n\r\n      <po-button\r\n        *ngIf=\"visibleActions[0]\"\r\n        p-kind=\"primary\"\r\n        [p-disabled]=\"actionIsDisabled(visibleActions[0])\"\r\n        [p-icon]=\"visibleActions[0].icon\"\r\n        [p-label]=\"visibleActions[0].label\"\r\n        (p-click)=\"callAction(visibleActions[0])\"\r\n      >\r\n      </po-button>\r\n    </div>\r\n  </po-page-header>\r\n\r\n  <!-- CONTENT -->\r\n  <po-page-content>\r\n    <ng-content></ng-content>\r\n  </po-page-content>\r\n</po-page>\r\n" }]
+        args: [{ selector: 'po-page-default', template: "<po-page>\n  <!-- HEADER -->\n  <po-page-header *ngIf=\"hasPageHeader()\" [p-breadcrumb]=\"breadcrumb\" [p-title]=\"title\">\n    <!-- OPERATIONS -->\n    <div class=\"po-page-header-actions\">\n      <po-dropdown\n        *ngIf=\"visibleActions.length > limitPrimaryActions\"\n        [p-label]=\"literals.otherActions\"\n        [p-actions]=\"dropdownActions\"\n      >\n      </po-dropdown>\n\n      <po-button\n        *ngIf=\"visibleActions.length === 3 && visibleActions[2] && !isMobile\"\n        [p-disabled]=\"actionIsDisabled(visibleActions[2])\"\n        [p-label]=\"visibleActions[2].label\"\n        (p-click)=\"callAction(visibleActions[2])\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"visibleActions[1] && (visibleActions.length === 2 || !isMobile)\"\n        [p-disabled]=\"actionIsDisabled(visibleActions[1])\"\n        [p-label]=\"visibleActions[1].label\"\n        (p-click)=\"callAction(visibleActions[1])\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"visibleActions[0]\"\n        p-kind=\"primary\"\n        [p-disabled]=\"actionIsDisabled(visibleActions[0])\"\n        [p-icon]=\"visibleActions[0].icon\"\n        [p-label]=\"visibleActions[0].label\"\n        (p-click)=\"callAction(visibleActions[0])\"\n      >\n      </po-button>\n    </div>\n  </po-page-header>\n\n  <!-- CONTENT -->\n  <po-page-content>\n    <ng-content></ng-content>\n  </po-page-content>\n</po-page>\n" }]
     }], function () { return [{ type: i0.ViewContainerRef }, { type: PoLanguageService }, { type: i0.Renderer2 }, { type: i2.Router }]; }, null); })();
 const poPageDetailLiteralsDefault = {
@@ -45857,7 +45870,7 @@ class PoPageDetailComponent extends PoPageDetailBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageDetailComponent, [{
         type: Component,
-        args: [{ selector: 'po-page-detail', template: "<po-page>\r\n  <!-- HEADER -->\r\n  <po-page-header *ngIf=\"hasPageHeader()\" [p-breadcrumb]=\"breadcrumb\" [p-title]=\"title\">\r\n    <!-- OPERATIONS -->\r\n    <div *ngIf=\"hasAnyAction()\" class=\"po-page-header-actions\">\r\n      <po-button\r\n        *ngIf=\"hasEvent('back')\"\r\n        [p-icon]=\"hasEditOrRemoveFn('icon')\"\r\n        [p-label]=\"literals.back\"\r\n        [p-kind]=\"hasEditOrRemoveFn('type')\"\r\n        (p-click)=\"back.emit()\"\r\n      >\r\n      </po-button>\r\n\r\n      <po-button\r\n        *ngIf=\"hasEvent('remove')\"\r\n        [p-icon]=\"hasEditFn('icon')\"\r\n        [p-label]=\"literals.remove\"\r\n        [p-kind]=\"hasEditFn('type')\"\r\n        (p-click)=\"remove.emit()\"\r\n      >\r\n      </po-button>\r\n\r\n      <po-button\r\n        *ngIf=\"hasEvent('edit')\"\r\n        p-icon=\"po-icon-edit\"\r\n        p-kind=\"primary\"\r\n        [p-label]=\"literals.edit\"\r\n        (p-click)=\"edit.emit()\"\r\n      >\r\n      </po-button>\r\n    </div>\r\n  </po-page-header>\r\n\r\n  <!-- CONTENT -->\r\n  <po-page-content>\r\n    <ng-content> </ng-content>\r\n  </po-page-content>\r\n</po-page>\r\n" }]
+        args: [{ selector: 'po-page-detail', template: "<po-page>\n  <!-- HEADER -->\n  <po-page-header *ngIf=\"hasPageHeader()\" [p-breadcrumb]=\"breadcrumb\" [p-title]=\"title\">\n    <!-- OPERATIONS -->\n    <div *ngIf=\"hasAnyAction()\" class=\"po-page-header-actions\">\n      <po-button\n        *ngIf=\"hasEvent('back')\"\n        [p-icon]=\"hasEditOrRemoveFn('icon')\"\n        [p-label]=\"literals.back\"\n        [p-kind]=\"hasEditOrRemoveFn('type')\"\n        (p-click)=\"back.emit()\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"hasEvent('remove')\"\n        [p-icon]=\"hasEditFn('icon')\"\n        [p-label]=\"literals.remove\"\n        [p-kind]=\"hasEditFn('type')\"\n        (p-click)=\"remove.emit()\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"hasEvent('edit')\"\n        p-icon=\"po-icon-edit\"\n        p-kind=\"primary\"\n        [p-label]=\"literals.edit\"\n        (p-click)=\"edit.emit()\"\n      >\n      </po-button>\n    </div>\n  </po-page-header>\n\n  <!-- CONTENT -->\n  <po-page-content>\n    <ng-content> </ng-content>\n  </po-page-content>\n</po-page>\n" }]
     }], null, null); })();
 const poPageEditLiteralsDefault = {
@@ -46155,7 +46168,7 @@ class PoPageEditComponent extends PoPageEditBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageEditComponent, [{
         type: Component,
-        args: [{ selector: 'po-page-edit', template: "<po-page>\r\n  <!-- HEADER -->\r\n  <po-page-header *ngIf=\"hasPageHeader()\" [p-breadcrumb]=\"breadcrumb\" [p-title]=\"title\">\r\n    <!-- OPERATIONS -->\r\n    <div *ngIf=\"hasAnyAction()\" class=\"po-page-header-actions\">\r\n      <po-button\r\n        *ngIf=\"hasEvent('cancel')\"\r\n        [p-icon]=\"getIcon('cancel')\"\r\n        [p-label]=\"literals.cancel\"\r\n        [p-kind]=\"getType('cancel')\"\r\n        (p-click)=\"cancel.emit()\"\r\n      >\r\n      </po-button>\r\n\r\n      <po-button\r\n        *ngIf=\"hasEvent('saveNew')\"\r\n        [p-disabled]=\"disableSubmit\"\r\n        [p-icon]=\"getIcon('saveNew')\"\r\n        [p-label]=\"literals.saveNew\"\r\n        [p-kind]=\"getType('saveNew')\"\r\n        (p-click)=\"saveNew.emit()\"\r\n      >\r\n      </po-button>\r\n\r\n      <po-button\r\n        *ngIf=\"hasEvent('save')\"\r\n        p-icon=\"po-icon-ok\"\r\n        p-kind=\"primary\"\r\n        [p-disabled]=\"disableSubmit\"\r\n        [p-label]=\"literals.save\"\r\n        (p-click)=\"save.emit()\"\r\n      >\r\n      </po-button>\r\n    </div>\r\n  </po-page-header>\r\n\r\n  <!-- CONTENT -->\r\n  <po-page-content>\r\n    <ng-content> </ng-content>\r\n  </po-page-content>\r\n</po-page>\r\n" }]
+        args: [{ selector: 'po-page-edit', template: "<po-page>\n  <!-- HEADER -->\n  <po-page-header *ngIf=\"hasPageHeader()\" [p-breadcrumb]=\"breadcrumb\" [p-title]=\"title\">\n    <!-- OPERATIONS -->\n    <div *ngIf=\"hasAnyAction()\" class=\"po-page-header-actions\">\n      <po-button\n        *ngIf=\"hasEvent('cancel')\"\n        [p-icon]=\"getIcon('cancel')\"\n        [p-label]=\"literals.cancel\"\n        [p-kind]=\"getType('cancel')\"\n        (p-click)=\"cancel.emit()\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"hasEvent('saveNew')\"\n        [p-disabled]=\"disableSubmit\"\n        [p-icon]=\"getIcon('saveNew')\"\n        [p-label]=\"literals.saveNew\"\n        [p-kind]=\"getType('saveNew')\"\n        (p-click)=\"saveNew.emit()\"\n      >\n      </po-button>\n\n      <po-button\n        *ngIf=\"hasEvent('save')\"\n        p-icon=\"po-icon-ok\"\n        p-kind=\"primary\"\n        [p-disabled]=\"disableSubmit\"\n        [p-label]=\"literals.save\"\n        (p-click)=\"save.emit()\"\n      >\n      </po-button>\n    </div>\n  </po-page-header>\n\n  <!-- CONTENT -->\n  <po-page-content>\n    <ng-content> </ng-content>\n  </po-page-content>\n</po-page>\n" }]
     }], null, null); })();
 const poPageListLiteralsDefault = {
@@ -46638,7 +46651,7 @@ class PoPageListComponent extends PoPageListBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageListComponent, [{
         type: Component,
-        args: [{ selector: 'po-page-list', template: "<po-page>\r\n  <!-- HEADER -->\r\n  <po-page-header\r\n    *ngIf=\"hasPageHeader()\"\r\n    [class.po-page-list-header-padding]=\"filter && !visibleActions.length\"\r\n    [p-breadcrumb]=\"breadcrumb\"\r\n    [p-title]=\"title\"\r\n  >\r\n    <!-- OPERATIONS -->\r\n    <div class=\"po-page-list-operations\">\r\n      <div class=\"po-page-list-actions\" [class.po-page-list-actions-padding]=\"filter\">\r\n        <po-button\r\n          *ngIf=\"visibleActions[0]\"\r\n          p-kind=\"primary\"\r\n          [p-disabled]=\"actionIsDisabled(actions[0])\"\r\n          [p-icon]=\"visibleActions[0].icon\"\r\n          [p-label]=\"visibleActions[0].label\"\r\n          (p-click)=\"callAction(visibleActions[0])\"\r\n        >\r\n        </po-button>\r\n\r\n        <po-button\r\n          *ngIf=\"visibleActions[1] && (visibleActions.length === 2 || !isMobile)\"\r\n          [p-disabled]=\"actionIsDisabled(actions[1])\"\r\n          [p-label]=\"visibleActions[1].label\"\r\n          (p-click)=\"callAction(visibleActions[1])\"\r\n        >\r\n        </po-button>\r\n\r\n        <po-button\r\n          *ngIf=\"visibleActions.length === 3 && visibleActions[2] && !isMobile\"\r\n          [p-disabled]=\"actionIsDisabled(visibleActions[2])\"\r\n          [p-label]=\"visibleActions[2].label\"\r\n          (p-click)=\"callAction(visibleActions[2])\"\r\n        >\r\n        </po-button>\r\n\r\n        <po-dropdown\r\n          *ngIf=\"visibleActions.length > limitPrimaryActions\"\r\n          [p-actions]=\"dropdownActions\"\r\n          [p-label]=\"literals.otherActions\"\r\n        >\r\n        </po-dropdown>\r\n      </div>\r\n\r\n      <!-- FILTER -->\r\n      <div\r\n        class=\"po-page-list-filter-wrapper\"\r\n        *ngIf=\"filter\"\r\n        [ngClass]=\"hasCustomFilterSize() ? filterSizeClass(filter.width) : ''\"\r\n      >\r\n        <div\r\n          class=\"po-field-container-content po-page-filter-content\"\r\n          [ngClass]=\"\r\n            hasCustomFilterSize()\r\n              ? filter.advancedAction\r\n                ? 'po-page-filter-input-variable-size'\r\n                : 'po-page-filter-input-variable-size-wo-adv-search'\r\n              : ''\r\n          \"\r\n        >\r\n          <div class=\"po-field-icon-container-right\">\r\n            <span class=\"po-icon po-icon-search po-field-icon po-icon-input\" (click)=\"callActionFilter('action')\">\r\n            </span>\r\n          </div>\r\n\r\n          <input\r\n            #filterInput\r\n            class=\"po-input po-input-icon-right\"\r\n            name=\"model\"\r\n            type=\"text\"\r\n            [placeholder]=\"filter.placeholder || ''\"\r\n            (keypress)=\"onkeypress($event.keyCode)\"\r\n            [value]=\"quickSearchValue || ''\"\r\n          />\r\n        </div>\r\n\r\n        <div class=\"po-page-list-filter-search\" *ngIf=\"filter.advancedAction\">\r\n          <span\r\n            class=\"po-page-list-filter-search-link\"\r\n            tabindex=\"0\"\r\n            (click)=\"callActionFilter('advancedAction')\"\r\n            (keydown.enter)=\"callActionFilter('advancedAction')\"\r\n          >\r\n            {{ advancedSearch }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- DISCLAIMER -->\r\n    <po-disclaimer-group\r\n      *ngIf=\"!!disclaimerGroup\"\r\n      [class.po-page-list-disclaimer-group]=\"!!disclaimerGroup?.disclaimers?.length\"\r\n      [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\r\n      [p-hide-remove-all]=\"disclaimerGroup?.hideRemoveAll\"\r\n      [p-title]=\"disclaimerGroup?.title\"\r\n      (p-change)=\"onChangeDisclaimerGroup($event)\"\r\n      (p-remove)=\"onRemoveDisclaimer($event)\"\r\n      (p-remove-all)=\"onRemoveAllDisclaimers($event)\"\r\n    >\r\n    </po-disclaimer-group>\r\n  </po-page-header>\r\n\r\n  <!-- CONTENT -->\r\n  <po-page-content>\r\n    <ng-content></ng-content>\r\n  </po-page-content>\r\n</po-page>\r\n" }]
+        args: [{ selector: 'po-page-list', template: "<po-page>\n  <!-- HEADER -->\n  <po-page-header\n    *ngIf=\"hasPageHeader()\"\n    [class.po-page-list-header-padding]=\"filter && !visibleActions.length\"\n    [p-breadcrumb]=\"breadcrumb\"\n    [p-title]=\"title\"\n  >\n    <!-- OPERATIONS -->\n    <div class=\"po-page-list-operations\">\n      <div class=\"po-page-list-actions\" [class.po-page-list-actions-padding]=\"filter\">\n        <po-button\n          *ngIf=\"visibleActions[0]\"\n          p-kind=\"primary\"\n          [p-disabled]=\"actionIsDisabled(actions[0])\"\n          [p-icon]=\"visibleActions[0].icon\"\n          [p-label]=\"visibleActions[0].label\"\n          (p-click)=\"callAction(visibleActions[0])\"\n        >\n        </po-button>\n\n        <po-button\n          *ngIf=\"visibleActions[1] && (visibleActions.length === 2 || !isMobile)\"\n          [p-disabled]=\"actionIsDisabled(actions[1])\"\n          [p-label]=\"visibleActions[1].label\"\n          (p-click)=\"callAction(visibleActions[1])\"\n        >\n        </po-button>\n\n        <po-button\n          *ngIf=\"visibleActions.length === 3 && visibleActions[2] && !isMobile\"\n          [p-disabled]=\"actionIsDisabled(visibleActions[2])\"\n          [p-label]=\"visibleActions[2].label\"\n          (p-click)=\"callAction(visibleActions[2])\"\n        >\n        </po-button>\n\n        <po-dropdown\n          *ngIf=\"visibleActions.length > limitPrimaryActions\"\n          [p-actions]=\"dropdownActions\"\n          [p-label]=\"literals.otherActions\"\n        >\n        </po-dropdown>\n      </div>\n\n      <!-- FILTER -->\n      <div\n        class=\"po-page-list-filter-wrapper\"\n        *ngIf=\"filter\"\n        [ngClass]=\"hasCustomFilterSize() ? filterSizeClass(filter.width) : ''\"\n      >\n        <div\n          class=\"po-field-container-content po-page-filter-content\"\n          [ngClass]=\"\n            hasCustomFilterSize()\n              ? filter.advancedAction\n                ? 'po-page-filter-input-variable-size'\n                : 'po-page-filter-input-variable-size-wo-adv-search'\n              : ''\n          \"\n        >\n          <div class=\"po-field-icon-container-right\">\n            <span class=\"po-icon po-icon-search po-field-icon po-icon-input\" (click)=\"callActionFilter('action')\">\n            </span>\n          </div>\n\n          <input\n            #filterInput\n            class=\"po-input po-input-icon-right\"\n            name=\"model\"\n            type=\"text\"\n            [placeholder]=\"filter.placeholder || ''\"\n            (keypress)=\"onkeypress($event.keyCode)\"\n            [value]=\"quickSearchValue || ''\"\n          />\n        </div>\n\n        <div class=\"po-page-list-filter-search\" *ngIf=\"filter.advancedAction\">\n          <span\n            class=\"po-page-list-filter-search-link\"\n            tabindex=\"0\"\n            (click)=\"callActionFilter('advancedAction')\"\n            (keydown.enter)=\"callActionFilter('advancedAction')\"\n          >\n            {{ advancedSearch }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- DISCLAIMER -->\n    <po-disclaimer-group\n      *ngIf=\"!!disclaimerGroup\"\n      [class.po-page-list-disclaimer-group]=\"!!disclaimerGroup?.disclaimers?.length\"\n      [p-disclaimers]=\"disclaimerGroup?.disclaimers\"\n      [p-hide-remove-all]=\"disclaimerGroup?.hideRemoveAll\"\n      [p-title]=\"disclaimerGroup?.title\"\n      (p-change)=\"onChangeDisclaimerGroup($event)\"\n      (p-remove)=\"onRemoveDisclaimer($event)\"\n      (p-remove-all)=\"onRemoveAllDisclaimers($event)\"\n    >\n    </po-disclaimer-group>\n  </po-page-header>\n\n  <!-- CONTENT -->\n  <po-page-content>\n    <ng-content></ng-content>\n  </po-page-content>\n</po-page>\n" }]
     }], function () { return [{ type: i0.ViewContainerRef }, { type: PoLanguageService }, { type: i0.Renderer2 }, { type: i2.Router }, { type: i0.ChangeDetectorRef }]; }, { filterInput: [{
             type: ViewChild,
             args: ['filterInput']
@@ -46759,7 +46772,7 @@ class PoSlideCirclesComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoSlideCirclesComponent, [{
         type: Component,
-        args: [{ selector: 'po-slide-circles', template: "<div class=\"po-slide-circles\">\r\n  <ng-container *ngFor=\"let item of items; let index = index\">\r\n    <div\r\n      class=\"po-slide-circle\"\r\n      [class.po-slide-active-circle]=\"index === currentSlideIndex\"\r\n      (click)=\"click.emit(index)\"\r\n    ></div>\r\n  </ng-container>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-slide-circles', template: "<div class=\"po-slide-circles\">\n  <ng-container *ngFor=\"let item of items; let index = index\">\n    <div\n      class=\"po-slide-circle\"\n      [class.po-slide-active-circle]=\"index === currentSlideIndex\"\n      (click)=\"click.emit(index)\"\n    ></div>\n  </ng-container>\n</div>\n" }]
     }], null, { currentSlideIndex: [{
             type: Input,
             args: ['p-current-slide-index']
@@ -47068,7 +47081,7 @@ class PoSlideItemComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoSlideItemComponent, [{
         type: Component,
-        args: [{ selector: 'po-slide-item', template: "<div\r\n  #slideItem\r\n  class=\"po-slide-item\"\r\n  [class.po-slide-item-background-image]=\"!template && isIEOrEdge\"\r\n  [style.background-image]=\"!template && isIEOrEdge ? 'url(' + image + ')' : ''\"\r\n  [ngSwitch]=\"setLinkType()\"\r\n>\r\n  <!-- slide com link interno -->\r\n  <a *ngSwitchCase=\"'internalLink'\" class=\"po-slide-item-link\" [routerLink]=\"link\">\r\n    <ng-container [ngTemplateOutlet]=\"slideItemImage\" [ngTemplateOutletContext]=\"{ item: { alt: alt, image: image } }\">\r\n    </ng-container>\r\n  </a>\r\n  <!-- slide com link externo -->\r\n  <a *ngSwitchCase=\"'externalLink'\" class=\"po-slide-item-link\" [href]=\"link\">\r\n    <ng-container [ngTemplateOutlet]=\"slideItemImage\" [ngTemplateOutletContext]=\"{ item: { alt: alt, image: image } }\">\r\n    </ng-container>\r\n  </a>\r\n  <!-- slide sem link -->\r\n  <a\r\n    *ngSwitchCase=\"'noLink'\"\r\n    [ngClass]=\"action ? 'po-slide-item-link' : 'po-slide-item-no-link'\"\r\n    (click)=\"action ? action(data) : undefined\"\r\n  >\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"template ? slideItemTemplate : slideItemImage\"\r\n      [ngTemplateOutletContext]=\"{ item: { alt: alt, image: image, data: data } }\"\r\n    >\r\n    </ng-container>\r\n  </a>\r\n</div>\r\n\r\n<ng-template #slideItemTemplate let-item=\"item\" ; let-index=\"index\">\r\n  <div *ngIf=\"template\" class=\"po-slide-item-content\">\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"template.templateRef\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item.data, index: index }\"\r\n    >\r\n    </ng-template>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #slideItemImage let-item=\"item\">\r\n  <img\r\n    *ngIf=\"item.image && !isIEOrEdge\"\r\n    class=\"po-slide-image\"\r\n    [alt]=\"item.alt\"\r\n    [src]=\"item.image\"\r\n    [style.height.px]=\"imageHeight\"\r\n  />\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-slide-item', template: "<div\n  #slideItem\n  class=\"po-slide-item\"\n  [class.po-slide-item-background-image]=\"!template && isIEOrEdge\"\n  [style.background-image]=\"!template && isIEOrEdge ? 'url(' + image + ')' : ''\"\n  [ngSwitch]=\"setLinkType()\"\n>\n  <!-- slide com link interno -->\n  <a *ngSwitchCase=\"'internalLink'\" class=\"po-slide-item-link\" [routerLink]=\"link\">\n    <ng-container [ngTemplateOutlet]=\"slideItemImage\" [ngTemplateOutletContext]=\"{ item: { alt: alt, image: image } }\">\n    </ng-container>\n  </a>\n  <!-- slide com link externo -->\n  <a *ngSwitchCase=\"'externalLink'\" class=\"po-slide-item-link\" [href]=\"link\">\n    <ng-container [ngTemplateOutlet]=\"slideItemImage\" [ngTemplateOutletContext]=\"{ item: { alt: alt, image: image } }\">\n    </ng-container>\n  </a>\n  <!-- slide sem link -->\n  <a\n    *ngSwitchCase=\"'noLink'\"\n    [ngClass]=\"action ? 'po-slide-item-link' : 'po-slide-item-no-link'\"\n    (click)=\"action ? action(data) : undefined\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"template ? slideItemTemplate : slideItemImage\"\n      [ngTemplateOutletContext]=\"{ item: { alt: alt, image: image, data: data } }\"\n    >\n    </ng-container>\n  </a>\n</div>\n\n<ng-template #slideItemTemplate let-item=\"item\" ; let-index=\"index\">\n  <div *ngIf=\"template\" class=\"po-slide-item-content\">\n    <ng-template\n      [ngTemplateOutlet]=\"template.templateRef\"\n      [ngTemplateOutletContext]=\"{ $implicit: item.data, index: index }\"\n    >\n    </ng-template>\n  </div>\n</ng-template>\n\n<ng-template #slideItemImage let-item=\"item\">\n  <img\n    *ngIf=\"item.image && !isIEOrEdge\"\n    class=\"po-slide-image\"\n    [alt]=\"item.alt\"\n    [src]=\"item.image\"\n    [style.height.px]=\"imageHeight\"\n  />\n</ng-template>\n" }]
     }], null, { itemElement: [{
             type: ViewChild,
             args: ['slideItem', { static: true }]
@@ -47121,7 +47134,7 @@ class PoSlideControlComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoSlideControlComponent, [{
         type: Component,
-        args: [{ selector: 'po-slide-control', template: "<div class=\"po-slide-control-{{ control }}\">\r\n  <div class=\"po-slide-arrow-circle\" (click)=\"click.emit()\">\r\n    <div class=\"po-slide-arrow po-slide-arrow-{{ control }}\"></div>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-slide-control', template: "<div class=\"po-slide-control-{{ control }}\">\n  <div class=\"po-slide-arrow-circle\" (click)=\"click.emit()\">\n    <div class=\"po-slide-arrow po-slide-arrow-{{ control }}\"></div>\n  </div>\n</div>\n" }]
     }], null, { control: [{
             type: Input,
             args: ['p-control']
@@ -47439,7 +47452,7 @@ class PoSlideComponent extends PoSlideBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoSlideComponent, [{
         type: Component,
-        args: [{ selector: 'po-slide', template: "<div class=\"po-slide-wrapper\">\r\n  <div class=\"po-slide-outer\">\r\n    <div class=\"po-slide-inner\" #slide>\r\n      <ng-container *ngFor=\"let item of slideItems; let index = index\">\r\n        <po-slide-item\r\n          [p-action]=\"item.action\"\r\n          [p-data]=\"item\"\r\n          [p-image]=\"item.image\"\r\n          [p-image-height]=\"imageHeight\"\r\n          [p-template]=\"slideContentTemplate\"\r\n          [p-alt]=\"item.alt\"\r\n          [p-link]=\"item.link\"\r\n        >\r\n        </po-slide-item>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <po-slide-control\r\n      *ngIf=\"!hideArrows && hasSlides && slides.length > 1\"\r\n      p-control=\"previous\"\r\n      (p-click)=\"previousControl()\"\r\n    >\r\n    </po-slide-control>\r\n\r\n    <po-slide-control *ngIf=\"!hideArrows && hasSlides && slides.length > 1\" p-control=\"next\" (p-click)=\"nextControl()\">\r\n    </po-slide-control>\r\n  </div>\r\n\r\n  <po-slide-circles\r\n    *ngIf=\"hasSlides && slides.length > 1\"\r\n    [p-current-slide-index]=\"currentSlideIndex\"\r\n    [p-items]=\"slideItems\"\r\n    (p-click)=\"goToItem($event)\"\r\n  >\r\n  </po-slide-circles>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-slide', template: "<div class=\"po-slide-wrapper\">\n  <div class=\"po-slide-outer\">\n    <div class=\"po-slide-inner\" #slide>\n      <ng-container *ngFor=\"let item of slideItems; let index = index\">\n        <po-slide-item\n          [p-action]=\"item.action\"\n          [p-data]=\"item\"\n          [p-image]=\"item.image\"\n          [p-image-height]=\"imageHeight\"\n          [p-template]=\"slideContentTemplate\"\n          [p-alt]=\"item.alt\"\n          [p-link]=\"item.link\"\n        >\n        </po-slide-item>\n      </ng-container>\n    </div>\n\n    <po-slide-control\n      *ngIf=\"!hideArrows && hasSlides && slides.length > 1\"\n      p-control=\"previous\"\n      (p-click)=\"previousControl()\"\n    >\n    </po-slide-control>\n\n    <po-slide-control *ngIf=\"!hideArrows && hasSlides && slides.length > 1\" p-control=\"next\" (p-click)=\"nextControl()\">\n    </po-slide-control>\n  </div>\n\n  <po-slide-circles\n    *ngIf=\"hasSlides && slides.length > 1\"\n    [p-current-slide-index]=\"currentSlideIndex\"\n    [p-items]=\"slideItems\"\n    (p-click)=\"goToItem($event)\"\n  >\n  </po-slide-circles>\n</div>\n" }]
     }], function () { return [{ type: i2$3.AnimationBuilder }]; }, { slideContentTemplate: [{
             type: ContentChild,
             args: [PoSlideContentTemplateDirective, { static: true }]
@@ -47630,7 +47643,7 @@ class PoStepComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoStepComponent, [{
         type: Component,
-        args: [{ selector: 'po-step', template: "<ng-content></ng-content>\r\n" }]
+        args: [{ selector: 'po-step', template: "<ng-content></ng-content>\n" }]
     }], function () { return [{ type: i0.ElementRef }]; }, { canActiveNextStep: [{
             type: Input,
             args: ['p-can-active-next-step']
@@ -47711,7 +47724,7 @@ class PoStepperCircleComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoStepperCircleComponent, [{
         type: Component,
-        args: [{ selector: 'po-stepper-circle', template: "<div class=\"po-stepper-circle\" [style.height.px]=\"size\" [style.width.px]=\"size\" [tabindex]=\"isDisabled ? -1 : 0\">\r\n  <span\r\n    *ngIf=\"!isActive\"\r\n    class=\"po-stepper-circle-content\"\r\n    [class.po-icon]=\"icons || isDone\"\r\n    [class.po-icon-exclamation]=\"icons && isError\"\r\n    [class.po-icon-info]=\"icons && (isActive || isDefault || isDisabled)\"\r\n    [class.po-icon-ok]=\"isDone\"\r\n    [class.po-stepper-circle-content-lg]=\"isLargeStep\"\r\n    [class.po-stepper-circle-content-md]=\"isMediumStep\"\r\n  >\r\n    {{ !icons && !isDone ? content : '' }}\r\n  </span>\r\n\r\n  <div *ngIf=\"isActive || isError\" class=\"po-stepper-circle-active\"></div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-stepper-circle', template: "<div class=\"po-stepper-circle\" [style.height.px]=\"size\" [style.width.px]=\"size\" [tabindex]=\"isDisabled ? -1 : 0\">\n  <span\n    *ngIf=\"!isActive\"\n    class=\"po-stepper-circle-content\"\n    [class.po-icon]=\"icons || isDone\"\n    [class.po-icon-exclamation]=\"icons && isError\"\n    [class.po-icon-info]=\"icons && (isActive || isDefault || isDisabled)\"\n    [class.po-icon-ok]=\"isDone\"\n    [class.po-stepper-circle-content-lg]=\"isLargeStep\"\n    [class.po-stepper-circle-content-md]=\"isMediumStep\"\n  >\n    {{ !icons && !isDone ? content : '' }}\n  </span>\n\n  <div *ngIf=\"isActive || isError\" class=\"po-stepper-circle-active\"></div>\n</div>\n" }]
     }], null, { content: [{
             type: Input,
             args: ['p-content']
@@ -47945,7 +47958,7 @@ class PoStepperLabelComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoStepperLabelComponent, [{
         type: Component,
-        args: [{ selector: 'po-stepper-label', template: "<div class=\"po-stepper-label\">\r\n  {{ content }}\r\n</div>\r\n" }]
+        args: [{ selector: 'po-stepper-label', template: "<div class=\"po-stepper-label\">\n  {{ content }}\n</div>\n" }]
     }], null, { content: [{
             type: Input,
             args: ['p-content']
@@ -48078,7 +48091,7 @@ class PoStepperStepComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoStepperStepComponent, [{
         type: Component,
-        args: [{ selector: 'po-stepper-step', template: "<div class=\"po-stepper-step\" [ngClass]=\"getStatusClass(status)\" (click)=\"onClick()\" (keydown.enter)=\"onEnter()\">\r\n  <div class=\"po-stepper-step-container\" [style.width.px]=\"isVerticalOrientation ? stepSize : undefined\">\r\n    <div\r\n      [class.po-stepper-step-bar-top]=\"isVerticalOrientation\"\r\n      [class.po-stepper-step-bar-left]=\"!isVerticalOrientation\"\r\n      [style.margin-right.px]=\"marginHorizontalBar\"\r\n    ></div>\r\n\r\n    <po-stepper-circle [p-content]=\"circleContent\" [p-icons]=\"stepIcons\" [p-size]=\"stepSize\" [p-status]=\"status\">\r\n    </po-stepper-circle>\r\n\r\n    <div\r\n      [class.po-stepper-step-bar-bottom]=\"isVerticalOrientation\"\r\n      [class.po-stepper-step-bar-right]=\"!isVerticalOrientation\"\r\n      [class.po-stepper-step-dashed-border]=\"nextStatus === 'disabled' && !isVerticalOrientation\"\r\n      [class.po-stepper-step-dashed-border-vertical]=\"nextStatus === 'disabled' && isVerticalOrientation\"\r\n      [style.margin-left.px]=\"marginHorizontalBar\"\r\n    ></div>\r\n  </div>\r\n\r\n  <po-stepper-label class=\"po-stepper-step-label-position\" [p-content]=\"label\"> </po-stepper-label>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-stepper-step', template: "<div class=\"po-stepper-step\" [ngClass]=\"getStatusClass(status)\" (click)=\"onClick()\" (keydown.enter)=\"onEnter()\">\n  <div class=\"po-stepper-step-container\" [style.width.px]=\"isVerticalOrientation ? stepSize : undefined\">\n    <div\n      [class.po-stepper-step-bar-top]=\"isVerticalOrientation\"\n      [class.po-stepper-step-bar-left]=\"!isVerticalOrientation\"\n      [style.margin-right.px]=\"marginHorizontalBar\"\n    ></div>\n\n    <po-stepper-circle [p-content]=\"circleContent\" [p-icons]=\"stepIcons\" [p-size]=\"stepSize\" [p-status]=\"status\">\n    </po-stepper-circle>\n\n    <div\n      [class.po-stepper-step-bar-bottom]=\"isVerticalOrientation\"\n      [class.po-stepper-step-bar-right]=\"!isVerticalOrientation\"\n      [class.po-stepper-step-dashed-border]=\"nextStatus === 'disabled' && !isVerticalOrientation\"\n      [class.po-stepper-step-dashed-border-vertical]=\"nextStatus === 'disabled' && isVerticalOrientation\"\n      [style.margin-left.px]=\"marginHorizontalBar\"\n    ></div>\n  </div>\n\n  <po-stepper-label class=\"po-stepper-step-label-position\" [p-content]=\"label\"> </po-stepper-label>\n</div>\n" }]
     }], null, { circleContent: [{
             type: Input,
             args: ['p-circle-content']
@@ -48354,7 +48367,7 @@ class PoStepperComponent extends PoStepperBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoStepperComponent, [{
         type: Component,
-        args: [{ selector: 'po-stepper', template: "<div class=\"po-stepper po-stepper-{{ orientation }}\">\r\n  <div class=\"po-stepper-container\">\r\n    <po-stepper-step\r\n      *ngFor=\"let step of stepList; let index = index; trackBy: trackByFn\"\r\n      class=\"po-stepper-step-position\"\r\n      [p-circle-content]=\"index + 1\"\r\n      [p-label]=\"step.label\"\r\n      [p-orientation]=\"orientation\"\r\n      [p-status]=\"step.status\"\r\n      [p-step-icons]=\"stepIcons\"\r\n      [p-step-size]=\"stepSize\"\r\n      [p-next-status]=\"poSteps.get(index + 1)?.status\"\r\n      (p-activated)=\"onStepActive(step)\"\r\n      (p-click)=\"changeStep(index, step)\"\r\n      (p-enter)=\"changeStep(index, step)\"\r\n    >\r\n    </po-stepper-step>\r\n  </div>\r\n\r\n  <div *ngIf=\"usePoSteps\" class=\"po-stepper-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-stepper', template: "<div class=\"po-stepper po-stepper-{{ orientation }}\">\n  <div class=\"po-stepper-container\">\n    <po-stepper-step\n      *ngFor=\"let step of stepList; let index = index; trackBy: trackByFn\"\n      class=\"po-stepper-step-position\"\n      [p-circle-content]=\"index + 1\"\n      [p-label]=\"step.label\"\n      [p-orientation]=\"orientation\"\n      [p-status]=\"step.status\"\n      [p-step-icons]=\"stepIcons\"\n      [p-step-size]=\"stepSize\"\n      [p-next-status]=\"poSteps.get(index + 1)?.status\"\n      (p-activated)=\"onStepActive(step)\"\n      (p-click)=\"changeStep(index, step)\"\n      (p-enter)=\"changeStep(index, step)\"\n    >\n    </po-stepper-step>\n  </div>\n\n  <div *ngIf=\"usePoSteps\" class=\"po-stepper-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { poSteps: [{
             type: ContentChildren,
             args: [PoStepComponent]
@@ -48467,7 +48480,7 @@ class PoTabButtonComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTabButtonComponent, [{
         type: Component,
-        args: [{ selector: 'po-tab-button', template: "<div\r\n  class=\"po-tab-button-md\"\r\n  [attr.tabindex]=\"disabled ? null : 0\"\r\n  [class.po-tab-button-active]=\"active\"\r\n  [class.po-tab-button-disabled]=\"disabled\"\r\n  [class.po-tab-button-sm]=\"small\"\r\n  (click)=\"onClick()\"\r\n  (keyup.enter)=\"onClick()\"\r\n>\r\n  <span class=\"po-tab-button-label po-text-ellipsis\">\r\n    {{ label }}\r\n  </span>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-tab-button', template: "<div\n  class=\"po-tab-button-md\"\n  [attr.tabindex]=\"disabled ? null : 0\"\n  [class.po-tab-button-active]=\"active\"\n  [class.po-tab-button-disabled]=\"disabled\"\n  [class.po-tab-button-sm]=\"small\"\n  (click)=\"onClick()\"\n  (keyup.enter)=\"onClick()\"\n>\n  <span class=\"po-tab-button-label po-text-ellipsis\">\n    {{ label }}\n  </span>\n</div>\n" }]
     }], function () { return [{ type: i0.ElementRef }]; }, { disabled: [{
             type: Input,
             args: ['p-disabled']
@@ -48611,7 +48624,7 @@ class PoTabComponent extends PoTabBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTabComponent, [{
         type: Component,
-        args: [{ selector: 'po-tab', template: "<ng-content></ng-content>\r\n" }]
+        args: [{ selector: 'po-tab', template: "<ng-content></ng-content>\n" }]
     }], function () { return [{ type: i0.ElementRef }]; }, null); })();
 const _c0$4 = ["popover"];
@@ -48692,7 +48705,7 @@ class PoTabDropdownComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTabDropdownComponent, [{
         type: Component,
-        args: [{ selector: 'po-tab-dropdown', template: "<div\r\n  #tabDrop\r\n  class=\"po-tab-dropdown-content po-tab-button-md\"\r\n  [attr.tabindex]=\"0\"\r\n  [class.po-tab-button-sm]=\"small\"\r\n  (keyup.enter)=\"togglePopover()\"\r\n>\r\n  <div class=\"po-tab-button-label\">\r\n    {{ label }}\r\n    <span class=\"po-icon\" [ngClass]=\"popover.isHidden ? 'po-icon-arrow-down' : 'po-icon-arrow-up'\"> </span>\r\n  </div>\r\n</div>\r\n\r\n<po-popover #popover p-hide-arrow p-position=\"bottom\" [p-target]=\"tabDropdown\">\r\n  <div [ngClass]=\"getContainerClass()\">\r\n    <po-tab-button\r\n      *ngFor=\"let tab of tabs\"\r\n      class=\"po-tab-dropdown-button\"\r\n      [class.po-tab-dropdown-button-active]=\"tab.active\"\r\n      [p-active]=\"tab.active\"\r\n      [p-disabled]=\"tab.disabled\"\r\n      [p-hide]=\"tab.hide\"\r\n      [p-id]=\"tab.id\"\r\n      [p-label]=\"tab.label\"\r\n      [p-small]=\"small\"\r\n      (p-activated)=\"activated.emit(tab)\"\r\n      (p-change-state)=\"changeState.emit(tab)\"\r\n      (p-click)=\"popover.close(); click.emit(tab)\"\r\n    >\r\n    </po-tab-button>\r\n  </div>\r\n</po-popover>\r\n" }]
+        args: [{ selector: 'po-tab-dropdown', template: "<div\n  #tabDrop\n  class=\"po-tab-dropdown-content po-tab-button-md\"\n  [attr.tabindex]=\"0\"\n  [class.po-tab-button-sm]=\"small\"\n  (keyup.enter)=\"togglePopover()\"\n>\n  <div class=\"po-tab-button-label\">\n    {{ label }}\n    <span class=\"po-icon\" [ngClass]=\"popover.isHidden ? 'po-icon-arrow-down' : 'po-icon-arrow-up'\"> </span>\n  </div>\n</div>\n\n<po-popover #popover p-hide-arrow p-position=\"bottom\" [p-target]=\"tabDropdown\">\n  <div [ngClass]=\"getContainerClass()\">\n    <po-tab-button\n      *ngFor=\"let tab of tabs\"\n      class=\"po-tab-dropdown-button\"\n      [class.po-tab-dropdown-button-active]=\"tab.active\"\n      [p-active]=\"tab.active\"\n      [p-disabled]=\"tab.disabled\"\n      [p-hide]=\"tab.hide\"\n      [p-id]=\"tab.id\"\n      [p-label]=\"tab.label\"\n      [p-small]=\"small\"\n      (p-activated)=\"activated.emit(tab)\"\n      (p-change-state)=\"changeState.emit(tab)\"\n      (p-click)=\"popover.close(); click.emit(tab)\"\n    >\n    </po-tab-button>\n  </div>\n</po-popover>\n" }]
     }], null, { popover: [{
             type: ViewChild,
             args: ['popover', { static: true }]
@@ -48961,7 +48974,7 @@ class PoTabsComponent extends PoTabsBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTabsComponent, [{
         type: Component,
-        args: [{ selector: 'po-tabs', template: "<div class=\"po-tabs-container\" [class.po-tabs-container-mobile]=\"isMobileDevice\">\r\n  <div class=\"po-tabs-header\">\r\n    <ng-container *ngFor=\"let tab of tabs; trackBy: trackByFn\">\r\n      <po-tab-button\r\n        *ngIf=\"isVisibleTab(tab)\"\r\n        class=\"po-tab-button\"\r\n        [class.po-tab-button-mobile]=\"isMobileDevice\"\r\n        [p-active]=\"tab.active\"\r\n        [p-disabled]=\"tab.disabled\"\r\n        [p-hide]=\"tab.hide\"\r\n        [p-id]=\"tab.id\"\r\n        [p-label]=\"tab.label\"\r\n        [p-small]=\"small\"\r\n        (keyup.enter)=\"closePopover()\"\r\n        (p-activated)=\"onTabActive(tab)\"\r\n        (p-change-state)=\"onTabChangeState(tab)\"\r\n        (p-click)=\"selectedTab(tab)\"\r\n      >\r\n      </po-tab-button>\r\n    </ng-container>\r\n\r\n    <po-tab-dropdown\r\n      #tabDropdown\r\n      *ngIf=\"isShowTabDropdown\"\r\n      class=\"po-tab-button po-tab-dropdown\"\r\n      [p-label]=\"literals.moreTabs\"\r\n      [p-small]=\"small\"\r\n      [p-tabs]=\"overflowedTabs\"\r\n      (p-activated)=\"onTabActive($event)\"\r\n      (p-change-state)=\"onTabChangeState($event)\"\r\n      (p-click)=\"selectedTab($event)\"\r\n    >\r\n    </po-tab-dropdown>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"po-tabs-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-tabs', template: "<div class=\"po-tabs-container\" [class.po-tabs-container-mobile]=\"isMobileDevice\">\n  <div class=\"po-tabs-header\">\n    <ng-container *ngFor=\"let tab of tabs; trackBy: trackByFn\">\n      <po-tab-button\n        *ngIf=\"isVisibleTab(tab)\"\n        class=\"po-tab-button\"\n        [class.po-tab-button-mobile]=\"isMobileDevice\"\n        [p-active]=\"tab.active\"\n        [p-disabled]=\"tab.disabled\"\n        [p-hide]=\"tab.hide\"\n        [p-id]=\"tab.id\"\n        [p-label]=\"tab.label\"\n        [p-small]=\"small\"\n        (keyup.enter)=\"closePopover()\"\n        (p-activated)=\"onTabActive(tab)\"\n        (p-change-state)=\"onTabChangeState(tab)\"\n        (p-click)=\"selectedTab(tab)\"\n      >\n      </po-tab-button>\n    </ng-container>\n\n    <po-tab-dropdown\n      #tabDropdown\n      *ngIf=\"isShowTabDropdown\"\n      class=\"po-tab-button po-tab-dropdown\"\n      [p-label]=\"literals.moreTabs\"\n      [p-small]=\"small\"\n      [p-tabs]=\"overflowedTabs\"\n      (p-activated)=\"onTabActive($event)\"\n      (p-change-state)=\"onTabChangeState($event)\"\n      (p-click)=\"selectedTab($event)\"\n    >\n    </po-tab-dropdown>\n  </div>\n</div>\n\n<div class=\"po-tabs-content\">\n  <ng-content></ng-content>\n</div>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: PoLanguageService }]; }, { tabs: [{
             type: ContentChildren,
             args: [PoTabComponent]
@@ -49029,7 +49042,7 @@ class PoToolbarActionsComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoToolbarActionsComponent, [{
         type: Component,
-        args: [{ selector: 'po-toolbar-actions', template: "<div class=\"po-toolbar-actions\" (click)=\"popup.toggle()\">\r\n  <span #toolbarActions>\r\n    <po-icon class=\"po-toolbar-icon po-clickable\" [p-icon]=\"actionsIcon\"></po-icon>\r\n  </span>\r\n</div>\r\n\r\n<po-popup #popup [p-actions]=\"actions\" [p-target]=\"toolbarActions\"> </po-popup>\r\n" }]
+        args: [{ selector: 'po-toolbar-actions', template: "<div class=\"po-toolbar-actions\" (click)=\"popup.toggle()\">\n  <span #toolbarActions>\n    <po-icon class=\"po-toolbar-icon po-clickable\" [p-icon]=\"actionsIcon\"></po-icon>\n  </span>\n</div>\n\n<po-popup #popup [p-actions]=\"actions\" [p-target]=\"toolbarActions\"> </po-popup>\n" }]
     }], null, { actions: [{
             type: Input,
             args: ['p-actions']
@@ -49198,7 +49211,7 @@ class PoToolbarNotificationComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoToolbarNotificationComponent, [{
         type: Component,
-        args: [{ selector: 'po-toolbar-notification', providers: [PoControlPositionService], template: "<div class=\"po-toolbar-notification po-clickable\" (click)=\"popup.toggle()\">\r\n  <span #notification class=\"po-icon po-icon-notification po-toolbar-icon\"></span>\r\n  <div *ngIf=\"notificationNumber\" class=\"po-toolbar-notification-badge\">\r\n    {{ notificationNumber }}\r\n  </div>\r\n</div>\r\n\r\n<po-popup #popup [p-actions]=\"notificationActions\" [p-target]=\"notification\"> </po-popup>\r\n" }]
+        args: [{ selector: 'po-toolbar-notification', providers: [PoControlPositionService], template: "<div class=\"po-toolbar-notification po-clickable\" (click)=\"popup.toggle()\">\n  <span #notification class=\"po-icon po-icon-notification po-toolbar-icon\"></span>\n  <div *ngIf=\"notificationNumber\" class=\"po-toolbar-notification-badge\">\n    {{ notificationNumber }}\n  </div>\n</div>\n\n<po-popup #popup [p-actions]=\"notificationActions\" [p-target]=\"notification\"> </po-popup>\n" }]
     }], null, { notificationActions: [{
             type: Input,
             args: ['p-notification-actions']
@@ -49272,7 +49285,7 @@ class PoToolbarProfileComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoToolbarProfileComponent, [{
         type: Component,
-        args: [{ selector: 'po-toolbar-profile', providers: [PoControlPositionService], template: "<div #profileElement class=\"po-toolbar-profile po-clickable\" (click)=\"popup.toggle()\">\r\n  <po-avatar p-size=\"xs\" [p-src]=\"profileAvatar\"></po-avatar>\r\n</div>\r\n\r\n<po-popup #popup [p-actions]=\"profileActions\" [p-target]=\"profileElement\">\r\n  <div p-popup-header-template *ngIf=\"profile?.title\" class=\"po-toolbar-profile-item-header\">\r\n    <po-avatar class=\"po-toolbar-profile-item-avatar\" p-size=\"sm\" [p-src]=\"profileAvatar\"> </po-avatar>\r\n\r\n    <div>\r\n      <div class=\"po-toolbar-profile-item-header-title\">\r\n        {{ profile.title }}\r\n      </div>\r\n\r\n      <div *ngIf=\"profile.subtitle\" class=\"po-toolbar-profile-item-header-subtitle\">\r\n        {{ profile.subtitle }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</po-popup>\r\n" }]
+        args: [{ selector: 'po-toolbar-profile', providers: [PoControlPositionService], template: "<div #profileElement class=\"po-toolbar-profile po-clickable\" (click)=\"popup.toggle()\">\n  <po-avatar p-size=\"xs\" [p-src]=\"profileAvatar\"></po-avatar>\n</div>\n\n<po-popup #popup [p-actions]=\"profileActions\" [p-target]=\"profileElement\">\n  <div p-popup-header-template *ngIf=\"profile?.title\" class=\"po-toolbar-profile-item-header\">\n    <po-avatar class=\"po-toolbar-profile-item-avatar\" p-size=\"sm\" [p-src]=\"profileAvatar\"> </po-avatar>\n\n    <div>\n      <div class=\"po-toolbar-profile-item-header-title\">\n        {{ profile.title }}\n      </div>\n\n      <div *ngIf=\"profile.subtitle\" class=\"po-toolbar-profile-item-header-subtitle\">\n        {{ profile.subtitle }}\n      </div>\n    </div>\n  </div>\n</po-popup>\n" }]
     }], null, { profile: [{
             type: Input,
             args: ['p-profile']
@@ -49354,7 +49367,7 @@ class PoToolbarComponent extends PoToolbarBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoToolbarComponent, [{
         type: Component,
-        args: [{ selector: 'po-toolbar', template: "<div class=\"po-toolbar\">\r\n  <div class=\"po-toolbar-title\">{{ title }}</div>\r\n\r\n  <div class=\"po-toolbar-group-icon\">\r\n    <po-toolbar-actions *ngIf=\"actions && actions.length\" [p-actions]=\"actions\" [p-actions-icon]=\"actionsIcon\">\r\n    </po-toolbar-actions>\r\n\r\n    <po-toolbar-notification\r\n      *ngIf=\"showNotification && notificationActions\"\r\n      [p-notification-actions]=\"notificationActions\"\r\n      [p-notification-number]=\"notificationNumber\"\r\n    >\r\n    </po-toolbar-notification>\r\n\r\n    <po-toolbar-profile *ngIf=\"isShowProfile\" [p-profile]=\"profile\" [p-profile-actions]=\"profileActions\">\r\n    </po-toolbar-profile>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-toolbar', template: "<div class=\"po-toolbar\">\n  <div class=\"po-toolbar-title\">{{ title }}</div>\n\n  <div class=\"po-toolbar-group-icon\">\n    <po-toolbar-actions *ngIf=\"actions && actions.length\" [p-actions]=\"actions\" [p-actions-icon]=\"actionsIcon\">\n    </po-toolbar-actions>\n\n    <po-toolbar-notification\n      *ngIf=\"showNotification && notificationActions\"\n      [p-notification-actions]=\"notificationActions\"\n      [p-notification-number]=\"notificationNumber\"\n    >\n    </po-toolbar-notification>\n\n    <po-toolbar-profile *ngIf=\"isShowProfile\" [p-profile]=\"profile\" [p-profile-actions]=\"profileActions\">\n    </po-toolbar-profile>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: i1$2.Title }, { type: i0.ViewContainerRef }]; }, null); })();
 /**
@@ -49445,9 +49458,11 @@ class PoTreeViewBaseComponent {
     unselected = new EventEmitter();
     _items = [];
     _selectable = false;
+    _maxLevel = poTreeViewMaxLevel;
     /**
      * Lista de itens do tipo `PoTreeViewItem` que será renderizada pelo componente.
      */
+    inputedItems;
     set items(value) {
         this._items = Array.isArray(value) ? this.getItemsByMaxLevel(value) : [];
     }
@@ -49469,6 +49484,23 @@ class PoTreeViewBaseComponent {
     get selectable() {
         return this._selectable;
     }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o máximo de níveis para o tree-view.
+     *
+     * > O valor padrão é 4
+     *
+     * @default 4
+     */
+    set maxLevel(value) {
+        this._maxLevel = convertToInt(value, poTreeViewMaxLevel);
+    }
+    get maxLevel() {
+        return this._maxLevel;
+    }
     emitExpanded(treeViewItem) {
         const event = treeViewItem.expanded ? 'expanded' : 'collapsed';
         this[event].emit({ ...treeViewItem });
@@ -49538,7 +49570,7 @@ class PoTreeViewBaseComponent {
     getItemsByMaxLevel(items = [], level = 0, parentItem, newItems = []) {
         items.forEach(item => {
             const { subItems, ...currentItem } = item;
-            if (level === poTreeViewMaxLevel) {
+            if (level === this.maxLevel) {
                 return;
             }
             if (Array.isArray(subItems)) {
@@ -49570,7 +49602,7 @@ class PoTreeViewBaseComponent {
         this._items = this.getItemsWithParentSelected(this.items);
     }
     static ɵfac = function PoTreeViewBaseComponent_Factory(t) { return new (t || PoTreeViewBaseComponent)(); };
-    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoTreeViewBaseComponent, inputs: { items: ["p-items", "items"], selectable: ["p-selectable", "selectable"] }, outputs: { collapsed: "p-collapsed", expanded: "p-expanded", selected: "p-selected", unselected: "p-unselected" } });
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoTreeViewBaseComponent, inputs: { inputedItems: ["p-items", "inputedItems"], selectable: ["p-selectable", "selectable"], maxLevel: ["p-max-level", "maxLevel"] }, outputs: { collapsed: "p-collapsed", expanded: "p-expanded", selected: "p-selected", unselected: "p-unselected" } });
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTreeViewBaseComponent, [{
         type: Directive
@@ -49586,12 +49618,15 @@ class PoTreeViewBaseComponent {
         }], unselected: [{
             type: Output,
             args: ['p-unselected']
-        }], items: [{
+        }], inputedItems: [{
             type: Input,
             args: ['p-items']
         }], selectable: [{
             type: Input,
             args: ['p-selectable']
+        }], maxLevel: [{
+            type: Input,
+            args: ['p-max-level']
         }] }); })();
 class PoTreeViewService {
@@ -49684,7 +49719,7 @@ class PoTreeViewItemHeaderComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTreeViewItemHeaderComponent, [{
         type: Component,
-        args: [{ selector: 'po-tree-view-item-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-tree-view-item-header\">\r\n  <button *ngIf=\"hasSubItems\" class=\"po-tree-view-item-header-button\" (click)=\"expanded.emit($event)\">\r\n    <span\r\n      class=\"po-icon po-icon-arrow-down po-tree-view-item-header-button-icon\"\r\n      [class.po-tree-view-item-header-button-icon-transform]=\"item.expanded\"\r\n    >\r\n    </span>\r\n  </button>\r\n\r\n  <ng-container *ngIf=\"selectable; then checkboxTemplate; else labelTemplate\"></ng-container>\r\n</div>\r\n\r\n<ng-template #labelTemplate>\r\n  <span class=\"po-tree-view-item-header-label\" [class.po-tree-view-item-header-padding]=\"!hasSubItems\">\r\n    {{ item.label }}\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #checkboxTemplate>\r\n  <po-checkbox\r\n    class=\"po-tree-view-item-header-checkbox\"\r\n    [class.po-tree-view-item-header-padding]=\"!hasSubItems\"\r\n    [p-label]=\"item.label\"\r\n    [(ngModel)]=\"item.selected\"\r\n    (p-change)=\"selected.emit(item)\"\r\n  >\r\n  </po-checkbox>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-tree-view-item-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-tree-view-item-header\">\n  <button *ngIf=\"hasSubItems\" class=\"po-tree-view-item-header-button\" (click)=\"expanded.emit($event)\">\n    <span\n      class=\"po-icon po-icon-arrow-down po-tree-view-item-header-button-icon\"\n      [class.po-tree-view-item-header-button-icon-transform]=\"item.expanded\"\n    >\n    </span>\n  </button>\n\n  <ng-container *ngIf=\"selectable; then checkboxTemplate; else labelTemplate\"></ng-container>\n</div>\n\n<ng-template #labelTemplate>\n  <span class=\"po-tree-view-item-header-label\" [class.po-tree-view-item-header-padding]=\"!hasSubItems\">\n    {{ item.label }}\n  </span>\n</ng-template>\n\n<ng-template #checkboxTemplate>\n  <po-checkbox\n    class=\"po-tree-view-item-header-checkbox\"\n    [class.po-tree-view-item-header-padding]=\"!hasSubItems\"\n    [p-label]=\"item.label\"\n    [(ngModel)]=\"item.selected\"\n    (p-change)=\"selected.emit(item)\"\n  >\n  </po-checkbox>\n</ng-template>\n" }]
     }], null, { inputCheckbox: [{
             type: ViewChild,
             args: ['inputCheckbox']
@@ -49795,7 +49830,7 @@ class PoTreeViewItemComponent {
                             animate(200, style({ height: '*' }))
                         ])
                     ])
-                ], template: "<li class=\"po-tree-view-item\">\r\n  <po-tree-view-item-header\r\n    [p-item]=\"item\"\r\n    [p-selectable]=\"selectable\"\r\n    (p-expanded)=\"onClick($event)\"\r\n    (p-selected)=\"onSelect(item)\"\r\n  >\r\n  </po-tree-view-item-header>\r\n\r\n  <ul *ngIf=\"hasSubItems\" class=\"po-tree-view-item-group\" [@toggleBody]=\"item.expanded ? 'expanded' : 'collapsed'\">\r\n    <po-tree-view-item\r\n      *ngFor=\"let subItem of item.subItems; trackBy: trackByFunction\"\r\n      [p-item]=\"subItem\"\r\n      [p-selectable]=\"selectable\"\r\n    >\r\n    </po-tree-view-item>\r\n  </ul>\r\n</li>\r\n" }]
+                ], template: "<li class=\"po-tree-view-item\">\n  <po-tree-view-item-header\n    [p-item]=\"item\"\n    [p-selectable]=\"selectable\"\n    (p-expanded)=\"onClick($event)\"\n    (p-selected)=\"onSelect(item)\"\n  >\n  </po-tree-view-item-header>\n\n  <ul *ngIf=\"hasSubItems\" class=\"po-tree-view-item-group\" [@toggleBody]=\"item.expanded ? 'expanded' : 'collapsed'\">\n    <po-tree-view-item\n      *ngFor=\"let subItem of item.subItems; trackBy: trackByFunction\"\n      [p-item]=\"subItem\"\n      [p-selectable]=\"selectable\"\n    >\n    </po-tree-view-item>\n  </ul>\n</li>\n" }]
     }], function () { return [{ type: PoTreeViewService }]; }, { item: [{
             type: Input,
             args: ['p-item']
@@ -49862,11 +49897,16 @@ class PoTreeViewComponent extends PoTreeViewBaseComponent {
             this.emitSelected(treeViewItem);
         });
     }
+    ngOnChanges(changes) {
+        if (changes?.['inputedItems']) {
+            this.items = this.inputedItems;
+        }
+    }
     trackByFunction(index) {
         return index;
     }
     static ɵfac = function PoTreeViewComponent_Factory(t) { return new (t || PoTreeViewComponent)(i0.ɵɵdirectiveInject(PoTreeViewService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTreeViewComponent, selectors: [["po-tree-view"]], features: [i0.ɵɵProvidersFeature([PoTreeViewService]), i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["p-no-padding", "", 4, "ngIf"], ["p-no-padding", ""], [1, "po-tree-view"], [3, "p-item", "p-selectable", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "p-item", "p-selectable"]], template: function PoTreeViewComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTreeViewComponent, selectors: [["po-tree-view"]], features: [i0.ɵɵProvidersFeature([PoTreeViewService]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["p-no-padding", "", 4, "ngIf"], ["p-no-padding", ""], [1, "po-tree-view"], [3, "p-item", "p-selectable", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "p-item", "p-selectable"]], template: function PoTreeViewComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, PoTreeViewComponent_po_container_0_Template, 3, 2, "po-container", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.hasItems);
@@ -49874,7 +49914,7 @@ class PoTreeViewComponent extends PoTreeViewBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTreeViewComponent, [{
         type: Component,
-        args: [{ selector: 'po-tree-view', changeDetection: ChangeDetectionStrategy.OnPush, providers: [PoTreeViewService], template: "<po-container *ngIf=\"hasItems\" p-no-padding>\r\n  <ul class=\"po-tree-view\">\r\n    <po-tree-view-item *ngFor=\"let item of items; trackBy: trackByFunction\" [p-item]=\"item\" [p-selectable]=\"selectable\">\r\n    </po-tree-view-item>\r\n  </ul>\r\n</po-container>\r\n" }]
+        args: [{ selector: 'po-tree-view', changeDetection: ChangeDetectionStrategy.OnPush, providers: [PoTreeViewService], template: "<po-container *ngIf=\"hasItems\" p-no-padding>\n  <ul class=\"po-tree-view\">\n    <po-tree-view-item *ngFor=\"let item of items; trackBy: trackByFunction\" [p-item]=\"item\" [p-selectable]=\"selectable\">\n    </po-tree-view-item>\n  </ul>\n</po-container>\n" }]
     }], function () { return [{ type: PoTreeViewService }]; }, null); })();
 /**
@@ -50432,7 +50472,7 @@ class PoWidgetComponent extends PoWidgetBaseComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoWidgetComponent, [{
         type: Component,
-        args: [{ selector: 'po-widget', template: "<div\r\n  [class.po-clickable]=\"click.observers.length\"\r\n  [class.po-widget]=\"!primary\"\r\n  [class.po-widget-disabled]=\"disabled\"\r\n  [class.po-widget-primary]=\"primary\"\r\n  [class.po-widget-no-shadow]=\"click.observers.length && noShadow\"\r\n  [style.background-image]=\"background ? 'url(' + background + ')' : undefined\"\r\n  (click)=\"onClick($event)\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  [tabindex]=\"disabled || !click.observers.length ? -1 : 0\"\r\n>\r\n  <div *ngIf=\"hasTitleHelpOrSetting()\" class=\"po-widget-header\">\r\n    <span *ngIf=\"showTitleAction; else noTitleAction\" class=\"po-widget-title-action\" (click)=\"runTitleAction($event)\">\r\n      {{ title }}\r\n    </span>\r\n    <ng-template #noTitleAction>{{ title }}</ng-template>\r\n\r\n    <div *ngIf=\"setting.observers[0] || help\" class=\"po-pull-right\">\r\n      <span\r\n        id=\"settingAction-{{ id }}\"\r\n        *ngIf=\"setting.observers[0]\"\r\n        class=\"po-clickable po-icon po-icon-settings\"\r\n        (click)=\"settingOutput($event)\"\r\n      >\r\n      </span>\r\n      <span id=\"helpLink-{{ id }}\" *ngIf=\"help\" class=\"po-clickable po-icon po-icon-help\" (click)=\"openHelp($event)\">\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <po-container p-no-border [p-height]=\"containerHeight\">\r\n    <div class=\"po-widget-body\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </po-container>\r\n\r\n  <div *ngIf=\"primaryLabel\" class=\"po-widget-footer\">\r\n    <div class=\"po-widget-xl\" *ngIf=\"!secondaryLabel\">\r\n      <a class=\"po-widget-action\" id=\"primaryAct-{{ id }}\" (click)=\"runPrimaryAction($event)\">{{ primaryLabel }}</a>\r\n    </div>\r\n\r\n    <div class=\"po-widget-md\" *ngIf=\"secondaryLabel\">\r\n      <a class=\"po-widget-action\" id=\"primaryAct-{{ id }}\" (click)=\"runPrimaryAction($event)\">{{ primaryLabel }}</a>\r\n    </div>\r\n    <div class=\"po-widget-md\" *ngIf=\"secondaryLabel\">\r\n      <a class=\"po-widget-action\" id=\"secondaryAct-{{ id }}\" (click)=\"runSecondaryAction($event)\">{{\r\n        secondaryLabel\r\n      }}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        args: [{ selector: 'po-widget', template: "<div\n  [class.po-clickable]=\"click.observers.length\"\n  [class.po-widget]=\"!primary\"\n  [class.po-widget-disabled]=\"disabled\"\n  [class.po-widget-primary]=\"primary\"\n  [class.po-widget-no-shadow]=\"click.observers.length && noShadow\"\n  [style.background-image]=\"background ? 'url(' + background + ')' : undefined\"\n  (click)=\"onClick($event)\"\n  (keydown)=\"onKeyDown($event)\"\n  [tabindex]=\"disabled || !click.observers.length ? -1 : 0\"\n>\n  <div *ngIf=\"hasTitleHelpOrSetting()\" class=\"po-widget-header\">\n    <span *ngIf=\"showTitleAction; else noTitleAction\" class=\"po-widget-title-action\" (click)=\"runTitleAction($event)\">\n      {{ title }}\n    </span>\n    <ng-template #noTitleAction>{{ title }}</ng-template>\n\n    <div *ngIf=\"setting.observers[0] || help\" class=\"po-pull-right\">\n      <span\n        id=\"settingAction-{{ id }}\"\n        *ngIf=\"setting.observers[0]\"\n        class=\"po-clickable po-icon po-icon-settings\"\n        (click)=\"settingOutput($event)\"\n      >\n      </span>\n      <span id=\"helpLink-{{ id }}\" *ngIf=\"help\" class=\"po-clickable po-icon po-icon-help\" (click)=\"openHelp($event)\">\n      </span>\n    </div>\n  </div>\n\n  <po-container p-no-border [p-height]=\"containerHeight\">\n    <div class=\"po-widget-body\">\n      <ng-content></ng-content>\n    </div>\n  </po-container>\n\n  <div *ngIf=\"primaryLabel\" class=\"po-widget-footer\">\n    <div class=\"po-widget-xl\" *ngIf=\"!secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"primaryAct-{{ id }}\" (click)=\"runPrimaryAction($event)\">{{ primaryLabel }}</a>\n    </div>\n\n    <div class=\"po-widget-md\" *ngIf=\"secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"primaryAct-{{ id }}\" (click)=\"runPrimaryAction($event)\">{{ primaryLabel }}</a>\n    </div>\n    <div class=\"po-widget-md\" *ngIf=\"secondaryLabel\">\n      <a class=\"po-widget-action\" id=\"secondaryAct-{{ id }}\" (click)=\"runSecondaryAction($event)\">{{\n        secondaryLabel\n      }}</a>\n    </div>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: i0.ViewContainerRef }]; }, null); })();
 /**
@@ -50964,7 +51004,7 @@ class PoHttpInterceptorDetailComponent {
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoHttpInterceptorDetailComponent, [{
         type: Component,
-        args: [{ selector: 'po-http-interceptor-detail', template: "<po-modal p-hide-close p-size=\"lg\" [p-primary-action]=\"primaryAction\" [p-title]=\"title\">\r\n  <div class=\"po-row\">\r\n    <po-accordion class=\"po-md-12 po-mt-1 po-mb-1\" *ngIf=\"details.length > 1; else elseBlock\">\r\n      <po-accordion-item *ngFor=\"let detail of details\" [p-label]=\"formatDetailItemTitle(detail)\">\r\n        <ng-template [ngTemplateOutlet]=\"body\" [ngTemplateOutletContext]=\"{detail}\"></ng-template>\r\n      </po-accordion-item>\r\n    </po-accordion>\r\n  </div>\r\n</po-modal>\r\n\r\n<ng-template #elseBlock>\r\n  <ng-container [ngTemplateOutlet]=\"body\" [ngTemplateOutletContext]=\"{ detail: details[0] || {} }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #body let-detail=\"detail\">\r\n  <div *ngIf=\"detail.type\" class=\"po-row po-mb-1\">\r\n    <po-tag [p-color]=\"typeColor(detail.type)\" [p-value]=\"typeValue(detail.type)\"></po-tag>\r\n  </div>\r\n\r\n  <p *ngIf=\"detail.detailTitle\">\r\n    <strong>{{ detail.code }}</strong>\r\n  </p>\r\n\r\n  <div class=\"po-row\">\r\n    <p>{{ detail.detailedMessage }}</p>\r\n  </div>\r\n</ng-template>\r\n" }]
+        args: [{ selector: 'po-http-interceptor-detail', template: "<po-modal p-hide-close p-size=\"lg\" [p-primary-action]=\"primaryAction\" [p-title]=\"title\">\n  <div class=\"po-row\">\n    <po-accordion class=\"po-md-12 po-mt-1 po-mb-1\" *ngIf=\"details.length > 1; else elseBlock\">\n      <po-accordion-item *ngFor=\"let detail of details\" [p-label]=\"formatDetailItemTitle(detail)\">\n        <ng-template [ngTemplateOutlet]=\"body\" [ngTemplateOutletContext]=\"{detail}\"></ng-template>\n      </po-accordion-item>\n    </po-accordion>\n  </div>\n</po-modal>\n\n<ng-template #elseBlock>\n  <ng-container [ngTemplateOutlet]=\"body\" [ngTemplateOutletContext]=\"{ detail: details[0] || {} }\"></ng-container>\n</ng-template>\n\n<ng-template #body let-detail=\"detail\">\n  <div *ngIf=\"detail.type\" class=\"po-row po-mb-1\">\n    <po-tag [p-color]=\"typeColor(detail.type)\" [p-value]=\"typeValue(detail.type)\"></po-tag>\n  </div>\n\n  <p *ngIf=\"detail.detailTitle\">\n    <strong>{{ detail.code }}</strong>\n  </p>\n\n  <div class=\"po-row\">\n    <p>{{ detail.detailedMessage }}</p>\n  </div>\n</ng-template>\n" }]
     }], function () { return [{ type: PoLanguageService }]; }, { modal: [{
             type: ViewChild,
             args: [PoModalComponent, { static: true }]