@po-ui/ng-components 14.3.1 → 14.5.0

package/fesm2020/po-ui-ng-components.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Injectable, TemplateRef, Component, Input, ViewChild, EventEmitter, ChangeDetectionStrategy, Output, ContentChildren, NgModule, Directive, ElementRef, HostBinding, HostListener, forwardRef, ViewChildren, ViewContainerRef, ContentChild, Pipe, InjectFlags, Injector, Inject, InjectionToken, APP_INITIALIZER } from '@angular/core';
+import { Injectable, EventEmitter, TemplateRef, Component, Input, Output, ViewChild, ChangeDetectionStrategy, ContentChildren, NgModule, Directive, ElementRef, HostBinding, HostListener, forwardRef, ViewChildren, ViewContainerRef, ContentChild, Pipe, InjectFlags, Injector, Inject, InjectionToken, APP_INITIALIZER } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DecimalPipe, CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
-import { Subject, from, timer, fromEvent, of, Subscription, throwError, ReplaySubject, Observable } from 'rxjs';
+import { Subject, filter, from, timer, fromEvent, of, Subscription, throwError, ReplaySubject, Observable } from 'rxjs';
 import * as i2$2 from '@angular/animations';
 import { trigger, transition, style, animate, state, keyframes, group, query, animateChild } from '@angular/animations';
 import * as i2 from '@angular/router';
@@ -12,7 +12,7 @@ import { HttpHeaders, HttpEventType, HttpResponse, HttpRequest, HttpClientModule
 import { __decorate, __param } from 'tslib';
 import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgControl, ControlContainer, NgForm } from '@angular/forms';
-import { debounceTime, concatMap, mapTo, scan, tap, switchMap, map, filter, distinctUntilChanged, finalize, catchError, takeWhile, delay, take } from 'rxjs/operators';
+import { debounceTime, concatMap, mapTo, scan, tap, switchMap, map, filter as filter$1, distinctUntilChanged, finalize, catchError, takeWhile, delay, take } from 'rxjs/operators';
 import * as i7 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i3 from '@angular/platform-browser';
@@ -76,7 +76,7 @@ PoAccordionService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PoAcc
 function PoAccordionItemComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
-const _c0$1u = ["*"];
+const _c0$1v = ["*"];
 /**
  * @description
  *
@@ -111,6 +111,26 @@ const _c0$1u = ["*"];
 class PoAccordionItemComponent {
     constructor(accordionService) {
         this.accordionService = accordionService;
+        /** Evento disparado ao expandir o item, seja manualmente ou programaticamente. */
+        this.expandEvent = new EventEmitter();
+        /** Evento disparado ao retrair o item, seja manualmente ou programaticamente. */
+        this.collapseEvent = new EventEmitter();
+        this.expandSubscription = this.accordionService
+            .receiveFromChildAccordionClicked()
+            .pipe(filter(poAccordionItem => poAccordionItem === this && poAccordionItem.expanded))
+            .subscribe(() => {
+            this.expandEvent.emit();
+        });
+        this.collapseSubscription = this.accordionService
+            .receiveFromChildAccordionClicked()
+            .pipe(filter(poAccordionItem => poAccordionItem === this && !poAccordionItem.expanded))
+            .subscribe(() => {
+            this.collapseEvent.emit();
+        });
+    }
+    ngOnDestroy() {
+        this.expandSubscription.unsubscribe();
+        this.collapseSubscription.unsubscribe();
     }
     /**
      * Método para colapsar o `po-accordion-item`.
@@ -133,7 +153,7 @@ PoAccordionItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Po
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templateRef = _t.first);
-    } }, inputs: { label: ["p-label", "label"] }, ngContentSelectors: _c0$1u, decls: 1, vars: 0, template: function PoAccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { label: ["p-label", "label"] }, outputs: { expandEvent: "p-expand", collapseEvent: "p-collapse" }, ngContentSelectors: _c0$1v, decls: 1, vars: 0, template: function PoAccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵtemplate(0, PoAccordionItemComponent_ng_template_0_Template, 1, 0, "ng-template");
     } }, encapsulation: 2 });
@@ -143,6 +163,12 @@ PoAccordionItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Po
     }], function () { return [{ type: PoAccordionService }]; }, { label: [{
             type: Input,
             args: ['p-label']
+        }], expandEvent: [{
+            type: Output,
+            args: ['p-expand']
+        }], collapseEvent: [{
+            type: Output,
+            args: ['p-collapse']
         }], templateRef: [{
             type: ViewChild,
             args: [TemplateRef, { static: true }]
@@ -155,14 +181,14 @@ function PoAccordionItemBodyComponent_div_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     i0.ɵɵproperty("@toggleBody", undefined);
 } }
-const _c0$1t = ["*"];
+const _c0$1u = ["*"];
 class PoAccordionItemBodyComponent {
     constructor() {
         this.expanded = false;
     }
 }
 PoAccordionItemBodyComponent.ɵfac = function PoAccordionItemBodyComponent_Factory(t) { return new (t || PoAccordionItemBodyComponent)(); };
-PoAccordionItemBodyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionItemBodyComponent, selectors: [["po-accordion-item-body"]], inputs: { expanded: ["p-expanded", "expanded"] }, ngContentSelectors: _c0$1t, decls: 1, vars: 1, consts: [["class", "po-accordion-item-body", 4, "ngIf"], [1, "po-accordion-item-body"], [1, "po-accordion-item-body-content"]], template: function PoAccordionItemBodyComponent_Template(rf, ctx) { if (rf & 1) {
+PoAccordionItemBodyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoAccordionItemBodyComponent, selectors: [["po-accordion-item-body"]], inputs: { expanded: ["p-expanded", "expanded"] }, ngContentSelectors: _c0$1u, decls: 1, vars: 1, consts: [["class", "po-accordion-item-body", 4, "ngIf"], [1, "po-accordion-item-body"], [1, "po-accordion-item-body-content"]], template: function PoAccordionItemBodyComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵtemplate(0, PoAccordionItemBodyComponent_div_0_Template, 3, 1, "div", 0);
     } if (rf & 2) {
@@ -277,7 +303,7 @@ class PoAccordionComponent extends PoAccordionBaseComponent {
     }
     headerToggle(event, poAccordionItem) {
         poAccordionItem.expanded = event;
-        this.toggle(poAccordionItem);
+        this.accordionService.sendToParentAccordionItemClicked(poAccordionItem);
     }
     receiveFromChildAccordionSubscription() {
         this.accordionServiceSubscription = this.accordionService
@@ -1613,8 +1639,8 @@ PoBreadcrumbItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: P
             args: ['p-item-active']
         }] }); })();
 
-const _c0$1s = ["breadcrumb"];
-const _c1$D = ["dropdownIcon"];
+const _c0$1t = ["breadcrumb"];
+const _c1$C = ["dropdownIcon"];
 function PoBreadcrumbComponent_li_3_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 7, 8);
@@ -1788,8 +1814,8 @@ class PoBreadcrumbComponent extends PoBreadcrumbBaseComponent {
 }
 PoBreadcrumbComponent.ɵfac = function PoBreadcrumbComponent_Factory(t) { return new (t || PoBreadcrumbComponent)(i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2)); };
 PoBreadcrumbComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoBreadcrumbComponent, selectors: [["po-breadcrumb"]], viewQuery: function PoBreadcrumbComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$1s, 7, ElementRef);
-        i0.ɵɵviewQuery(_c1$D, 5, ElementRef);
+        i0.ɵɵviewQuery(_c0$1t, 7, ElementRef);
+        i0.ɵɵviewQuery(_c1$C, 5, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.breadcrumbElement = _t.first);
@@ -1957,7 +1983,7 @@ const poLoadingOverlayLiteralsDefault = {
         loading: 'Carregando'
     },
     ru: {
-        loading: 'погрузка'
+        loading: 'Загрузка'
     }
 };
 /**
@@ -2572,7 +2598,7 @@ __decorate([
             args: ['p-disabled']
         }] }); })();
 
-const _c0$1r = ["button"];
+const _c0$1s = ["button"];
 function PoButtonComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
     i0.ɵɵelement(1, "po-loading-icon", 6);
@@ -2646,7 +2672,7 @@ class PoButtonComponent extends PoButtonBaseComponent {
 }
 PoButtonComponent.ɵfac = /*@__PURE__*/ function () { let ɵPoButtonComponent_BaseFactory; return function PoButtonComponent_Factory(t) { return (ɵPoButtonComponent_BaseFactory || (ɵPoButtonComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PoButtonComponent)))(t || PoButtonComponent); }; }();
 PoButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoButtonComponent, selectors: [["po-button"]], viewQuery: function PoButtonComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$1r, 7);
+        i0.ɵɵviewQuery(_c0$1s, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.buttonElement = _t.first);
@@ -3457,7 +3483,7 @@ class PoButtonGroupBaseComponent {
      *
      * Define o modo de seleção de botões.
      *
-     * > Veja os valores válidos no *enum* `PoMultiselectFilterMode`.
+     * > Veja os valores válidos no *enum* `PoButtonGroupToggle`.
      *
      * @default `none`
      */
@@ -3509,7 +3535,7 @@ PoButtonGroupBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type:
 function PoButtonGroupComponent_po_button_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-button", 2);
-    i0.ɵɵlistener("p-click", function PoButtonGroupComponent_po_button_1_Template_po_button_p_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r4); const button_r1 = restoredCtx.$implicit; const i_r2 = restoredCtx.index; const ctx_r3 = i0.ɵɵnextContext(); button_r1.action(button_r1); return i0.ɵɵresetView(ctx_r3.onButtonClick(button_r1, i_r2)); });
+    i0.ɵɵlistener("p-click", function PoButtonGroupComponent_po_button_1_Template_po_button_p_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r4); const button_r1 = restoredCtx.$implicit; const i_r2 = restoredCtx.index; const ctx_r3 = i0.ɵɵnextContext(); ctx_r3.onButtonClick(button_r1, i_r2); return i0.ɵɵresetView(button_r1.action(button_r1)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const button_r1 = ctx.$implicit;
@@ -3559,7 +3585,7 @@ PoButtonGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoBu
     } }, dependencies: [i1.NgForOf, PoButtonComponent, PoTooltipDirective], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoButtonGroupComponent, [{
         type: Component,
-        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)=\"button.action(button); onButtonClick(button, i)\"\n  >\n  </po-button>\n</div>\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); })();
 
 /**
@@ -4234,7 +4260,7 @@ function PoCalendarHeaderComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("click", function PoCalendarHeaderComponent_span_4_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.next.emit()); });
     i0.ɵɵelementEnd();
 } }
-const _c0$1q = ["*"];
+const _c0$1r = ["*"];
 class PoCalendarHeaderComponent {
     constructor() {
         this.hidePrevious = false;
@@ -4244,7 +4270,7 @@ class PoCalendarHeaderComponent {
     }
 }
 PoCalendarHeaderComponent.ɵfac = function PoCalendarHeaderComponent_Factory(t) { return new (t || PoCalendarHeaderComponent)(); };
-PoCalendarHeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCalendarHeaderComponent, selectors: [["po-calendar-header"]], inputs: { hidePrevious: ["p-hide-previous", "hidePrevious"], hideNext: ["p-hide-next", "hideNext"] }, outputs: { previous: "p-previous", next: "p-next" }, ngContentSelectors: _c0$1q, decls: 5, vars: 2, consts: [[1, "po-calendar-header"], ["class", "po-calendar-header-left po-icon po-icon-arrow-left", 3, "click", 4, "ngIf"], ["attr-calendar", "", 1, "po-calendar-header-title"], ["class", "po-calendar-header-right po-icon po-icon-arrow-right", 3, "click", 4, "ngIf"], [1, "po-calendar-header-left", "po-icon", "po-icon-arrow-left", 3, "click"], [1, "po-calendar-header-right", "po-icon", "po-icon-arrow-right", 3, "click"]], template: function PoCalendarHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+PoCalendarHeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCalendarHeaderComponent, selectors: [["po-calendar-header"]], inputs: { hidePrevious: ["p-hide-previous", "hidePrevious"], hideNext: ["p-hide-next", "hideNext"] }, outputs: { previous: "p-previous", next: "p-next" }, ngContentSelectors: _c0$1r, decls: 5, vars: 2, consts: [[1, "po-calendar-header"], ["class", "po-calendar-header-left po-icon po-icon-arrow-left", 3, "click", 4, "ngIf"], ["attr-calendar", "", 1, "po-calendar-header-title"], ["class", "po-calendar-header-right po-icon po-icon-arrow-right", 3, "click", 4, "ngIf"], [1, "po-calendar-header-left", "po-icon", "po-icon-arrow-left", 3, "click"], [1, "po-calendar-header-right", "po-icon", "po-icon-arrow-right", 3, "click"]], template: function PoCalendarHeaderComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵtemplate(1, PoCalendarHeaderComponent_span_1_Template, 1, 0, "span", 1);
@@ -4726,7 +4752,7 @@ function PoCalendarComponent_ng_template_1_ng_container_1_Template(rf, ctx) { if
 function PoCalendarComponent_ng_template_1_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-const _c0$1p = function () { return { partType: "end" }; };
+const _c0$1q = function () { return { partType: "end" }; };
 function PoCalendarComponent_ng_template_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵtemplate(1, PoCalendarComponent_ng_template_1_ng_container_2_ng_container_1_Template, 1, 0, "ng-container", 5);
@@ -4735,9 +4761,9 @@ function PoCalendarComponent_ng_template_1_ng_container_2_Template(rf, ctx) { if
     i0.ɵɵnextContext(2);
     const _r5 = i0.ɵɵreference(6);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r5)("ngTemplateOutletContext", i0.ɵɵpureFunction0(2, _c0$1p));
+    i0.ɵɵproperty("ngTemplateOutlet", _r5)("ngTemplateOutletContext", i0.ɵɵpureFunction0(2, _c0$1q));
 } }
-const _c1$C = function () { return { partType: "start" }; };
+const _c1$B = function () { return { partType: "start" }; };
 function PoCalendarComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
     i0.ɵɵtemplate(1, PoCalendarComponent_ng_template_1_ng_container_1_Template, 1, 0, "ng-container", 5);
@@ -4747,7 +4773,7 @@ function PoCalendarComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext();
     const _r5 = i0.ɵɵreference(6);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r5)("ngTemplateOutletContext", i0.ɵɵpureFunction0(3, _c1$C));
+    i0.ɵɵproperty("ngTemplateOutlet", _r5)("ngTemplateOutletContext", i0.ɵɵpureFunction0(3, _c1$B));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", !ctx_r2.isResponsive);
 } }
@@ -5173,7 +5199,7 @@ PoChartMathsService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PoCh
             }]
     }], null, null); })();
 
-const _c0$1o = ["chartLine"];
+const _c0$1p = ["chartLine"];
 class PoChartLineBaseComponent {
     constructor(mathsService, renderer, elementRef) {
         this.mathsService = mathsService;
@@ -5301,7 +5327,7 @@ class PoChartLineBaseComponent {
 }
 PoChartLineBaseComponent.ɵfac = function PoChartLineBaseComponent_Factory(t) { return new (t || PoChartLineBaseComponent)(i0.ɵɵdirectiveInject(PoChartMathsService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
 PoChartLineBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoChartLineBaseComponent, viewQuery: function PoChartLineBaseComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$1o, 5);
+        i0.ɵɵviewQuery(_c0$1p, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartLine = _t.first);
@@ -5340,8 +5366,8 @@ PoChartLineBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: Po
             args: ['p-series']
         }] }); })();
 
-const _c0$1n = ["chartPath"];
-const _c1$B = ["po-chart-path", ""];
+const _c0$1o = ["chartPath"];
+const _c1$A = ["po-chart-path", ""];
 const pathDashoffsetDefaultWidth = 0;
 class PoChartPathComponent {
     constructor(changeDetector) {
@@ -5381,11 +5407,11 @@ class PoChartPathComponent {
 }
 PoChartPathComponent.ɵfac = function PoChartPathComponent_Factory(t) { return new (t || PoChartPathComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 PoChartPathComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartPathComponent, selectors: [["", "po-chart-path", ""]], viewQuery: function PoChartPathComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$1n, 7);
+        i0.ɵɵviewQuery(_c0$1o, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartPath = _t.first);
-    } }, inputs: { isActive: ["p-is-active", "isActive"], chartLine: ["p-chart-line", "chartLine"], coordinates: ["p-coordinates", "coordinates"], color: ["p-color", "color"], animate: ["p-animate", "animate"] }, attrs: _c1$B, decls: 2, vars: 11, consts: [[1, "po-chart-path"], ["chartPath", ""]], template: function PoChartPathComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { isActive: ["p-is-active", "isActive"], chartLine: ["p-chart-line", "chartLine"], coordinates: ["p-coordinates", "coordinates"], color: ["p-color", "color"], animate: ["p-animate", "animate"] }, attrs: _c1$A, decls: 2, vars: 11, consts: [[1, "po-chart-path"], ["chartPath", ""]], template: function PoChartPathComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelement(0, "path", 0, 1);
     } if (rf & 2) {
@@ -5422,7 +5448,7 @@ __decorate([
             args: ['p-animate']
         }] }); })();
 
-const _c0$1m = ["po-chart-series-point", ""];
+const _c0$1n = ["po-chart-series-point", ""];
 function PoChartSeriesPointComponent__svg_circle_0_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -5500,7 +5526,7 @@ class PoChartSeriesPointComponent {
     }
 }
 PoChartSeriesPointComponent.ɵfac = function PoChartSeriesPointComponent_Factory(t) { return new (t || PoChartSeriesPointComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-PoChartSeriesPointComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartSeriesPointComponent, selectors: [["", "po-chart-series-point", ""]], inputs: { animate: ["p-animate", "animate"], isActive: ["p-is-active", "isActive"], chartLine: ["p-chart-line", "chartLine"], relativeTo: ["p-relative-to", "relativeTo"], color: ["p-color", "color"], coordinates: ["p-coordinates", "coordinates"] }, outputs: { pointClick: "p-point-click", pointHover: "p-point-hover" }, attrs: _c0$1m, decls: 2, vars: 4, consts: [["p-tooltip-position", "top", "class", "po-chart-line-point", 3, "p-tooltip", "p-append-in-body", "p-display-tooltip", "class", "po-chart-active-point", "click", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["p-tooltip-position", "top", 1, "po-chart-line-point", 3, "p-tooltip", "p-append-in-body", "p-display-tooltip", "click", "mouseenter", "mouseleave"]], template: function PoChartSeriesPointComponent_Template(rf, ctx) { if (rf & 1) {
+PoChartSeriesPointComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartSeriesPointComponent, selectors: [["", "po-chart-series-point", ""]], inputs: { animate: ["p-animate", "animate"], isActive: ["p-is-active", "isActive"], chartLine: ["p-chart-line", "chartLine"], relativeTo: ["p-relative-to", "relativeTo"], color: ["p-color", "color"], coordinates: ["p-coordinates", "coordinates"] }, outputs: { pointClick: "p-point-click", pointHover: "p-point-hover" }, attrs: _c0$1n, decls: 2, vars: 4, consts: [["p-tooltip-position", "top", "class", "po-chart-line-point", 3, "p-tooltip", "p-append-in-body", "p-display-tooltip", "class", "po-chart-active-point", "click", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["p-tooltip-position", "top", 1, "po-chart-line-point", 3, "p-tooltip", "p-append-in-body", "p-display-tooltip", "click", "mouseenter", "mouseleave"]], template: function PoChartSeriesPointComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, PoChartSeriesPointComponent__svg_circle_0_Template, 1, 11, "circle", 0);
         i0.ɵɵpipe(1, "async");
     } if (rf & 2) {
@@ -5541,7 +5567,7 @@ __decorate([
             args: ['p-coordinates']
         }] }); })();
 
-const _c0$1l = ["po-chart-area", ""];
+const _c0$1m = ["po-chart-area", ""];
 function PoChartAreaComponent__svg_g_2_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -5623,7 +5649,7 @@ class PoChartAreaComponent extends PoChartLineBaseComponent {
     }
 }
 PoChartAreaComponent.ɵfac = function PoChartAreaComponent_Factory(t) { return new (t || PoChartAreaComponent)(i0.ɵɵdirectiveInject(PoChartMathsService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-PoChartAreaComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAreaComponent, selectors: [["", "po-chart-area", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1l, decls: 3, vars: 2, consts: [["chartLine", ""], [3, "class", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "mouseenter", "mouseleave"], ["po-chart-path", "", 3, "p-chart-line", "p-animate", "p-color", "p-coordinates", "p-is-active"], ["po-chart-series-point", "", 3, "p-animate", "p-chart-line", "p-color", "p-coordinates", "p-is-active", "p-relative-to", "p-point-click", "p-point-hover"]], template: function PoChartAreaComponent_Template(rf, ctx) { if (rf & 1) {
+PoChartAreaComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAreaComponent, selectors: [["", "po-chart-area", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1m, decls: 3, vars: 2, consts: [["chartLine", ""], [3, "class", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "mouseenter", "mouseleave"], ["po-chart-path", "", 3, "p-chart-line", "p-animate", "p-color", "p-coordinates", "p-is-active"], ["po-chart-series-point", "", 3, "p-animate", "p-chart-line", "p-color", "p-coordinates", "p-is-active", "p-relative-to", "p-point-click", "p-point-hover"]], template: function PoChartAreaComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelementStart(0, "g", null, 0);
         i0.ɵɵtemplate(2, PoChartAreaComponent__svg_g_2_Template, 3, 15, "g", 1);
@@ -5637,7 +5663,7 @@ PoChartAreaComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChar
         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$1k = ["po-chart-axis-path", ""];
+const _c0$1l = ["po-chart-axis-path", ""];
 function PoChartAxisPathComponent__svg_path_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelement(0, "path", 1);
@@ -5659,7 +5685,7 @@ class PoChartAxisPathComponent {
     }
 }
 PoChartAxisPathComponent.ɵfac = function PoChartAxisPathComponent_Factory(t) { return new (t || PoChartAxisPathComponent)(); };
-PoChartAxisPathComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAxisPathComponent, selectors: [["", "po-chart-axis-path", ""]], inputs: { axisXCoordinates: ["p-axis-x-coordinates", "axisXCoordinates"], axisYCoordinates: ["p-axis-y-coordinates", "axisYCoordinates"] }, attrs: _c0$1k, decls: 4, vars: 4, consts: [["class", "po-chart-axis-path", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-chart-axis-path"]], template: function PoChartAxisPathComponent_Template(rf, ctx) { if (rf & 1) {
+PoChartAxisPathComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAxisPathComponent, selectors: [["", "po-chart-axis-path", ""]], inputs: { axisXCoordinates: ["p-axis-x-coordinates", "axisXCoordinates"], axisYCoordinates: ["p-axis-y-coordinates", "axisYCoordinates"] }, attrs: _c0$1l, decls: 4, vars: 4, consts: [["class", "po-chart-axis-path", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-chart-axis-path"]], template: function PoChartAxisPathComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelementStart(0, "g");
         i0.ɵɵtemplate(1, PoChartAxisPathComponent__svg_path_1_Template, 1, 1, "path", 0);
@@ -5684,7 +5710,7 @@ PoChartAxisPathComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Po
             args: ['p-axis-y-coordinates']
         }] }); })();
 
-const _c0$1j = ["po-chart-axis-label", ""];
+const _c0$1k = ["po-chart-axis-label", ""];
 function PoChartAxisLabelComponent__svg_text_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(0, "text", 2);
@@ -5718,7 +5744,7 @@ class PoChartAxisLabelComponent {
     }
 }
 PoChartAxisLabelComponent.ɵfac = function PoChartAxisLabelComponent_Factory(t) { return new (t || PoChartAxisLabelComponent)(); };
-PoChartAxisLabelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAxisLabelComponent, selectors: [["", "po-chart-axis-label", ""]], inputs: { alignByTheCorners: ["p-align-by-the-corners", "alignByTheCorners"], axisXLabelCoordinates: ["p-axis-x-label-coordinates", "axisXLabelCoordinates"], axisYLabelCoordinates: ["p-axis-y-label-coordinates", "axisYLabelCoordinates"], type: ["p-type", "type"] }, attrs: _c0$1j, decls: 4, vars: 4, consts: [["class", "po-chart-axis-x-label", "dominant-baseline", "middle", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-chart-axis-y-label", 3, "po-chart-centered-label", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["dominant-baseline", "middle", 1, "po-chart-axis-x-label"], [1, "po-chart-axis-y-label"]], template: function PoChartAxisLabelComponent_Template(rf, ctx) { if (rf & 1) {
+PoChartAxisLabelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAxisLabelComponent, selectors: [["", "po-chart-axis-label", ""]], inputs: { alignByTheCorners: ["p-align-by-the-corners", "alignByTheCorners"], axisXLabelCoordinates: ["p-axis-x-label-coordinates", "axisXLabelCoordinates"], axisYLabelCoordinates: ["p-axis-y-label-coordinates", "axisYLabelCoordinates"], type: ["p-type", "type"] }, attrs: _c0$1k, decls: 4, vars: 4, consts: [["class", "po-chart-axis-x-label", "dominant-baseline", "middle", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "po-chart-axis-y-label", 3, "po-chart-centered-label", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["dominant-baseline", "middle", 1, "po-chart-axis-x-label"], [1, "po-chart-axis-y-label"]], template: function PoChartAxisLabelComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelementStart(0, "g");
         i0.ɵɵtemplate(1, PoChartAxisLabelComponent__svg_text_1_Template, 2, 3, "text", 0);
@@ -5749,7 +5775,7 @@ PoChartAxisLabelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: P
             args: ['p-type']
         }] }); })();
 
-const _c0$1i = ["po-chart-axis", ""];
+const _c0$1j = ["po-chart-axis", ""];
 class PoChartAxisComponent {
     constructor(mathsService) {
         this.mathsService = mathsService;
@@ -6014,7 +6040,7 @@ class PoChartAxisComponent {
     }
 }
 PoChartAxisComponent.ɵfac = function PoChartAxisComponent_Factory(t) { return new (t || PoChartAxisComponent)(i0.ɵɵdirectiveInject(PoChartMathsService)); };
-PoChartAxisComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAxisComponent, selectors: [["", "po-chart-axis", ""]], inputs: { alignByTheCorners: ["p-align-by-the-corners", "alignByTheCorners"], type: ["p-type", "type"], range: ["p-range", "range"], series: ["p-series", "series"], categories: ["p-categories", "categories"], containerSize: ["p-container-size", "containerSize"], axisOptions: ["p-options", "axisOptions"] }, outputs: { categoriesCoordinates: "p-categories-coordinates" }, attrs: _c0$1i, decls: 2, vars: 6, consts: [["po-chart-axis-path", "", 3, "p-axis-x-coordinates", "p-axis-y-coordinates"], ["po-chart-axis-label", "", 3, "p-align-by-the-corners", "p-axis-x-label-coordinates", "p-axis-y-label-coordinates", "p-type"]], template: function PoChartAxisComponent_Template(rf, ctx) { if (rf & 1) {
+PoChartAxisComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartAxisComponent, selectors: [["", "po-chart-axis", ""]], inputs: { alignByTheCorners: ["p-align-by-the-corners", "alignByTheCorners"], type: ["p-type", "type"], range: ["p-range", "range"], series: ["p-series", "series"], categories: ["p-categories", "categories"], containerSize: ["p-container-size", "containerSize"], axisOptions: ["p-options", "axisOptions"] }, outputs: { categoriesCoordinates: "p-categories-coordinates" }, attrs: _c0$1j, decls: 2, vars: 6, consts: [["po-chart-axis-path", "", 3, "p-axis-x-coordinates", "p-axis-y-coordinates"], ["po-chart-axis-label", "", 3, "p-align-by-the-corners", "p-axis-x-label-coordinates", "p-axis-y-label-coordinates", "p-type"]], template: function PoChartAxisComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelement(0, "g", 0)(1, "g", 1);
     } if (rf & 2) {
@@ -6151,7 +6177,7 @@ PoChartBarBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoC
             args: ['p-series']
         }] }); })();
 
-const _c0$1h = ["po-chart-bar-path", ""];
+const _c0$1i = ["po-chart-bar-path", ""];
 function PoChartBarPathComponent__svg_path_0_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -6183,7 +6209,7 @@ class PoChartBarPathComponent {
     }
 }
 PoChartBarPathComponent.ɵfac = function PoChartBarPathComponent_Factory(t) { return new (t || PoChartBarPathComponent)(); };
-PoChartBarPathComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartBarPathComponent, selectors: [["", "po-chart-bar-path", ""]], inputs: { color: ["p-color", "color"], coordinates: ["p-coordinates", "coordinates"], tooltipPosition: ["p-tooltip-position", "tooltipPosition"] }, outputs: { barClick: "p-bar-click", barHover: "p-bar-hover" }, attrs: _c0$1h, decls: 1, vars: 2, consts: [["class", "po-chart-bar-path", 3, "p-tooltip", "p-tooltip-position", "p-append-in-body", "class", "mouseenter", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-chart-bar-path", 3, "p-tooltip", "p-tooltip-position", "p-append-in-body", "mouseenter", "click"]], template: function PoChartBarPathComponent_Template(rf, ctx) { if (rf & 1) {
+PoChartBarPathComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartBarPathComponent, selectors: [["", "po-chart-bar-path", ""]], inputs: { color: ["p-color", "color"], coordinates: ["p-coordinates", "coordinates"], tooltipPosition: ["p-tooltip-position", "tooltipPosition"] }, outputs: { barClick: "p-bar-click", barHover: "p-bar-hover" }, attrs: _c0$1i, decls: 1, vars: 2, consts: [["class", "po-chart-bar-path", 3, "p-tooltip", "p-tooltip-position", "p-append-in-body", "class", "mouseenter", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-chart-bar-path", 3, "p-tooltip", "p-tooltip-position", "p-append-in-body", "mouseenter", "click"]], template: function PoChartBarPathComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, PoChartBarPathComponent__svg_path_0_Template, 1, 7, "path", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngForOf", ctx.coordinates)("ngForTrackBy", ctx.trackBy);
@@ -6208,7 +6234,7 @@ PoChartBarPathComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoC
             args: ['p-bar-hover']
         }] }); })();
 
-const _c0$1g = ["po-chart-bar", ""];
+const _c0$1h = ["po-chart-bar", ""];
 function PoChartBarComponent__svg_g_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -6269,7 +6295,7 @@ class PoChartBarComponent extends PoChartBarBaseComponent {
     }
 }
 PoChartBarComponent.ɵfac = function PoChartBarComponent_Factory(t) { return new (t || PoChartBarComponent)(i0.ɵɵdirectiveInject(PoChartMathsService)); };
-PoChartBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartBarComponent, selectors: [["", "po-chart-bar", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1g, decls: 2, vars: 2, consts: [[3, "class", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["po-chart-bar-path", "", 3, "p-color", "p-coordinates", "p-tooltip-position", "p-bar-click", "p-bar-hover"]], template: function PoChartBarComponent_Template(rf, ctx) { if (rf & 1) {
+PoChartBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartBarComponent, selectors: [["", "po-chart-bar", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1h, decls: 2, vars: 2, consts: [[3, "class", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["po-chart-bar-path", "", 3, "p-color", "p-coordinates", "p-tooltip-position", "p-bar-click", "p-bar-hover"]], template: function PoChartBarComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelementStart(0, "g");
         i0.ɵɵtemplate(1, PoChartBarComponent__svg_g_1_Template, 2, 6, "g", 0);
@@ -6283,7 +6309,7 @@ PoChartBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChart
         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$1f = ["po-chart-column", ""];
+const _c0$1g = ["po-chart-column", ""];
 function PoChartColumnComponent__svg_g_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -6345,7 +6371,7 @@ class PoChartColumnComponent extends PoChartBarBaseComponent {
     }
 }
 PoChartColumnComponent.ɵfac = function PoChartColumnComponent_Factory(t) { return new (t || PoChartColumnComponent)(i0.ɵɵdirectiveInject(PoChartMathsService)); };
-PoChartColumnComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartColumnComponent, selectors: [["", "po-chart-column", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1f, decls: 2, vars: 2, consts: [[3, "class", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["po-chart-bar-path", "", 3, "p-color", "p-coordinates", "p-tooltip-position", "p-bar-click", "p-bar-hover"]], template: function PoChartColumnComponent_Template(rf, ctx) { if (rf & 1) {
+PoChartColumnComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartColumnComponent, selectors: [["", "po-chart-column", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1g, decls: 2, vars: 2, consts: [[3, "class", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["po-chart-bar-path", "", 3, "p-color", "p-coordinates", "p-tooltip-position", "p-bar-click", "p-bar-hover"]], template: function PoChartColumnComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelementStart(0, "g");
         i0.ɵɵtemplate(1, PoChartColumnComponent__svg_g_1_Template, 2, 6, "g", 0);
@@ -6804,7 +6830,7 @@ PoChartSvgContainerService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ toke
             }]
     }], function () { return []; }, null); })();
 
-const _c0$1e = ["po-chart-line", ""];
+const _c0$1f = ["po-chart-line", ""];
 function PoChartLineComponent__svg_g_2_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -6852,7 +6878,7 @@ class PoChartLineComponent extends PoChartLineBaseComponent {
     }
 }
 PoChartLineComponent.ɵfac = function PoChartLineComponent_Factory(t) { return new (t || PoChartLineComponent)(i0.ɵɵdirectiveInject(PoChartMathsService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-PoChartLineComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartLineComponent, selectors: [["", "po-chart-line", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1e, decls: 3, vars: 2, consts: [["chartLine", ""], [3, "class", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "mouseenter", "mouseleave"], ["po-chart-path", "", 3, "p-chart-line", "p-animate", "p-color", "p-coordinates", "p-is-active"], ["po-chart-series-point", "", 3, "p-animate", "p-chart-line", "p-color", "p-coordinates", "p-is-active", "p-relative-to", "p-point-click", "p-point-hover"]], template: function PoChartLineComponent_Template(rf, ctx) { if (rf & 1) {
+PoChartLineComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartLineComponent, selectors: [["", "po-chart-line", ""]], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$1f, decls: 3, vars: 2, consts: [["chartLine", ""], [3, "class", "mouseenter", "mouseleave", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "mouseenter", "mouseleave"], ["po-chart-path", "", 3, "p-chart-line", "p-animate", "p-color", "p-coordinates", "p-is-active"], ["po-chart-series-point", "", 3, "p-animate", "p-chart-line", "p-color", "p-coordinates", "p-is-active", "p-relative-to", "p-point-click", "p-point-hover"]], template: function PoChartLineComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelementStart(0, "g", null, 0);
         i0.ɵɵtemplate(2, PoChartLineComponent__svg_g_2_Template, 3, 15, "g", 1);
@@ -6866,8 +6892,8 @@ PoChartLineComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChar
         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$1d = ["svgPaths"];
-const _c1$A = ["svgLabels"];
+const _c0$1e = ["svgPaths"];
+const _c1$z = ["svgLabels"];
 class PoChartCircularComponent {
     constructor(ngZone, changeDetector) {
         this.ngZone = ngZone;
@@ -6992,8 +7018,8 @@ class PoChartCircularComponent {
 }
 PoChartCircularComponent.ɵfac = function PoChartCircularComponent_Factory(t) { return new (t || PoChartCircularComponent)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 PoChartCircularComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoChartCircularComponent, viewQuery: function PoChartCircularComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$1d, 5);
-        i0.ɵɵviewQuery(_c1$A, 5);
+        i0.ɵɵviewQuery(_c0$1e, 5);
+        i0.ɵɵviewQuery(_c1$z, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.svgPaths = _t);
@@ -7106,8 +7132,8 @@ PoChartTooltipDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoC
             args: ['mousemove', ['$event']]
         }] }); })();
 
-const _c0$1c = ["svgPath"];
-const _c1$z = ["po-chart-circular-path", ""];
+const _c0$1d = ["svgPath"];
+const _c1$y = ["po-chart-circular-path", ""];
 class PoChartCircularPathComponent {
     constructor(renderer) {
         this.renderer = renderer;
@@ -7128,11 +7154,11 @@ class PoChartCircularPathComponent {
 }
 PoChartCircularPathComponent.ɵfac = function PoChartCircularPathComponent_Factory(t) { return new (t || PoChartCircularPathComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); };
 PoChartCircularPathComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartCircularPathComponent, selectors: [["", "po-chart-circular-path", ""]], viewQuery: function PoChartCircularPathComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$1c, 5, ElementRef);
+        i0.ɵɵviewQuery(_c0$1d, 5, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.svgPath = _t.first);
-    } }, inputs: { serie: ["p-serie", "serie"] }, outputs: { onClick: "p-on-click", onHover: "p-on-hover" }, attrs: _c1$z, decls: 2, vars: 4, consts: [[1, "po-path-item", 3, "p-chart-tooltip", "click", "mouseenter"], ["svgPath", ""]], template: function PoChartCircularPathComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { serie: ["p-serie", "serie"] }, outputs: { onClick: "p-on-click", onHover: "p-on-hover" }, attrs: _c1$y, decls: 2, vars: 4, consts: [[1, "po-path-item", 3, "p-chart-tooltip", "click", "mouseenter"], ["svgPath", ""]], template: function PoChartCircularPathComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelementStart(0, "path", 0, 1);
         i0.ɵɵlistener("click", function PoChartCircularPathComponent_Template__svg_path_click_0_listener() { return ctx.onMouseClick(); })("mouseenter", function PoChartCircularPathComponent_Template__svg_path_mouseenter_0_listener() { return ctx.onMouseEnter(); });
@@ -7159,8 +7185,8 @@ PoChartCircularPathComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
             args: ['svgPath', { read: ElementRef }]
         }] }); })();
 
-const _c0$1b = ["svgLabel"];
-const _c1$y = ["po-chart-circular-label", ""];
+const _c0$1c = ["svgLabel"];
+const _c1$x = ["po-chart-circular-label", ""];
 class PoChartCircularLabelComponent {
     constructor(changeDetection, renderer) {
         this.changeDetection = changeDetection;
@@ -7175,11 +7201,11 @@ class PoChartCircularLabelComponent {
 }
 PoChartCircularLabelComponent.ɵfac = function PoChartCircularLabelComponent_Factory(t) { return new (t || PoChartCircularLabelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Renderer2)); };
 PoChartCircularLabelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartCircularLabelComponent, selectors: [["", "po-chart-circular-label", ""]], viewQuery: function PoChartCircularLabelComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$1b, 5, ElementRef);
+        i0.ɵɵviewQuery(_c0$1c, 5, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.svgLabel = _t.first);
-    } }, inputs: { serie: ["p-serie", "serie"], showLabel: ["p-show-label", "showLabel"] }, attrs: _c1$y, decls: 3, vars: 6, consts: [["dominant-baseline", "middle", 1, "po-chart-label"], ["svgLabel", ""]], template: function PoChartCircularLabelComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { serie: ["p-serie", "serie"], showLabel: ["p-show-label", "showLabel"] }, attrs: _c1$x, decls: 3, vars: 6, consts: [["dominant-baseline", "middle", 1, "po-chart-label"], ["svgLabel", ""]], template: function PoChartCircularLabelComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelementStart(0, "text", 0, 1);
         i0.ɵɵtext(2);
@@ -7204,7 +7230,7 @@ PoChartCircularLabelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
             args: ['svgLabel', { read: ElementRef }]
         }] }); })();
 
-const _c0$1a = ["po-chart-pie", ""];
+const _c0$1b = ["po-chart-pie", ""];
 function PoChartPieComponent__svg_g_1_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -7286,7 +7312,7 @@ class PoChartPieComponent extends PoChartCircularComponent {
     }
 }
 PoChartPieComponent.ɵfac = function PoChartPieComponent_Factory(t) { return new (t || PoChartPieComponent)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-PoChartPieComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartPieComponent, selectors: [["", "po-chart-pie", ""]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c0$1a, decls: 3, vars: 2, consts: [[4, "ngFor", "ngForOf"], [4, "ngIf"], ["po-chart-circular-path", "", 3, "p-serie", "p-on-click", "p-on-hover"], ["svgPaths", ""], ["po-chart-circular-label", "", 3, "p-serie", "p-show-label"], ["svgLabels", ""]], template: function PoChartPieComponent_Template(rf, ctx) { if (rf & 1) {
+PoChartPieComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartPieComponent, selectors: [["", "po-chart-pie", ""]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c0$1b, decls: 3, vars: 2, consts: [[4, "ngFor", "ngForOf"], [4, "ngIf"], ["po-chart-circular-path", "", 3, "p-serie", "p-on-click", "p-on-hover"], ["svgPaths", ""], ["po-chart-circular-label", "", 3, "p-serie", "p-show-label"], ["svgLabels", ""]], template: function PoChartPieComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelementStart(0, "g");
         i0.ɵɵtemplate(1, PoChartPieComponent__svg_g_1_Template, 3, 2, "g", 0);
@@ -7303,7 +7329,7 @@ PoChartPieComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChart
         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$19 = ["po-chart-donut", ""];
+const _c0$1a = ["po-chart-donut", ""];
 function PoChartDonutComponent__svg_g_1_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -7440,7 +7466,7 @@ class PoChartDonutComponent extends PoChartCircularComponent {
     }
 }
 PoChartDonutComponent.ɵfac = function PoChartDonutComponent_Factory(t) { return new (t || PoChartDonutComponent)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-PoChartDonutComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartDonutComponent, selectors: [["", "po-chart-donut", ""]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c0$19, decls: 3, vars: 2, consts: [[4, "ngFor", "ngForOf"], [4, "ngIf"], ["po-chart-circular-path", "", 3, "p-serie", "p-on-click", "p-on-hover"], ["svgPaths", ""], ["po-chart-circular-label", "", 3, "p-serie", "p-show-label"], ["svgLabels", ""]], template: function PoChartDonutComponent_Template(rf, ctx) { if (rf & 1) {
+PoChartDonutComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartDonutComponent, selectors: [["", "po-chart-donut", ""]], features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c0$1a, decls: 3, vars: 2, consts: [[4, "ngFor", "ngForOf"], [4, "ngIf"], ["po-chart-circular-path", "", 3, "p-serie", "p-on-click", "p-on-hover"], ["svgPaths", ""], ["po-chart-circular-label", "", 3, "p-serie", "p-show-label"], ["svgLabels", ""]], template: function PoChartDonutComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵnamespaceSVG();
         i0.ɵɵelementStart(0, "g");
         i0.ɵɵtemplate(1, PoChartDonutComponent__svg_g_1_Template, 3, 2, "g", 0);
@@ -7457,7 +7483,7 @@ PoChartDonutComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCha
         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$18 = ["svgELement"];
+const _c0$19 = ["svgELement"];
 function PoChartContainerComponent__svg_g_2_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵnamespaceSVG();
@@ -7627,7 +7653,7 @@ class PoChartContainerComponent {
 }
 PoChartContainerComponent.ɵfac = function PoChartContainerComponent_Factory(t) { return new (t || PoChartContainerComponent)(i0.ɵɵdirectiveInject(PoChartMathsService)); };
 PoChartContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartContainerComponent, selectors: [["po-chart-container"]], viewQuery: function PoChartContainerComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$18, 7);
+        i0.ɵɵviewQuery(_c0$19, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.svgELement = _t.first);
@@ -7771,10 +7797,10 @@ PoResizeObserverDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: P
             args: ['p-resize-observer']
         }] }); })();
 
-const _c0$17 = ["chartContainer"];
-const _c1$x = ["chartHeader"];
-const _c2$g = ["chartLegend"];
-const _c3$9 = ["chartWrapper"];
+const _c0$18 = ["chartContainer"];
+const _c1$w = ["chartHeader"];
+const _c2$f = ["chartLegend"];
+const _c3$8 = ["chartWrapper"];
 function PoChartComponent_ng_template_7_Template(rf, ctx) { }
 function PoChartComponent_div_9_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -7956,10 +7982,10 @@ class PoChartComponent extends PoChartBaseComponent {
 }
 PoChartComponent.ɵfac = function PoChartComponent_Factory(t) { return new (t || PoChartComponent)(i0.ɵɵdirectiveInject(PoColorService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoChartSvgContainerService), i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(PoChartMathsService), i0.ɵɵdirectiveInject(i0.Renderer2)); };
 PoChartComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChartComponent, selectors: [["po-chart"]], viewQuery: function PoChartComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$17, 7, ViewContainerRef);
-        i0.ɵɵviewQuery(_c1$x, 7);
-        i0.ɵɵviewQuery(_c2$g, 5, ElementRef);
-        i0.ɵɵviewQuery(_c3$9, 7);
+        i0.ɵɵviewQuery(_c0$18, 7, ViewContainerRef);
+        i0.ɵɵviewQuery(_c1$w, 7);
+        i0.ɵɵviewQuery(_c2$f, 5, ElementRef);
+        i0.ɵɵviewQuery(_c3$8, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartContainer = _t.first);
@@ -8161,7 +8187,7 @@ PoContainerBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: Po
             args: ['p-no-shadow']
         }] }); })();
 
-const _c0$16 = ["*"];
+const _c0$17 = ["*"];
 /**
  * @docsExtends PoContainerBaseComponent
  *
@@ -8186,7 +8212,7 @@ const _c0$16 = ["*"];
 class PoContainerComponent extends PoContainerBaseComponent {
 }
 PoContainerComponent.ɵfac = /*@__PURE__*/ function () { let ɵPoContainerComponent_BaseFactory; return function PoContainerComponent_Factory(t) { return (ɵPoContainerComponent_BaseFactory || (ɵPoContainerComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PoContainerComponent)))(t || PoContainerComponent); }; }();
-PoContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoContainerComponent, selectors: [["po-container"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$16, decls: 2, vars: 8, consts: [[1, "po-container"]], template: function PoContainerComponent_Template(rf, ctx) { if (rf & 1) {
+PoContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoContainerComponent, selectors: [["po-container"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$17, decls: 2, vars: 8, consts: [[1, "po-container"]], template: function PoContainerComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵprojection(1);
@@ -8987,7 +9013,7 @@ PoPopupBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoPopu
             args: ['p-target']
         }] }); })();
 
-const _c0$15 = ["popupRef"];
+const _c0$16 = ["popupRef"];
 function PoPopupComponent_div_0_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div");
 } if (rf & 2) {
@@ -9042,8 +9068,8 @@ function PoPopupComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngForOf", ctx_r0.actions);
 } }
-const _c1$w = [[["", "p-popup-header-template", ""]]];
-const _c2$f = ["[p-popup-header-template]"];
+const _c1$v = [[["", "p-popup-header-template", ""]]];
+const _c2$e = ["[p-popup-header-template]"];
 /**
  *
  * @docsExtends PoPopupBaseComponent
@@ -9192,12 +9218,12 @@ class PoPopupComponent extends PoPopupBaseComponent {
 }
 PoPopupComponent.ɵfac = function PoPopupComponent_Factory(t) { return new (t || PoPopupComponent)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(PoControlPositionService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 PoPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPopupComponent, selectors: [["po-popup"]], viewQuery: function PoPopupComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$15, 5, ElementRef);
+        i0.ɵɵviewQuery(_c0$16, 5, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.popupRef = _t.first);
-    } }, features: [i0.ɵɵProvidersFeature([PoControlPositionService]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2$f, decls: 1, vars: 1, consts: [["class", "po-popup", 4, "ngIf"], [1, "po-popup"], ["popupRef", ""], [3, "class", 4, "ngIf"], [1, "po-popup-container"], [4, "ngFor", "ngForOf"], [3, "po-popup-item-default", "po-popup-item-danger", "po-popup-item-disabled", "po-popup-item-separator", "po-popup-item-selected", "click", 4, "ngIf"], [3, "click"], ["class", "po-popup-icon-item po-icon", 3, "p-icon", 4, "ngIf"], [1, "po-popup-icon-item", "po-icon", 3, "p-icon"]], template: function PoPopupComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵprojectionDef(_c1$w);
+    } }, features: [i0.ɵɵProvidersFeature([PoControlPositionService]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2$e, decls: 1, vars: 1, consts: [["class", "po-popup", 4, "ngIf"], [1, "po-popup"], ["popupRef", ""], [3, "class", 4, "ngIf"], [1, "po-popup-container"], [4, "ngFor", "ngForOf"], [3, "po-popup-item-default", "po-popup-item-danger", "po-popup-item-disabled", "po-popup-item-separator", "po-popup-item-selected", "click", 4, "ngIf"], [3, "click"], ["class", "po-popup-icon-item po-icon", 3, "p-icon", 4, "ngIf"], [1, "po-popup-icon-item", "po-icon", 3, "p-icon"]], template: function PoPopupComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵprojectionDef(_c1$v);
         i0.ɵɵtemplate(0, PoPopupComponent_div_0_Template, 6, 2, "div", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.showPopup);
@@ -9307,10 +9333,10 @@ PoDropdownBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoD
             args: ['p-disabled']
         }] }); })();
 
-const _c0$14 = ["dropdownRef"];
-const _c1$v = ["popupRef"];
-const _c2$e = function (a0) { return { "po-dropdown-button-disabled": a0 }; };
-const _c3$8 = function () { return ["bottom-left", "top-left"]; };
+const _c0$15 = ["dropdownRef"];
+const _c1$u = ["popupRef"];
+const _c2$d = function (a0) { return { "po-dropdown-button-disabled": a0 }; };
+const _c3$7 = function () { return ["bottom-left", "top-left"]; };
 /**
  * @docsExtends PoDropdownBaseComponent
  *
@@ -9393,8 +9419,8 @@ class PoDropdownComponent extends PoDropdownBaseComponent {
 }
 PoDropdownComponent.ɵfac = function PoDropdownComponent_Factory(t) { return new (t || PoDropdownComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); };
 PoDropdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDropdownComponent, selectors: [["po-dropdown"]], viewQuery: function PoDropdownComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$14, 7, ElementRef);
-        i0.ɵɵviewQuery(_c1$v, 5);
+        i0.ɵɵviewQuery(_c0$15, 7, ElementRef);
+        i0.ɵɵviewQuery(_c1$u, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownRef = _t.first);
@@ -9412,13 +9438,13 @@ PoDropdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDropd
         const _r0 = i0.ɵɵreference(1);
         i0.ɵɵpropertyInterpolate("tabindex", ctx.disabled ? -1 : 0);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$e, ctx.disabled));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2$d, ctx.disabled));
         i0.ɵɵadvance(1);
         i0.ɵɵtextInterpolate1(" ", ctx.label, " ");
         i0.ɵɵadvance(1);
         i0.ɵɵclassMapInterpolate1("po-dropdown-icon po-icon ", ctx.icon, "");
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("p-actions", ctx.actions)("p-custom-positions", i0.ɵɵpureFunction0(11, _c3$8))("p-target", _r0);
+        i0.ɵɵproperty("p-actions", ctx.actions)("p-custom-positions", i0.ɵɵpureFunction0(11, _c3$7))("p-target", _r0);
     } }, dependencies: [i1.NgClass, PoPopupComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDropdownComponent, [{
         type: Component,
@@ -9527,7 +9553,7 @@ function PoFieldContainerComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(ctx_r1.help);
 } }
-const _c0$13 = ["*"];
+const _c0$14 = ["*"];
 /**
  * @docsPrivate
  *
@@ -9550,7 +9576,7 @@ class PoFieldContainerComponent {
     }
 }
 PoFieldContainerComponent.ɵfac = function PoFieldContainerComponent_Factory(t) { return new (t || PoFieldContainerComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
-PoFieldContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoFieldContainerComponent, selectors: [["po-field-container"]], inputs: { label: ["p-label", "label"], help: ["p-help", "help"], optional: ["p-optional", "optional"] }, ngContentSelectors: _c0$13, decls: 7, vars: 3, consts: [[1, "po-field-container"], [1, "po-field-container-title"], [1, "po-field-title"], ["class", "po-field-optional", 4, "ngIf"], ["class", "po-field-help", 4, "ngIf"], [1, "po-field-optional"], [1, "po-field-help"]], template: function PoFieldContainerComponent_Template(rf, ctx) { if (rf & 1) {
+PoFieldContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoFieldContainerComponent, selectors: [["po-field-container"]], inputs: { label: ["p-label", "label"], help: ["p-help", "help"], optional: ["p-optional", "optional"] }, ngContentSelectors: _c0$14, decls: 7, vars: 3, consts: [[1, "po-field-container"], [1, "po-field-container-title"], [1, "po-field-title"], ["class", "po-field-optional", 4, "ngIf"], ["class", "po-field-help", 4, "ngIf"], [1, "po-field-optional"], [1, "po-field-help"]], template: function PoFieldContainerComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
         i0.ɵɵtext(3);
@@ -10111,7 +10137,7 @@ __decorate([
             args: ['p-disabled']
         }] }); })();
 
-const _c0$12 = ["checkboxLabel"];
+const _c0$13 = ["checkboxLabel"];
 function PoCheckboxComponent_label_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "label", 4, 5);
     i0.ɵɵtext(2);
@@ -10197,7 +10223,7 @@ class PoCheckboxComponent extends PoCheckboxBaseComponent {
 }
 PoCheckboxComponent.ɵfac = function PoCheckboxComponent_Factory(t) { return new (t || PoCheckboxComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 PoCheckboxComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCheckboxComponent, selectors: [["po-checkbox"]], viewQuery: function PoCheckboxComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$12, 7);
+        i0.ɵɵviewQuery(_c0$13, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxLabel = _t.first);
@@ -10239,7 +10265,7 @@ PoCheckboxComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCheck
             args: ['checkboxLabel', { static: true }]
         }] }); })();
 
-const _c0$11 = ["checkboxLabel"];
+const _c0$12 = ["checkboxLabel"];
 function PoCheckboxGroupComponent_li_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li")(1, "po-checkbox", 4, 5);
@@ -10324,7 +10350,7 @@ class PoCheckboxGroupComponent extends PoCheckboxGroupBaseComponent {
 }
 PoCheckboxGroupComponent.ɵfac = function PoCheckboxGroupComponent_Factory(t) { return new (t || PoCheckboxGroupComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 PoCheckboxGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCheckboxGroupComponent, selectors: [["po-checkbox-group"]], viewQuery: function PoCheckboxGroupComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$11, 5);
+        i0.ɵɵviewQuery(_c0$12, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkboxLabels = _t);
@@ -11409,10 +11435,10 @@ __decorate([
             args: ['p-locale']
         }] }); })();
 
-const _c0$10 = ["calendar"];
-const _c1$u = ["dialogPicker"];
-const _c2$d = ["iconDatepicker"];
-const _c3$7 = ["inp"];
+const _c0$11 = ["calendar"];
+const _c1$t = ["dialogPicker"];
+const _c2$c = ["iconDatepicker"];
+const _c3$6 = ["inp"];
 function PoDatepickerComponent_po_clean_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-clean", 13);
@@ -11729,10 +11755,10 @@ class PoDatepickerComponent extends PoDatepickerBaseComponent {
 }
 PoDatepickerComponent.ɵfac = function PoDatepickerComponent_Factory(t) { return new (t || PoDatepickerComponent)(i0.ɵɵdirectiveInject(PoControlPositionService), i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
 PoDatepickerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDatepickerComponent, selectors: [["po-datepicker"]], viewQuery: function PoDatepickerComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$10, 7);
-        i0.ɵɵviewQuery(_c1$u, 7, ElementRef);
-        i0.ɵɵviewQuery(_c2$d, 7, ElementRef);
-        i0.ɵɵviewQuery(_c3$7, 7, ElementRef);
+        i0.ɵɵviewQuery(_c0$11, 7);
+        i0.ɵɵviewQuery(_c1$t, 7, ElementRef);
+        i0.ɵɵviewQuery(_c2$c, 7, ElementRef);
+        i0.ɵɵviewQuery(_c3$6, 7, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.calendar = _t.first);
@@ -11753,7 +11779,7 @@ PoDatepickerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDat
                 multi: true
             },
             PoControlPositionService
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 14, vars: 25, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content"], ["type", "text", 1, "po-input", "po-datepicker", 3, "ngClass", "autocomplete", "disabled", "placeholder", "readonly", "required", "blur", "click"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-element-ref", "p-change-event", 4, "ngIf"], [1, "po-icon", "po-field-icon", "po-icon-calendar", 3, "click"], ["iconDatepicker", ""], ["dialogPicker", ""], ["class", "po-datepicker-calendar-overlay", 4, "ngIf"], [3, "ngModel", "p-max-date", "p-min-date", "p-locale", "ngModelChange", "p-change"], ["calendar", ""], [3, "p-error-pattern"], [3, "p-element-ref", "p-change-event"], [1, "po-datepicker-calendar-overlay"]], template: function PoDatepickerComponent_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 14, vars: 26, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content"], ["type", "text", 1, "po-input", "po-datepicker", 3, "ngClass", "autocomplete", "disabled", "placeholder", "readonly", "required", "blur", "click"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-element-ref", "p-change-event", 4, "ngIf"], [1, "po-icon", "po-field-icon", "po-icon-calendar", "po-icon-input", 3, "click"], ["iconDatepicker", ""], ["dialogPicker", ""], ["class", "po-datepicker-calendar-overlay", 4, "ngIf"], [3, "ngModel", "p-max-date", "p-min-date", "p-locale", "ngModelChange", "p-change"], ["calendar", ""], [3, "p-error-pattern"], [1, "po-icon-input", 3, "p-element-ref", "p-change-event"], [1, "po-datepicker-calendar-overlay"]], template: function PoDatepickerComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "input", 2, 3);
         i0.ɵɵlistener("blur", function PoDatepickerComponent_Template_input_blur_2_listener($event) { return ctx.eventOnBlur($event); })("click", function PoDatepickerComponent_Template_input_click_2_listener($event) { return ctx.eventOnClick($event); });
         i0.ɵɵelementEnd();
@@ -11773,8 +11799,8 @@ PoDatepickerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDat
         const _r0 = i0.ɵɵreference(3);
         i0.ɵɵproperty("p-help", ctx.help)("p-label", ctx.label)("p-optional", !ctx.required && ctx.optional);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngClass", ctx.clean && _r0.value ? "po-input-double-icon-right" : "po-input-icon-right")("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required);
-        i0.ɵɵattribute("name", ctx.name);
+        i0.ɵɵproperty("ngClass", ctx.clean && _r0.value ? "po-input-double-icon-right" : "po-input-icon-right")("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.disabled ? "" : ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required);
+        i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.label);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled && !ctx.readonly);
         i0.ɵɵadvance(1);
@@ -11803,7 +11829,7 @@ PoDatepickerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDat
                         multi: true
                     },
                     PoControlPositionService
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <input\n      #inp\n      class=\"po-input po-datepicker\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [autocomplete]=\"autocomplete\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($event)\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean *ngIf=\"clean && !disabled && !readonly\" [p-element-ref]=\"inputEl\" (p-change-event)=\"clear()\">\n      </po-clean>\n\n      <span\n        #iconDatepicker\n        class=\"po-icon po-field-icon po-icon-calendar\"\n        [class.po-field-icon]=\"!disabled && !readonly\"\n        [class.po-field-icon-disabled]=\"disabled || readonly\"\n        (click)=\"togglePicker()\"\n      >\n      </span>\n    </div>\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 [p-error-pattern]=\"getErrorPattern()\"></po-field-container-bottom>\n</po-field-container>\n" }]
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <input\n      #inp\n      class=\"po-input po-datepicker\"\n      [ngClass]=\"clean && inp.value ? 'po-input-double-icon-right' : 'po-input-icon-right'\"\n      type=\"text\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"label\"\n      [autocomplete]=\"autocomplete\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      (blur)=\"eventOnBlur($event)\"\n      (click)=\"eventOnClick($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()\"\n      >\n      </po-clean>\n\n      <span\n        #iconDatepicker\n        class=\"po-icon po-field-icon po-icon-calendar po-icon-input\"\n        [class.po-field-icon]=\"!disabled && !readonly\"\n        [class.po-field-icon-disabled]=\"disabled || readonly\"\n        (click)=\"togglePicker()\"\n      >\n      </span>\n    </div>\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 [p-error-pattern]=\"getErrorPattern()\"></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: PoControlPositionService }, { type: PoLanguageService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { calendar: [{
             type: ViewChild,
             args: ['calendar', { static: true }]
@@ -11993,7 +12019,7 @@ PoModalBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoModa
             args: ['p-hide-close']
         }] }); })();
 
-const _c0$$ = ["*"];
+const _c0$10 = ["*"];
 /**
  * @description
  *
@@ -12027,7 +12053,7 @@ class PoModalFooterComponent {
     }
 }
 PoModalFooterComponent.ɵfac = function PoModalFooterComponent_Factory(t) { return new (t || PoModalFooterComponent)(); };
-PoModalFooterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoModalFooterComponent, selectors: [["po-modal-footer"]], inputs: { disabledAlign: ["p-disabled-align", "disabledAlign"] }, ngContentSelectors: _c0$$, decls: 2, vars: 2, consts: [[1, "po-modal-footer"]], template: function PoModalFooterComponent_Template(rf, ctx) { if (rf & 1) {
+PoModalFooterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoModalFooterComponent, selectors: [["po-modal-footer"]], inputs: { disabledAlign: ["p-disabled-align", "disabledAlign"] }, ngContentSelectors: _c0$10, decls: 2, vars: 2, consts: [[1, "po-modal-footer"]], template: function PoModalFooterComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵprojection(1);
@@ -12057,7 +12083,7 @@ PoActiveOverlayService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: P
             }]
     }], null, null); })();
 
-const _c0$_ = ["modalContent"];
+const _c0$$ = ["modalContent"];
 function PoModalComponent_div_0_a_9_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "a", 13);
@@ -12122,8 +12148,8 @@ function PoModalComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r0.modalFooter)("ngIfElse", _r4);
 } }
-const _c1$t = ["*", [["po-modal-footer"]]];
-const _c2$c = ["*", "po-modal-footer"];
+const _c1$s = ["*", [["po-modal-footer"]]];
+const _c2$b = ["*", "po-modal-footer"];
 /**
  * @docsExtends PoModalBaseComponent
  *
@@ -12221,12 +12247,12 @@ PoModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoModalCom
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalFooter = _t.first);
     } }, viewQuery: function PoModalComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$_, 5, ElementRef);
+        i0.ɵɵviewQuery(_c0$$, 5, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalContent = _t.first);
-    } }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2$c, decls: 1, vars: 1, consts: [["class", "po-modal", "tabindex", "0", 3, "keydown.esc", 4, "ngIf"], ["tabindex", "0", 1, "po-modal", 3, "keydown.esc"], [1, "po-modal-overlay"], [1, "po-modal-container", "po-pb-2", "po-pt-2", 3, "mousedown"], [1, "po-modal-vertical-align"], ["tabindex", "-1"], ["modalContent", ""], [1, "po-modal-header"], [1, "po-modal-title", "po-text-ellipsis"], ["class", "po-modal-header-close-button", "tabindex", "0", 3, "click", 4, "ngIf"], [1, "po-modal-body"], [4, "ngIf", "ngIfElse"], ["defaultModalFooterTemplate", ""], ["tabindex", "0", 1, "po-modal-header-close-button", 3, "click"], [1, "po-icon", "po-icon-close"], ["p-kind", "secondary", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click", 4, "ngIf"], ["p-kind", "primary", 1, "po-button-modal-first-action", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click"], ["p-kind", "secondary", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click"]], template: function PoModalComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵprojectionDef(_c1$t);
+    } }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2$b, decls: 1, vars: 1, consts: [["class", "po-modal", "tabindex", "0", 3, "keydown.esc", 4, "ngIf"], ["tabindex", "0", 1, "po-modal", 3, "keydown.esc"], [1, "po-modal-overlay"], [1, "po-modal-container", "po-pb-2", "po-pt-2", 3, "mousedown"], [1, "po-modal-vertical-align"], ["tabindex", "-1"], ["modalContent", ""], [1, "po-modal-header"], [1, "po-modal-title", "po-text-ellipsis"], ["class", "po-modal-header-close-button", "tabindex", "0", 3, "click", 4, "ngIf"], [1, "po-modal-body"], [4, "ngIf", "ngIfElse"], ["defaultModalFooterTemplate", ""], ["tabindex", "0", 1, "po-modal-header-close-button", 3, "click"], [1, "po-icon", "po-icon-close"], ["p-kind", "secondary", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click", 4, "ngIf"], ["p-kind", "primary", 1, "po-button-modal-first-action", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click"], ["p-kind", "secondary", 3, "p-danger", "p-disabled", "p-label", "p-loading", "p-click"]], template: function PoModalComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵprojectionDef(_c1$s);
         i0.ɵɵtemplate(0, PoModalComponent_div_0_Template, 15, 7, "div", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", !ctx.isHidden);
@@ -13031,8 +13057,8 @@ var PoToasterType;
     PoToasterType[PoToasterType["Warning"] = 3] = "Warning";
 })(PoToasterType || (PoToasterType = {}));
 
-const _c0$Z = ["toaster"];
-const _c1$s = ["buttonClose"];
+const _c0$_ = ["toaster"];
+const _c1$r = ["buttonClose"];
 function PoToasterComponent_po_button_8_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-button", 11);
@@ -13167,8 +13193,8 @@ class PoToasterComponent extends PoToasterBaseComponent {
 }
 PoToasterComponent.ɵfac = function PoToasterComponent_Factory(t) { return new (t || PoToasterComponent)(i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2)); };
 PoToasterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoToasterComponent, selectors: [["po-toaster"]], viewQuery: function PoToasterComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$Z, 5);
-        i0.ɵɵviewQuery(_c1$s, 5);
+        i0.ɵɵviewQuery(_c0$_, 5);
+        i0.ɵɵviewQuery(_c1$r, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.toaster = _t.first);
@@ -13409,7 +13435,7 @@ PoPopoverBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoPo
             args: ['p-trigger']
         }] }); })();
 
-const _c0$Y = ["popoverElement"];
+const _c0$Z = ["popoverElement"];
 function PoPopoverComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div");
 } if (rf & 2) {
@@ -13425,7 +13451,7 @@ function PoPopoverComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(ctx_r2.title);
 } }
-const _c1$r = ["*"];
+const _c1$q = ["*"];
 /**
  *
  * @docsExtends PoPopoverBaseComponent
@@ -13548,11 +13574,11 @@ class PoPopoverComponent extends PoPopoverBaseComponent {
 }
 PoPopoverComponent.ɵfac = function PoPopoverComponent_Factory(t) { return new (t || PoPopoverComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PoControlPositionService)); };
 PoPopoverComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPopoverComponent, selectors: [["po-popover"]], viewQuery: function PoPopoverComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$Y, 7, ElementRef);
+        i0.ɵɵviewQuery(_c0$Z, 7, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.popoverElement = _t.first);
-    } }, features: [i0.ɵɵProvidersFeature([PoControlPositionService]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$r, decls: 6, vars: 3, consts: [[1, "po-popover", 3, "hidden"], ["popoverElement", ""], [3, "class", 4, "ngIf"], [1, "po-popover-content"], ["class", "po-popover-title", 4, "ngIf"], [1, "po-popover-title"]], template: function PoPopoverComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵProvidersFeature([PoControlPositionService]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$q, decls: 6, vars: 3, consts: [[1, "po-popover", 3, "hidden"], ["popoverElement", ""], [3, "class", 4, "ngIf"], [1, "po-popover-content"], ["class", "po-popover-title", 4, "ngIf"], [1, "po-popover-title"]], template: function PoPopoverComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵelementStart(0, "div", 0, 1);
         i0.ɵɵtemplate(2, PoPopoverComponent_div_2_Template, 1, 3, "div", 2);
@@ -13672,7 +13698,7 @@ PoTimeModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({});
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PoTimeModule, { declarations: [PoTimePipe], exports: [PoTimePipe] }); })();
 
-const _c0$X = function (a0, a1) { return { "po-clickable": a0, "po-table-icon-disabled": a1 }; };
+const _c0$Y = function (a0, a1) { return { "po-clickable": a0, "po-table-icon-disabled": a1 }; };
 /**
  * @docsPrivate
  *
@@ -13709,7 +13735,7 @@ PoTableIconComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTabl
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵclassMapInterpolate1("po-table-icon-content ", ctx.disabled ? "" : ctx.color, "");
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(6, _c0$X, ctx.clickable, ctx.disabled))("p-icon", ctx.icon)("p-tooltip", ctx.tooltip);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(6, _c0$Y, ctx.clickable, ctx.disabled))("p-icon", ctx.icon)("p-tooltip", ctx.tooltip);
     } }, dependencies: [i1.NgClass, PoTooltipDirective, PoIconComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableIconComponent, [{
         type: Component,
@@ -13962,40 +13988,122 @@ PoTableColumnLinkComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             args: ['p-value']
         }] }); })();
 
-function PoTableColumnManagerComponent_po_popover_0_div_10_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "div", 13)(2, "po-button", 14);
-    i0.ɵɵlistener("click", function PoTableColumnManagerComponent_po_popover_0_div_10_Template_po_button_click_2_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r5); const option_r3 = restoredCtx.$implicit; const ctx_r4 = i0.ɵɵnextContext(2); ctx_r4.changePosition(option_r3, "up"); return i0.ɵɵresetView($event.stopPropagation()); });
+function PoTableListManagerComponent_li_0_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li", 1)(1, "div", 2)(2, "po-checkbox", 3, 4);
+    i0.ɵɵlistener("click", function PoTableListManagerComponent_li_0_Template_po_checkbox_click_2_listener() { const restoredCtx = i0.ɵɵrestoreView(_r4); const option_r1 = restoredCtx.$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.checkOption(option_r1)); })("keydown", function PoTableListManagerComponent_li_0_Template_po_checkbox_keydown_2_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r4); const option_r1 = restoredCtx.$implicit; const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.onKeyDown($event, option_r1)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "po-button", 15);
-    i0.ɵɵlistener("click", function PoTableColumnManagerComponent_po_popover_0_div_10_Template_po_button_click_3_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r5); const option_r3 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(2); ctx_r6.changePosition(option_r3, "down"); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(4, "div", 5)(5, "po-button", 6);
+    i0.ɵɵlistener("click", function PoTableListManagerComponent_li_0_Template_po_button_click_5_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r4); const option_r1 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(); ctx_r6.emitChangePosition(option_r1, "up"); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "po-button", 7);
+    i0.ɵɵlistener("click", function PoTableListManagerComponent_li_0_Template_po_button_click_6_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r4); const option_r1 = restoredCtx.$implicit; const ctx_r7 = i0.ɵɵnextContext(); ctx_r7.emitChangePosition(option_r1, "down"); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const option_r3 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const option_r1 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("po-checkbox-group-item-disabled", option_r1.disabled || ctx_r0.disabled);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("p-tooltip", ctx_r2.literals.up)("p-disabled", ctx_r2.verifyArrowDisabled(option_r3, "up"));
+    i0.ɵɵproperty("p-label", option_r1.label)("p-disabled", option_r1.disabled || ctx_r0.disabled)("p-checkboxValue", ctx_r0.checkedOptions[option_r1.value] === null ? "mixed" : ctx_r0.checkedOptions[option_r1.value])("p-required", ctx_r0.required);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("p-tooltip", ctx_r0.literals.up)("p-disabled", ctx_r0.verifyArrowDisabled(option_r1, "up"));
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("p-tooltip", ctx_r2.literals.down)("p-disabled", ctx_r2.verifyArrowDisabled(option_r3, "down"));
+    i0.ɵɵproperty("p-tooltip", ctx_r0.literals.down)("p-disabled", ctx_r0.verifyArrowDisabled(option_r1, "down"));
 } }
+const poTableListManagerLiterals = {
+    en: {
+        up: 'up',
+        down: 'down'
+    },
+    es: {
+        up: 'arriba',
+        down: 'abajo'
+    },
+    pt: {
+        up: 'acima',
+        down: 'abaixo'
+    },
+    ru: {
+        up: 'вверх',
+        down: 'вниз'
+    }
+};
+class PoTableListManagerComponent extends PoCheckboxGroupComponent {
+    constructor(languageService, changeDetector) {
+        super(changeDetector);
+        this.changePosition = new EventEmitter();
+        const language = languageService.getShortLanguage();
+        this.literals = {
+            ...poTableListManagerLiterals[poLocaleDefault],
+            ...poTableListManagerLiterals[language]
+        };
+    }
+    emitChangePosition(option, direction) {
+        const infoPosition = { option, direction };
+        const hasDisabled = this.verifyArrowDisabled(option, direction);
+        if (!hasDisabled) {
+            this.changePosition.emit(infoPosition);
+        }
+    }
+    verifyArrowDisabled(option, direction) {
+        const index = this.columnsManager.findIndex(el => el.property === option.value);
+        const existsDetail = this.columnsManager.some(function (el) {
+            return el.property === 'detail';
+        });
+        const valueSubtraction = existsDetail ? 2 : 1;
+        if (index === 0 && direction === 'up') {
+            return true;
+        }
+        if (index === this.columnsManager.length - valueSubtraction && direction === 'down') {
+            return true;
+        }
+        return false;
+    }
+}
+PoTableListManagerComponent.ɵfac = function PoTableListManagerComponent_Factory(t) { return new (t || PoTableListManagerComponent)(i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+PoTableListManagerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableListManagerComponent, selectors: [["po-table-list-manager"]], inputs: { columnsManager: ["p-columns-manager", "columnsManager"] }, outputs: { changePosition: "p-change-position" }, features: [i0.ɵɵProvidersFeature([
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PoTableListManagerComponent),
+                multi: true
+            }
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 2, consts: [["class", "po-table-list-manager-container", 3, "po-checkbox-group-item-disabled", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "po-table-list-manager-container"], [1, "po-table-list-manager-item"], [3, "p-label", "p-disabled", "p-checkboxValue", "p-required", "click", "keydown"], ["checkboxLabel", ""], [1, "po-container-icons-arrows-columns-manager"], ["p-tooltip-position", "left", "p-kind", "tertiary", "p-icon", "po-icon po-icon-arrow-up", 3, "p-tooltip", "p-disabled", "click"], ["p-tooltip-position", "top", "p-kind", "tertiary", "p-icon", "po-icon po-icon-arrow-down", 3, "p-tooltip", "p-disabled", "click"]], template: function PoTableListManagerComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, PoTableListManagerComponent_li_0_Template, 7, 10, "li", 0);
+    } if (rf & 2) {
+        i0.ɵɵproperty("ngForOf", ctx.checkboxGroupOptionsView)("ngForTrackBy", ctx.trackByFn);
+    } }, dependencies: [i1.NgForOf, PoButtonComponent, PoTooltipDirective, PoCheckboxComponent], encapsulation: 2 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableListManagerComponent, [{
+        type: Component,
+        args: [{ selector: 'po-table-list-manager', providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => PoTableListManagerComponent),
+                        multi: true
+                    }
+                ], template: "<li\n  class=\"po-table-list-manager-container\"\n  *ngFor=\"let option of checkboxGroupOptionsView; trackBy: trackByFn\"\n  [class.po-checkbox-group-item-disabled]=\"option.disabled || disabled\"\n>\n  <div class=\"po-table-list-manager-item\">\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    <div class=\"po-container-icons-arrows-columns-manager\">\n      <po-button\n        [p-tooltip]=\"literals.up\"\n        p-tooltip-position=\"left\"\n        p-kind=\"tertiary\"\n        p-icon=\"po-icon po-icon-arrow-up\"\n        [p-disabled]=\"verifyArrowDisabled(option, 'up')\"\n        (click)=\"emitChangePosition(option, 'up'); $event.stopPropagation()\"\n      >\n      </po-button>\n\n      <po-button\n        [p-tooltip]=\"literals.down\"\n        p-tooltip-position=\"top\"\n        p-kind=\"tertiary\"\n        p-icon=\"po-icon po-icon-arrow-down\"\n        [p-disabled]=\"verifyArrowDisabled(option, 'down')\"\n        (click)=\"emitChangePosition(option, 'down'); $event.stopPropagation()\"\n      >\n      </po-button>\n    </div>\n  </div>\n</li>\n" }]
+    }], function () { return [{ type: PoLanguageService }, { type: i0.ChangeDetectorRef }]; }, { changePosition: [{
+            type: Output,
+            args: ['p-change-position']
+        }], columnsManager: [{
+            type: Input,
+            args: ['p-columns-manager']
+        }] }); })();
+
 function PoTableColumnManagerComponent_po_popover_0_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
+    const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-popover", 1, 2);
-    i0.ɵɵlistener("p-close", function PoTableColumnManagerComponent_po_popover_0_Template_po_popover_p_close_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.checkChanges([], true)); });
+    i0.ɵɵlistener("p-close", function PoTableColumnManagerComponent_po_popover_0_Template_po_popover_p_close_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.checkChanges([], true)); });
     i0.ɵɵelementStart(2, "div", 3)(3, "div", 4);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "div", 5)(6, "button", 6);
-    i0.ɵɵlistener("click", function PoTableColumnManagerComponent_po_popover_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r8); const _r1 = i0.ɵɵreference(1); return i0.ɵɵresetView(_r1.close()); });
+    i0.ɵɵlistener("click", function PoTableColumnManagerComponent_po_popover_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r3); const _r1 = i0.ɵɵreference(1); return i0.ɵɵresetView(_r1.close()); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(7, "div", 7)(8, "po-checkbox-group", 8);
-    i0.ɵɵlistener("ngModelChange", function PoTableColumnManagerComponent_po_popover_0_Template_po_checkbox_group_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.visibleColumns = $event); })("p-change", function PoTableColumnManagerComponent_po_popover_0_Template_po_checkbox_group_p_change_8_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.checkChanges($event, false)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 9);
-    i0.ɵɵtemplate(10, PoTableColumnManagerComponent_po_popover_0_div_10_Template, 4, 4, "div", 10);
+    i0.ɵɵelementStart(7, "div", 7)(8, "po-table-list-manager", 8);
+    i0.ɵɵlistener("ngModelChange", function PoTableColumnManagerComponent_po_popover_0_Template_po_table_list_manager_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.visibleColumns = $event); })("p-change", function PoTableColumnManagerComponent_po_popover_0_Template_po_table_list_manager_p_change_8_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.checkChanges($event, false)); })("p-change-position", function PoTableColumnManagerComponent_po_popover_0_Template_po_table_list_manager_p_change_position_8_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.changePosition($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 11)(12, "po-button", 12);
-    i0.ɵɵlistener("p-click", function PoTableColumnManagerComponent_po_popover_0_Template_po_button_p_click_12_listener() { i0.ɵɵrestoreView(_r8); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.restore()); });
+    i0.ɵɵelementStart(9, "div", 9)(10, "po-button", 10);
+    i0.ɵɵlistener("p-click", function PoTableColumnManagerComponent_po_popover_0_Template_po_button_p_click_10_listener() { i0.ɵɵrestoreView(_r3); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.restore()); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -14003,9 +14111,7 @@ function PoTableColumnManagerComponent_po_popover_0_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.literals.columnsManager);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngModel", ctx_r0.visibleColumns)("p-options", ctx_r0.columnsOptions);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r0.columnsOptions);
+    i0.ɵɵproperty("ngModel", ctx_r0.visibleColumns)("p-options", ctx_r0.columnsOptions)("p-columns-manager", ctx_r0.columns);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("p-label", ctx_r0.literals.restoreDefault);
 } }
@@ -14013,27 +14119,19 @@ const PoTableColumnManagerMaxColumnsDefault = 99999;
 const poTableColumnManagerLiteralsDefault = {
     en: {
         columnsManager: 'Columns manager',
-        restoreDefault: 'Restore default',
-        up: 'up',
-        down: 'down'
+        restoreDefault: 'Restore default'
     },
     es: {
         columnsManager: 'Gerente de columna',
-        restoreDefault: 'Restaurar por defecto',
-        up: 'arriba',
-        down: 'abajo'
+        restoreDefault: 'Restaurar por defecto'
     },
     pt: {
         columnsManager: 'Gerenciador de colunas',
-        restoreDefault: 'Restaurar padrão',
-        up: 'acima',
-        down: 'abaixo'
+        restoreDefault: 'Restaurar padrão'
     },
     ru: {
         columnsManager: 'менеджер колонок',
-        restoreDefault: 'сброс настроек',
-        up: 'вверх',
-        down: 'вниз'
+        restoreDefault: 'сброс настроек'
     }
 };
 class PoTableColumnManagerComponent {
@@ -14092,36 +14190,19 @@ class PoTableColumnManagerComponent {
         this.initialColumns.emit(this.getVisibleColumns(this.colunsDefault));
         this.checkChanges(defaultColumns, this.restoreDefaultEvent);
     }
-    changePosition(option, direction) {
+    changePosition({ option, direction }) {
         const indexColumn = this.columns.findIndex(el => el.property === option.value);
         const newColumn = [...this.columns];
-        const hasDisabled = this.verifyArrowDisabled(option, direction);
-        this.changePositionColumn(newColumn, indexColumn, direction, hasDisabled);
+        this.changePositionColumn(newColumn, indexColumn, direction);
         this.columns = newColumn;
         this.visibleColumnsChange.emit(this.columns);
     }
-    verifyArrowDisabled(option, direction) {
-        const index = this.columns.findIndex(el => el.property === option.value);
-        const existsDetail = this.columns.some(function (el) {
-            return el.property === 'detail';
-        });
-        const valueSubtraction = existsDetail ? 2 : 1;
-        if (index === 0 && direction === 'up') {
-            return true;
+    changePositionColumn(array, index, direction) {
+        if (direction === 'up') {
+            array.splice(index, 0, array.splice(index - 1, 1)[0]);
         }
-        if (index === this.columns.length - valueSubtraction && direction === 'down') {
-            return true;
-        }
-        return false;
-    }
-    changePositionColumn(array, index, direction, hasDisabled) {
-        if (!hasDisabled) {
-            if (direction === 'up') {
-                array.splice(index, 0, array.splice(index - 1, 1)[0]);
-            }
-            if (direction === 'down') {
-                array.splice(index, 0, array.splice(index + 1, 1)[0]);
-            }
+        if (direction === 'down') {
+            array.splice(index, 0, array.splice(index + 1, 1)[0]);
         }
     }
     verifyToEmitChange(event) {
@@ -14300,14 +14381,14 @@ PoTableColumnManagerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.popover = _t.first);
-    } }, inputs: { columns: ["p-columns", "columns"], target: ["p-target", "target"], colunsDefault: ["p-columns-default", "colunsDefault"], lastVisibleColumnsSelected: ["p-last-visible-columns-selected", "lastVisibleColumnsSelected"], maxColumns: ["p-max-columns", "maxColumns"] }, outputs: { visibleColumnsChange: "p-visible-columns-change", changeVisibleColumns: "p-change-visible-columns", initialColumns: "p-initial-columns" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["p-position", "bottom-left", 3, "p-target", "p-close", 4, "ngIf"], ["p-position", "bottom-left", 3, "p-target", "p-close"], ["popover", ""], [1, "po-table-column-manager-header"], [1, "po-table-column-manager-header-title"], [1, "po-table-column-manager-header-close"], [1, "po-table-column-manager-header-close-button", "po-clickable", "po-icon", "po-icon-close", 3, "click"], [1, "po-table-column-manager-body"], ["name", "visibleColumns", "p-columns", "1", 1, "po-checkbox-group-column-manager", 3, "ngModel", "p-options", "ngModelChange", "p-change"], [1, "po-container-arrows-columns-manager"], [4, "ngFor", "ngForOf"], [1, "po-table-column-manager-footer"], ["p-kind", "tertiary", 1, "po-table-column-manager-footer-restore", 3, "p-label", "p-click"], [1, "po-container-icons-arrows-columns-manager"], ["p-tooltip-position", "left", "p-kind", "tertiary", "p-icon", "po-icon po-icon-arrow-up", 3, "p-tooltip", "p-disabled", "click"], ["p-tooltip-position", "top", "p-kind", "tertiary", "p-icon", "po-icon po-icon-arrow-down", 3, "p-tooltip", "p-disabled", "click"]], template: function PoTableColumnManagerComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵtemplate(0, PoTableColumnManagerComponent_po_popover_0_Template, 13, 6, "po-popover", 0);
+    } }, inputs: { columns: ["p-columns", "columns"], target: ["p-target", "target"], colunsDefault: ["p-columns-default", "colunsDefault"], lastVisibleColumnsSelected: ["p-last-visible-columns-selected", "lastVisibleColumnsSelected"], maxColumns: ["p-max-columns", "maxColumns"] }, outputs: { visibleColumnsChange: "p-visible-columns-change", changeVisibleColumns: "p-change-visible-columns", initialColumns: "p-initial-columns" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["p-position", "bottom-left", 3, "p-target", "p-close", 4, "ngIf"], ["p-position", "bottom-left", 3, "p-target", "p-close"], ["popover", ""], [1, "po-table-column-manager-header"], [1, "po-table-column-manager-header-title"], [1, "po-table-column-manager-header-close"], [1, "po-table-column-manager-header-close-button", "po-clickable", "po-icon", "po-icon-close", 3, "click"], [1, "po-table-column-manager-body"], ["name", "visibleColumns", "p-columns", "1", 3, "ngModel", "p-options", "p-columns-manager", "ngModelChange", "p-change", "p-change-position"], [1, "po-table-column-manager-footer"], ["p-kind", "tertiary", 1, "po-table-column-manager-footer-restore", 3, "p-label", "p-click"]], template: function PoTableColumnManagerComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, PoTableColumnManagerComponent_po_popover_0_Template, 11, 6, "po-popover", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.target);
-    } }, dependencies: [i1.NgForOf, i1.NgIf, i2$1.NgControlStatus, i2$1.NgModel, PoButtonComponent, PoCheckboxGroupComponent, PoPopoverComponent, PoTooltipDirective], encapsulation: 2 });
+    } }, dependencies: [i1.NgIf, i2$1.NgControlStatus, i2$1.NgModel, PoButtonComponent, PoPopoverComponent, PoTableListManagerComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableColumnManagerComponent, [{
         type: Component,
-        args: [{ selector: 'po-table-column-manager', template: "<po-popover #popover *ngIf=\"target\" [p-target]=\"target\" p-position=\"bottom-left\" (p-close)=\"checkChanges([], true)\">\n  <div class=\"po-table-column-manager-header\">\n    <div class=\"po-table-column-manager-header-title\">{{ literals.columnsManager }}</div>\n\n    <div class=\"po-table-column-manager-header-close\">\n      <button\n        class=\"po-table-column-manager-header-close-button po-clickable po-icon po-icon-close\"\n        (click)=\"popover.close()\"\n      ></button>\n    </div>\n  </div>\n\n  <div class=\"po-table-column-manager-body\">\n    <po-checkbox-group\n      class=\"po-checkbox-group-column-manager\"\n      name=\"visibleColumns\"\n      [(ngModel)]=\"visibleColumns\"\n      p-columns=\"1\"\n      [p-options]=\"columnsOptions\"\n      (p-change)=\"checkChanges($event, false)\"\n    >\n    </po-checkbox-group>\n\n    <div class=\"po-container-arrows-columns-manager\">\n      <div *ngFor=\"let option of columnsOptions\">\n        <div class=\"po-container-icons-arrows-columns-manager\">\n          <po-button\n            [p-tooltip]=\"literals.up\"\n            p-tooltip-position=\"left\"\n            [p-disabled]=\"verifyArrowDisabled(option, 'up')\"\n            (click)=\"changePosition(option, 'up'); $event.stopPropagation()\"\n            p-kind=\"tertiary\"\n            p-icon=\"po-icon po-icon-arrow-up\"\n          >\n          </po-button>\n          <po-button\n            [p-tooltip]=\"literals.down\"\n            p-tooltip-position=\"top\"\n            [p-disabled]=\"verifyArrowDisabled(option, 'down')\"\n            (click)=\"changePosition(option, 'down'); $event.stopPropagation()\"\n            p-kind=\"tertiary\"\n            p-icon=\"po-icon po-icon-arrow-down\"\n          >\n          </po-button>\n        </div>\n      </div>\n    </div>\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</po-popover>\n" }]
+        args: [{ selector: 'po-table-column-manager', template: "<po-popover #popover *ngIf=\"target\" [p-target]=\"target\" p-position=\"bottom-left\" (p-close)=\"checkChanges([], true)\">\n  <div class=\"po-table-column-manager-header\">\n    <div class=\"po-table-column-manager-header-title\">{{ literals.columnsManager }}</div>\n\n    <div class=\"po-table-column-manager-header-close\">\n      <button\n        class=\"po-table-column-manager-header-close-button po-clickable po-icon po-icon-close\"\n        (click)=\"popover.close()\"\n      ></button>\n    </div>\n  </div>\n\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-change)=\"checkChanges($event, false)\"\n      (p-change-position)=\"changePosition($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</po-popover>\n" }]
     }], function () { return [{ type: i0.Renderer2 }, { type: PoLanguageService }]; }, { popover: [{
             type: ViewChild,
             args: [PoPopoverComponent]
@@ -14418,8 +14499,8 @@ const poTableLiteralsDefault = {
         noColumns: 'Нет определения столбца',
         noData: 'Данные не найдены',
         noVisibleColumn: 'нет видимых столбцов',
-        loadingData: 'погрузка',
-        loadMoreData: 'загрузка',
+        loadingData: 'Загрузка',
+        loadMoreData: 'Загрузка',
         seeCompleteSubtitle: 'Посмотреть полный субтитр',
         completeSubtitle: 'Полный заголовок',
         columnsManager: 'менеджер колонок'
@@ -15713,8 +15794,9 @@ function PoTableDetailComponent_tr_3_td_4_span_3_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const detail_r18 = i0.ɵɵnextContext().$implicit;
     const item_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r20 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind4(2, 1, item_r5[detail_r18.property], detail_r18.format, "symbol", "1.2-2"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind4(2, 1, ctx_r20.getDetailData(item_r5, detail_r18), detail_r18.format, "symbol", "1.2-2"));
 } }
 function PoTableDetailComponent_tr_3_td_4_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -15724,8 +15806,9 @@ function PoTableDetailComponent_tr_3_td_4_span_4_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const detail_r18 = i0.ɵɵnextContext().$implicit;
     const item_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r21 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, item_r5[detail_r18.property], detail_r18.format || "dd/MM/yyyy"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r21.getDetailData(item_r5, detail_r18), detail_r18.format || "dd/MM/yyyy"));
 } }
 function PoTableDetailComponent_tr_3_td_4_span_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -15735,8 +15818,9 @@ function PoTableDetailComponent_tr_3_td_4_span_5_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const detail_r18 = i0.ɵɵnextContext().$implicit;
     const item_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r22 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, item_r5[detail_r18.property], detail_r18.format || "HH:mm:ss.ffffff"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r22.getDetailData(item_r5, detail_r18), detail_r18.format || "HH:mm:ss.ffffff"));
 } }
 function PoTableDetailComponent_tr_3_td_4_span_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -15746,8 +15830,9 @@ function PoTableDetailComponent_tr_3_td_4_span_6_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const detail_r18 = i0.ɵɵnextContext().$implicit;
     const item_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r23 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, item_r5[detail_r18.property], detail_r18.format || "dd/MM/yyyy HH:mm:ss"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r23.getDetailData(item_r5, detail_r18), detail_r18.format || "dd/MM/yyyy HH:mm:ss"), " ");
 } }
 function PoTableDetailComponent_tr_3_td_4_span_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -15758,7 +15843,7 @@ function PoTableDetailComponent_tr_3_td_4_span_7_Template(rf, ctx) { if (rf & 1)
     const item_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r24 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r24.formatNumberDetail(item_r5[detail_r18.property], detail_r18.format));
+    i0.ɵɵtextInterpolate(ctx_r24.formatNumberDetail(ctx_r24.getDetailData(item_r5, detail_r18), detail_r18.format));
 } }
 function PoTableDetailComponent_tr_3_td_4_span_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -15767,8 +15852,9 @@ function PoTableDetailComponent_tr_3_td_4_span_8_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const detail_r18 = i0.ɵɵnextContext().$implicit;
     const item_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r25 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(item_r5[detail_r18.property]);
+    i0.ɵɵtextInterpolate(ctx_r25.getDetailData(item_r5, detail_r18));
 } }
 function PoTableDetailComponent_tr_3_td_4_Template(rf, ctx) { if (rf & 1) {
     const _r40 = i0.ɵɵgetCurrentView();
@@ -15868,6 +15954,20 @@ class PoTableDetailComponent {
     getColumnTitleLabel(detail) {
         return detail.label || capitalizeFirstLetter(detail.property);
     }
+    getDetailData(item, detail) {
+        const arrayProperty = detail.property.split('.');
+        if (arrayProperty.length > 1) {
+            const nestedProperties = arrayProperty;
+            let value = item;
+            for (const property of nestedProperties) {
+                value = value[property] || value[property] === 0 ? value[property] : '';
+            }
+            return value;
+        }
+        else {
+            return item[detail.property];
+        }
+    }
     onSelectRow(item) {
         item.$selected = !item.$selected;
         this.selectRow.emit(item);
@@ -15901,7 +16001,7 @@ PoTableDetailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTa
     } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgSwitch, i1.NgSwitchCase, i1.NgSwitchDefault, i2$1.NgControlStatus, i2$1.NgModel, PoCheckboxComponent, i1.CurrencyPipe, i1.DatePipe, PoTimePipe], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableDetailComponent, [{
         type: Component,
-        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        {{ getColumnTitleLabel(detail) }}\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      >\n        <strong *ngIf=\"typeHeaderInline\"> {{ getColumnTitleLabel(detail) }}: </strong>\n\n        <ng-container [ngSwitch]=\"detail.type\">\n          <span *ngSwitchCase=\"'currency'\">{{ item[detail.property] | currency: detail.format:'symbol':'1.2-2' }}</span>\n          <span *ngSwitchCase=\"'date'\">{{ item[detail.property] | date: detail.format || 'dd/MM/yyyy' }}</span>\n          <span *ngSwitchCase=\"'time'\">{{ item[detail.property] | po_time: detail.format || 'HH:mm:ss.ffffff' }}</span>\n          <span *ngSwitchCase=\"'dateTime'\">\n            {{ item[detail.property] | date: detail.format || 'dd/MM/yyyy HH:mm:ss' }}\n          </span>\n          <span *ngSwitchCase=\"'number'\">{{ formatNumberDetail(item[detail.property], detail.format) }}</span>\n          <span *ngSwitchDefault>{{ item[detail.property] }}</span>\n        </ng-container>\n      </td>\n    </tr>\n  </tbody>\n</table>\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        {{ getColumnTitleLabel(detail) }}\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      >\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']
@@ -16110,15 +16210,15 @@ PoTableSubtitleFooterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
             args: ['p-subtitles']
         }] }); })();
 
-const _c0$W = ["noColumnsHeader"];
-const _c1$q = ["noColumnsHeaderFixed"];
-const _c2$b = ["popup"];
-const _c3$6 = ["tableFooter"];
-const _c4$4 = ["tableWrapper"];
-const _c5$2 = ["poTableTbody"];
-const _c6$2 = ["poTableThead"];
-const _c7$1 = ["poTableTbodyVirtual"];
-const _c8$1 = ["columnManager"];
+const _c0$X = ["noColumnsHeader"];
+const _c1$p = ["noColumnsHeaderFixed"];
+const _c2$a = ["popup"];
+const _c3$5 = ["tableFooter"];
+const _c4$3 = ["tableWrapper"];
+const _c5$1 = ["poTableTbody"];
+const _c6$1 = ["poTableThead"];
+const _c7 = ["poTableTbodyVirtual"];
+const _c8 = ["columnManager"];
 const _c9 = ["columnManagerFixed"];
 const _c10 = ["columnActionLeft"];
 const _c11 = ["columnActionLeftFixed"];
@@ -17972,15 +18072,15 @@ PoTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableCom
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tableCellTemplate = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tableColumnTemplates = _t);
     } }, viewQuery: function PoTableComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$W, 5, ElementRef);
-        i0.ɵɵviewQuery(_c1$q, 5, ElementRef);
-        i0.ɵɵviewQuery(_c2$b, 5);
-        i0.ɵɵviewQuery(_c3$6, 5, ElementRef);
-        i0.ɵɵviewQuery(_c4$4, 5, ElementRef);
-        i0.ɵɵviewQuery(_c5$2, 5, ElementRef);
-        i0.ɵɵviewQuery(_c6$2, 5, ElementRef);
-        i0.ɵɵviewQuery(_c7$1, 5, ElementRef);
-        i0.ɵɵviewQuery(_c8$1, 5, ElementRef);
+        i0.ɵɵviewQuery(_c0$X, 5, ElementRef);
+        i0.ɵɵviewQuery(_c1$p, 5, ElementRef);
+        i0.ɵɵviewQuery(_c2$a, 5);
+        i0.ɵɵviewQuery(_c3$5, 5, ElementRef);
+        i0.ɵɵviewQuery(_c4$3, 5, ElementRef);
+        i0.ɵɵviewQuery(_c5$1, 5, ElementRef);
+        i0.ɵɵviewQuery(_c6$1, 5, ElementRef);
+        i0.ɵɵviewQuery(_c7, 5, ElementRef);
+        i0.ɵɵviewQuery(_c8, 5, ElementRef);
         i0.ɵɵviewQuery(_c9, 5, ElementRef);
         i0.ɵɵviewQuery(_c10, 5, ElementRef);
         i0.ɵɵviewQuery(_c11, 5, ElementRef);
@@ -18143,6 +18243,7 @@ PoTableModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [DecimalP
                     PoTableColumnLabelComponent,
                     PoTableColumnLinkComponent,
                     PoTableColumnManagerComponent,
+                    PoTableListManagerComponent,
                     PoTableDetailComponent,
                     PoTableIconComponent,
                     PoTableRowTemplateDirective,
@@ -18166,6 +18267,7 @@ PoTableModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [DecimalP
         PoTableColumnLabelComponent,
         PoTableColumnLinkComponent,
         PoTableColumnManagerComponent,
+        PoTableListManagerComponent,
         PoTableDetailComponent,
         PoTableIconComponent,
         PoTableRowTemplateDirective,
@@ -19254,11 +19356,11 @@ PoComboOptionTemplateDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ ty
             }]
     }], function () { return [{ type: i0.TemplateRef }]; }, null); })();
 
-const _c0$V = ["containerElement"];
-const _c1$p = ["contentElement"];
-const _c2$a = ["iconArrow"];
-const _c3$5 = ["inp"];
-const _c4$3 = ["poComboBody"];
+const _c0$W = ["containerElement"];
+const _c1$o = ["contentElement"];
+const _c2$9 = ["iconArrow"];
+const _c3$4 = ["inp"];
+const _c4$2 = ["poComboBody"];
 function PoComboComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 17);
     i0.ɵɵelement(1, "po-icon", 18);
@@ -19336,16 +19438,16 @@ function PoComboComponent_ng_template_18_li_3_ng_template_4_ng_container_0_Templ
     i0.ɵɵelementContainer(0);
 } }
 function PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_1_ng_template_0_Template(rf, ctx) { }
-const _c5$1 = function (a0, a1) { return { $implicit: a0, selected: a1 }; };
+const _c5 = function (a0, a1) { return { $implicit: a0, selected: a1 }; };
 function PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_1_ng_template_0_Template, 0, 0, "ng-template", 33);
 } if (rf & 2) {
     const option_r21 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r35 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r35.comboOptionTemplate == null ? null : ctx_r35.comboOptionTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c5$1, option_r21, ctx_r35.compareObjects(ctx_r35.selectedView, option_r21)));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r35.comboOptionTemplate == null ? null : ctx_r35.comboOptionTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c5, option_r21, ctx_r35.compareObjects(ctx_r35.selectedView, option_r21)));
 } }
 function PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_3_ng_template_1_Template(rf, ctx) { }
-const _c6$1 = function (a0) { return { $implicit: a0 }; };
+const _c6 = function (a0) { return { $implicit: a0 }; };
 function PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "a", 29);
     i0.ɵɵtemplate(1, PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_3_ng_template_1_Template, 0, 0, "ng-template", 33);
@@ -19354,7 +19456,7 @@ function PoComboComponent_ng_template_18_li_3_ng_template_4_ng_template_3_Templa
     const option_r21 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r37 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r37.comboOptionTemplate == null ? null : ctx_r37.comboOptionTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c6$1, option_r21));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r37.comboOptionTemplate == null ? null : ctx_r37.comboOptionTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c6, option_r21));
 } }
 function PoComboComponent_ng_template_18_li_3_ng_template_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, PoComboComponent_ng_template_18_li_3_ng_template_4_ng_container_0_Template, 1, 0, "ng-container", 11);
@@ -19643,7 +19745,7 @@ class PoComboComponent extends PoComboBaseComponent {
     }
     initInputObservable() {
         if (this.service) {
-            const keyupObservable = fromEvent(this.inputEl.nativeElement, 'keyup').pipe(filter((e) => this.isValidCharacterToSearch(e.keyCode)), map((e) => e.currentTarget.value), distinctUntilChanged(), tap(() => {
+            const keyupObservable = fromEvent(this.inputEl.nativeElement, 'keyup').pipe(filter$1((e) => this.isValidCharacterToSearch(e.keyCode)), map((e) => e.currentTarget.value), distinctUntilChanged(), tap(() => {
                 this.shouldMarkLetters = false;
             }), debounceTime(this.debounceTime));
             this.keyupSubscribe = keyupObservable.subscribe(value => {
@@ -19978,11 +20080,11 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.comboOptionTemplate = _t.first);
     } }, viewQuery: function PoComboComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$V, 5, ElementRef);
-        i0.ɵɵviewQuery(_c1$p, 5, ElementRef);
-        i0.ɵɵviewQuery(_c2$a, 7, ElementRef);
-        i0.ɵɵviewQuery(_c3$5, 7, ElementRef);
-        i0.ɵɵviewQuery(_c4$3, 5, ElementRef);
+        i0.ɵɵviewQuery(_c0$W, 5, ElementRef);
+        i0.ɵɵviewQuery(_c1$o, 5, ElementRef);
+        i0.ɵɵviewQuery(_c2$9, 7, ElementRef);
+        i0.ɵɵviewQuery(_c3$4, 7, ElementRef);
+        i0.ɵɵviewQuery(_c4$2, 5, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.containerElement = _t.first);
@@ -20003,7 +20105,7 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
                 useExisting: forwardRef(() => PoComboComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 22, vars: 24, consts: [[3, "p-label", "p-help", "p-optional"], [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", "placeholder", "required", "click", "keyup", "blur", "keyup.enter", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "click"], ["iconArrow", ""], [1, "po-combo-container", 3, "hidden"], ["containerElement", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], [4, "ngIf"], ["normalLoadingTemplate", ""], ["infiniteLoadingTemplate", ""], ["visibleOptionsTemplate", ""], ["noDataTemplate", ""], [1, "po-field-icon-container-left"], [1, "po-field-icon", 3, "p-icon"], [3, "p-element-ref", "p-change-event"], [1, "po-combo-container-loading"], [1, "po-combo-container-content"], ["contentElement", "", "poComboBody", ""], [3, "po-combo-item-selected", "click", 4, "ngFor", "ngForOf"], ["defaultOptionTemplate", ""], ["optionTemplate", ""], ["class", "po-combo-item-title", 4, "ngIf", "ngIfElse"], ["optionLink", ""], [1, "po-combo-item-title"], [1, "po-combo-item"], [2, "pointer-events", "none", 3, "innerHTML"], ["optionsGroupTemplate", ""], ["defaultOptionsTemplate", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "po-combo-container-no-data"], [1, "po-combo-no-data", "po-text-center"]], template: function PoComboComponent_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 22, vars: 25, consts: [[3, "p-label", "p-help", "p-optional"], [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", "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", ""], [4, "ngIf", "ngIfThen", "ngIfElse"], [4, "ngIf"], ["normalLoadingTemplate", ""], ["infiniteLoadingTemplate", ""], ["visibleOptionsTemplate", ""], ["noDataTemplate", ""], [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-loading"], [1, "po-combo-container-content"], ["contentElement", "", "poComboBody", ""], [3, "po-combo-item-selected", "click", 4, "ngFor", "ngForOf"], ["defaultOptionTemplate", ""], ["optionTemplate", ""], ["class", "po-combo-item-title", 4, "ngIf", "ngIfElse"], ["optionLink", ""], [1, "po-combo-item-title"], [1, "po-combo-item"], [2, "pointer-events", "none", 3, "innerHTML"], ["optionsGroupTemplate", ""], ["defaultOptionsTemplate", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "po-combo-container-no-data"], [1, "po-combo-no-data", "po-text-center"]], 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);
@@ -20033,12 +20135,12 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
         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)("placeholder", ctx.placeholder)("required", ctx.required);
-        i0.ɵɵattribute("name", ctx.name);
+        i0.ɵɵproperty("ngClass", ctx.clean && _r1.value ? "po-input-double-icon-right" : "po-input-icon-right")("disabled", ctx.disabled)("placeholder", ctx.disabled ? "" : ctx.placeholder)("required", ctx.required);
+        i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.label);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled);
         i0.ɵɵadvance(1);
-        i0.ɵɵclassMapInterpolate1("po-icon po-field-icon ", ctx.comboIcon, "");
+        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);
@@ -20062,7 +20164,7 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
                         useExisting: forwardRef(() => PoComboComponent),
                         multi: true
                     }
-                ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon\" [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      [placeholder]=\"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 *ngIf=\"clean && !disabled\" (p-change-event)=\"clear($event)\" [p-element-ref]=\"inputEl\"> </po-clean>\n      <span\n        #iconArrow\n        class=\"po-icon po-field-icon {{ comboIcon }}\"\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  <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n    <ng-container *ngIf=\"visibleOptions.length; then visibleOptionsTemplate; else noDataTemplate\"> </ng-container>\n    <div *ngIf=\"isServerSearching\">\n      <ng-container *ngIf=\"infiniteLoading; then infiniteLoadingTemplate; else normalLoadingTemplate\"></ng-container>\n    </div>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #normalLoadingTemplate>\n  <po-loading class=\"po-combo-container-loading\"> </po-loading>\n</ng-template>\n\n<ng-template #infiniteLoadingTemplate>\n  <po-loading-overlay class=\"po-combo-container-loading\"> </po-loading-overlay>\n</ng-template>\n\n<ng-template #visibleOptionsTemplate>\n  <ul #contentElement #poComboBody class=\"po-combo-container-content\">\n    <li\n      *ngFor=\"let option of visibleOptions\"\n      [class.po-combo-item-selected]=\"compareObjects(selectedView, option)\"\n      (click)=\"option?.options ? undefined : onOptionClick(option, $event)\"\n    >\n      <ng-container *ngIf=\"comboOptionTemplate; then optionTemplate; else defaultOptionTemplate\"></ng-container>\n\n      <ng-template #defaultOptionTemplate>\n        <label *ngIf=\"option?.options; else optionLink\" class=\"po-combo-item-title\">{{\n          option[this.dynamicLabel]\n        }}</label>\n        <ng-template #optionLink>\n          <a class=\"po-combo-item\">\n            <span style=\"pointer-events: none\" [innerHTML]=\"getLabelFormatted(option?.[this.dynamicLabel])\"></span>\n          </a>\n        </ng-template>\n      </ng-template>\n\n      <ng-template #optionTemplate>\n        <ng-container *ngIf=\"isOptionGroupList; then optionsGroupTemplate; else defaultOptionsTemplate\"></ng-container>\n\n        <ng-template #optionsGroupTemplate>\n          <ng-template\n            [ngTemplateOutlet]=\"comboOptionTemplate?.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: option, selected: compareObjects(selectedView, option) }\"\n          >\n          </ng-template>\n        </ng-template>\n\n        <ng-template #defaultOptionsTemplate>\n          <a class=\"po-combo-item\">\n            <ng-template\n              [ngTemplateOutlet]=\"comboOptionTemplate?.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: option }\"\n            >\n            </ng-template>\n          </a>\n        </ng-template>\n      </ng-template>\n    </li>\n  </ul>\n</ng-template>\n\n<ng-template #noDataTemplate>\n  <div class=\"po-combo-container-no-data\">\n    <div class=\"po-combo-no-data po-text-center\">\n      <span *ngIf=\"!isServerSearching\">\n        {{ literals.noData }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n" }]
+                ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\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 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      [attr.aria-label]=\"label\"\n      [disabled]=\"disabled\"\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  <div #containerElement class=\"po-combo-container\" [hidden]=\"!comboOpen && !isServerSearching\">\n    <ng-container *ngIf=\"visibleOptions.length; then visibleOptionsTemplate; else noDataTemplate\"> </ng-container>\n    <div *ngIf=\"isServerSearching\">\n      <ng-container *ngIf=\"infiniteLoading; then infiniteLoadingTemplate; else normalLoadingTemplate\"></ng-container>\n    </div>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n\n<ng-template #normalLoadingTemplate>\n  <po-loading class=\"po-combo-container-loading\"> </po-loading>\n</ng-template>\n\n<ng-template #infiniteLoadingTemplate>\n  <po-loading-overlay class=\"po-combo-container-loading\"> </po-loading-overlay>\n</ng-template>\n\n<ng-template #visibleOptionsTemplate>\n  <ul #contentElement #poComboBody class=\"po-combo-container-content\">\n    <li\n      *ngFor=\"let option of visibleOptions\"\n      [class.po-combo-item-selected]=\"compareObjects(selectedView, option)\"\n      (click)=\"option?.options ? undefined : onOptionClick(option, $event)\"\n    >\n      <ng-container *ngIf=\"comboOptionTemplate; then optionTemplate; else defaultOptionTemplate\"></ng-container>\n\n      <ng-template #defaultOptionTemplate>\n        <label *ngIf=\"option?.options; else optionLink\" class=\"po-combo-item-title\">{{\n          option[this.dynamicLabel]\n        }}</label>\n        <ng-template #optionLink>\n          <a class=\"po-combo-item\">\n            <span style=\"pointer-events: none\" [innerHTML]=\"getLabelFormatted(option?.[this.dynamicLabel])\"></span>\n          </a>\n        </ng-template>\n      </ng-template>\n\n      <ng-template #optionTemplate>\n        <ng-container *ngIf=\"isOptionGroupList; then optionsGroupTemplate; else defaultOptionsTemplate\"></ng-container>\n\n        <ng-template #optionsGroupTemplate>\n          <ng-template\n            [ngTemplateOutlet]=\"comboOptionTemplate?.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: option, selected: compareObjects(selectedView, option) }\"\n          >\n          </ng-template>\n        </ng-template>\n\n        <ng-template #defaultOptionsTemplate>\n          <a class=\"po-combo-item\">\n            <ng-template\n              [ngTemplateOutlet]=\"comboOptionTemplate?.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: option }\"\n            >\n            </ng-template>\n          </a>\n        </ng-template>\n      </ng-template>\n    </li>\n  </ul>\n</ng-template>\n\n<ng-template #noDataTemplate>\n  <div class=\"po-combo-container-no-data\">\n    <div class=\"po-combo-no-data po-text-center\">\n      <span *ngIf=\"!isServerSearching\">\n        {{ literals.noData }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: PoComboFilterService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: PoControlPositionService }, { type: i3.DomSanitizer }, { type: PoLanguageService }]; }, { comboOptionTemplate: [{
             type: ContentChild,
             args: [PoComboOptionTemplateDirective, { static: true }]
@@ -20629,11 +20731,11 @@ __decorate([
             args: ['p-locale']
         }] }); })();
 
-const _c0$U = ["dateRangeField"];
-const _c1$o = ["endDateInput"];
-const _c2$9 = ["startDateInput"];
-const _c3$4 = ["iconCalendar"];
-const _c4$2 = ["calendarPicker"];
+const _c0$V = ["dateRangeField"];
+const _c1$n = ["endDateInput"];
+const _c2$8 = ["startDateInput"];
+const _c3$3 = ["iconCalendar"];
+const _c4$1 = ["calendarPicker"];
 function PoDatepickerRangeComponent_po_clean_12_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-clean", 15);
@@ -21063,11 +21165,11 @@ class PoDatepickerRangeComponent extends PoDatepickerRangeBaseComponent {
 }
 PoDatepickerRangeComponent.ɵfac = function PoDatepickerRangeComponent_Factory(t) { return new (t || PoDatepickerRangeComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoControlPositionService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoDateService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(PoLanguageService)); };
 PoDatepickerRangeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDatepickerRangeComponent, selectors: [["po-datepicker-range"]], viewQuery: function PoDatepickerRangeComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$U, 7, ElementRef);
-        i0.ɵɵviewQuery(_c1$o, 7, ElementRef);
-        i0.ɵɵviewQuery(_c2$9, 7, ElementRef);
-        i0.ɵɵviewQuery(_c3$4, 7, ElementRef);
-        i0.ɵɵviewQuery(_c4$2, 5, ElementRef);
+        i0.ɵɵviewQuery(_c0$V, 7, ElementRef);
+        i0.ɵɵviewQuery(_c1$n, 7, ElementRef);
+        i0.ɵɵviewQuery(_c2$8, 7, ElementRef);
+        i0.ɵɵviewQuery(_c3$3, 7, ElementRef);
+        i0.ɵɵviewQuery(_c4$1, 5, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dateRangeField = _t.first);
@@ -21075,7 +21177,7 @@ PoDatepickerRangeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.startDateInput = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.iconCalendar = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.calendarPicker = _t.first);
-    } }, features: [i0.ɵɵProvidersFeature(providers$5), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 20, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-datepicker-range-field", "po-input"], ["dateRangeField", ""], [1, "po-datepicker-range-start-date"], ["maxlength", "10", "type", "text", 1, "po-datepicker-range-input", 3, "autocomplete", "disabled", "name", "readonly", "blur", "focus", "keydown", "keyup", "click"], ["startDateInput", ""], [1, "po-datepicker-range-separator"], [1, "po-datepicker-range-end-date"], ["endDateInput", ""], [1, "po-datepicker-range-icon"], [3, "p-change-event", 4, "ngIf"], [1, "po-icon", "po-field-icon", "po-icon-calendar", 3, "click"], ["iconCalendar", ""], [3, "p-error-pattern"], [4, "ngIf"], [3, "p-change-event"], [1, "po-calendar-range-picker"], ["calendarPicker", ""], ["p-mode", "range", 3, "ngModel", "p-max-date", "p-min-date", "p-locale", "ngModelChange"]], template: function PoDatepickerRangeComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵProvidersFeature(providers$5), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 27, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-datepicker-range-field", "po-input"], ["dateRangeField", ""], [1, "po-datepicker-range-start-date"], ["maxlength", "10", "type", "text", 1, "po-datepicker-range-input", 3, "autocomplete", "disabled", "name", "readonly", "blur", "focus", "keydown", "keyup", "click"], ["startDateInput", ""], [1, "po-datepicker-range-separator"], [1, "po-datepicker-range-end-date"], ["endDateInput", ""], [1, "po-datepicker-range-icon"], ["class", "po-icon-input", 3, "p-change-event", 4, "ngIf"], [3, "click"], ["iconCalendar", ""], [3, "p-error-pattern"], [4, "ngIf"], [1, "po-icon-input", 3, "p-change-event"], [1, "po-calendar-range-picker"], ["calendarPicker", ""], ["p-mode", "range", 3, "ngModel", "p-max-date", "p-min-date", "p-locale", "ngModelChange"]], template: function PoDatepickerRangeComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1, 2)(3, "div", 3)(4, "input", 4, 5);
         i0.ɵɵlistener("blur", function PoDatepickerRangeComponent_Template_input_blur_4_listener($event) { return ctx.onBlur($event); })("focus", function PoDatepickerRangeComponent_Template_input_focus_4_listener($event) { return ctx.onFocus($event); })("keydown", function PoDatepickerRangeComponent_Template_input_keydown_4_listener($event) { return ctx.onKeydown($event); })("keyup", function PoDatepickerRangeComponent_Template_input_keyup_4_listener($event) { return ctx.onKeyup($event); })("click", function PoDatepickerRangeComponent_Template_input_click_4_listener($event) { return ctx.eventOnClick($event); });
         i0.ɵɵelementEnd()();
@@ -21095,16 +21197,20 @@ PoDatepickerRangeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵelementEnd();
         i0.ɵɵtemplate(17, PoDatepickerRangeComponent_ng_container_17_Template, 4, 4, "ng-container", 14);
     } if (rf & 2) {
+        i0.ɵɵclassProp("po-date-picker-container-disabled", ctx.disabled);
         i0.ɵɵproperty("p-help", ctx.help)("p-label", ctx.label)("p-optional", !ctx.required && ctx.optional);
         i0.ɵɵadvance(1);
         i0.ɵɵclassProp("po-datepicker-range-field-disabled", ctx.disabled);
+        i0.ɵɵattribute("disabled", ctx.disabled);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("name", ctx.startDateInputName)("readonly", ctx.readonly);
+        i0.ɵɵattribute("aria-label", ctx.label);
         i0.ɵɵadvance(5);
         i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("name", ctx.endDateInputName)("readonly", ctx.readonly);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx.enableCleaner);
         i0.ɵɵadvance(2);
+        i0.ɵɵclassMapInterpolate1("po-icon po-field-icon po-icon-calendar ", ctx.disabled ? "po-icon-input-disabled" : "po-icon-input", "");
         i0.ɵɵclassProp("po-clickable", !ctx.disabled && !ctx.readonly)("po-field-icon-disabled", ctx.disabled || ctx.readonly);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("p-error-pattern", ctx.getErrorMessage);
@@ -21113,7 +21219,7 @@ PoDatepickerRangeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i1.NgIf, i2$1.NgControlStatus, i2$1.NgModel, PoCleanComponent, PoCalendarComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent], encapsulation: 2, changeDetection: 0 });
 (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 [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div #dateRangeField class=\"po-datepicker-range-field po-input\" [class.po-datepicker-range-field-disabled]=\"disabled\">\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        [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 *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\"\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 [p-error-pattern]=\"getErrorMessage\"></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" }]
+        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-help]=\"help\"\n  [p-label]=\"label\"\n  [p-optional]=\"!required && optional\"\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 [p-error-pattern]=\"getErrorMessage\"></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: PoDateService }, { type: i0.ElementRef }, { type: PoLanguageService }]; }, { dateRangeField: [{
             type: ViewChild,
             args: ['dateRangeField', { read: ElementRef, static: true }]
@@ -21521,7 +21627,7 @@ __decorate([
             args: ['p-mask-format-model']
         }] }); })();
 
-const _c0$T = ["inp"];
+const _c0$U = ["inp"];
 function PoDecimalComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
     i0.ɵɵelement(1, "po-icon", 9);
@@ -22112,7 +22218,7 @@ class PoDecimalComponent extends PoInputBaseComponent {
 }
 PoDecimalComponent.ɵfac = function PoDecimalComponent_Factory(t) { return new (t || PoDecimalComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 PoDecimalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDecimalComponent, selectors: [["po-decimal"]], viewQuery: function PoDecimalComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$T, 7, ElementRef);
+        i0.ɵɵviewQuery(_c0$U, 7, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
@@ -22127,7 +22233,7 @@ PoDecimalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDecima
                 useExisting: forwardRef(() => PoDecimalComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 18, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["inputmode", "decimal", "type", "text", 1, "po-input", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "blur", "focus", "input", "keypress"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "p-error-pattern"], [1, "po-field-icon-container-left"], [1, "po-field-icon", 3, "p-icon"], [3, "p-element-ref", "p-change-event"]], template: function PoDecimalComponent_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 19, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["inputmode", "decimal", "type", "text", 1, "po-input", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "blur", "focus", "input", "keypress"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "p-error-pattern"], [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 PoDecimalComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1);
         i0.ɵɵtemplate(2, PoDecimalComponent_div_2_Template, 2, 3, "div", 2);
         i0.ɵɵelementStart(3, "input", 3, 4);
@@ -22144,8 +22250,8 @@ PoDecimalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDecima
         i0.ɵɵproperty("ngIf", ctx.icon);
         i0.ɵɵadvance(1);
         i0.ɵɵclassProp("po-input-icon-left", ctx.icon)("po-input-icon-right", ctx.clean);
-        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required);
-        i0.ɵɵattribute("max", ctx.max)("min", ctx.min)("name", ctx.name);
+        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.disabled ? "" : ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required);
+        i0.ɵɵattribute("max", ctx.max)("min", ctx.min)("name", ctx.name)("aria-label", ctx.label);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled && !ctx.readonly);
         i0.ɵɵadvance(1);
@@ -22164,7 +22270,7 @@ PoDecimalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDecima
                         useExisting: forwardRef(() => PoDecimalComponent),
                         multi: true
                     }
-                ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon\" [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      [placeholder]=\"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 *ngIf=\"clean && !disabled && !readonly\" [p-element-ref]=\"inputEl\" (p-change-event)=\"clear($event)\">\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"getErrorPatternMessage()\"> </po-field-container-bottom>\n</po-field-container>\n" }]
+                ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\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      [attr.aria-label]=\"label\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\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-error-pattern]=\"getErrorPatternMessage()\"> </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 }]
@@ -22185,7 +22291,7 @@ PoDecimalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDecima
             args: ['p-max']
         }] }); })();
 
-const _c0$S = ["inp"];
+const _c0$T = ["inp"];
 /* eslint-disable @angular-eslint/directive-class-suffix */
 class PoInputGeneric extends PoInputBaseComponent {
     constructor(el, cd) {
@@ -22359,7 +22465,7 @@ class PoInputGeneric extends PoInputBaseComponent {
 }
 PoInputGeneric.ɵfac = function PoInputGeneric_Factory(t) { return new (t || PoInputGeneric)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 PoInputGeneric.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoInputGeneric, viewQuery: function PoInputGeneric_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$S, 7, ElementRef);
+        i0.ɵɵviewQuery(_c0$T, 7, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
@@ -22386,6 +22492,7 @@ function PoEmailComponent_div_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
+    i0.ɵɵclassMapInterpolate1("po-field-icon ", ctx_r0.disabled ? "po-icon-input-disabled" : "po-icon-input", "");
     i0.ɵɵclassProp("po-field-icon-disabled", ctx_r0.disabled);
     i0.ɵɵproperty("p-icon", ctx_r0.icon);
 } }
@@ -22396,6 +22503,7 @@ function PoEmailComponent_po_clean_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r2.disabled ? "po-icon-input-disabled" : "po-icon-input");
     i0.ɵɵproperty("p-element-ref", ctx_r2.inputEl);
 } }
 /* istanbul ignore next */
@@ -22489,14 +22597,14 @@ class PoEmailComponent extends PoInputGeneric {
     }
 }
 PoEmailComponent.ɵfac = function PoEmailComponent_Factory(t) { return new (t || PoEmailComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-PoEmailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoEmailComponent, selectors: [["po-email"]], features: [i0.ɵɵProvidersFeature(providers$4), i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 17, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], [1, "po-input", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "type", "blur", "click", "focus", "input"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "p-error-pattern"], [1, "po-field-icon-container-left"], [1, "po-field-icon", 3, "p-icon"], [3, "p-element-ref", "p-change-event"]], template: function PoEmailComponent_Template(rf, ctx) { if (rf & 1) {
+PoEmailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoEmailComponent, selectors: [["po-email"]], features: [i0.ɵɵProvidersFeature(providers$4), i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 18, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], [1, "po-input", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "type", "blur", "click", "focus", "input"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "class", "p-element-ref", "p-change-event", 4, "ngIf"], [3, "p-error-pattern"], [1, "po-field-icon-container-left"], [3, "p-icon"], [3, "p-element-ref", "p-change-event"]], template: function PoEmailComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1);
-        i0.ɵɵtemplate(2, PoEmailComponent_div_2_Template, 2, 3, "div", 2);
+        i0.ɵɵtemplate(2, PoEmailComponent_div_2_Template, 2, 6, "div", 2);
         i0.ɵɵelementStart(3, "input", 3, 4);
         i0.ɵɵlistener("blur", function PoEmailComponent_Template_input_blur_3_listener($event) { return ctx.eventOnBlur($event); })("click", function PoEmailComponent_Template_input_click_3_listener($event) { return ctx.eventOnClick($event); })("focus", function PoEmailComponent_Template_input_focus_3_listener($event) { return ctx.eventOnFocus($event); })("input", function PoEmailComponent_Template_input_input_3_listener($event) { return ctx.eventOnInput($event); });
         i0.ɵɵelementEnd();
         i0.ɵɵelementStart(5, "div", 5);
-        i0.ɵɵtemplate(6, PoEmailComponent_po_clean_6_Template, 1, 1, "po-clean", 6);
+        i0.ɵɵtemplate(6, PoEmailComponent_po_clean_6_Template, 1, 4, "po-clean", 6);
         i0.ɵɵelementEnd()();
         i0.ɵɵelement(7, "po-field-container-bottom", 7);
         i0.ɵɵelementEnd();
@@ -22506,8 +22614,8 @@ PoEmailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoEmailCom
         i0.ɵɵproperty("ngIf", ctx.icon);
         i0.ɵɵadvance(1);
         i0.ɵɵclassProp("po-input-icon-left", ctx.icon)("po-input-icon-right", ctx.clean);
-        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("type", ctx.type);
-        i0.ɵɵattribute("name", ctx.name);
+        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.disabled ? "" : ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("type", ctx.type);
+        i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.label);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled && !ctx.readonly);
         i0.ɵɵadvance(1);
@@ -22515,12 +22623,12 @@ PoEmailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoEmailCom
     } }, dependencies: [i1.NgIf, PoCleanComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoEmailComponent, [{
         type: Component,
-        args: [{ selector: 'po-email', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$4, template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></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      [placeholder]=\"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 *ngIf=\"clean && !disabled && !readonly\" [p-element-ref]=\"inputEl\" (p-change-event)=\"clear($event)\">\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"getErrorPattern()\"> </po-field-container-bottom>\n</po-field-container>\n" }]
+        args: [{ selector: 'po-email', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$4, template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\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      [attr.aria-label]=\"label\"\n      [disabled]=\"disabled\"\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 [p-error-pattern]=\"getErrorPattern()\"> </po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, null); })();
 
 function PoLoginComponent_po_clean_7_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-clean", 9);
+    i0.ɵɵelementStart(0, "po-clean", 8);
     i0.ɵɵlistener("p-change-event", function PoLoginComponent_po_clean_7_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clear($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -22577,26 +22685,27 @@ class PoLoginComponent extends PoInputGeneric {
     }
 }
 PoLoginComponent.ɵfac = function PoLoginComponent_Factory(t) { return new (t || PoLoginComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-PoLoginComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLoginComponent, selectors: [["po-login"]], features: [i0.ɵɵProvidersFeature(providers$3), i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 16, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-field-container-content"], [1, "po-field-icon-container-left"], [1, "po-icon", "po-field-icon", "po-icon-user"], [1, "po-input", "po-input-icon-left", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "type", "blur", "click", "focus", "input"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "p-error-pattern"], [3, "p-element-ref", "p-change-event"]], template: function PoLoginComponent_Template(rf, ctx) { if (rf & 1) {
+PoLoginComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLoginComponent, selectors: [["po-login"]], features: [i0.ɵɵProvidersFeature(providers$3), i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 20, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-field-container-content"], [1, "po-field-icon-container-left"], [1, "po-input", "po-input-icon-left", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "type", "blur", "click", "focus", "input"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "p-error-pattern"], [1, "po-icon-input", 3, "p-element-ref", "p-change-event"]], template: function PoLoginComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "div", 2);
-        i0.ɵɵelement(3, "span", 3);
+        i0.ɵɵelement(3, "span");
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "input", 4, 5);
+        i0.ɵɵelementStart(4, "input", 3, 4);
         i0.ɵɵlistener("blur", function PoLoginComponent_Template_input_blur_4_listener($event) { return ctx.eventOnBlur($event); })("click", function PoLoginComponent_Template_input_click_4_listener($event) { return ctx.eventOnClick($event); })("focus", function PoLoginComponent_Template_input_focus_4_listener($event) { return ctx.eventOnFocus($event); })("input", function PoLoginComponent_Template_input_input_4_listener($event) { return ctx.eventOnInput($event); });
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(6, "div", 6);
-        i0.ɵɵtemplate(7, PoLoginComponent_po_clean_7_Template, 1, 1, "po-clean", 7);
+        i0.ɵɵelementStart(6, "div", 5);
+        i0.ɵɵtemplate(7, PoLoginComponent_po_clean_7_Template, 1, 1, "po-clean", 6);
         i0.ɵɵelementEnd()();
-        i0.ɵɵelement(8, "po-field-container-bottom", 8);
+        i0.ɵɵelement(8, "po-field-container-bottom", 7);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵproperty("p-label", ctx.label)("p-help", ctx.help)("p-optional", !ctx.required && ctx.optional);
         i0.ɵɵadvance(3);
+        i0.ɵɵclassMapInterpolate1("po-icon po-field-icon po-icon-user ", ctx.disabled ? "po-icon-input-disabled" : "po-icon-input", "");
         i0.ɵɵclassProp("po-field-icon-disabled", ctx.disabled);
         i0.ɵɵadvance(1);
         i0.ɵɵclassProp("po-input-icon-right", ctx.clean);
-        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("type", ctx.type);
-        i0.ɵɵattribute("name", ctx.name);
+        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.disabled ? "" : ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("type", ctx.type);
+        i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.label);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled && !ctx.readonly);
         i0.ɵɵadvance(1);
@@ -22604,7 +22713,7 @@ PoLoginComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLoginCom
     } }, dependencies: [i1.NgIf, PoCleanComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLoginComponent, [{
         type: Component,
-        args: [{ selector: 'po-login', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$3, template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div class=\"po-field-icon-container-left\">\n      <span class=\"po-icon po-field-icon po-icon-user\" [class.po-field-icon-disabled]=\"disabled\"></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      [placeholder]=\"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 *ngIf=\"clean && !disabled && !readonly\" [p-element-ref]=\"inputEl\" (p-change-event)=\"clear($event)\">\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"getErrorPattern()\"> </po-field-container-bottom>\n</po-field-container>\n" }]
+        args: [{ selector: 'po-login', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$3, template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\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      [attr.aria-label]=\"label\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\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-error-pattern]=\"getErrorPattern()\"> </po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, null); })();
 
 /**
@@ -23818,8 +23927,8 @@ PoDynamicFormValidationService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({
         type: Injectable
     }], function () { return [{ type: i1$1.HttpClient }]; }, null); })();
 
-const _c0$R = ["fieldsComponent"];
-const _c1$n = ["dynamicForm"];
+const _c0$S = ["fieldsComponent"];
+const _c1$m = ["dynamicForm"];
 function PoDynamicFormComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
@@ -23987,8 +24096,8 @@ class PoDynamicFormComponent extends PoDynamicFormBaseComponent {
 }
 PoDynamicFormComponent.ɵfac = function PoDynamicFormComponent_Factory(t) { return new (t || PoDynamicFormComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoDynamicFormLoadService), i0.ɵɵdirectiveInject(PoDynamicFormValidationService)); };
 PoDynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDynamicFormComponent, selectors: [["po-dynamic-form"]], viewQuery: function PoDynamicFormComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$R, 5);
-        i0.ɵɵviewQuery(_c1$n, 5);
+        i0.ɵɵviewQuery(_c0$S, 5);
+        i0.ɵɵviewQuery(_c1$m, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fieldsComponent = _t.first);
@@ -24013,8 +24122,8 @@ PoDynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDy
             args: ['dynamicForm']
         }] }); })();
 
-const _c0$Q = ["inpsearch"];
-const _c1$m = ["container"];
+const _c0$R = ["inpsearch"];
+const _c1$l = ["container"];
 function PoLookupModalComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 16)(1, "span", 17);
@@ -24089,7 +24198,7 @@ class PoLookupModalComponent extends PoLookupModalBaseComponent {
         this.selecteds = [];
     }
     initializeEventInput() {
-        this.keyUpObservable = fromEvent(this.inputSearchEl.nativeElement, 'keyup').pipe(filter((e) => this.validateEnterPressed(e)), debounceTime(400));
+        this.keyUpObservable = fromEvent(this.inputSearchEl.nativeElement, 'keyup').pipe(filter$1((e) => this.validateEnterPressed(e)), debounceTime(400));
         this.keyUpObservable.subscribe(() => {
             this.search();
         });
@@ -24153,14 +24262,14 @@ class PoLookupModalComponent extends PoLookupModalBaseComponent {
 PoLookupModalComponent.ɵfac = function PoLookupModalComponent_Factory(t) { return new (t || PoLookupModalComponent)(i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(PoLanguageService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 PoLookupModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLookupModalComponent, selectors: [["po-lookup-modal"]], viewQuery: function PoLookupModalComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(PoTableComponent, 7);
-        i0.ɵɵviewQuery(_c0$Q, 5);
-        i0.ɵɵviewQuery(_c1$m, 5, ViewContainerRef);
+        i0.ɵɵviewQuery(_c0$R, 5);
+        i0.ɵɵviewQuery(_c1$l, 5, ViewContainerRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poTable = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputSearchEl = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
-    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 24, consts: [["p-click-out", "false", "p-hide-close", "false", "p-size", "lg", 3, "p-primary-action", "p-secondary-action", "p-title"], [3, "hidden"], [1, "po-lookup-header", "po-pull-right", 3, "p-optional"], [1, "po-lookup-filter-content"], [1, "po-field-icon-container-right"], [1, "po-icon", "po-field-icon", "po-icon-search", 3, "click"], ["iconLookup", ""], ["name", "contentSearch", "type", "text", 1, "po-input", "po-input-icon-right", 3, "ngModel", "placeholder", "ngModelChange"], ["inpsearch", ""], ["class", "po-lookup-advanced-search", 4, "ngIf"], ["class", "po-md-12", 3, "p-disclaimers", "p-title", "p-change", 4, "ngIf"], [1, "po-row", "po-lookup-container-table"], [1, "po-md-12", 3, "p-selectable", "p-hide-detail", "p-single-select", "p-sort", "p-columns", "p-height", "p-items", "p-literals", "p-loading", "p-show-more-disabled", "p-infinite-scroll", "p-selected", "p-unselected", "p-all-selected", "p-all-unselected", "p-show-more", "p-sort-by", "p-change-visible-columns", "p-restore-column-manager"], ["poTable", ""], ["class", "po-md-12", 3, "p-disclaimers", "p-remove", "p-remove-all", 4, "ngIf"], ["container", ""], [1, "po-lookup-advanced-search"], ["tabindex", "0", "tabindex", "0", 1, "po-lookup-advanced-search-link", 3, "click", "keydown.enter"], [1, "po-md-12", 3, "p-disclaimers", "p-title", "p-change"], [1, "po-md-12", 3, "p-disclaimers", "p-remove", "p-remove-all"]], template: function PoLookupModalComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 24, consts: [["p-click-out", "false", "p-hide-close", "false", "p-size", "lg", 3, "p-primary-action", "p-secondary-action", "p-title"], [3, "hidden"], [1, "po-lookup-header", "po-pull-right", 3, "p-optional"], [1, "po-lookup-filter-content"], [1, "po-field-icon-container-right"], [1, "po-icon", "po-field-icon", "po-icon-search", "po-icon-input", 3, "click"], ["iconLookup", ""], ["name", "contentSearch", "type", "text", 1, "po-input", "po-input-icon-right", 3, "ngModel", "placeholder", "ngModelChange"], ["inpsearch", ""], ["class", "po-lookup-advanced-search", 4, "ngIf"], ["class", "po-md-12", 3, "p-disclaimers", "p-title", "p-change", 4, "ngIf"], [1, "po-row", "po-lookup-container-table"], [1, "po-md-12", 3, "p-selectable", "p-hide-detail", "p-single-select", "p-sort", "p-columns", "p-height", "p-items", "p-literals", "p-loading", "p-show-more-disabled", "p-infinite-scroll", "p-selected", "p-unselected", "p-all-selected", "p-all-unselected", "p-show-more", "p-sort-by", "p-change-visible-columns", "p-restore-column-manager"], ["poTable", ""], ["class", "po-md-12", 3, "p-disclaimers", "p-remove", "p-remove-all", 4, "ngIf"], ["container", ""], [1, "po-lookup-advanced-search"], ["tabindex", "0", "tabindex", "0", 1, "po-lookup-advanced-search-link", "po-icon-input", 3, "click", "keydown.enter"], [1, "po-md-12", 3, "p-disclaimers", "p-title", "p-change"], [1, "po-md-12", 3, "p-disclaimers", "p-remove", "p-remove-all"]], template: function PoLookupModalComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-modal", 0)(1, "div", 1)(2, "po-field-container", 2)(3, "div", 3)(4, "div", 4)(5, "span", 5, 6);
         i0.ɵɵlistener("click", function PoLookupModalComponent_Template_span_click_5_listener() { return ctx.search(); });
         i0.ɵɵelementEnd()();
@@ -24201,7 +24310,7 @@ PoLookupModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLo
     } }, dependencies: [i1.NgIf, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgModel, PoDisclaimerGroupComponent, PoFieldContainerComponent, PoModalComponent, PoTableComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLookupModalComponent, [{
         type: Component,
-        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\" (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\"\n          tabindex=\"0\"\n          (click)=\"onAdvancedFilter()\"\n          (keydown.enter)=\"onAdvancedFilter()\"\n          tabindex=\"0\"\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\" [style.height.px]=\"containerHeight\">\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-sort]=\"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-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" }]
+        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          tabindex=\"0\"\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\" [style.height.px]=\"containerHeight\">\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-sort]=\"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-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 }]; }, { poTable: [{
             type: ViewChild,
             args: [PoTableComponent, { static: true }]
@@ -24275,7 +24384,7 @@ PoLookupModalService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PoL
         type: Injectable
     }], function () { return [{ type: PoComponentInjectorService }]; }, null); })();
 
-const _c0$P = ["inp"];
+const _c0$Q = ["inp"];
 function PoLookupComponent_div_1_po_clean_4_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-clean", 10);
@@ -24299,7 +24408,8 @@ function PoLookupComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵreference(2);
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngClass", ctx_r0.clean && _r3.value ? "po-input-double-icon-right" : "po-input-icon-right")("autocomplete", ctx_r0.autocomplete)("disabled", ctx_r0.disabled)("placeholder", ctx_r0.placeholder)("required", ctx_r0.required);
+    i0.ɵɵproperty("ngClass", ctx_r0.clean && _r3.value ? "po-input-double-icon-right" : "po-input-icon-right")("autocomplete", ctx_r0.autocomplete)("disabled", ctx_r0.disabled)("placeholder", ctx_r0.disabled ? "" : ctx_r0.placeholder)("required", ctx_r0.required);
+    i0.ɵɵattribute("aria-label", ctx_r0.label);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r0.clean && !ctx_r0.disabled);
     i0.ɵɵadvance(1);
@@ -24670,13 +24780,13 @@ class PoLookupComponent extends PoLookupBaseComponent {
 }
 PoLookupComponent.ɵfac = function PoLookupComponent_Factory(t) { return new (t || PoLookupComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PoLookupFilterService), i0.ɵɵdirectiveInject(PoLookupModalService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Injector)); };
 PoLookupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLookupComponent, selectors: [["po-lookup"]], viewQuery: function PoLookupComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$P, 5, ElementRef);
+        i0.ɵɵviewQuery(_c0$Q, 5, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
-    } }, features: [i0.ɵɵProvidersFeature(providers$2), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 5, consts: [[3, "p-label", "p-help", "p-optional"], ["class", "po-field-container-content", 4, "ngIf", "ngIfElse"], ["disclaimersTemplate", ""], [1, "po-field-container-content"], ["type", "text", 1, "po-input", 3, "ngClass", "autocomplete", "disabled", "placeholder", "required", "blur"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-element-ref", "p-change-event", 4, "ngIf"], ["tabindex", "-1", 1, "po-icon", "po-field-icon", "po-icon-search", 3, "click", "focus"], ["iconLookup", ""], [3, "p-element-ref", "p-change-event"], [1, "po-input", "po-input-icon-right", "po-lookup-input", 3, "tabindex"], ["class", "po-lookup-input-placeholder", 4, "ngIf"], ["class", "po-lookup-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "po-clickable", "p-close-action", 4, "ngFor", "ngForOf"], [1, "po-lookup-input-placeholder"], [1, "po-lookup-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "p-close-action"]], template: function PoLookupComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵProvidersFeature(providers$2), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 5, consts: [[3, "p-label", "p-help", "p-optional"], ["class", "po-field-container-content", 4, "ngIf", "ngIfElse"], ["disclaimersTemplate", ""], [1, "po-field-container-content"], ["type", "text", 1, "po-input", 3, "ngClass", "autocomplete", "disabled", "placeholder", "required", "blur"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-element-ref", "p-change-event", 4, "ngIf"], ["tabindex", "-1", 1, "po-icon", "po-field-icon", "po-icon-search", "po-icon-input", 3, "click", "focus"], ["iconLookup", ""], [1, "po-icon-input", 3, "p-element-ref", "p-change-event"], [1, "po-input", "po-input-icon-right", "po-lookup-input", "po-icon-input", 3, "tabindex"], ["class", "po-lookup-input-placeholder", 4, "ngIf"], ["class", "po-lookup-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "po-clickable", "p-close-action", 4, "ngFor", "ngForOf"], [1, "po-lookup-input-placeholder"], [1, "po-lookup-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "p-close-action"]], template: function PoLookupComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-field-container", 0);
-        i0.ɵɵtemplate(1, PoLookupComponent_div_1_Template, 7, 10, "div", 1);
+        i0.ɵɵtemplate(1, PoLookupComponent_div_1_Template, 7, 11, "div", 1);
         i0.ɵɵelement(2, "po-field-container-bottom");
         i0.ɵɵelementEnd();
         i0.ɵɵtemplate(3, PoLookupComponent_ng_template_3_Template, 8, 13, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
@@ -24688,15 +24798,15 @@ PoLookupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLookupC
     } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, PoCleanComponent, PoDisclaimerComponent, PoFieldContainerBottomComponent, PoFieldContainerComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLookupComponent, [{
         type: Component,
-        args: [{ selector: 'po-lookup', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$2, template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\" *ngIf=\"!disclaimers.length; else disclaimersTemplate\">\n    <input\n      #inp\n      class=\"po-input\"\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]=\"placeholder\"\n      [required]=\"required\"\n      (blur)=\"searchEvent()\"\n    />\n\n    <div class=\"po-field-icon-container-right\">\n      <po-clean *ngIf=\"clean && !disabled\" [p-element-ref]=\"inputEl\" (p-change-event)=\"cleanModel()\"> </po-clean>\n\n      <span\n        #iconLookup\n        class=\"po-icon po-field-icon po-icon-search\"\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></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\"\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\"\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" }]
+        args: [{ selector: 'po-lookup', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$2, template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\" *ngIf=\"!disclaimers.length; else disclaimersTemplate\">\n    <input\n      #inp\n      class=\"po-input\"\n      type=\"text\"\n      [attr.aria-label]=\"label\"\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></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 }]
         }] }); })();
 
-const _c0$O = ["container"];
-const _c1$l = ["ulElement"];
-const _c2$8 = ["searchElement"];
+const _c0$P = ["container"];
+const _c1$k = ["ulElement"];
+const _c2$7 = ["searchElement"];
 function PoMultiselectDropdownComponent_po_multiselect_search_2_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-multiselect-search", 8, 9);
@@ -24704,7 +24814,7 @@ function PoMultiselectDropdownComponent_po_multiselect_search_2_Template(rf, ctx
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("p-literals", ctx_r1.literals)("p-placeholder", ctx_r1.placeholderSearch);
+    i0.ɵɵproperty("p-literals", ctx_r1.literals)("p-field-value", ctx_r1.fieldValue)("p-placeholder", ctx_r1.placeholderSearch);
 } }
 function PoMultiselectDropdownComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10)(1, "span");
@@ -24737,7 +24847,7 @@ function PoMultiselectDropdownComponent_ng_container_7_po_multiselect_item_2_Tem
 } if (rf & 2) {
     const option_r13 = ctx.$implicit;
     const ctx_r10 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("p-label", option_r13.label)("p-selected", ctx_r10.isSelectedItem(option_r13));
+    i0.ɵɵproperty("p-label", option_r13[ctx_r10.fieldLabel])("p-selected", ctx_r10.isSelectedItem(option_r13));
 } }
 function PoMultiselectDropdownComponent_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -24799,7 +24909,7 @@ class PoMultiselectDropdownComponent {
         this.cd.markForCheck();
     }
     isSelectedItem(option) {
-        return this.selectedOptions.some(selectedItem => selectedItem.value === option.value);
+        return this.selectedOptions.some(selectedItem => selectedItem[this.fieldValue] === option[this.fieldValue]);
     }
     clickItem(check, option) {
         this.updateSelectedValues(check, option);
@@ -24808,7 +24918,7 @@ class PoMultiselectDropdownComponent {
         }
     }
     onClickSelectAll() {
-        const selectedValues = this.selectedOptions.map(({ value }) => value);
+        const selectedValues = this.selectedOptions.map(({ [this.fieldValue]: value }) => value);
         if (this.everyVisibleOptionsSelected(selectedValues)) {
             this.selectedOptions = [];
         }
@@ -24822,18 +24932,18 @@ class PoMultiselectDropdownComponent {
             this.selectedOptions.push(option);
         }
         else {
-            this.selectedOptions = this.selectedOptions.filter(selectedOption => selectedOption.value !== option.value);
+            this.selectedOptions = this.selectedOptions.filter(selectedOption => selectedOption[this.fieldValue] !== option[this.fieldValue]);
         }
         this.change.emit(this.selectedOptions);
     }
     everyVisibleOptionsSelected(selectedValues) {
-        return this.visibleOptions.every(visibleOption => selectedValues.includes(visibleOption.value));
+        return this.visibleOptions.every(visibleOption => selectedValues.includes(visibleOption[this.fieldValue]));
     }
     someVisibleOptionsSelected(selectedValues) {
-        return this.visibleOptions.some(visibleOption => selectedValues.includes(visibleOption.value));
+        return this.visibleOptions.some(visibleOption => selectedValues.includes(visibleOption[this.fieldValue]));
     }
     getStateSelectAll() {
-        const selectedValues = this.selectedOptions.map(({ value }) => value);
+        const selectedValues = this.selectedOptions.map(({ [this.fieldValue]: value }) => value);
         if (this.everyVisibleOptionsSelected(selectedValues)) {
             return true;
         }
@@ -24860,7 +24970,7 @@ class PoMultiselectDropdownComponent {
     uniqueSelectedOptions(selectedValues) {
         const newSelectedOptions = [...this.selectedOptions];
         for (const visibleOption of this.visibleOptions) {
-            if (!selectedValues.includes(visibleOption.value)) {
+            if (!selectedValues.includes(visibleOption[this.fieldValue])) {
                 newSelectedOptions.push(visibleOption);
             }
         }
@@ -24869,9 +24979,9 @@ class PoMultiselectDropdownComponent {
 }
 PoMultiselectDropdownComponent.ɵfac = function PoMultiselectDropdownComponent_Factory(t) { return new (t || PoMultiselectDropdownComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 PoMultiselectDropdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoMultiselectDropdownComponent, selectors: [["po-multiselect-dropdown"]], viewQuery: function PoMultiselectDropdownComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$O, 7, ElementRef);
-        i0.ɵɵviewQuery(_c1$l, 7, ElementRef);
-        i0.ɵɵviewQuery(_c2$8, 5);
+        i0.ɵɵviewQuery(_c0$P, 7, ElementRef);
+        i0.ɵɵviewQuery(_c1$k, 7, ElementRef);
+        i0.ɵɵviewQuery(_c2$7, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
@@ -24879,9 +24989,9 @@ PoMultiselectDropdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchElement = _t.first);
     } }, hostBindings: function PoMultiselectDropdownComponent_HostBindings(rf, ctx) { if (rf & 1) {
         i0.ɵɵlistener("keydown", function PoMultiselectDropdownComponent_keydown_HostBindingHandler($event) { return ctx.onKeydown($event); });
-    } }, inputs: { isServerSearching: ["p-searching", "isServerSearching"], hideSearch: ["p-hide-search", "hideSearch"], literals: ["p-literals", "literals"], placeholderSearch: ["p-placeholder-search", "placeholderSearch"], selectedOptions: ["p-selected-options", "selectedOptions"], options: ["p-options", "options"], visibleOptions: ["p-visible-options", "visibleOptions"], hideSelectAll: ["p-hide-select-all", "hideSelectAll"] }, outputs: { changeSearch: "p-change-search", change: "p-change", closeDropdown: "p-close-dropdown" }, decls: 8, vars: 6, consts: [[1, "po-multiselect-container", 3, "hidden"], ["container", ""], [3, "p-literals", "p-placeholder", "p-change", 4, "ngIf"], [1, "po-multiselect-items-container", 3, "scrollTop"], ["ulElement", ""], ["class", "po-multiselect-container-no-data po-text-center", 4, "ngIf"], ["class", "po-multiselect-container-loading po-text-center", 4, "ngIf"], [4, "ngIf"], [3, "p-literals", "p-placeholder", "p-change"], ["searchElement", ""], [1, "po-multiselect-container-no-data", "po-text-center"], [1, "po-multiselect-container-loading", "po-text-center"], [3, "p-label", "p-selected", "p-change", 4, "ngIf"], [3, "p-label", "p-selected", "p-change", 4, "ngFor", "ngForOf"], [3, "p-label", "p-selected", "p-change"]], template: function PoMultiselectDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { isServerSearching: ["p-searching", "isServerSearching"], hideSearch: ["p-hide-search", "hideSearch"], literals: ["p-literals", "literals"], placeholderSearch: ["p-placeholder-search", "placeholderSearch"], selectedOptions: ["p-selected-options", "selectedOptions"], options: ["p-options", "options"], visibleOptions: ["p-visible-options", "visibleOptions"], hideSelectAll: ["p-hide-select-all", "hideSelectAll"], fieldValue: ["p-field-value", "fieldValue"], fieldLabel: ["p-field-label", "fieldLabel"] }, outputs: { changeSearch: "p-change-search", change: "p-change", closeDropdown: "p-close-dropdown" }, decls: 8, vars: 6, consts: [[1, "po-multiselect-container", 3, "hidden"], ["container", ""], [3, "p-literals", "p-field-value", "p-placeholder", "p-change", 4, "ngIf"], [1, "po-multiselect-items-container", 3, "scrollTop"], ["ulElement", ""], ["class", "po-multiselect-container-no-data po-text-center", 4, "ngIf"], ["class", "po-multiselect-container-loading po-text-center", 4, "ngIf"], [4, "ngIf"], [3, "p-literals", "p-field-value", "p-placeholder", "p-change"], ["searchElement", ""], [1, "po-multiselect-container-no-data", "po-text-center"], [1, "po-multiselect-container-loading", "po-text-center"], [3, "p-label", "p-selected", "p-change", 4, "ngIf"], [3, "p-label", "p-selected", "p-change", 4, "ngFor", "ngForOf"], [3, "p-label", "p-selected", "p-change"]], template: function PoMultiselectDropdownComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0, 1);
-        i0.ɵɵtemplate(2, PoMultiselectDropdownComponent_po_multiselect_search_2_Template, 2, 2, "po-multiselect-search", 2);
+        i0.ɵɵtemplate(2, PoMultiselectDropdownComponent_po_multiselect_search_2_Template, 2, 3, "po-multiselect-search", 2);
         i0.ɵɵelementStart(3, "ul", 3, 4);
         i0.ɵɵtemplate(5, PoMultiselectDropdownComponent_div_5_Template, 3, 1, "div", 5);
         i0.ɵɵtemplate(6, PoMultiselectDropdownComponent_div_6_Template, 2, 0, "div", 6);
@@ -24902,7 +25012,7 @@ PoMultiselectDropdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
     } }, encapsulation: 2, changeDetection: 0 });
 (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\">\n  <po-multiselect-search\n    #searchElement\n    *ngIf=\"!hideSearch\"\n    [p-literals]=\"literals\"\n    [p-placeholder]=\"placeholderSearch\"\n    (p-change)=\"callChangeSearch($event)\"\n  >\n  </po-multiselect-search>\n\n  <ul class=\"po-multiselect-items-container\" [scrollTop]=\"scrollTop\" #ulElement>\n    <div *ngIf=\"!visibleOptions.length && !isServerSearching\" class=\"po-multiselect-container-no-data po-text-center\">\n      <span> {{ literals.noData }}</span>\n    </div>\n\n    <div *ngIf=\"isServerSearching\" class=\"po-multiselect-container-loading po-text-center\">\n      <po-loading></po-loading>\n    </div>\n\n    <ng-container *ngIf=\"!isServerSearching\">\n      <po-multiselect-item\n        *ngIf=\"!searchElement?.inputValue && visibleOptions.length && !hideSelectAll\"\n        [p-label]=\"literals?.selectAll\"\n        [p-selected]=\"getStateSelectAll()\"\n        (p-change)=\"onClickSelectAll()\"\n      >\n      </po-multiselect-item>\n\n      <po-multiselect-item\n        *ngFor=\"let option of visibleOptions\"\n        [p-label]=\"option.label\"\n        [p-selected]=\"isSelectedItem(option)\"\n        (p-change)=\"clickItem($event, option)\"\n      >\n      </po-multiselect-item>\n    </ng-container>\n  </ul>\n</div>\n" }]
+        args: [{ selector: 'po-multiselect-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #container class=\"po-multiselect-container\" [hidden]=\"!show\">\n  <po-multiselect-search\n    #searchElement\n    *ngIf=\"!hideSearch\"\n    [p-literals]=\"literals\"\n    [p-field-value]=\"fieldValue\"\n    [p-placeholder]=\"placeholderSearch\"\n    (p-change)=\"callChangeSearch($event)\"\n  >\n  </po-multiselect-search>\n\n  <ul class=\"po-multiselect-items-container\" [scrollTop]=\"scrollTop\" #ulElement>\n    <div *ngIf=\"!visibleOptions.length && !isServerSearching\" class=\"po-multiselect-container-no-data po-text-center\">\n      <span> {{ literals.noData }}</span>\n    </div>\n\n    <div *ngIf=\"isServerSearching\" class=\"po-multiselect-container-loading po-text-center\">\n      <po-loading></po-loading>\n    </div>\n\n    <ng-container *ngIf=\"!isServerSearching\">\n      <po-multiselect-item\n        *ngIf=\"!searchElement?.inputValue && visibleOptions.length && !hideSelectAll\"\n        [p-label]=\"literals?.selectAll\"\n        [p-selected]=\"getStateSelectAll()\"\n        (p-change)=\"onClickSelectAll()\"\n      >\n      </po-multiselect-item>\n\n      <po-multiselect-item\n        *ngFor=\"let option of visibleOptions\"\n        [p-label]=\"option[fieldLabel]\"\n        [p-selected]=\"isSelectedItem(option)\"\n        (p-change)=\"clickItem($event, option)\"\n      >\n      </po-multiselect-item>\n    </ng-container>\n  </ul>\n</div>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { isServerSearching: [{
             type: Input,
             args: ['p-searching']
@@ -24927,6 +25037,12 @@ PoMultiselectDropdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
         }], hideSelectAll: [{
             type: Input,
             args: ['p-hide-select-all']
+        }], fieldValue: [{
+            type: Input,
+            args: ['p-field-value']
+        }], fieldLabel: [{
+            type: Input,
+            args: ['p-field-label']
         }], changeSearch: [{
             type: Output,
             args: ['p-change-search']
@@ -25233,7 +25349,7 @@ class PoMultiselectBaseComponent {
     /**
      * @description
      *
-     * Nesta propriedade deve ser definida uma lista de objetos que implementam a interface PoMultiselectOption.
+     * Nesta propriedade deve ser definida uma lista de objetos que será exibida no multiselect.
      * Esta lista deve conter os valores e os labels que serão apresentados na tela.
      *
      * > Essa propriedade é imutável, ou seja, sempre que quiser atualizar a lista de opções disponíveis
@@ -25246,10 +25362,20 @@ class PoMultiselectBaseComponent {
      * // evite, pois não atualiza a referência do objeto podendo gerar atrasos na atualização do template
      * this.options.push({ value: 'x', label: 'Nova opção' });
      * ```
+     * > A lista pode ser definida utilizando um array com o valor representando `value` e `label` das seguintes formas:
+     *
+     * ```
+     * <po-multiselect name="multiselect" p-label="PO Multiselect" [p-options]="[{value: 1, label: 'One'}, {value: 2, label: 'two'}]"> </po-multiselect>
+     * ```
+     *
+     * ```
+     * <po-multiselect name="multiselect" p-label="PO Multiselect" [p-options]="[{name: 'Roger', age: 28}, {name: 'Anne', age: 35}]" p-field-label="name" p-field-value="age"> </po-multiselect>
+     * ```
+     *
+     * - Aconselha-se utilizar valores distintos no `label` e `value` dos itens.
      */
     set options(options) {
         this._options = options;
-        this.validAndSortOptions();
     }
     get options() {
         return this._options;
@@ -25311,7 +25437,7 @@ class PoMultiselectBaseComponent {
      * @default `label`
      */
     set fieldLabel(value) {
-        this._fieldLabel = value || PO_MULTISELECT_FIELD_LABEL_DEFAULT;
+        this._fieldLabel = value ? value : PO_MULTISELECT_FIELD_LABEL_DEFAULT;
         if (isTypeof(this.filterService, 'string') && this.service) {
             this.service.fieldLabel = this._fieldLabel;
         }
@@ -25332,7 +25458,7 @@ class PoMultiselectBaseComponent {
      * @default `value`
      */
     set fieldValue(value) {
-        this._fieldValue = value || PO_MULTISELECT_FIELD_VALUE_DEFAULT;
+        this._fieldValue = value ? value : PO_MULTISELECT_FIELD_VALUE_DEFAULT;
         if (isTypeof(this.filterService, 'string') && this.service) {
             this.service.fieldValue = this._fieldValue;
         }
@@ -25347,6 +25473,7 @@ class PoMultiselectBaseComponent {
         this.filterSubject
             .pipe(debounceTime(this.debounceTime), distinctUntilChanged(), tap(() => (this.isServerSearching = true)), switchMap((search) => this.applyFilter(search)), tap(() => (this.isServerSearching = false)))
             .subscribe();
+        this.validAndSortOptions();
         this.updateList(this.options);
     }
     setService(service) {
@@ -25361,18 +25488,18 @@ class PoMultiselectBaseComponent {
     }
     validAndSortOptions() {
         if (this.options && this.options.length) {
-            removeUndefinedAndNullOptions(this.options);
-            removeDuplicatedOptions(this.options);
+            removeUndefinedAndNullOptionsWithFieldValue(this.options, this.fieldValue);
+            removeDuplicatedOptionsWithFieldValue(this.options, this.fieldValue);
             this.setUndefinedLabels(this.options);
             if (this.sort) {
-                sortOptionsByProperty(this.options, 'label');
+                sortOptionsByProperty(this.options, this.fieldLabel);
             }
         }
     }
     setUndefinedLabels(options) {
         options.forEach(option => {
-            if (!option['label']) {
-                option.label = option.value;
+            if (!option[this.fieldLabel]) {
+                option[this.fieldLabel] = option[this.fieldValue];
             }
         });
     }
@@ -25394,17 +25521,17 @@ class PoMultiselectBaseComponent {
         this.lastLengthModel = selectedOptions ? selectedOptions.length : null;
     }
     getValuesFromOptions(selectedOptions) {
-        return selectedOptions && selectedOptions.length ? selectedOptions.map(option => option.value) : [];
+        return selectedOptions && selectedOptions.length ? selectedOptions.map(option => option[this.fieldValue]) : [];
     }
     getLabelByValue(value) {
-        const index = this.options.findIndex(option => option.value === value);
+        const index = this.options.findIndex(option => option[this.fieldValue] === value);
         return this.options[index].label;
     }
     searchByLabel(search, options, filterMode) {
         if (search && options && options.length) {
             const newOptions = [];
             options.forEach(option => {
-                if (option.label && this.compareMethod(search, option, filterMode)) {
+                if (option[this.fieldLabel] && this.compareMethod(search, option, filterMode)) {
                     newOptions.push(option);
                 }
             });
@@ -25425,13 +25552,13 @@ class PoMultiselectBaseComponent {
         }
     }
     startsWith(search, option) {
-        return option.label.toLowerCase().startsWith(search.toLowerCase());
+        return option[this.fieldLabel].toLowerCase().startsWith(search.toLowerCase());
     }
     contains(search, option) {
-        return option.label.toLowerCase().indexOf(search.toLowerCase()) > -1;
+        return option[this.fieldLabel].toLowerCase().indexOf(search.toLowerCase()) > -1;
     }
     endsWith(search, option) {
-        return option.label.toLowerCase().endsWith(search.toLowerCase());
+        return option[this.fieldLabel].toLowerCase().endsWith(search.toLowerCase());
     }
     validate(c) {
         if (requiredFailed(this.required, this.disabled, c.value)) {
@@ -25446,7 +25573,7 @@ class PoMultiselectBaseComponent {
     updateSelectedOptions(newOptions, options = this.options) {
         this.selectedOptions = [];
         if (newOptions.length === 0) {
-            this.lastLengthModel = 0;
+            this.lastLengthModel = undefined;
         }
         if (this.filterService) {
             this.selectedOptions = newOptions;
@@ -25454,7 +25581,7 @@ class PoMultiselectBaseComponent {
         else {
             newOptions.forEach(newOption => {
                 options.forEach(option => {
-                    if (option.value === newOption.value) {
+                    if (option[this.fieldValue] === newOption[this.fieldValue]) {
                         this.selectedOptions.push(option);
                     }
                 });
@@ -25472,7 +25599,7 @@ class PoMultiselectBaseComponent {
         }
         else {
             // Validar se todos os items existem entre os options, senão atualizar o model
-            this.updateSelectedOptions(values.map(value => ({ value })));
+            this.updateSelectedOptions(values.map(value => ({ [this.fieldValue]: value })));
             if (this.selectedOptions && this.selectedOptions.length < values.length) {
                 this.callOnChange(this.selectedOptions);
             }
@@ -25613,7 +25740,7 @@ class PoMultiselectFilterService {
     parseToMultiselectOption(item) {
         const label = item[this.fieldLabel];
         const value = item[this.fieldValue];
-        return { label, value };
+        return { [this.fieldLabel]: label, [this.fieldValue]: value };
     }
 }
 PoMultiselectFilterService.ɵfac = function PoMultiselectFilterService_Factory(t) { return new (t || PoMultiselectFilterService)(i0.ɵɵinject(i1$1.HttpClient)); };
@@ -25622,9 +25749,9 @@ PoMultiselectFilterService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ toke
         type: Injectable
     }], function () { return [{ type: i1$1.HttpClient }]; }, null); })();
 
-const _c0$N = ["dropdownElement"];
-const _c1$k = ["iconElement"];
-const _c2$7 = ["inputElement"];
+const _c0$O = ["dropdownElement"];
+const _c1$j = ["iconElement"];
+const _c2$6 = ["inputElement"];
 function PoMultiselectComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 11);
     i0.ɵɵtext(1);
@@ -25637,13 +25764,13 @@ function PoMultiselectComponent_span_4_Template(rf, ctx) { if (rf & 1) {
 function PoMultiselectComponent_po_disclaimer_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-disclaimer", 12);
-    i0.ɵɵlistener("click", function PoMultiselectComponent_po_disclaimer_5_Template_po_disclaimer_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const disclaimer_r5 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.openDropdown(disclaimer_r5.value === "")); })("p-close-action", function PoMultiselectComponent_po_disclaimer_5_Template_po_disclaimer_p_close_action_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const disclaimer_r5 = restoredCtx.$implicit; const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.closeDisclaimer(disclaimer_r5.value)); });
+    i0.ɵɵlistener("click", function PoMultiselectComponent_po_disclaimer_5_Template_po_disclaimer_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const disclaimer_r5 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.openDropdown(disclaimer_r5[ctx_r6.fieldValue] === "")); })("p-close-action", function PoMultiselectComponent_po_disclaimer_5_Template_po_disclaimer_p_close_action_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const disclaimer_r5 = restoredCtx.$implicit; const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.closeDisclaimer(disclaimer_r5[ctx_r8.fieldValue])); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const disclaimer_r5 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("po-clickable", disclaimer_r5.value === "" && !ctx_r2.disabled);
-    i0.ɵɵproperty("p-label", disclaimer_r5.label)("p-value", disclaimer_r5.value)("p-hide-close", disclaimer_r5.value === "" || ctx_r2.disabled);
+    i0.ɵɵclassProp("po-clickable", disclaimer_r5[ctx_r2.fieldValue] === "" && !ctx_r2.disabled);
+    i0.ɵɵproperty("p-label", disclaimer_r5[ctx_r2.fieldLabel])("p-value", disclaimer_r5[ctx_r2.fieldValue])("p-hide-close", disclaimer_r5[ctx_r2.fieldValue] === "" || ctx_r2.disabled);
 } }
 const poMultiselectContainerOffset = 8;
 const poMultiselectContainerPositionDefault = 'bottom';
@@ -25694,6 +25821,12 @@ const providers$1 = [
  *   <file name="sample-po-multiselect-heroes/sample-po-multiselect-heroes.component.ts"> </file>
  *   <file name="sample-po-multiselect-heroes/sample-po-multiselect-heroes.service.ts"> </file>
  * </example>
+ *
+ * <example name="po-multiselect-any-array" title="PO Multiselect - Array Any">
+ *   <file name="sample-po-multiselect-any-array/sample-po-multiselect-any-array.component.html"> </file>
+ *   <file name="sample-po-multiselect-any-array/sample-po-multiselect-any-array.component.ts"> </file>
+ * </example>
+ *
  */
 class PoMultiselectComponent extends PoMultiselectBaseComponent {
     constructor(renderer, changeDetector, el, controlPosition, defaultService, languageService) {
@@ -25793,12 +25926,12 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
                 if (sum + extraDisclaimerSize > inputWidth) {
                     this.visibleDisclaimers.splice(-2, 2);
                     const label = '+' + (this.selectedOptions.length + 1 - i).toString();
-                    this.visibleDisclaimers.push({ value: '', label: label });
+                    this.visibleDisclaimers.push({ [this.fieldValue]: '', [this.fieldLabel]: label });
                 }
                 else {
                     this.visibleDisclaimers.splice(-1, 1);
                     const label = '+' + (this.selectedOptions.length - i).toString();
-                    this.visibleDisclaimers.push({ value: '', label: label });
+                    this.visibleDisclaimers.push({ [this.fieldValue]: '', [this.fieldLabel]: label });
                 }
             }
         }
@@ -25863,7 +25996,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
     }
     scrollToSelectedOptions() {
         if (this.selectedOptions && this.selectedOptions.length) {
-            const index = this.options.findIndex(option => option.value === this.selectedOptions[0].value);
+            const index = this.options.findIndex(option => option[this.fieldValue] === this.selectedOptions[0][this.fieldValue]);
             this.dropdown.scrollTo(index);
         }
     }
@@ -25872,12 +26005,12 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         this.changeDetector.markForCheck();
     }
     changeSearch(event) {
-        if (event && event.value !== undefined) {
+        if (event && event[this.fieldValue] !== undefined) {
             if (this.filterService) {
-                this.filterSubject.next(event.value);
+                this.filterSubject.next(event[this.fieldValue]);
             }
             else {
-                this.searchByLabel(event.value, this.options, this.filterMode);
+                this.searchByLabel(event[this.fieldValue], this.options, this.filterMode);
             }
         }
         else {
@@ -25887,7 +26020,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         setTimeout(() => this.adjustContainerPosition());
     }
     closeDisclaimer(value) {
-        const index = this.selectedOptions.findIndex(option => option.value === value);
+        const index = this.selectedOptions.findIndex(option => option[this.fieldValue] === value);
         this.selectedOptions.splice(index, 1);
         this.updateVisibleItems();
         this.callOnChange(this.selectedOptions);
@@ -25901,7 +26034,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
         }
     }
     applyFilter(value = '') {
-        const param = { property: 'label', value: value };
+        const param = { property: this.fieldLabel, value: value };
         return this.service.getFilteredData(param).pipe(catchError(err => {
             this.isServerSearching = false;
             return of([]);
@@ -25976,17 +26109,17 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
 }
 PoMultiselectComponent.ɵfac = function PoMultiselectComponent_Factory(t) { return new (t || PoMultiselectComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(PoControlPositionService), i0.ɵɵdirectiveInject(PoMultiselectFilterService), i0.ɵɵdirectiveInject(PoLanguageService)); };
 PoMultiselectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoMultiselectComponent, selectors: [["po-multiselect"]], viewQuery: function PoMultiselectComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$N, 7, ElementRef);
-        i0.ɵɵviewQuery(_c0$N, 7);
-        i0.ɵɵviewQuery(_c1$k, 7, ElementRef);
-        i0.ɵɵviewQuery(_c2$7, 7, ElementRef);
+        i0.ɵɵviewQuery(_c0$O, 7, ElementRef);
+        i0.ɵɵviewQuery(_c0$O, 7);
+        i0.ɵɵviewQuery(_c1$j, 7, ElementRef);
+        i0.ɵɵviewQuery(_c2$6, 7, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownElement = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdown = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.iconElement = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputElement = _t.first);
-    } }, features: [i0.ɵɵProvidersFeature(providers$1), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 12, vars: 26, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-field-container-content"], [1, "po-input", "po-input-icon-right", "po-multiselect-input", "po-clickable", 3, "tabindex", "keyup.enter", "keydown", "click", "blur"], ["inputElement", ""], ["class", "po-multiselect-input-placeholder", 4, "ngIf"], ["class", "po-multiselect-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "po-clickable", "click", "p-close-action", 4, "ngFor", "ngForOf"], [1, "po-field-icon-container-right"], [3, "ngClass"], ["iconElement", ""], [3, "p-searching", "p-hide-search", "p-hide-select-all", "p-literals", "p-options", "p-visible-options", "p-selected-options", "p-placeholder-search", "p-change", "p-change-search", "p-close-dropdown"], ["dropdownElement", ""], [1, "po-multiselect-input-placeholder"], [1, "po-multiselect-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "click", "p-close-action"]], template: function PoMultiselectComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵProvidersFeature(providers$1), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 12, vars: 31, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-field-container-content"], [1, "po-input", "po-input-icon-right", "po-multiselect-input", "po-clickable", 3, "tabindex", "keyup.enter", "keydown", "click", "blur"], ["inputElement", ""], ["class", "po-multiselect-input-placeholder", 4, "ngIf"], ["class", "po-multiselect-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "po-clickable", "click", "p-close-action", 4, "ngFor", "ngForOf"], [1, "po-field-icon-container-right"], [3, "ngClass"], ["iconElement", ""], [3, "p-searching", "p-hide-search", "p-hide-select-all", "p-literals", "p-options", "p-visible-options", "p-selected-options", "p-placeholder-search", "p-field-value", "p-field-label", "p-change", "p-change-search", "p-close-dropdown"], ["dropdownElement", ""], [1, "po-multiselect-input-placeholder"], [1, "po-multiselect-input-disclaimer", 3, "p-label", "p-value", "p-hide-close", "click", "p-close-action"]], template: function PoMultiselectComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "div", 2, 3);
         i0.ɵɵlistener("keyup.enter", function PoMultiselectComponent_Template_div_keyup_enter_2_listener() { return ctx.toggleDropdownVisibility(); })("keydown", function PoMultiselectComponent_Template_div_keydown_2_listener($event) { return ctx.onKeyDown($event); })("click", function PoMultiselectComponent_Template_div_click_2_listener() { return ctx.toggleDropdownVisibility(); })("blur", function PoMultiselectComponent_Template_div_blur_2_listener() { return ctx.onBlur(); });
         i0.ɵɵtemplate(4, PoMultiselectComponent_span_4_Template, 2, 1, "span", 4);
@@ -26006,19 +26139,20 @@ PoMultiselectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoMu
         i0.ɵɵadvance(1);
         i0.ɵɵclassProp("po-multiselect-input-auto", ctx.autoHeight)("po-multiselect-input-static", !ctx.autoHeight)("po-multiselect-input-disabled", ctx.disabled);
         i0.ɵɵproperty("tabindex", ctx.disabled ? -1 : 0);
+        i0.ɵɵattribute("disabled", ctx.disabled)("aria-label", ctx.label);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", ctx.placeholder && !(ctx.visibleDisclaimers == null ? null : ctx.visibleDisclaimers.length));
+        i0.ɵɵproperty("ngIf", ctx.placeholder && !ctx.disabled && !(ctx.visibleDisclaimers == null ? null : ctx.visibleDisclaimers.length));
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngForOf", ctx.visibleDisclaimers);
         i0.ɵɵadvance(2);
-        i0.ɵɵclassMapInterpolate1("po-icon po-field-icon ", ctx.dropdownIcon, "");
+        i0.ɵɵclassMapInterpolate2("po-icon po-field-icon ", ctx.dropdownIcon, " ", ctx.disabled ? "po-icon-input-disabled" : "po-icon-input", "");
         i0.ɵɵproperty("ngClass", ctx.disabled ? "po-field-icon-disabled" : "");
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("p-searching", ctx.isServerSearching)("p-hide-search", ctx.hideSearch)("p-hide-select-all", ctx.hideSelectAll)("p-literals", ctx.literals)("p-options", ctx.options)("p-visible-options", ctx.visibleOptionsDropdown)("p-selected-options", ctx.selectedOptions)("p-placeholder-search", ctx.placeholderSearch);
+        i0.ɵɵproperty("p-searching", ctx.isServerSearching)("p-hide-search", ctx.hideSearch)("p-hide-select-all", ctx.hideSelectAll)("p-literals", ctx.literals)("p-options", ctx.options)("p-visible-options", ctx.visibleOptionsDropdown)("p-selected-options", ctx.selectedOptions)("p-placeholder-search", ctx.placeholderSearch)("p-field-value", ctx.fieldValue)("p-field-label", ctx.fieldLabel);
     } }, encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectComponent, [{
         type: Component,
-        args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\" [class.po-multiselect-show]=\"dropdownOpen\">\n    <div\n      #inputElement\n      [tabindex]=\"disabled ? -1 : 0\"\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 && !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.label\"\n        [p-value]=\"disclaimer.value\"\n        [p-hide-close]=\"disclaimer.value === '' || disabled\"\n        [class.po-clickable]=\"disclaimer.value === '' && !disabled\"\n        (click)=\"openDropdown(disclaimer.value === '')\"\n        (p-close-action)=\"closeDisclaimer(disclaimer.value)\"\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 }}\"\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-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></po-field-container-bottom>\n</po-field-container>\n" }]
+        args: [{ selector: 'po-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, providers: providers$1, template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\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-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></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 }]; }, { dropdownElement: [{
             type: ViewChild,
             args: ['dropdownElement', { read: ElementRef, static: true }]
@@ -26083,7 +26217,7 @@ PoMultiselectItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             args: ['p-change']
         }] }); })();
 
-const _c0$M = ["inputElement"];
+const _c0$N = ["inputElement"];
 /**
  * @docsPrivate
  *
@@ -26118,7 +26252,7 @@ class PoMultiselectSearchComponent {
         return this.inputElement.nativeElement.value;
     }
     onChange(event) {
-        this.change.emit({ event: event, value: this.inputElement.nativeElement.value });
+        this.change.emit({ event: event, [this.fieldValue]: this.inputElement.nativeElement.value });
     }
     setFocus() {
         this.inputElement.nativeElement.focus();
@@ -26130,11 +26264,11 @@ class PoMultiselectSearchComponent {
 }
 PoMultiselectSearchComponent.ɵfac = function PoMultiselectSearchComponent_Factory(t) { return new (t || PoMultiselectSearchComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 PoMultiselectSearchComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoMultiselectSearchComponent, selectors: [["po-multiselect-search"]], viewQuery: function PoMultiselectSearchComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$M, 7, ElementRef);
+        i0.ɵɵviewQuery(_c0$N, 7, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputElement = _t.first);
-    } }, inputs: { literals: ["p-literals", "literals"], placeholder: ["p-placeholder", "placeholder"] }, outputs: { change: "p-change" }, decls: 5, vars: 1, consts: [[1, "po-field-container-content", "po-multiselect-container-search"], [1, "po-field-icon-container-left"], [1, "po-icon", "po-icon-search", "po-field-icon"], ["type", "text", 1, "po-input", "po-input-icon-left", "po-multiselect-search-input", 3, "placeholder", "keyup"], ["inputElement", ""]], template: function PoMultiselectSearchComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { literals: ["p-literals", "literals"], fieldValue: ["p-field-value", "fieldValue"], placeholder: ["p-placeholder", "placeholder"] }, outputs: { change: "p-change" }, decls: 5, vars: 1, consts: [[1, "po-field-container-content", "po-multiselect-container-search"], [1, "po-field-icon-container-left"], [1, "po-icon", "po-icon-search", "po-field-icon", "po-icon-input"], ["type", "text", 1, "po-input", "po-input-icon-left", "po-multiselect-search-input", 3, "placeholder", "keyup"], ["inputElement", ""]], template: function PoMultiselectSearchComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
         i0.ɵɵelement(2, "span", 2);
         i0.ɵɵelementEnd();
@@ -26147,13 +26281,16 @@ PoMultiselectSearchComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
     } }, encapsulation: 2, changeDetection: 0 });
 (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\">\n  <div class=\"po-field-icon-container-left\">\n    <span class=\"po-icon po-icon-search po-field-icon\"></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" }]
+        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 }]
         }], literals: [{
             type: Input,
             args: ['p-literals']
+        }], fieldValue: [{
+            type: Input,
+            args: ['p-field-value']
         }], change: [{
             type: Output,
             args: ['p-change']
@@ -26179,7 +26316,7 @@ PoRichTextService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PoRich
         type: Injectable
     }], null, null); })();
 
-const _c0$L = ["bodyElement"];
+const _c0$M = ["bodyElement"];
 const poRichTextBodyCommands = [
     'bold',
     'italic',
@@ -26466,7 +26603,7 @@ class PoRichTextBodyComponent {
 }
 PoRichTextBodyComponent.ɵfac = function PoRichTextBodyComponent_Factory(t) { return new (t || PoRichTextBodyComponent)(i0.ɵɵdirectiveInject(PoRichTextService)); };
 PoRichTextBodyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRichTextBodyComponent, selectors: [["po-rich-text-body"]], viewQuery: function PoRichTextBodyComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$L, 7);
+        i0.ɵɵviewQuery(_c0$M, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.bodyElement = _t.first);
@@ -27579,7 +27716,7 @@ __decorate([
             args: ['p-required']
         }] }); })();
 
-const _c0$K = ["selectFilesLink"];
+const _c0$L = ["selectFilesLink"];
 function PoUploadDragDropAreaComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
@@ -27593,7 +27730,7 @@ function PoUploadDragDropAreaComponent_ng_template_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.directoryCompatible ? ctx_r2.literals == null ? null : ctx_r2.literals.dropFoldersHere : ctx_r2.literals == null ? null : ctx_r2.literals.dropFilesHere, " ");
 } }
-const _c1$j = function (a0) { return { "po-clickable": a0 }; };
+const _c1$i = function (a0) { return { "po-clickable": a0 }; };
 function PoUploadDragDropAreaComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelement(0, "span", 7);
@@ -27609,11 +27746,11 @@ function PoUploadDragDropAreaComponent_ng_template_5_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r4.directoryCompatible ? ctx_r4.literals == null ? null : ctx_r4.literals.dragFoldersHere : ctx_r4.literals == null ? null : ctx_r4.literals.dragFilesHere, " ");
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("disabled", ctx_r4.disabled)("ngClass", i0.ɵɵpureFunction1(4, _c1$j, !ctx_r4.disabled));
+    i0.ɵɵproperty("disabled", ctx_r4.disabled)("ngClass", i0.ɵɵpureFunction1(4, _c1$i, !ctx_r4.disabled));
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r4.directoryCompatible ? ctx_r4.literals == null ? null : ctx_r4.literals.selectFolderOnComputer : ctx_r4.literals == null ? null : ctx_r4.literals.selectFilesOnComputer, " ");
 } }
-const _c2$6 = function (a0) { return { "po-upload-drag-drop-area-disabled": a0 }; };
+const _c2$5 = function (a0) { return { "po-upload-drag-drop-area-disabled": a0 }; };
 class PoUploadDragDropAreaComponent {
     constructor(elementRef) {
         this.elementRef = elementRef;
@@ -27625,7 +27762,7 @@ class PoUploadDragDropAreaComponent {
 }
 PoUploadDragDropAreaComponent.ɵfac = function PoUploadDragDropAreaComponent_Factory(t) { return new (t || PoUploadDragDropAreaComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
 PoUploadDragDropAreaComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUploadDragDropAreaComponent, selectors: [["po-upload-drag-drop-area"]], viewQuery: function PoUploadDragDropAreaComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$K, 5);
+        i0.ɵɵviewQuery(_c0$L, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectFilesLinkElement = _t.first);
@@ -27639,7 +27776,7 @@ PoUploadDragDropAreaComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
         const _r1 = i0.ɵɵreference(4);
         const _r3 = i0.ɵɵreference(6);
         i0.ɵɵstyleProp("height", ctx.height, "px");
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c2$6, ctx.disabled));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c2$5, ctx.disabled));
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.overlay && !ctx.disabled)("ngIfThen", _r1)("ngIfElse", _r3);
     } }, dependencies: [i1.NgClass, i1.NgIf], encapsulation: 2, changeDetection: 0 });
@@ -28036,7 +28173,7 @@ PoUploadDragDropDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: P
             args: ['document:drop', ['$event']]
         }] }); })();
 
-const _c0$J = ["DragDropAreaFixed"];
+const _c0$K = ["DragDropAreaFixed"];
 class PoUploadDragDropAreaOverlayComponent {
     constructor(renderer) {
         this.renderer = renderer;
@@ -28059,7 +28196,7 @@ class PoUploadDragDropAreaOverlayComponent {
 }
 PoUploadDragDropAreaOverlayComponent.ɵfac = function PoUploadDragDropAreaOverlayComponent_Factory(t) { return new (t || PoUploadDragDropAreaOverlayComponent)(i0.ɵɵdirectiveInject(i0.Renderer2)); };
 PoUploadDragDropAreaOverlayComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUploadDragDropAreaOverlayComponent, selectors: [["po-upload-drag-drop-area-overlay"]], viewQuery: function PoUploadDragDropAreaOverlayComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$J, 7, ElementRef);
+        i0.ɵɵviewQuery(_c0$K, 7, ElementRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.DragDropAreaFixed = _t.first);
@@ -28094,7 +28231,7 @@ PoUploadDragDropAreaOverlayComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponen
             args: ['p-area-element']
         }] }); })();
 
-const _c0$I = ["dragDropOverlay"];
+const _c0$J = ["dragDropOverlay"];
 function PoUploadDragDropComponent_po_upload_drag_drop_area_overlay_0_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-upload-drag-drop-area-overlay", 2, 3);
@@ -28142,7 +28279,7 @@ class PoUploadDragDropComponent {
 }
 PoUploadDragDropComponent.ɵfac = function PoUploadDragDropComponent_Factory(t) { return new (t || PoUploadDragDropComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 PoUploadDragDropComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUploadDragDropComponent, selectors: [["po-upload-drag-drop"]], viewQuery: function PoUploadDragDropComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$I, 5, ElementRef);
+        i0.ɵɵviewQuery(_c0$J, 5, ElementRef);
         i0.ɵɵviewQuery(PoUploadDragDropAreaComponent, 7);
     } if (rf & 2) {
         let _t;
@@ -28207,7 +28344,7 @@ function PoUploadFileRestrictionsComponent_p_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r1.literals == null ? null : ctx_r1.literals.allowedFormats, ctx_r1.allowedExtensions), "\n");
 } }
-const _c0$H = function (a0, a1) { return [a0, a1]; };
+const _c0$I = function (a0, a1) { return [a0, a1]; };
 function PoUploadFileRestrictionsComponent_p_2_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
@@ -28216,7 +28353,7 @@ function PoUploadFileRestrictionsComponent_p_2_span_3_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r3.literals == null ? null : ctx_r3.literals.allowedFileSizeRange, i0.ɵɵpureFunction2(4, _c0$H, ctx_r3.minFileSize, ctx_r3.maxFileSize)), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r3.literals == null ? null : ctx_r3.literals.allowedFileSizeRange, i0.ɵɵpureFunction2(4, _c0$I, ctx_r3.minFileSize, ctx_r3.maxFileSize)), " ");
 } }
 function PoUploadFileRestrictionsComponent_p_2_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -28329,8 +28466,8 @@ PoUploadFileRestrictionsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({
             args: ['p-min-file-size']
         }] }); })();
 
-const _c0$G = ["inputFile"];
-const _c1$i = ["uploadButton"];
+const _c0$H = ["inputFile"];
+const _c1$h = ["uploadButton"];
 function PoUploadComponent_po_upload_drag_drop_4_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "po-upload-drag-drop", 9);
@@ -28349,12 +28486,12 @@ function PoUploadComponent_po_button_5_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("p-disabled", ctx_r2.isDisabled)("p-label", ctx_r2.selectFileButtonLabel);
 } }
-const _c2$5 = function (a0) { return { "po-upload-file-restrictions-drag-drop": a0 }; };
+const _c2$4 = function (a0) { return { "po-upload-file-restrictions-drag-drop": a0 }; };
 function PoUploadComponent_po_upload_file_restrictions_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-upload-file-restrictions", 12);
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c2$5, ctx_r3.displayDragDrop))("p-allowed-extensions", ctx_r3.fileRestrictions == null ? null : ctx_r3.fileRestrictions.allowedExtensions)("p-max-files", ctx_r3.maxFiles)("p-max-file-size", ctx_r3.fileRestrictions == null ? null : ctx_r3.fileRestrictions.maxFileSize)("p-min-file-size", ctx_r3.fileRestrictions == null ? null : ctx_r3.fileRestrictions.minFileSize);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c2$4, ctx_r3.displayDragDrop))("p-allowed-extensions", ctx_r3.fileRestrictions == null ? null : ctx_r3.fileRestrictions.allowedExtensions)("p-max-files", ctx_r3.maxFiles)("p-max-file-size", ctx_r3.fileRestrictions == null ? null : ctx_r3.fileRestrictions.maxFileSize)("p-min-file-size", ctx_r3.fileRestrictions == null ? null : ctx_r3.fileRestrictions.minFileSize);
 } }
 function PoUploadComponent_div_7_po_progress_3_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
@@ -28366,7 +28503,7 @@ function PoUploadComponent_div_7_po_progress_3_Template(rf, ctx) { if (rf & 1) {
     const ctx_r12 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("p-info", ctx_r12.infoByUploadStatus[file_r13.status] == null ? null : ctx_r12.infoByUploadStatus[file_r13.status].text(file_r13.percent))("p-info-icon", ctx_r12.infoByUploadStatus[file_r13.status] == null ? null : ctx_r12.infoByUploadStatus[file_r13.status].icon)("p-status", ctx_r12.progressStatusByFileStatus[file_r13.status])("p-text", file_r13.displayName)("p-value", file_r13.percent);
 } }
-const _c3$3 = function (a0) { return { "po-upload-progress-container-area po-pt-2 po-pl-1": a0 }; };
+const _c3$2 = function (a0) { return { "po-upload-progress-container-area po-pt-2 po-pl-1": a0 }; };
 function PoUploadComponent_div_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 13)(1, "po-container", 14)(2, "div", 15);
     i0.ɵɵtemplate(3, PoUploadComponent_div_7_po_progress_3_Template, 1, 5, "po-progress", 16);
@@ -28376,7 +28513,7 @@ function PoUploadComponent_div_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("p-height", ctx_r4.hasMoreThanFourItems ? 280 : "auto")("p-no-border", !ctx_r4.hasMoreThanFourItems)("p-no-padding", !ctx_r4.hasMoreThanFourItems);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c3$3, ctx_r4.hasMoreThanFourItems));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c3$2, ctx_r4.hasMoreThanFourItems));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngForOf", ctx_r4.currentFiles)("ngForTrackBy", ctx_r4.trackByFn);
 } }
@@ -28677,9 +28814,9 @@ class PoUploadComponent extends PoUploadBaseComponent {
 }
 PoUploadComponent.ɵfac = function PoUploadComponent_Factory(t) { return new (t || PoUploadComponent)(i0.ɵɵdirectiveInject(PoUploadService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PoI18nPipe), i0.ɵɵdirectiveInject(PoNotificationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PoLanguageService)); };
 PoUploadComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUploadComponent, selectors: [["po-upload"]], viewQuery: function PoUploadComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$G, 7, ElementRef);
+        i0.ɵɵviewQuery(_c0$H, 7, ElementRef);
         i0.ɵɵviewQuery(PoUploadDragDropComponent, 5);
-        i0.ɵɵviewQuery(_c1$i, 5);
+        i0.ɵɵviewQuery(_c1$h, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputFile = _t.first);
@@ -28758,6 +28895,7 @@ function PoUrlComponent_div_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
+    i0.ɵɵclassMapInterpolate1("po-field-icon ", ctx_r0.disabled ? "po-icon-input-disabled" : "po-icon-input", "");
     i0.ɵɵclassProp("po-field-icon-disabled", ctx_r0.disabled);
     i0.ɵɵproperty("p-icon", ctx_r0.icon);
 } }
@@ -28768,6 +28906,7 @@ function PoUrlComponent_po_clean_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r2.disabled ? "po-icon-input-disabled" : "po-icon-input");
     i0.ɵɵproperty("p-element-ref", ctx_r2.inputEl);
 } }
 /**
@@ -28841,14 +28980,14 @@ PoUrlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUrlCompone
                 useExisting: forwardRef(() => PoUrlComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 17, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], [1, "po-input", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "type", "blur", "click", "focus", "input"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "p-error-pattern"], [1, "po-field-icon-container-left"], [1, "po-field-icon", 3, "p-icon"], [3, "p-element-ref", "p-change-event"]], template: function PoUrlComponent_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 18, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], [1, "po-input", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "type", "blur", "click", "focus", "input"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "class", "p-element-ref", "p-change-event", 4, "ngIf"], [3, "p-error-pattern"], [1, "po-field-icon-container-left"], [3, "p-icon"], [3, "p-element-ref", "p-change-event"]], template: function PoUrlComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1);
-        i0.ɵɵtemplate(2, PoUrlComponent_div_2_Template, 2, 3, "div", 2);
+        i0.ɵɵtemplate(2, PoUrlComponent_div_2_Template, 2, 6, "div", 2);
         i0.ɵɵelementStart(3, "input", 3, 4);
         i0.ɵɵlistener("blur", function PoUrlComponent_Template_input_blur_3_listener($event) { return ctx.eventOnBlur($event); })("click", function PoUrlComponent_Template_input_click_3_listener($event) { return ctx.eventOnClick($event); })("focus", function PoUrlComponent_Template_input_focus_3_listener($event) { return ctx.eventOnFocus($event); })("input", function PoUrlComponent_Template_input_input_3_listener($event) { return ctx.eventOnInput($event); });
         i0.ɵɵelementEnd();
         i0.ɵɵelementStart(5, "div", 5);
-        i0.ɵɵtemplate(6, PoUrlComponent_po_clean_6_Template, 1, 1, "po-clean", 6);
+        i0.ɵɵtemplate(6, PoUrlComponent_po_clean_6_Template, 1, 4, "po-clean", 6);
         i0.ɵɵelementEnd()();
         i0.ɵɵelement(7, "po-field-container-bottom", 7);
         i0.ɵɵelementEnd();
@@ -28858,8 +28997,8 @@ PoUrlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUrlCompone
         i0.ɵɵproperty("ngIf", ctx.icon);
         i0.ɵɵadvance(1);
         i0.ɵɵclassProp("po-input-icon-left", ctx.icon)("po-input-icon-right", ctx.clean);
-        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("type", ctx.type);
-        i0.ɵɵattribute("name", ctx.name);
+        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.disabled ? "" : ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("type", ctx.type);
+        i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.label);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled && !ctx.readonly);
         i0.ɵɵadvance(1);
@@ -28878,12 +29017,12 @@ PoUrlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUrlCompone
                         useExisting: forwardRef(() => PoUrlComponent),
                         multi: true
                     }
-                ], template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></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      [placeholder]=\"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 *ngIf=\"clean && !disabled && !readonly\" [p-element-ref]=\"inputEl\" (p-change-event)=\"clear($event)\">\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"getErrorPattern()\"> </po-field-container-bottom>\n</po-field-container>\n" }]
+                ], template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\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      [attr.aria-label]=\"label\"\n      [disabled]=\"disabled\"\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 [p-error-pattern]=\"getErrorPattern()\"> </po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, null); })();
 
-const _c0$F = ["modal"];
-const _c1$h = ["modalImageForm"];
-const _c2$4 = ["upload"];
+const _c0$G = ["modal"];
+const _c1$g = ["modalImageForm"];
+const _c2$3 = ["upload"];
 const uploadRestrictions = ['.apng', '.bmp', '.gif', '.ico', '.jpeg', '.jpg', '.png', '.svg'];
 class PoRichTextImageModalComponent {
     constructor(languageService) {
@@ -28959,9 +29098,9 @@ class PoRichTextImageModalComponent {
 }
 PoRichTextImageModalComponent.ɵfac = function PoRichTextImageModalComponent_Factory(t) { return new (t || PoRichTextImageModalComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
 PoRichTextImageModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRichTextImageModalComponent, selectors: [["po-rich-text-image-modal"]], viewQuery: function PoRichTextImageModalComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$F, 7);
-        i0.ɵɵviewQuery(_c1$h, 5);
-        i0.ɵɵviewQuery(_c2$4, 7);
+        i0.ɵɵviewQuery(_c0$G, 7);
+        i0.ɵɵviewQuery(_c1$g, 5);
+        i0.ɵɵviewQuery(_c2$3, 7);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modal = _t.first);
@@ -29006,6 +29145,7 @@ function PoInputComponent_div_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
+    i0.ɵɵclassMapInterpolate1("po-field-icon ", ctx_r0.disabled ? "po-icon-input-disabled" : "po-icon-input", "");
     i0.ɵɵclassProp("po-field-icon-disabled", ctx_r0.disabled);
     i0.ɵɵproperty("p-icon", ctx_r0.icon);
 } }
@@ -29016,6 +29156,7 @@ function PoInputComponent_po_clean_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r2.disabled ? "po-icon-input-disabled" : "po-icon-input");
     i0.ɵɵproperty("p-element-ref", ctx_r2.inputEl);
 } }
 /**
@@ -29059,14 +29200,14 @@ PoInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoInputCom
                 useExisting: forwardRef(() => PoInputComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 17, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], [1, "po-input", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "type", "blur", "click", "focus", "input"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-element-ref", "p-change-event", 4, "ngIf"], [3, "p-error-pattern"], [1, "po-field-icon-container-left"], [1, "po-field-icon", 3, "p-icon"], [3, "p-element-ref", "p-change-event"]], template: function PoInputComponent_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 18, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], [1, "po-input", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "type", "blur", "click", "focus", "input"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "class", "p-element-ref", "p-change-event", 4, "ngIf"], [3, "p-error-pattern"], [1, "po-field-icon-container-left"], [3, "p-icon"], [3, "p-element-ref", "p-change-event"]], template: function PoInputComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1);
-        i0.ɵɵtemplate(2, PoInputComponent_div_2_Template, 2, 3, "div", 2);
+        i0.ɵɵtemplate(2, PoInputComponent_div_2_Template, 2, 6, "div", 2);
         i0.ɵɵelementStart(3, "input", 3, 4);
         i0.ɵɵlistener("blur", function PoInputComponent_Template_input_blur_3_listener($event) { return ctx.eventOnBlur($event); })("click", function PoInputComponent_Template_input_click_3_listener($event) { return ctx.eventOnClick($event); })("focus", function PoInputComponent_Template_input_focus_3_listener($event) { return ctx.eventOnFocus($event); })("input", function PoInputComponent_Template_input_input_3_listener($event) { return ctx.eventOnInput($event); });
         i0.ɵɵelementEnd();
         i0.ɵɵelementStart(5, "div", 5);
-        i0.ɵɵtemplate(6, PoInputComponent_po_clean_6_Template, 1, 1, "po-clean", 6);
+        i0.ɵɵtemplate(6, PoInputComponent_po_clean_6_Template, 1, 4, "po-clean", 6);
         i0.ɵɵelementEnd()();
         i0.ɵɵelement(7, "po-field-container-bottom", 7);
         i0.ɵɵelementEnd();
@@ -29076,8 +29217,8 @@ PoInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoInputCom
         i0.ɵɵproperty("ngIf", ctx.icon);
         i0.ɵɵadvance(1);
         i0.ɵɵclassProp("po-input-icon-left", ctx.icon)("po-input-icon-right", ctx.clean);
-        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("type", ctx.type);
-        i0.ɵɵattribute("name", ctx.name);
+        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.disabled ? "" : ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("type", ctx.type);
+        i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.label);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled && !ctx.readonly);
         i0.ɵɵadvance(1);
@@ -29096,11 +29237,11 @@ PoInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoInputCom
                         useExisting: forwardRef(() => PoInputComponent),
                         multi: true
                     }
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon\" [class.po-field-icon-disabled]=\"disabled\" [p-icon]=\"icon\"></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      [placeholder]=\"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 *ngIf=\"clean && !disabled && !readonly\" [p-element-ref]=\"inputEl\" (p-change-event)=\"clear($event)\">\n      </po-clean>\n    </div>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"getErrorPattern()\"> </po-field-container-bottom>\n</po-field-container>\n" }]
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\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      [attr.aria-label]=\"label\"\n      [disabled]=\"disabled\"\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 [p-error-pattern]=\"getErrorPattern()\"> </po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, null); })();
 
-const _c0$E = ["modal"];
-const _c1$g = ["modalLinkForm"];
+const _c0$F = ["modal"];
+const _c1$f = ["modalLinkForm"];
 class PoRichTextLinkModalComponent {
     constructor(languageService) {
         this.languageService = languageService;
@@ -29224,8 +29365,8 @@ class PoRichTextLinkModalComponent {
 }
 PoRichTextLinkModalComponent.ɵfac = function PoRichTextLinkModalComponent_Factory(t) { return new (t || PoRichTextLinkModalComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
 PoRichTextLinkModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRichTextLinkModalComponent, selectors: [["po-rich-text-link-modal"]], viewQuery: function PoRichTextLinkModalComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$E, 7);
-        i0.ɵɵviewQuery(_c1$g, 5);
+        i0.ɵɵviewQuery(_c0$F, 7);
+        i0.ɵɵviewQuery(_c1$f, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modal = _t.first);
@@ -29261,8 +29402,8 @@ PoRichTextLinkModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
             args: ['p-link-editing']
         }] }); })();
 
-const _c0$D = ["colorPickerInput"];
-const _c1$f = ["toolbarElement"];
+const _c0$E = ["colorPickerInput"];
+const _c1$e = ["toolbarElement"];
 function PoRichTextToolbarComponent_div_4_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 15)(1, "div", 16)(2, "button", 17)(3, "input", 18, 19);
@@ -29436,8 +29577,8 @@ class PoRichTextToolbarComponent {
 }
 PoRichTextToolbarComponent.ɵfac = function PoRichTextToolbarComponent_Factory(t) { return new (t || PoRichTextToolbarComponent)(i0.ɵɵdirectiveInject(PoLanguageService)); };
 PoRichTextToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRichTextToolbarComponent, selectors: [["po-rich-text-toolbar"]], viewQuery: function PoRichTextToolbarComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$D, 5, ElementRef);
-        i0.ɵɵviewQuery(_c1$f, 7);
+        i0.ɵɵviewQuery(_c0$E, 5, ElementRef);
+        i0.ɵɵviewQuery(_c1$e, 7);
         i0.ɵɵviewQuery(PoRichTextImageModalComponent, 7);
         i0.ɵɵviewQuery(PoRichTextLinkModalComponent, 7);
     } if (rf & 2) {
@@ -29899,7 +30040,7 @@ PoNumberComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoNumberC
                 useExisting: forwardRef(() => PoNumberComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 20, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["type", "number", 1, "po-input", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "tabindex", "blur", "focus", "input", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-default-value", "p-element-ref", "p-change-event", 4, "ngIf"], [3, "p-error-pattern"], [1, "po-field-icon-container-left"], [1, "po-field-icon", 3, "p-icon"], [3, "p-default-value", "p-element-ref", "p-change-event"]], template: function PoNumberComponent_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 21, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content"], ["class", "po-field-icon-container-left", 4, "ngIf"], ["type", "number", 1, "po-input", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "tabindex", "blur", "focus", "input", "keydown"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-default-value", "p-element-ref", "p-change-event", 4, "ngIf"], [3, "p-error-pattern"], [1, "po-field-icon-container-left"], [1, "po-field-icon", "po-icon-input", 3, "p-icon"], [1, "po-icon-input", 3, "p-default-value", "p-element-ref", "p-change-event"]], template: function PoNumberComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1);
         i0.ɵɵtemplate(2, PoNumberComponent_div_2_Template, 2, 3, "div", 2);
         i0.ɵɵelementStart(3, "input", 3, 4);
@@ -29916,8 +30057,8 @@ PoNumberComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoNumberC
         i0.ɵɵproperty("ngIf", ctx.icon);
         i0.ɵɵadvance(1);
         i0.ɵɵclassProp("po-input-icon-left", ctx.icon)("po-input-icon-right", ctx.clean);
-        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("tabindex", ctx.disabled ? -1 : 0);
-        i0.ɵɵattribute("max", ctx.max)("min", ctx.min)("name", ctx.name)("step", ctx.step);
+        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.disabled ? "" : ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("tabindex", ctx.disabled ? -1 : 0);
+        i0.ɵɵattribute("max", ctx.max)("min", ctx.min)("name", ctx.name)("step", ctx.step)("aria-label", ctx.label);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled && !ctx.readonly);
         i0.ɵɵadvance(1);
@@ -29936,7 +30077,7 @@ PoNumberComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoNumberC
                         useExisting: forwardRef(() => PoNumberComponent),
                         multi: true
                     }
-                ], template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div *ngIf=\"icon\" class=\"po-field-icon-container-left\">\n      <po-icon class=\"po-field-icon\" [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      [placeholder]=\"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        *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-error-pattern]=\"getErrorPatternMessage()\"> </po-field-container-bottom>\n</po-field-container>\n" }]
+                ], template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\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      [attr.aria-label]=\"label\"\n      [autocomplete]=\"autocomplete\"\n      [class.po-input-icon-left]=\"icon\"\n      [class.po-input-icon-right]=\"clean\"\n      [disabled]=\"disabled\"\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-error-pattern]=\"getErrorPatternMessage()\"> </po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, { step: [{
             type: Input,
             args: ['p-step']
@@ -29950,7 +30091,7 @@ PoNumberComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoNumberC
 
 function PoPasswordComponent_po_clean_7_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "po-clean", 10);
+    i0.ɵɵelementStart(0, "po-clean", 9);
     i0.ɵɵlistener("p-change-event", function PoPasswordComponent_po_clean_7_Template_po_clean_p_change_event_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.clear($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -29959,7 +30100,7 @@ function PoPasswordComponent_po_clean_7_Template(rf, ctx) { if (rf & 1) {
 } }
 function PoPasswordComponent_span_8_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 11);
+    i0.ɵɵelementStart(0, "span", 10);
     i0.ɵɵlistener("click", function PoPasswordComponent_span_8_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.showPassword()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -30039,28 +30180,29 @@ PoPasswordComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPassw
                 useExisting: forwardRef(() => PoPasswordComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 19, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-field-container-content"], [1, "po-field-icon-container-left"], [1, "po-icon", "po-field-icon", "po-icon-lock"], [1, "po-input", "po-input-icon-left", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "type", "blur", "click", "focus", "input"], ["inp", ""], [1, "po-field-icon-container-right"], [3, "p-element-ref", "p-change-event", 4, "ngIf"], ["class", "po-icon po-field-icon", 3, "ngClass", "click", 4, "ngIf"], [3, "p-error-pattern"], [3, "p-element-ref", "p-change-event"], [1, "po-icon", "po-field-icon", 3, "ngClass", "click"]], template: function PoPasswordComponent_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 23, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-field-container-content"], [1, "po-field-icon-container-left"], [1, "po-input", "po-input-icon-left", 3, "autocomplete", "disabled", "placeholder", "readonly", "required", "type", "blur", "click", "focus", "input"], ["inp", ""], [1, "po-field-icon-container-right"], ["class", "po-icon-input", 3, "p-element-ref", "p-change-event", 4, "ngIf"], ["class", "po-icon po-field-icon po-icon-input", 3, "ngClass", "click", 4, "ngIf"], [3, "p-error-pattern"], [1, "po-icon-input", 3, "p-element-ref", "p-change-event"], [1, "po-icon", "po-field-icon", "po-icon-input", 3, "ngClass", "click"]], template: function PoPasswordComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "div", 2);
-        i0.ɵɵelement(3, "span", 3);
+        i0.ɵɵelement(3, "span");
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "input", 4, 5);
+        i0.ɵɵelementStart(4, "input", 3, 4);
         i0.ɵɵlistener("blur", function PoPasswordComponent_Template_input_blur_4_listener($event) { return ctx.eventOnBlur($event); })("click", function PoPasswordComponent_Template_input_click_4_listener($event) { return ctx.eventOnClick($event); })("focus", function PoPasswordComponent_Template_input_focus_4_listener($event) { return ctx.eventOnFocus($event); })("input", function PoPasswordComponent_Template_input_input_4_listener($event) { return ctx.eventOnInput($event); });
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(6, "div", 6);
-        i0.ɵɵtemplate(7, PoPasswordComponent_po_clean_7_Template, 1, 1, "po-clean", 7);
-        i0.ɵɵtemplate(8, PoPasswordComponent_span_8_Template, 1, 1, "span", 8);
+        i0.ɵɵelementStart(6, "div", 5);
+        i0.ɵɵtemplate(7, PoPasswordComponent_po_clean_7_Template, 1, 1, "po-clean", 6);
+        i0.ɵɵtemplate(8, PoPasswordComponent_span_8_Template, 1, 1, "span", 7);
         i0.ɵɵelementEnd()();
-        i0.ɵɵelement(9, "po-field-container-bottom", 9);
+        i0.ɵɵelement(9, "po-field-container-bottom", 8);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         const _r0 = i0.ɵɵreference(5);
         i0.ɵɵproperty("p-label", ctx.label)("p-help", ctx.help)("p-optional", !ctx.required && ctx.optional);
         i0.ɵɵadvance(3);
+        i0.ɵɵclassMapInterpolate1("po-icon po-field-icon po-icon-lock ", ctx.disabled ? "po-icon-input-disabled" : "po-icon-input", "");
         i0.ɵɵclassProp("po-field-icon-disabled", ctx.disabled);
         i0.ɵɵadvance(1);
         i0.ɵɵclassProp("po-input-double-icon-right", ctx.clean && _r0.value && !ctx.hidePasswordPeek)("po-input-icon-right", ctx.clean || !ctx.hidePasswordPeek);
-        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("type", ctx.disabled ? "password" : ctx.type);
-        i0.ɵɵattribute("name", ctx.name);
+        i0.ɵɵproperty("autocomplete", ctx.autocomplete)("disabled", ctx.disabled)("placeholder", ctx.disabled ? "" : ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("type", ctx.disabled ? "password" : ctx.type);
+        i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.label);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx.clean && !ctx.disabled && !ctx.readonly);
         i0.ɵɵadvance(1);
@@ -30081,7 +30223,7 @@ PoPasswordComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPassw
                         useExisting: forwardRef(() => PoPasswordComponent),
                         multi: true
                     }
-                ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <div class=\"po-field-icon-container-left\">\n      <span class=\"po-icon po-field-icon po-icon-lock\" [class.po-field-icon-disabled]=\"disabled\"> </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      [placeholder]=\"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 *ngIf=\"clean && !disabled && !readonly\" [p-element-ref]=\"inputEl\" (p-change-event)=\"clear($event)\">\n      </po-clean>\n\n      <span\n        *ngIf=\"!hidePasswordPeek && !disabled\"\n        class=\"po-icon po-field-icon\"\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-error-pattern]=\"getErrorPattern()\"> </po-field-container-bottom>\n</po-field-container>\n" }]
+                ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\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      [attr.aria-label]=\"label\"\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      [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-error-pattern]=\"getErrorPattern()\"> </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']
@@ -30100,6 +30242,17 @@ const poRadioGroupColumnsTotalLength = 12;
  * [**po-checkbox-group**](/documentation/po-checkbox-group).
  *
  * > Ao passar um valor para o *model* que não esteja na lista de opções, o mesmo será definido como `undefined`.
+ *
+ * #### Acessibilidade tratada no componente interno `po-radio`:
+ *
+ * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
+ *
+ * - O componente foi desenvolvido utilizando controles padrões HTML para permitir a identificação do mesmo na interface por tecnologias assistivas. [WCAG 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+ * - A cor não deve ser o único meio para diferenciar o radio button normal do selecionado, por isso deve-se manter uma diferença visual entre os estados. [WGAG 1.4.1: Use of Color, 3.2.4: Consistent Identification](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color)
+ * - Quando em foco, o componente é ativado usando as teclas de Espaço e Enter do teclado. [W3C WAI-ARIA 3.5 Button - Keyboard Interaction](https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-3)
+ * - A área do foco precisar ter uma espessura de pelo menos 2 pixels CSS e o foco não pode ficar escondido por outros elementos da tela. [(WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
+ *
+ * Conforme documentação em: https://doc.animaliads.io/docs/components/radio
  */
 class PoRadioGroupBaseComponent {
     constructor() {
@@ -30253,7 +30406,7 @@ class PoRadioGroupBaseComponent {
     }
 }
 PoRadioGroupBaseComponent.ɵfac = function PoRadioGroupBaseComponent_Factory(t) { return new (t || PoRadioGroupBaseComponent)(); };
-PoRadioGroupBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoRadioGroupBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus"], name: "name", optional: ["p-optional", "optional"], columns: ["p-columns", "columns"], disabled: ["p-disabled", "disabled"], required: ["p-required", "required"], options: ["p-options", "options"] }, outputs: { change: "p-change" } });
+PoRadioGroupBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoRadioGroupBaseComponent, inputs: { autoFocus: ["p-auto-focus", "autoFocus"], name: "name", optional: ["p-optional", "optional"], columns: ["p-columns", "columns"], disabled: ["p-disabled", "disabled"], required: ["p-required", "required"], options: ["p-options", "options"], size: ["p-size", "size"] }, outputs: { change: "p-change" } });
 __decorate([
     InputBoolean()
 ], PoRadioGroupBaseComponent.prototype, "autoFocus", void 0);
@@ -30283,33 +30436,260 @@ __decorate([
         }], options: [{
             type: Input,
             args: ['p-options']
+        }], size: [{
+            type: Input,
+            args: ['p-size']
+        }] }); })();
+
+class PoFieldModel {
+    constructor() {
+        /**
+         * @optional
+         *
+         * @description
+         *
+         * Indica se o campo será desabilitado.
+         *
+         * @default `false`
+         */
+        this.disabled = false;
+        /**
+         * @optional
+         *
+         * @description
+         *
+         * Evento disparado ao alterar valor do campo.
+         */
+        this.change = new EventEmitter();
+    }
+    // Função implementada do ControlValueAccessor
+    // Usada para interceptar os estados de habilitado via forms api
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.onWriteValue(value);
+    }
+    emitChange(value) {
+        this.change.emit(value);
+    }
+    updateModel(value) {
+        if (this.propagateChange) {
+            this.propagateChange(value);
+        }
+    }
+}
+PoFieldModel.ɵfac = function PoFieldModel_Factory(t) { return new (t || PoFieldModel)(); };
+PoFieldModel.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoFieldModel, inputs: { label: ["p-label", "label"], name: "name", help: ["p-help", "help"], disabled: ["p-disabled", "disabled"] }, outputs: { change: "p-change" } });
+__decorate([
+    InputBoolean()
+], PoFieldModel.prototype, "disabled", void 0);
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoFieldModel, [{
+        type: Directive
+    }], function () { return []; }, { label: [{
+            type: Input,
+            args: ['p-label']
+        }], name: [{
+            type: Input,
+            args: ['name']
+        }], help: [{
+            type: Input,
+            args: ['p-help']
+        }], disabled: [{
+            type: Input,
+            args: ['p-disabled']
+        }], change: [{
+            type: Output,
+            args: ['p-change']
+        }] }); })();
+
+/**
+ * @usedBy PoRadioComponent
+ *
+ * @description
+ *
+ * Enum para definir o tamanho do po-radio.
+ */
+var PoRadioSize;
+(function (PoRadioSize) {
+    PoRadioSize["Medium"] = "medium";
+    PoRadioSize["Large"] = "large";
+})(PoRadioSize || (PoRadioSize = {}));
+
+const _c0$D = ["radioLabel"];
+function PoRadioComponent_span_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(ctx_r1.label);
+} }
+class PoRadioComponent extends PoFieldModel {
+    constructor(changeDetector) {
+        super();
+        this.changeDetector = changeDetector;
+        this.value = false;
+        this._size = PoRadioSize.Medium;
+        /** Define o status do *radio* */
+        this.checked = false;
+    }
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho do *radio*
+     * @default `medium`
+     */
+    set size(value) {
+        this._size = Object.values(PoRadioSize).includes(value) ? value : PoRadioSize.Medium;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Função que atribui foco ao *radio*.
+     *
+     * Para utilizá-la é necessário capturar a referência do componente no DOM através do `ViewChild`, como por exemplo:
+     *
+     * ```
+     * import { ViewChild } from '@angular/core';
+     * import { PoRadioComponent } from '@po-ui/ng-components';
+     *
+     * ...
+     *
+     * @ViewChild(PoRadioComponent, { static: true }) radio: PoRadioComponent;
+     *
+     * focusRadio() {
+     * this.radio.focus();
+     * }
+     * ```
+     *
+     */
+    focus() {
+        if (!this.disabled) {
+            this.radioLabel.nativeElement.focus();
+        }
+    }
+    onBlur() {
+        this.onTouched?.();
+    }
+    onKeyDown(event) {
+        if (event.which === PoKeyCodeEnum.space || event.keyCode === PoKeyCodeEnum.space) {
+            this.eventClick();
+        }
+    }
+    changeValue(value) {
+        if (value) {
+            this.value = value;
+            this.updateModel(value);
+            this.emitChange(this.value);
+        }
+    }
+    eventClick() {
+        if (!this.disabled) {
+            this.changeValue(!this.value);
+            this.changeDetector.detectChanges();
+        }
+    }
+    onWriteValue(value) {
+        if (value !== this.value) {
+            this.value = !!value;
+            this.changeDetector.markForCheck();
+        }
+    }
+    focusIn() {
+        this.radioLabel.nativeElement.setAttribute('focus', '');
+    }
+    focusOut() {
+        this.radioLabel.nativeElement.removeAttribute('focus');
+    }
+}
+PoRadioComponent.ɵfac = function PoRadioComponent_Factory(t) { return new (t || PoRadioComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+PoRadioComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRadioComponent, selectors: [["po-radio"]], viewQuery: function PoRadioComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0$D, 7);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.radioLabel = _t.first);
+    } }, hostBindings: function PoRadioComponent_HostBindings(rf, ctx) { if (rf & 1) {
+        i0.ɵɵlistener("focusin", function PoRadioComponent_focusin_HostBindingHandler($event) { return ctx.focusIn($event.target); })("focusout", function PoRadioComponent_focusout_HostBindingHandler($event) { return ctx.focusOut($event.target); });
+    } }, inputs: { radioValue: ["p-value", "radioValue"], size: ["p-size", "size"], required: ["p-required", "required"], checked: ["p-checked", "checked"] }, features: [i0.ɵɵProvidersFeature([
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PoRadioComponent),
+                multi: true
+            }
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 7, consts: [[1, "po-radio"], [3, "click", "keydown"], ["radioLabel", ""], ["type", "radio", 3, "checked", "disabled", "name", "required", "value"], [4, "ngIf"]], template: function PoRadioComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "label", 1, 2);
+        i0.ɵɵlistener("click", function PoRadioComponent_Template_label_click_1_listener() { return ctx.eventClick(); })("keydown", function PoRadioComponent_Template_label_keydown_1_listener($event) { return ctx.onKeyDown($event); });
+        i0.ɵɵelement(3, "input", 3);
+        i0.ɵɵtemplate(4, PoRadioComponent_span_4_Template, 2, 1, "span", 4);
+        i0.ɵɵelementEnd()();
+    } if (rf & 2) {
+        let tmp_2_0;
+        let tmp_4_0;
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("checked", ctx.checked)("disabled", ctx.disabled)("name", (tmp_2_0 = ctx.name) !== null && tmp_2_0 !== undefined ? tmp_2_0 : "po-input-radio")("required", ctx.required)("value", (tmp_4_0 = ctx.radioValue) !== null && tmp_4_0 !== undefined ? tmp_4_0 : "");
+        i0.ɵɵattribute("p-size", ctx.size);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.label);
+    } }, dependencies: [i1.NgIf], encapsulation: 2, changeDetection: 0 });
+__decorate([
+    InputBoolean()
+], PoRadioComponent.prototype, "required", void 0);
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRadioComponent, [{
+        type: Component,
+        args: [{ selector: 'po-radio', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => PoRadioComponent),
+                        multi: true
+                    }
+                ], template: "<div class=\"po-radio\">\n  <label #radioLabel (click)=\"eventClick()\" (keydown)=\"onKeyDown($event)\">\n    <input\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    <span *ngIf=\"label\">{{ label }}</span>\n  </label>\n</div>\n" }]
+    }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { radioLabel: [{
+            type: ViewChild,
+            args: ['radioLabel', { static: true }]
+        }], radioValue: [{
+            type: Input,
+            args: ['p-value']
+        }], size: [{
+            type: Input,
+            args: ['p-size']
+        }], required: [{
+            type: Input,
+            args: ['p-required']
+        }], checked: [{
+            type: Input,
+            args: ['p-checked']
+        }], focusIn: [{
+            type: HostListener,
+            args: ['focusin', ['$event.target']]
+        }], focusOut: [{
+            type: HostListener,
+            args: ['focusout', ['$event.target']]
         }] }); })();
 
 const _c0$C = ["inp"];
-const _c1$e = ["inputRadio"];
-function PoRadioGroupComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+const _c1$d = ["inputRadio"];
+function PoRadioGroupComponent_div_4_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "input", 4, 5);
-    i0.ɵɵlistener("keyup", function PoRadioGroupComponent_div_3_Template_input_keyup_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r5); const option_r2 = restoredCtx.$implicit; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onKeyUp($event, option_r2.value)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "label", 6);
-    i0.ɵɵlistener("click", function PoRadioGroupComponent_div_3_Template_label_click_3_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const option_r2 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.eventClick(option_r2.value, option_r2.disabled === true || ctx_r6.disabled)); });
-    i0.ɵɵtext(4);
+    i0.ɵɵelementStart(0, "div")(1, "po-radio", 5, 6);
+    i0.ɵɵlistener("keyup", function PoRadioGroupComponent_div_4_Template_po_radio_keyup_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r5); const option_r2 = restoredCtx.$implicit; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onKeyUp($event, option_r2.value)); })("click", function PoRadioGroupComponent_div_4_Template_po_radio_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const option_r2 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.eventClick(option_r2.value, option_r2.disabled === true || ctx_r6.disabled)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const option_r2 = ctx.$implicit;
-    const _r3 = i0.ɵɵreference(2);
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassMapInterpolate2("po-radio-group-item po-md-", ctx_r1.mdColumns, " po-lg-", ctx_r1.columns, "");
     i0.ɵɵadvance(1);
-    i0.ɵɵclassProp("po-radio-group-input-checked", ctx_r1.value === option_r2.value);
-    i0.ɵɵproperty("checked", ctx_r1.value === option_r2.value)("disabled", option_r2.disabled === true || ctx_r1.disabled)("required", ctx_r1.required)("value", option_r2.value);
-    i0.ɵɵattribute("name", ctx_r1.name);
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("po-clickable", !_r3.disabled);
-    i0.ɵɵproperty("for", ctx_r1.name);
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", option_r2.label, " ");
+    i0.ɵɵproperty("name", ctx_r1.name)("p-checked", ctx_r1.value === option_r2.value)("p-disabled", option_r2.disabled === true || ctx_r1.disabled)("p-label", option_r2.label)("p-required", ctx_r1.required)("p-size", ctx_r1.size)("p-value", option_r2.value);
 } }
 /**
  * @docsExtends PoRadioGroupBaseComponent
@@ -30404,7 +30784,7 @@ class PoRadioGroupComponent extends PoRadioGroupBaseComponent {
 PoRadioGroupComponent.ɵfac = function PoRadioGroupComponent_Factory(t) { return new (t || PoRadioGroupComponent)(i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 PoRadioGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRadioGroupComponent, selectors: [["po-radio-group"]], viewQuery: function PoRadioGroupComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$C, 7, ElementRef);
-        i0.ɵɵviewQuery(_c1$e, 5);
+        i0.ɵɵviewQuery(_c1$d, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
@@ -30420,17 +30800,21 @@ PoRadioGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRad
                 useExisting: forwardRef(() => PoRadioGroupComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 4, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-row", "po-pt-1", "po-pb-1"], ["inp", ""], [3, "class", 4, "ngFor", "ngForOf"], ["type", "radio", 1, "po-radio-group-input", 3, "checked", "disabled", "required", "value", "keyup"], ["inputRadio", ""], [1, "po-radio-group-label", 3, "for", "click"]], template: function PoRadioGroupComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1, 2);
-        i0.ɵɵtemplate(3, PoRadioGroupComponent_div_3_Template, 5, 15, "div", 3);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelement(4, "po-field-container-bottom");
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 7, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content"], ["role", "radiogroup", 1, "po-radio-group"], ["inp", ""], [3, "class", 4, "ngFor", "ngForOf"], [3, "name", "p-checked", "p-disabled", "p-label", "p-required", "p-size", "p-value", "keyup", "click"], ["inputRadio", ""]], template: function PoRadioGroupComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "div", 2, 3);
+        i0.ɵɵtemplate(4, PoRadioGroupComponent_div_4_Template, 3, 11, "div", 4);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelement(5, "po-field-container-bottom");
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵproperty("p-help", ctx.help)("p-label", ctx.label)("p-optional", !ctx.required && ctx.optional);
-        i0.ɵɵadvance(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵattribute("name", ctx.name);
+        i0.ɵɵadvance(1);
+        i0.ɵɵattribute("aria-label", ctx.label)("data-options", ctx.options.length);
+        i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngForOf", ctx.options);
-    } }, dependencies: [i1.NgForOf, PoFieldContainerBottomComponent, PoFieldContainerComponent], encapsulation: 2, changeDetection: 0 });
+    } }, dependencies: [i1.NgForOf, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoRadioComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRadioGroupComponent, [{
         type: Component,
         args: [{ selector: 'po-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -30444,7 +30828,7 @@ PoRadioGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRad
                         useExisting: forwardRef(() => PoRadioGroupComponent),
                         multi: true
                     }
-                ], template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div class=\"po-row po-pt-1 po-pb-1\" #inp>\n    <div *ngFor=\"let option of options\" class=\"po-radio-group-item po-md-{{ mdColumns }} po-lg-{{ columns }}\">\n      <input\n        #inputRadio\n        class=\"po-radio-group-input\"\n        type=\"radio\"\n        [attr.name]=\"name\"\n        [checked]=\"value === option.value\"\n        [class.po-radio-group-input-checked]=\"value === option.value\"\n        [disabled]=\"option.disabled === true || disabled\"\n        [required]=\"required\"\n        [value]=\"option.value\"\n        (keyup)=\"onKeyUp($event, option.value)\"\n      />\n      <label\n        class=\"po-radio-group-label\"\n        [class.po-clickable]=\"!inputRadio.disabled\"\n        [for]=\"name\"\n        (click)=\"eventClick(option.value, option.disabled === true || disabled)\"\n      >\n        {{ option.label }}\n      </label>\n    </div>\n  </div>\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n" }]
+                ], template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\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']
@@ -30459,74 +30843,6 @@ PoRadioGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRad
             args: ['inputRadio']
         }] }); })();
 
-class PoFieldModel {
-    constructor() {
-        /**
-         * @optional
-         *
-         * @description
-         *
-         * Indica se o campo será desabilitado.
-         *
-         * @default `false`
-         */
-        this.disabled = false;
-        /**
-         * @optional
-         *
-         * @description
-         *
-         * Evento disparado ao alterar valor do campo.
-         */
-        this.change = new EventEmitter();
-    }
-    // Função implementada do ControlValueAccessor
-    // Usada para interceptar os estados de habilitado via forms api
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    writeValue(value) {
-        this.onWriteValue(value);
-    }
-    emitChange(value) {
-        this.change.emit(value);
-    }
-    updateModel(value) {
-        if (this.propagateChange) {
-            this.propagateChange(value);
-        }
-    }
-}
-PoFieldModel.ɵfac = function PoFieldModel_Factory(t) { return new (t || PoFieldModel)(); };
-PoFieldModel.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoFieldModel, inputs: { label: ["p-label", "label"], name: "name", help: ["p-help", "help"], disabled: ["p-disabled", "disabled"] }, outputs: { change: "p-change" } });
-__decorate([
-    InputBoolean()
-], PoFieldModel.prototype, "disabled", void 0);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoFieldModel, [{
-        type: Directive
-    }], function () { return []; }, { label: [{
-            type: Input,
-            args: ['p-label']
-        }], name: [{
-            type: Input,
-            args: ['name']
-        }], help: [{
-            type: Input,
-            args: ['p-help']
-        }], disabled: [{
-            type: Input,
-            args: ['p-disabled']
-        }], change: [{
-            type: Output,
-            args: ['p-change']
-        }] }); })();
-
 /**
  * @docsExtends PoFieldModel
  */
@@ -30595,68 +30911,29 @@ __decorate([
             args: ['p-required']
         }] }); })();
 
-const _c0$B = ["contentList"];
-const _c1$d = ["icon"];
-const _c2$3 = ["select"];
-const _c3$2 = ["selectButton"];
-function PoSelectComponent_option_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "option", 14);
-} }
+const _c0$B = ["select"];
 function PoSelectComponent_option_4_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "option", 15);
-    i0.ɵɵlistener("click", function PoSelectComponent_option_4_Template_option_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r9); const option_r7 = restoredCtx.$implicit; const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.onOptionClick(option_r7)); });
+    i0.ɵɵelementStart(0, "option", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const option_r7 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("disabled", ctx_r2.readonly)("value", option_r7 == null ? null : option_r7[ctx_r2.fieldValue]);
+    const ctx_r1 = i0.ɵɵnextContext();
+    let tmp_3_0;
+    i0.ɵɵproperty("disabled", !!ctx_r1.placeholder)("hidden", !ctx_r1.selectedValue && !ctx_r1.placeholder)("selected", !ctx_r1.selectedValue)("value", (tmp_3_0 = ctx_r1.placeholder) !== null && tmp_3_0 !== undefined ? tmp_3_0 : "");
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", option_r7 == null ? null : option_r7[ctx_r2.fieldLabel], " ");
-} }
-function PoSelectComponent_li_15_ng_container_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.placeholder, " ");
 } }
-function PoSelectComponent_li_15_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
+function PoSelectComponent_option_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 7);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const option_r10 = i0.ɵɵnextContext().$implicit;
-    const ctx_r13 = i0.ɵɵnextContext();
+    const option_r3 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", ctx_r2.readonly)("value", option_r3 == null ? null : option_r3[ctx_r2.fieldValue]);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(option_r10 == null ? null : option_r10[ctx_r13.fieldLabel]);
+    i0.ɵɵtextInterpolate1(" ", option_r3 == null ? null : option_r3[ctx_r2.fieldLabel], " ");
 } }
-function PoSelectComponent_li_15_ng_template_5_Template(rf, ctx) { }
-const _c4$1 = function (a0) { return { $implicit: a0 }; };
-function PoSelectComponent_li_15_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 16);
-    i0.ɵɵlistener("click", function PoSelectComponent_li_15_Template_li_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r18); const option_r10 = restoredCtx.$implicit; const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.onOptionClick(option_r10)); });
-    i0.ɵɵelementStart(1, "div", 17);
-    i0.ɵɵtemplate(2, PoSelectComponent_li_15_ng_container_2_Template, 1, 0, "ng-container", 18);
-    i0.ɵɵtemplate(3, PoSelectComponent_li_15_ng_template_3_Template, 2, 1, "ng-template", null, 19, i0.ɵɵtemplateRefExtractor);
-    i0.ɵɵtemplate(5, PoSelectComponent_li_15_ng_template_5_Template, 0, 0, "ng-template", 20, 21, i0.ɵɵtemplateRefExtractor);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const option_r10 = ctx.$implicit;
-    const _r12 = i0.ɵɵreference(4);
-    const _r14 = i0.ɵɵreference(6);
-    const ctx_r6 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("po-select-item-selected", ctx_r6.selectedValue === (option_r10 == null ? null : option_r10[ctx_r6.fieldLabel]));
-    i0.ɵɵproperty("value", option_r10 == null ? null : option_r10[ctx_r6.fieldValue]);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r6.selectOptionTemplate)("ngIfThen", _r14)("ngIfElse", _r12);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r6.selectOptionTemplate == null ? null : ctx_r6.selectOptionTemplate.templateRef)("ngTemplateOutletContext", i0.ɵɵpureFunction1(8, _c4$1, option_r10));
-} }
-const _c5 = function (a0, a1) { return { "po-select-mobile": a0, "po-invisible": a1 }; };
-const _c6 = function (a0, a1) { return { "po-select-button-disabled": a0, "po-select-button-readonly": a1 }; };
-const _c7 = function (a0, a1) { return { "po-field-icon-disabled": a0, "po-field-icon-readonly": a1 }; };
-const _c8 = function (a0) { return { "po-invisible": a0 }; };
-const poSelectContentOffset = 8;
-const poSelectContentPositionDefault = 'bottom';
 const PO_SELECT_FIELD_LABEL_DEFAULT = 'label';
 const PO_SELECT_FIELD_VALUE_DEFAULT = 'value';
 /**
@@ -30703,12 +30980,10 @@ const PO_SELECT_FIELD_VALUE_DEFAULT = 'value';
  */
 class PoSelectComponent extends PoFieldValidateModel {
     /* istanbul ignore next */
-    constructor(element, changeDetector, differs, renderer, controlPosition) {
+    constructor(changeDetector, differs, renderer) {
         super();
-        this.element = element;
         this.changeDetector = changeDetector;
         this.renderer = renderer;
-        this.controlPosition = controlPosition;
         /**
          * @optional
          *
@@ -30734,14 +31009,8 @@ class PoSelectComponent extends PoFieldValidateModel {
          * @default `false`
          */
         this.readonly = false;
-        this.isMobile = isMobile();
-        this.open = false;
-        this.selectIcon = 'po-icon-arrow-down';
         this._fieldLabel = PO_SELECT_FIELD_LABEL_DEFAULT;
         this._fieldValue = PO_SELECT_FIELD_VALUE_DEFAULT;
-        this.onScroll = () => {
-            this.controlPosition.adjustPosition(poSelectContentPositionDefault);
-        };
         this.differ = differs.find([]).create(null);
     }
     /**
@@ -30810,41 +31079,10 @@ class PoSelectComponent extends PoFieldValidateModel {
     get fieldValue() {
         return this._fieldValue;
     }
-    get isInvisibleSelectNative() {
-        return this.readonly && this.isMobile;
-    }
-    onKeydown($event) {
-        const charCode = $event.which || $event.keyCode;
-        // Tratamentos para quando o readonly for ativado.
-        if (this.readonly) {
-            // deve matar o evento do teclado devido a alterar o valor do model mesmo com os options fechados
-            if (charCode !== PoKeyCodeEnum.tab) {
-                this.disableDefaultEventAndToggleButton();
-                $event.preventDefault();
-            }
-            return;
-        }
-        // Seleciona os itens com as teclas "up" e "down"
-        if ((!this.open || $event.altKey) && (charCode === PoKeyCodeEnum.arrowDown || charCode === PoKeyCodeEnum.arrowUp)) {
-            this.disableDefaultEventAndToggleButton();
-        }
-        // Abre o po-select com as teclas "enter" e "espaço"
-        if (charCode === PoKeyCodeEnum.enter || charCode === PoKeyCodeEnum.space) {
-            this.disableDefaultEventAndToggleButton();
-        }
-        // Fecha o po-select com a tecla "tab"
-        if (this.open && charCode === PoKeyCodeEnum.tab) {
-            $event.preventDefault();
-            this.toggleButton();
-        }
-    }
     ngDoCheck() {
         const change = this.differ.diff(this.options);
         if (change) {
-            removeDuplicatedOptions(this.options);
-            removeUndefinedAndNullOptions(this.options);
-            removeDuplicatedOptionsWithFieldValue(this.options, this.fieldValue);
-            removeUndefinedAndNullOptionsWithFieldValue(this.options, this.fieldValue);
+            this.validateOptions(this.options);
         }
     }
     /**
@@ -30869,28 +31107,15 @@ class PoSelectComponent extends PoFieldValidateModel {
             this.selectElement.nativeElement.focus();
         }
     }
-    hideDropDown() {
-        this.selectIcon = 'po-icon-arrow-down';
-        this.selector('.po-select-container').classList.remove('po-select-show');
-        this.open = false;
-        this.changeDetector.markForCheck();
-        this.selectElement.nativeElement.focus();
-        this.removeListeners();
-    }
     onBlur() {
         this.onModelTouched?.();
     }
-    onOptionClick(option) {
-        this.updateValues(option);
-        this.toggleButton();
-    }
     // Altera o valor ao selecionar um item.
     onSelectChange(value) {
         if (value && this.options && this.options.length) {
             const optionFound = this.findOptionValue(value);
             if (optionFound) {
                 this.updateValues(optionFound);
-                this.setScrollPosition(optionFound.value);
             }
         }
     }
@@ -30899,16 +31124,6 @@ class PoSelectComponent extends PoFieldValidateModel {
             this.onSelectChange(this.modelValue);
         }
     }
-    scrollValue(index, clientHeight) {
-        const heightScrollValue = index * this.getSelectItemHeight();
-        return (this.scrollPosition = heightScrollValue > clientHeight ? heightScrollValue : 0);
-    }
-    selector(query) {
-        return this.element.nativeElement.querySelector(query);
-    }
-    toggleButton() {
-        this.open ? this.hideDropDown() : this.showDropdown();
-    }
     // Atualiza valores
     updateValues(option) {
         if (this.selectedValue !== option[this.fieldValue]) {
@@ -30919,13 +31134,6 @@ class PoSelectComponent extends PoFieldValidateModel {
             this.emitChange(option[this.fieldValue]);
         }
     }
-    // Esconde Content do Select quando for clicado fora
-    wasClickedOnToggle(event) {
-        if (!this.selectButtonElement.nativeElement.contains(event.target) &&
-            !this.iconElement.nativeElement.contains(event.target)) {
-            this.hideDropDown();
-        }
-    }
     // Recebe as alterações do model
     onWriteValue(value) {
         const optionFound = this.findOptionValue(value);
@@ -30933,7 +31141,6 @@ class PoSelectComponent extends PoFieldValidateModel {
             this.selectElement.nativeElement.value = optionFound.value;
             this.selectedValue = optionFound[this.fieldValue];
             this.displayValue = optionFound[this.fieldLabel];
-            this.setScrollPosition(optionFound[this.fieldValue]);
         }
         else if (validValue(this.selectedValue)) {
             this.selectElement.nativeElement.value = undefined;
@@ -30956,66 +31163,9 @@ class PoSelectComponent extends PoFieldValidateModel {
         }
         return value === inputValue;
     }
-    // Método necessário para bloquear o evento default do select nativo.
-    // Ao utilizar event.preventDefault(), nos navegadores Firefox e IE o mesmo não cancela o evento.
-    disableDefaultEventAndToggleButton() {
-        this.selectElement.nativeElement.style.display = 'none';
-        setTimeout(() => {
-            this.selectElement.nativeElement.style.display = 'block';
-            this.toggleButton();
-        });
-    }
     findOptionValue(value) {
         return this.options.find(option => this.isEqual(option.value, value));
     }
-    getSelectItemHeight() {
-        const selectItem = this.selector('div.po-select-item');
-        return selectItem && selectItem.clientHeight;
-    }
-    initializeListeners() {
-        this.clickoutListener = this.renderer.listen('document', 'click', (event) => {
-            this.wasClickedOnToggle(event);
-        });
-        this.eventResizeListener = this.renderer.listen('window', 'resize', () => {
-            this.hideDropDown();
-        });
-        window.addEventListener('scroll', this.onScroll, true);
-    }
-    removeListeners() {
-        if (this.clickoutListener) {
-            this.clickoutListener();
-        }
-        this.eventResizeListener();
-        window.removeEventListener('scroll', this.onScroll, true);
-    }
-    setPositionDropdown() {
-        this.controlPosition.setElements(this.contentList.nativeElement, poSelectContentOffset, this.selectButtonElement, ['top', 'bottom'], true);
-        this.controlPosition.adjustPosition(poSelectContentPositionDefault);
-    }
-    setScrollPosition(value) {
-        const ulDropdpwn = this.element.nativeElement.querySelector('ul.po-select-content');
-        if (value && this.options && this.options.length) {
-            const optionFound = this.findOptionValue(value);
-            if (optionFound) {
-                const index = this.options.indexOf(optionFound);
-                ulDropdpwn.scrollTop = this.scrollValue(index, ulDropdpwn.clientHeight);
-            }
-        }
-    }
-    showDropdown() {
-        if (!this.readonly) {
-            this.selectElement.nativeElement.focus();
-            this.selectIcon = 'po-icon-arrow-up';
-            this.selector('.po-select-container').classList.add('po-select-show');
-            this.open = true;
-            this.changeDetector.markForCheck();
-            this.setPositionDropdown();
-            this.initializeListeners();
-            if (this.options && this.options.length) {
-                this.setScrollPosition(this.selectedValue);
-            }
-        }
-    }
     validateOptions(options) {
         removeDuplicatedOptions(options);
         removeUndefinedAndNullOptions(options);
@@ -31023,20 +31173,12 @@ class PoSelectComponent extends PoFieldValidateModel {
         removeUndefinedAndNullOptionsWithFieldValue(options, this.fieldValue);
     }
 }
-PoSelectComponent.ɵfac = function PoSelectComponent_Factory(t) { return new (t || PoSelectComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PoControlPositionService)); };
+PoSelectComponent.ɵfac = function PoSelectComponent_Factory(t) { return new (t || PoSelectComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.IterableDiffers), i0.ɵɵdirectiveInject(i0.Renderer2)); };
 PoSelectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSelectComponent, selectors: [["po-select"]], viewQuery: function PoSelectComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$B, 7, ElementRef);
-        i0.ɵɵviewQuery(_c1$d, 7, ElementRef);
-        i0.ɵɵviewQuery(_c2$3, 7, ElementRef);
-        i0.ɵɵviewQuery(_c3$2, 7, ElementRef);
     } if (rf & 2) {
         let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentList = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.iconElement = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectElement = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectButtonElement = _t.first);
-    } }, hostBindings: function PoSelectComponent_HostBindings(rf, ctx) { if (rf & 1) {
-        i0.ɵɵlistener("keydown", function PoSelectComponent_keydown_HostBindingHandler($event) { return ctx.onKeydown($event); });
     } }, inputs: { readonly: ["p-readonly", "readonly"], placeholder: ["p-placeholder", "placeholder"], options: ["p-options", "options"], fieldLabel: ["p-field-label", "fieldLabel"], fieldValue: ["p-field-value", "fieldValue"] }, outputs: { ngModelChange: "ngModelChange" }, features: [i0.ɵɵProvidersFeature([
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -31047,48 +31189,26 @@ PoSelectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSelectC
                 provide: NG_VALIDATORS,
                 useExisting: forwardRef(() => PoSelectComponent),
                 multi: true
-            },
-            PoControlPositionService
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 17, vars: 28, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-select", 3, "disabled", "ngClass", "required", "change", "blur"], ["select", ""], ["disabled", "", "hidden", "", "selected", "", 4, "ngIf"], [3, "disabled", "value", "click", 4, "ngFor", "ngForOf"], [1, "po-select-container"], [1, "po-select-button", 3, "ngClass", "click"], ["selectButton", ""], [1, "po-field-icon-container-right"], [3, "ngClass"], ["icon", ""], [1, "po-select-content", 3, "ngClass"], ["contentList", ""], [3, "po-select-item-selected", "value", "click", 4, "ngFor", "ngForOf"], ["disabled", "", "hidden", "", "selected", ""], [3, "disabled", "value", "click"], [3, "value", "click"], [1, "po-select-item"], [4, "ngIf", "ngIfThen", "ngIfElse"], ["defaultOptionTemplate", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["optionTemplate", ""]], template: function PoSelectComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "po-field-container", 0)(1, "select", 1, 2);
-        i0.ɵɵlistener("change", function PoSelectComponent_Template_select_change_1_listener($event) { return ctx.onSelectChange($event.target.value); })("blur", function PoSelectComponent_Template_select_blur_1_listener() { return ctx.onBlur(); });
-        i0.ɵɵtemplate(3, PoSelectComponent_option_3_Template, 1, 0, "option", 3);
-        i0.ɵɵtemplate(4, PoSelectComponent_option_4_Template, 2, 3, "option", 4);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(5, "div", 5)(6, "div", 6, 7);
-        i0.ɵɵlistener("click", function PoSelectComponent_Template_div_click_6_listener() { return ctx.toggleButton(); });
-        i0.ɵɵelementStart(8, "span");
-        i0.ɵɵtext(9);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(10, "div", 8);
-        i0.ɵɵelement(11, "span", 9, 10);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(13, "ul", 11, 12);
-        i0.ɵɵtemplate(15, PoSelectComponent_li_15_Template, 7, 10, "li", 13);
+            }
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 11, consts: [[3, "p-label", "p-help", "p-optional"], [1, "po-field-container-content"], [1, "po-select", 3, "disabled", "required", "blur", "change"], ["select", ""], [3, "disabled", "hidden", "selected", "value", 4, "ngIf"], [3, "disabled", "value", 4, "ngFor", "ngForOf"], [3, "disabled", "hidden", "selected", "value"], [3, "disabled", "value"]], template: function PoSelectComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "select", 2, 3);
+        i0.ɵɵlistener("blur", function PoSelectComponent_Template_select_blur_2_listener() { return ctx.onBlur(); })("change", function PoSelectComponent_Template_select_change_2_listener($event) { return ctx.onSelectChange($event.target.value); });
+        i0.ɵɵtemplate(4, PoSelectComponent_option_4_Template, 2, 5, "option", 4);
+        i0.ɵɵtemplate(5, PoSelectComponent_option_5_Template, 2, 3, "option", 5);
         i0.ɵɵelementEnd()();
-        i0.ɵɵelement(16, "po-field-container-bottom");
+        i0.ɵɵelement(6, "po-field-container-bottom");
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵproperty("p-label", ctx.label)("p-help", ctx.help)("p-optional", !ctx.required && ctx.optional);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("disabled", ctx.disabled)("ngClass", i0.ɵɵpureFunction2(17, _c5, ctx.isMobile, ctx.isInvisibleSelectNative))("required", ctx.required);
-        i0.ɵɵattribute("name", ctx.name);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", ctx.isMobile);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", ctx.options);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(20, _c6, ctx.disabled, ctx.readonly));
-        i0.ɵɵadvance(3);
-        i0.ɵɵtextInterpolate(ctx.displayValue || ctx.placeholder);
-        i0.ɵɵadvance(2);
-        i0.ɵɵclassMapInterpolate1("po-icon ", ctx.selectIcon, " po-field-icon");
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(23, _c7, ctx.disabled, ctx.readonly));
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(26, _c8, ctx.isMobile));
+        i0.ɵɵclassProp("po-select-placeholder", !ctx.selectedValue && !!ctx.placeholder);
+        i0.ɵɵproperty("disabled", ctx.disabled)("required", ctx.required);
+        i0.ɵɵattribute("aria-label", ctx.label)("name", ctx.name);
         i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", !ctx.selectedValue || !!ctx.placeholder);
+        i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngForOf", ctx.options);
-    } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i2$1.NgSelectOption, i2$1.ɵNgSelectMultipleOption, PoFieldContainerBottomComponent, PoFieldContainerComponent], encapsulation: 2, changeDetection: 0 });
+    } }, dependencies: [i1.NgForOf, i1.NgIf, i2$1.NgSelectOption, i2$1.ɵNgSelectMultipleOption, PoFieldContainerBottomComponent, PoFieldContainerComponent], encapsulation: 2, changeDetection: 0 });
 __decorate([
     InputBoolean()
 ], PoSelectComponent.prototype, "readonly", void 0);
@@ -31104,21 +31224,11 @@ __decorate([
                         provide: NG_VALIDATORS,
                         useExisting: forwardRef(() => PoSelectComponent),
                         multi: true
-                    },
-                    PoControlPositionService
-                ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <select\n    #select\n    class=\"po-select\"\n    [attr.name]=\"name\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{ 'po-select-mobile': isMobile, 'po-invisible': isInvisibleSelectNative }\"\n    [required]=\"required\"\n    (change)=\"onSelectChange($event.target.value)\"\n    (blur)=\"onBlur()\"\n  >\n    <option *ngIf=\"isMobile\" disabled hidden selected></option>\n    <option\n      *ngFor=\"let option of options\"\n      [disabled]=\"readonly\"\n      [value]=\"option?.[this.fieldValue]\"\n      (click)=\"onOptionClick(option)\"\n    >\n      {{ option?.[this.fieldLabel] }}\n    </option>\n  </select>\n\n  <div class=\"po-select-container\">\n    <div\n      #selectButton\n      class=\"po-select-button\"\n      [ngClass]=\"{ 'po-select-button-disabled': disabled, 'po-select-button-readonly': readonly }\"\n      (click)=\"toggleButton()\"\n    >\n      <span>{{ displayValue || placeholder }}</span>\n\n      <div class=\"po-field-icon-container-right\">\n        <span\n          #icon\n          class=\"po-icon {{ selectIcon }} po-field-icon\"\n          [ngClass]=\"{ 'po-field-icon-disabled': disabled, 'po-field-icon-readonly': readonly }\"\n        ></span>\n      </div>\n    </div>\n\n    <ul #contentList class=\"po-select-content\" [ngClass]=\"{ 'po-invisible': isMobile }\">\n      <li\n        *ngFor=\"let option of options\"\n        [class.po-select-item-selected]=\"selectedValue === option?.[this.fieldLabel]\"\n        [value]=\"option?.[this.fieldValue]\"\n        (click)=\"onOptionClick(option)\"\n      >\n        <div class=\"po-select-item\">\n          <ng-container *ngIf=\"selectOptionTemplate; then optionTemplate; else defaultOptionTemplate\"></ng-container>\n\n          <ng-template #defaultOptionTemplate>\n            <span>{{ option?.[this.fieldLabel] }}</span>\n          </ng-template>\n\n          <ng-template\n            #optionTemplate\n            [ngTemplateOutlet]=\"selectOptionTemplate?.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: option }\"\n          >\n          </ng-template>\n        </div>\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.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }, { type: i0.Renderer2 }, { type: PoControlPositionService }]; }, { contentList: [{
-            type: ViewChild,
-            args: ['contentList', { read: ElementRef, static: true }]
-        }], iconElement: [{
-            type: ViewChild,
-            args: ['icon', { read: ElementRef, static: true }]
-        }], selectElement: [{
+                    }
+                ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <select\n      #select\n      class=\"po-select\"\n      [attr.aria-label]=\"label\"\n      [attr.name]=\"name\"\n      [class.po-select-placeholder]=\"!selectedValue && !!placeholder\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      (blur)=\"onBlur()\"\n      (change)=\"onSelectChange($event.target.value)\"\n    >\n      <option\n        *ngIf=\"!selectedValue || !!placeholder\"\n        [disabled]=\"!!placeholder\"\n        [hidden]=\"!selectedValue && !placeholder\"\n        [selected]=\"!selectedValue\"\n        [value]=\"placeholder ?? ''\"\n      >\n        {{ placeholder }}\n      </option>\n      <option *ngFor=\"let option of options\" [disabled]=\"readonly\" [value]=\"option?.[this.fieldValue]\">\n        {{ option?.[this.fieldLabel] }}\n      </option>\n    </select>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n" }]
+    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }, { type: i0.Renderer2 }]; }, { selectElement: [{
             type: ViewChild,
             args: ['select', { read: ElementRef, static: true }]
-        }], selectButtonElement: [{
-            type: ViewChild,
-            args: ['selectButton', { read: ElementRef, static: true }]
         }], ngModelChange: [{
             type: Output,
             args: ['ngModelChange']
@@ -31137,9 +31247,6 @@ __decorate([
         }], fieldValue: [{
             type: Input,
             args: ['p-field-value']
-        }], onKeydown: [{
-            type: HostListener,
-            args: ['keydown', ['$event']]
         }] }); })();
 
 /**
@@ -31158,6 +31265,9 @@ var PoSwitchLabelPosition;
 })(PoSwitchLabelPosition || (PoSwitchLabelPosition = {}));
 
 const _c0$A = ["switchContainer"];
+function PoSwitchComponent_po_icon_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "po-icon", 9);
+} }
 /**
  * @docsExtends PoFieldModel
  *
@@ -31166,13 +31276,24 @@ const _c0$A = ["switchContainer"];
  * O componente `po-switch` é um [checkbox](/documentation/po-checkbox-group) mais intuitivo, pois faz analogia a um interruptor.
  * Deve ser usado quando deseja-se transmitir a ideia de ligar / desligar uma funcionalidade específica.
  *
- * Pode-se ligar ou deligar o botão utilizando a tecla de espaço ou o clique do mouse.
+ * Pode-se ligar ou desligar o switch utilizando a tecla de espaço ou o clique do mouse.
  *
  * O texto exibido pode ser alterado de acordo com o valor setado aumentando as possibilidades de uso do componente,
  * portanto, recomenda-se informar textos que contextualizem seu uso para que facilite a compreensão do usuário.
  *
  * > O componente não altera o valor incial informado no *model*, portanto indica-se inicializa-lo caso ter necessidade.
  *
+ * #### Boas práticas
+ *
+ * - Evite `labels` extensos que quebram o layout do `po-switch`, use `labels` diretos, curtos e intuitivos.
+ *
+ * #### Acessibilidade tratada no componente
+ *
+ * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas pelo proprietário do conteúdo. São elas:
+ *
+ * - Quando em foco, o switch é ativado usando a tecla de Espaço. [W3C WAI-ARIA 3.5 Switch - Keyboard Interaction](https://www.w3.org/WAI/ARIA/apg/patterns/switch/#keyboard-interaction-19)
+ * - A área do foco precisar ter uma espessura de pelo menos 2 pixels CSS e o foco não pode ficar escondido por outros elementos da tela. [WCAG 2.4.12: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
+ *
  * @example
  *
  * <example name="po-switch-basic" title="PO Switch Basic">
@@ -31278,16 +31399,6 @@ class PoSwitchComponent extends PoFieldModel {
                 return 'right';
         }
     }
-    getSwitchPosition() {
-        switch (this.labelPosition) {
-            case PoSwitchLabelPosition.Left:
-                return 'right';
-            case PoSwitchLabelPosition.Right:
-                return 'left';
-            default:
-                return 'left';
-        }
-    }
     onKeyDown(event) {
         if (event.which === PoKeyCodeEnum.space || event.keyCode === PoKeyCodeEnum.space) {
             event.preventDefault();
@@ -31325,34 +31436,32 @@ PoSwitchComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSwitchC
                 useExisting: forwardRef(() => PoSwitchComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 25, consts: [[3, "p-label", "p-help"], [1, "po-field-container-content", "po-switch-content"], [1, "po-switch-container", "po-clickable", 3, "tabindex", "click", "keydown", "blur"], ["switchContainer", ""], [1, "po-switch-button"], [3, "click"]], template: function PoSwitchComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "div", 2, 3);
-        i0.ɵɵlistener("click", function PoSwitchComponent_Template_div_click_2_listener() { return ctx.eventClick(); })("keydown", function PoSwitchComponent_Template_div_keydown_2_listener($event) { return ctx.onKeyDown($event); })("blur", function PoSwitchComponent_Template_div_blur_2_listener() { return ctx.onBlur(); });
-        i0.ɵɵelementStart(4, "div", 4);
-        i0.ɵɵelement(5, "span");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(6, "span", 5);
-        i0.ɵɵlistener("click", function PoSwitchComponent_Template_span_click_6_listener() { return ctx.eventClick(); });
-        i0.ɵɵtext(7);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelement(8, "po-field-container-bottom");
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 10, consts: [[3, "p-label", "p-help"], [1, "po-field-container-content"], [1, "po-switch"], ["role", "switch", 1, "po-switch-container", 3, "tabindex", "blur", "click", "keydown"], ["switchContainer", ""], [1, "po-switch-track"], [1, "po-switch-toggle"], ["class", "po-switch-icon", "p-icon", "po-icon-ok", 4, "ngIf"], [1, "po-switch-label", 3, "click"], ["p-icon", "po-icon-ok", 1, "po-switch-icon"]], template: function PoSwitchComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3, 4);
+        i0.ɵɵlistener("blur", function PoSwitchComponent_Template_div_blur_3_listener() { return ctx.onBlur(); })("click", function PoSwitchComponent_Template_div_click_3_listener() { return ctx.eventClick(); })("keydown", function PoSwitchComponent_Template_div_keydown_3_listener($event) { return ctx.onKeyDown($event); });
+        i0.ɵɵelementStart(5, "div", 5)(6, "div", 6);
+        i0.ɵɵtemplate(7, PoSwitchComponent_po_icon_7_Template, 1, 0, "po-icon", 7);
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵelementStart(8, "span", 8);
+        i0.ɵɵlistener("click", function PoSwitchComponent_Template_span_click_8_listener() { return ctx.eventClick(); });
+        i0.ɵɵtext(9);
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵelement(10, "po-field-container-bottom");
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵproperty("p-label", ctx.label)("p-help", ctx.help);
         i0.ɵɵadvance(1);
         i0.ɵɵattribute("name", ctx.name);
         i0.ɵɵadvance(1);
-        i0.ɵɵclassProp("po-switch-container-disabled", ctx.disabled)("po-switch-container-off", ctx.value === false && !ctx.disabled)("po-switch-container-on", ctx.value === true && !ctx.disabled)("po-switch-container-right", ctx.getSwitchPosition() === "right");
+        i0.ɵɵattribute("data-label-position", ctx.getLabelPosition());
+        i0.ɵɵadvance(1);
         i0.ɵɵproperty("tabindex", ctx.disabled ? -1 : 0);
+        i0.ɵɵattribute("aria-checked", ctx.value)("aria-disabled", ctx.disabled)("aria-label", ctx.value === true ? ctx.labelOn : ctx.labelOff);
+        i0.ɵɵadvance(4);
+        i0.ɵɵproperty("ngIf", ctx.value === true);
         i0.ɵɵadvance(2);
-        i0.ɵɵclassProp("po-switch-button-on", ctx.value === true)("po-switch-button-off", ctx.value === false)("po-switch-button-disabled", ctx.disabled);
-        i0.ɵɵadvance(1);
-        i0.ɵɵclassMapInterpolate1("po-icon po-icon-", ctx.value === true ? "ok" : "close", "");
-        i0.ɵɵadvance(1);
-        i0.ɵɵclassMapInterpolate1("po-switch-label po-clickable po-switch-label-", ctx.getLabelPosition(), "");
-        i0.ɵɵadvance(1);
         i0.ɵɵtextInterpolate1(" ", ctx.value === true ? ctx.labelOn : ctx.labelOff, " ");
-    } }, dependencies: [PoFieldContainerBottomComponent, PoFieldContainerComponent], encapsulation: 2, changeDetection: 0 });
+    } }, dependencies: [i1.NgIf, PoFieldContainerBottomComponent, PoFieldContainerComponent, PoIconComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoSwitchComponent, [{
         type: Component,
         args: [{ selector: 'po-switch', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -31361,7 +31470,7 @@ PoSwitchComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSwitchC
                         useExisting: forwardRef(() => PoSwitchComponent),
                         multi: true
                     }
-                ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\">\n  <div class=\"po-field-container-content po-switch-content\" [attr.name]=\"name\">\n    <div\n      class=\"po-switch-container po-clickable\"\n      #switchContainer\n      [class.po-switch-container-disabled]=\"disabled\"\n      [class.po-switch-container-off]=\"value === false && !disabled\"\n      [class.po-switch-container-on]=\"value === true && !disabled\"\n      [class.po-switch-container-right]=\"getSwitchPosition() === 'right'\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (click)=\"eventClick()\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"onBlur()\"\n    >\n      <div\n        class=\"po-switch-button\"\n        [class.po-switch-button-on]=\"value === true\"\n        [class.po-switch-button-off]=\"value === false\"\n        [class.po-switch-button-disabled]=\"disabled\"\n      >\n        <span class=\"po-icon po-icon-{{ value === true ? 'ok' : 'close' }}\"></span>\n      </div>\n    </div>\n\n    <span class=\"po-switch-label po-clickable po-switch-label-{{ getLabelPosition() }}\" (click)=\"eventClick()\">\n      {{ value === true ? labelOn : labelOff }}\n    </span>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n" }]
+                ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\">\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        [attr.aria-label]=\"value === true ? labelOn : labelOff\"\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\">\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      <span class=\"po-switch-label\" (click)=\"eventClick()\">\n        {{ value === true ? labelOn : labelOff }}\n      </span>\n    </div>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { switchContainer: [{
             type: ViewChild,
             args: ['switchContainer', { static: true }]
@@ -31393,6 +31502,16 @@ PoSwitchComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSwitchC
  *   [ngModelOptions]="{standalone: true}">
  * </po-textarea>
  * ```
+ *
+ * #### Acessibilidade tratada no componente
+ * Algumas diretrizes de acessibilidade já são tratadas no componente, internamente, e não podem ser alteradas. São elas:
+ *
+ * - O Text area foi desenvolvido com uso de controles padrões HTML, o que permite a identificação do mesmo na interface por tecnologias
+ * assistivas. [WCAG 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
+ * - O foco é visível e possui uma espessura superior a 2 pixels CSS, não ficando escondido por outros
+ * elementos da tela. [WCAG 2.4.12: Focus Appearance)](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-enhanced)
+ * - A identificação do erro acontece também através da mudança de cor do campo, mas também de um ícone
+ * junto da mensagem. [WGAG 1.4.1: Use of Color, 3.2.4: Consistent Identification](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color)
  */
 class PoTextareaBaseComponent {
     constructor(cd) {
@@ -31787,18 +31906,17 @@ PoTextareaComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTexta
                 useExisting: forwardRef(() => PoTextareaComponent),
                 multi: true
             }
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 9, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content"], [1, "po-textarea", 3, "disabled", "placeholder", "readonly", "required", "rows", "blur", "focus", "input"], ["inp", ""]], template: function PoTextareaComponent_Template(rf, ctx) { if (rf & 1) {
+        ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 10, consts: [[3, "p-help", "p-label", "p-optional"], [1, "po-field-container-content"], [1, "po-textarea", 3, "disabled", "placeholder", "readonly", "required", "rows", "blur", "focus", "input"], ["inp", ""]], template: function PoTextareaComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "po-field-container", 0)(1, "div", 1)(2, "textarea", 2, 3);
         i0.ɵɵlistener("blur", function PoTextareaComponent_Template_textarea_blur_2_listener() { return ctx.eventOnBlur(); })("focus", function PoTextareaComponent_Template_textarea_focus_2_listener() { return ctx.eventOnFocus(); })("input", function PoTextareaComponent_Template_textarea_input_2_listener($event) { return ctx.eventOnInput($event); });
-        i0.ɵɵtext(4, "    ");
         i0.ɵɵelementEnd()();
-        i0.ɵɵelement(5, "po-field-container-bottom");
+        i0.ɵɵelement(4, "po-field-container-bottom");
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵproperty("p-help", ctx.help)("p-label", ctx.label)("p-optional", !ctx.required && ctx.optional);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("disabled", ctx.disabled)("placeholder", ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("rows", ctx.rows);
-        i0.ɵɵattribute("name", ctx.name);
+        i0.ɵɵproperty("disabled", ctx.disabled)("placeholder", ctx.disabled ? "" : ctx.placeholder)("readonly", ctx.readonly)("required", ctx.required)("rows", ctx.rows);
+        i0.ɵɵattribute("name", ctx.name)("aria-label", ctx.label);
     } }, dependencies: [PoFieldContainerBottomComponent, PoFieldContainerComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTextareaComponent, [{
         type: Component,
@@ -31813,210 +31931,12 @@ PoTextareaComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTexta
                         useExisting: forwardRef(() => PoTextareaComponent),
                         multi: true
                     }
-                ], template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\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      [placeholder]=\"placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [rows]=\"rows\"\n    >\n    </textarea>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n" }]
+                ], template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\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      [attr.aria-label]=\"label\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"disabled ? '' : placeholder\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [rows]=\"rows\"\n    ></textarea>\n  </div>\n\n  <po-field-container-bottom></po-field-container-bottom>\n</po-field-container>\n" }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { inputEl: [{
             type: ViewChild,
             args: ['inp', { read: ElementRef, static: true }]
         }] }); })();
 
-var PoRadioSize;
-(function (PoRadioSize) {
-    PoRadioSize["medium"] = "medium";
-    PoRadioSize["large"] = "large";
-})(PoRadioSize || (PoRadioSize = {}));
-
-/**
- * @docsPrivate
- *
- * @description
- *
- * O componente `po-radio` é um componente interno e deve ser utilizado em conjunto com o componente `po-radio-group`.
- */
-class PoRadioBaseComponent {
-    constructor() {
-        /** Define o status do *radio* */
-        this.radioValue = false;
-        /**
-         * @optional
-         *
-         * @description
-         *
-         * Define o estado do *radio* como desabilitado;
-         *
-         * @default `false`
-         */
-        this.disabled = false;
-        /**
-         * @optional
-         *
-         * @description
-         *
-         * Evento disparado quando o valor do *radio* for alterado.
-         */
-        this.change = new EventEmitter();
-        this.id = uuid();
-        this._size = PoRadioSize.medium;
-    }
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o tamanho do *radio*
-     * @default `medium`
-     */
-    set size(value) {
-        this._size = PoRadioSize[value] ? PoRadioSize[value] : PoRadioSize.medium;
-    }
-    get size() {
-        return this._size;
-    }
-    changeValue() {
-        if (this.propagateChange) {
-            this.propagateChange(this.radioValue);
-        }
-        this.change.emit(this.radioValue);
-    }
-    checkOption(value) {
-        if (this.disabled) {
-            return;
-        }
-        this.changeModelValue(true);
-        this.changeValue();
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    writeValue(value) {
-        if (value !== this.radioValue) {
-            this.changeModelValue(value);
-        }
-    }
-}
-PoRadioBaseComponent.ɵfac = function PoRadioBaseComponent_Factory(t) { return new (t || PoRadioBaseComponent)(); };
-PoRadioBaseComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PoRadioBaseComponent, inputs: { name: "name", label: ["p-label", "label"], radioValue: ["p-checked", "radioValue"], disabled: ["p-disabled", "disabled"], size: ["p-size", "size"] }, outputs: { change: "p-change" } });
-__decorate([
-    InputBoolean()
-], PoRadioBaseComponent.prototype, "disabled", void 0);
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRadioBaseComponent, [{
-        type: Directive
-    }], null, { name: [{
-            type: Input,
-            args: ['name']
-        }], label: [{
-            type: Input,
-            args: ['p-label']
-        }], radioValue: [{
-            type: Input,
-            args: ['p-checked']
-        }], disabled: [{
-            type: Input,
-            args: ['p-disabled']
-        }], change: [{
-            type: Output,
-            args: ['p-change']
-        }], size: [{
-            type: Input,
-            args: ['p-size']
-        }] }); })();
-
-const _c0$y = ["radioLabel"];
-const _c1$c = function (a0) { return { "po-radio-large": a0 }; };
-const _c2$2 = function (a0) { return { "po-radio-label-disabled": a0 }; };
-/**
- * @docsPrivate
- *
- * @docsExtends PoRadioBaseComponent
- */
-class PoRadioComponent extends PoRadioBaseComponent {
-    constructor(changeDetector) {
-        super();
-        this.changeDetector = changeDetector;
-    }
-    /**
-     * Função que atribui foco ao *radio*.
-     *
-     * Para utilizá-la é necessário capturar a referência do componente no DOM através do `ViewChild`, como por exemplo:
-     *
-     * ```
-     * import { ViewChild } from '@angular/core';
-     * import { PoRadioComponent } from '@po-ui/ng-components';
-     *
-     * ...
-     *
-     * @ViewChild(PoRadioComponent, { static: true }) radio: PoRadioComponent;
-     *
-     * focusRadio() {
-     * this.radio.focus();
-     * }
-     * ```
-     *
-     */
-    focus() {
-        if (this.radioLabel && !this.disabled) {
-            this.radioLabel.nativeElement.focus();
-        }
-    }
-    onBlur() {
-        this.onTouched?.();
-    }
-    onKeyDown(event, value) {
-        if (event.which === PoKeyCodeEnum.space || event.keyCode === PoKeyCodeEnum.space) {
-            this.checkOption(value);
-            event.preventDefault();
-        }
-    }
-    changeModelValue(value) {
-        this.radioValue = typeof value === 'boolean' ? value : false;
-        this.changeDetector.detectChanges();
-    }
-}
-PoRadioComponent.ɵfac = function PoRadioComponent_Factory(t) { return new (t || PoRadioComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-PoRadioComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRadioComponent, selectors: [["po-radio"]], viewQuery: function PoRadioComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$y, 7);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.radioLabel = _t.first);
-    } }, features: [i0.ɵɵProvidersFeature([
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => PoRadioComponent),
-                multi: true
-            }
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 15, consts: [[1, "po-radio-container", 3, "click", "keydown"], ["type", "radio", "role", "radio", 1, "po-radio", 3, "ngClass", "id", "tabindex", "disabled"], ["tabindex", "-1", 1, "po-radio-label", 3, "for", "ngClass"], ["radioLabel", ""]], template: function PoRadioComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵlistener("click", function PoRadioComponent_Template_div_click_0_listener() { return ctx.checkOption(ctx.radioValue); })("keydown", function PoRadioComponent_Template_div_keydown_0_listener($event) { return ctx.onKeyDown($event, ctx.radioValue); });
-        i0.ɵɵelement(1, "input", 1);
-        i0.ɵɵelementStart(2, "label", 2, 3);
-        i0.ɵɵtext(4);
-        i0.ɵɵelementEnd()();
-    } if (rf & 2) {
-        i0.ɵɵattribute("checked", ctx.radioValue);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c1$c, ctx.size === "large"))("id", ctx.id)("tabindex", ctx.disabled ? -1 : 0)("disabled", ctx.disabled);
-        i0.ɵɵattribute("aria-checked", ctx.radioValue)("aria-label", ctx.label)("aria-disabled", ctx.disabled);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("for", ctx.id)("ngClass", i0.ɵɵpureFunction1(13, _c2$2, ctx.disabled));
-        i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", ctx.label, " ");
-    } }, dependencies: [i1.NgClass], encapsulation: 2, changeDetection: 0 });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRadioComponent, [{
-        type: Component,
-        args: [{ selector: 'po-radio', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => PoRadioComponent),
-                        multi: true
-                    }
-                ], template: "<div\n  class=\"po-radio-container\"\n  [attr.checked]=\"radioValue\"\n  (click)=\"checkOption(radioValue)\"\n  (keydown)=\"onKeyDown($event, radioValue)\"\n>\n  <input\n    type=\"radio\"\n    [ngClass]=\"{ 'po-radio-large': size === 'large' }\"\n    [attr.aria-checked]=\"radioValue\"\n    [attr.aria-label]=\"label\"\n    [id]=\"id\"\n    class=\"po-radio\"\n    role=\"radio\"\n    [attr.aria-disabled]=\"disabled\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    [disabled]=\"disabled\"\n  />\n  <label\n    #radioLabel\n    [for]=\"id\"\n    class=\"po-radio-label\"\n    [ngClass]=\"{ 'po-radio-label-disabled': disabled }\"\n    tabindex=\"-1\"\n  >\n    {{ label }}\n  </label>\n</div>\n" }]
-    }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { radioLabel: [{
-            type: ViewChild,
-            args: ['radioLabel', { static: true }]
-        }] }); })();
-
 /**
  * @description
  *
@@ -32498,8 +32418,11 @@ class PoTagBaseComponent {
      *
      * @description
      *
-     * Define uma cor para a *tag*.
-     *
+     * Determina a cor da tag. As maneiras de customizar as cores são:
+     * - Hexadeximal, por exemplo `#c64840`;
+     * - RGB, como `rgb(0, 0, 165)`;
+     * - O nome da cor, por exemplo `blue`;
+     * - Usando uma das cores do tema do PO:
      * Valores válidos:
      *  - <span class="dot po-color-01"></span> `color-01`
      *  - <span class="dot po-color-02"></span> `color-02`
@@ -32514,10 +32437,15 @@ class PoTagBaseComponent {
      *  - <span class="dot po-color-11"></span> `color-11`
      *  - <span class="dot po-color-12"></span> `color-12`
      *
+     * - Para uma melhor acessibilidade no uso do componente é recomendável utilizar cores com um melhor contraste em relação ao background.
+     *
      * > **Atenção:** A propriedade `p-type` sobrepõe esta definição.
      */
     set color(value) {
         this._color = poTagColors.includes(value) ? value : undefined;
+        if (this._color === undefined) {
+            CSS.supports('color', value) ? (this.customColor = value) : (this.customColor = undefined);
+        }
     }
     get color() {
         return this._color;
@@ -32681,12 +32609,15 @@ function PoTagComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.tagOrientation ? ctx_r0.label + ":" : ctx_r0.label);
 } }
+const _c0$y = function (a0) { return { "color": a0 }; };
 function PoTagComponent_po_icon_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "po-icon", 8);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("p-icon", !ctx_r1.type ? ctx_r1.icon : ctx_r1.iconFromType);
+    i0.ɵɵproperty("p-icon", !ctx_r1.type ? ctx_r1.icon : ctx_r1.iconFromType)("ngStyle", !ctx_r1.tagColor && ctx_r1.inverse ? i0.ɵɵpureFunction1(2, _c0$y, ctx_r1.customColor) : "");
 } }
+const _c1$c = function (a0) { return { "background-color": a0 }; };
+const _c2$2 = function (a0) { return { "border": a0 }; };
 const poTagTypeDefault = 'po-tag-' + PoTagType.Info;
 /**
  * @docsExtends PoTagBaseComponent
@@ -32731,7 +32662,9 @@ class PoTagComponent extends PoTagBaseComponent {
         if (this.color) {
             return this.inverse ? `po-text-${this.color}` : `po-${this.color}`;
         }
-        return this.inverse ? `${poTagTypeDefault}-inverse` : poTagTypeDefault;
+        if (!this.customColor) {
+            return this.inverse ? `${poTagTypeDefault}-inverse` : poTagTypeDefault;
+        }
     }
     get tagOrientation() {
         return this.orientation === this.poTagOrientation.Horizontal;
@@ -32747,12 +32680,12 @@ class PoTagComponent extends PoTagBaseComponent {
     }
 }
 PoTagComponent.ɵfac = /*@__PURE__*/ function () { let ɵPoTagComponent_BaseFactory; return function PoTagComponent_Factory(t) { return (ɵPoTagComponent_BaseFactory || (ɵPoTagComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PoTagComponent)))(t || PoTagComponent); }; }();
-PoTagComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTagComponent, selectors: [["po-tag"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 10, consts: [[1, "po-tag-container"], ["class", "po-tag-title po-text-nowrap", 4, "ngIf"], [1, "po-tag-sub-container"], ["tabindex", "0", 1, "po-tag", 3, "ngClass", "click", "keydown.enter", "keydown.space", "keyup.space"], ["class", "po-tag-icon", 3, "p-icon", 4, "ngIf"], [1, "po-tag-value"], [1, "po-tag-title", "po-text-nowrap"], [1, "po-tag-label"], [1, "po-tag-icon", 3, "p-icon"]], template: function PoTagComponent_Template(rf, ctx) { if (rf & 1) {
+PoTagComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTagComponent, selectors: [["po-tag"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 18, consts: [[1, "po-tag-container"], ["class", "po-tag-title po-text-nowrap", 4, "ngIf"], [1, "po-tag-sub-container"], ["tabindex", "0", 1, "po-tag", 3, "ngClass", "ngStyle", "click", "keydown.enter", "keydown.space", "keyup.space"], ["class", "po-tag-icon", 3, "p-icon", "ngStyle", 4, "ngIf"], [1, "po-tag-value", 3, "ngStyle"], [1, "po-tag-title", "po-text-nowrap"], [1, "po-tag-label"], [1, "po-tag-icon", 3, "p-icon", "ngStyle"]], template: function PoTagComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵtemplate(1, PoTagComponent_div_1_Template, 3, 1, "div", 1);
         i0.ɵɵelementStart(2, "div", 2)(3, "div", 3);
         i0.ɵɵlistener("click", function PoTagComponent_Template_div_click_3_listener() { return ctx.onClick(); })("keydown.enter", function PoTagComponent_Template_div_keydown_enter_3_listener($event) { return ctx.onKeyPressed($event); })("keydown.space", function PoTagComponent_Template_div_keydown_space_3_listener($event) { return $event.preventDefault(); })("keyup.space", function PoTagComponent_Template_div_keyup_space_3_listener($event) { return ctx.onKeyPressed($event); });
-        i0.ɵɵtemplate(4, PoTagComponent_po_icon_4_Template, 1, 1, "po-icon", 4);
+        i0.ɵɵtemplate(4, PoTagComponent_po_icon_4_Template, 1, 4, "po-icon", 4);
         i0.ɵɵelementStart(5, "span", 5);
         i0.ɵɵtext(6);
         i0.ɵɵelementEnd()()()();
@@ -32762,15 +32695,17 @@ PoTagComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTagCompone
         i0.ɵɵproperty("ngIf", ctx.label);
         i0.ɵɵadvance(2);
         i0.ɵɵclassProp("po-clickable", ctx.isClickable)("po-tag-inverse", ctx.inverse);
-        i0.ɵɵproperty("ngClass", ctx.tagColor);
+        i0.ɵɵproperty("ngClass", ctx.tagColor)("ngStyle", !ctx.tagColor && !ctx.inverse ? i0.ɵɵpureFunction1(12, _c1$c, ctx.customColor) : !ctx.tagColor && ctx.inverse ? i0.ɵɵpureFunction1(14, _c2$2, "1px solid " + ctx.customColor) : "");
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.icon);
-        i0.ɵɵadvance(2);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngStyle", !ctx.tagColor && ctx.inverse ? i0.ɵɵpureFunction1(16, _c0$y, ctx.customColor) : "");
+        i0.ɵɵadvance(1);
         i0.ɵɵtextInterpolate(ctx.value);
-    } }, dependencies: [i1.NgClass, i1.NgIf, PoIconComponent], encapsulation: 2, changeDetection: 0 });
+    } }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle, PoIconComponent], encapsulation: 2, changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTagComponent, [{
         type: Component,
-        args: [{ selector: 'po-tag', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\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      [class.po-clickable]=\"isClickable\"\n      [class.po-tag-inverse]=\"inverse\"\n      [ngClass]=\"tagColor\"\n      tabindex=\"0\"\n      (click)=\"onClick()\"\n      (keydown.enter)=\"onKeyPressed($event)\"\n      (keydown.space)=\"$event.preventDefault()\"\n      (keyup.space)=\"onKeyPressed($event)\"\n    >\n      <po-icon *ngIf=\"icon\" class=\"po-tag-icon\" [p-icon]=\"!type ? icon : iconFromType\"> </po-icon>\n\n      <span class=\"po-tag-value\">{{ value }}</span>\n    </div>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'po-tag', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-tag-container\" [class.po-tag-container-horizontal]=\"tagOrientation\">\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      [class.po-clickable]=\"isClickable\"\n      [class.po-tag-inverse]=\"inverse\"\n      [ngClass]=\"tagColor\"\n      [ngStyle]=\"\n        !tagColor && !inverse\n          ? { 'background-color': customColor }\n          : !tagColor && inverse\n          ? { 'border': '1px solid ' + customColor }\n          : ''\n      \"\n      tabindex=\"0\"\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\"\n        class=\"po-tag-icon\"\n        [p-icon]=\"!type ? icon : iconFromType\"\n        [ngStyle]=\"!tagColor && inverse ? { 'color': customColor } : ''\"\n      >\n      </po-icon>\n\n      <span class=\"po-tag-value\" [ngStyle]=\"!tagColor && inverse ? { 'color': customColor } : ''\">{{ value }}</span>\n    </div>\n  </div>\n</div>\n" }]
     }], null, null); })();
 
 /**
@@ -40641,7 +40576,7 @@ PoPageListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageL
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterInput = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.poPageContent = _t.first);
-    } }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$5, decls: 4, vars: 1, consts: [[3, "po-page-list-header-padding", "p-breadcrumb", "p-title", 4, "ngIf"], [3, "p-breadcrumb", "p-title"], [1, "po-page-list-operations"], [1, "po-page-list-actions"], ["p-kind", "primary", 3, "p-disabled", "p-icon", "p-label", "p-click", 4, "ngIf"], [3, "p-disabled", "p-label", "p-click", 4, "ngIf"], [3, "p-actions", "p-label", 4, "ngIf"], ["class", "po-page-list-filter-wrapper", 3, "ngClass", 4, "ngIf"], [3, "po-page-list-disclaimer-group", "p-disclaimers", "p-hide-remove-all", "p-title", "p-change", "p-remove", "p-remove-all", 4, "ngIf"], ["p-kind", "primary", 3, "p-disabled", "p-icon", "p-label", "p-click"], [3, "p-disabled", "p-label", "p-click"], [3, "p-actions", "p-label"], [1, "po-page-list-filter-wrapper", 3, "ngClass"], [1, "po-field-container-content", "po-page-filter-content", 3, "ngClass"], [1, "po-field-icon-container-right"], [1, "po-icon", "po-icon-search", "po-field-icon", 3, "click"], ["name", "model", "type", "text", 1, "po-input", "po-input-icon-right", 3, "placeholder", "keypress"], ["filterInput", ""], ["class", "po-page-list-filter-search", 4, "ngIf"], [1, "po-page-list-filter-search"], ["tabindex", "0", 1, "po-page-list-filter-search-link", 3, "click", "keydown.enter"], [3, "p-disclaimers", "p-hide-remove-all", "p-title", "p-change", "p-remove", "p-remove-all"]], template: function PoPageListComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$5, decls: 4, vars: 1, consts: [[3, "po-page-list-header-padding", "p-breadcrumb", "p-title", 4, "ngIf"], [3, "p-breadcrumb", "p-title"], [1, "po-page-list-operations"], [1, "po-page-list-actions"], ["p-kind", "primary", 3, "p-disabled", "p-icon", "p-label", "p-click", 4, "ngIf"], [3, "p-disabled", "p-label", "p-click", 4, "ngIf"], [3, "p-actions", "p-label", 4, "ngIf"], ["class", "po-page-list-filter-wrapper", 3, "ngClass", 4, "ngIf"], [3, "po-page-list-disclaimer-group", "p-disclaimers", "p-hide-remove-all", "p-title", "p-change", "p-remove", "p-remove-all", 4, "ngIf"], ["p-kind", "primary", 3, "p-disabled", "p-icon", "p-label", "p-click"], [3, "p-disabled", "p-label", "p-click"], [3, "p-actions", "p-label"], [1, "po-page-list-filter-wrapper", 3, "ngClass"], [1, "po-field-container-content", "po-page-filter-content", 3, "ngClass"], [1, "po-field-icon-container-right"], [1, "po-icon", "po-icon-search", "po-field-icon", "po-icon-input", 3, "click"], ["name", "model", "type", "text", 1, "po-input", "po-input-icon-right", 3, "placeholder", "keypress"], ["filterInput", ""], ["class", "po-page-list-filter-search", 4, "ngIf"], [1, "po-page-list-filter-search"], ["tabindex", "0", 1, "po-page-list-filter-search-link", 3, "click", "keydown.enter"], [3, "p-disclaimers", "p-hide-remove-all", "p-title", "p-change", "p-remove", "p-remove-all"]], template: function PoPageListComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵprojectionDef();
         i0.ɵɵelementStart(0, "po-page");
         i0.ɵɵtemplate(1, PoPageListComponent_po_page_header_1_Template, 9, 12, "po-page-header", 0);
@@ -40654,7 +40589,7 @@ PoPageListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageL
     } }, dependencies: [i1.NgClass, i1.NgIf, PoButtonComponent, PoDisclaimerGroupComponent, PoDropdownComponent, PoPageComponent, PoPageContentComponent, PoPageHeaderComponent], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageListComponent, [{
         type: Component,
-        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\" (click)=\"callActionFilter('action')\"> </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          />\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" }]
+        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          />\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']
@@ -43641,9 +43576,11 @@ class PoTreeViewBaseComponent {
     //  - adiciona o childItem no parentItem;
     //  - marca o parentItem caso conter subItems marcodos ou nulos;
     // Se não conter parentItem, adiciona o childItem no items.
-    addItem(items, childItem, parentItem) {
+    addItem(items, childItem, parentItem, isNewItem) {
         if (parentItem) {
-            this.expandParentItem(childItem, parentItem);
+            if (isNewItem) {
+                this.expandParentItem(childItem, parentItem);
+            }
             this.addChildItemInParent(childItem, parentItem);
             this.selectItemBySubItems(parentItem);
             items.push(parentItem);
@@ -43699,7 +43636,7 @@ class PoTreeViewBaseComponent {
                 this.getItemsByMaxLevel(subItems, ++level, currentItem);
                 --level;
             }
-            this.addItem(newItems, currentItem, parentItem);
+            this.addItem(newItems, currentItem, parentItem, true);
         });
         return newItems;
     }