@po-ui/ng-components 6.0.0 → 6.4.0

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

@@ -2501,10 +2501,14 @@ const PO_BUTTON_TYPE_DEFAULT = 'default';
 class PoButtonBaseComponent {
     constructor() {
         /**
+         * @deprecated 14.x.x
+         *
          * @optional
          *
          * @description
          *
+         * **Deprecated 14.x.x**.
+         *
          * Aplica foco no elemento ao ser iniciado.
          * > Caso mais de um elemento seja configurado com essa propriedade,
          * o último elemento declarado com ela terá o foco.
@@ -7645,7 +7649,7 @@ PoChartPieComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoChart
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.canDisplayLabels);
         }
-    }, directives: [i1.NgForOf, i1.NgIf, PoChartCircularPathComponent, PoChartCircularLabelComponent], encapsulation: 2 });
+    }, directives: [i1.NgForOf, PoChartCircularPathComponent, i1.NgIf, PoChartCircularLabelComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartPieComponent, [{
             type: Component,
@@ -7815,7 +7819,7 @@ PoChartDonutComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoCha
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.canDisplayLabels);
         }
-    }, directives: [i1.NgForOf, i1.NgIf, PoChartCircularPathComponent, PoChartCircularLabelComponent], encapsulation: 2 });
+    }, directives: [i1.NgForOf, PoChartCircularPathComponent, i1.NgIf, PoChartCircularLabelComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoChartDonutComponent, [{
             type: Component,
@@ -9111,7 +9115,7 @@ PoDisclaimerGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.disclaimers.length > 0);
         }
-    }, directives: [i1.NgIf, i1.NgForOf, PoDisclaimerRemoveComponent, PoDisclaimerComponent], encapsulation: 2 });
+    }, directives: [i1.NgIf, PoDisclaimerRemoveComponent, i1.NgForOf, PoDisclaimerComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDisclaimerGroupComponent, [{
             type: Component,
@@ -9480,8 +9484,9 @@ function PoPopupComponent_div_0_ng_container_5_Template(rf, ctx) {
     }
     if (rf & 2) {
         const action_r4 = ctx.$implicit;
+        const ctx_r3 = i0.ɵɵnextContext(2);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", action_r4.visible !== false);
+        i0.ɵɵproperty("ngIf", ctx_r3.returnBooleanValue(action_r4, "visible") !== false);
     }
 }
 function PoPopupComponent_div_0_Template(rf, ctx) {
@@ -9671,7 +9676,7 @@ PoPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPopupCom
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPopupComponent, [{
             type: Component,
-            args: [{ selector: 'po-popup', providers: [PoControlPositionService], template: "<div #popupRef class=\"po-popup\" *ngIf=\"showPopup\">\n  <div *ngIf=\"!hideArrow\" class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n\n  <ng-content select=\"[p-popup-header-template]\"></ng-content>\n\n  <div class=\"po-popup-container\">\n    <ng-container *ngFor=\"let action of actions; let actionIndex = index\">\n      <div\n        *ngIf=\"action.visible !== false\"\n        [class.po-popup-item-default]=\"action.type !== 'danger'\"\n        [class.po-popup-item-danger]=\"action.type === 'danger'\"\n        [class.po-popup-item-disabled]=\"returnBooleanValue(action, 'disabled')\"\n        [class.po-popup-item-separator]=\"action.separator && actionIndex !== 0\"\n        [class.po-popup-item-selected]=\"action.selected\"\n        (click)=\"onActionClick(action)\"\n      >\n        <po-icon *ngIf=\"action.icon\" class=\"po-popup-icon-item po-icon\" [p-icon]=\"action.icon\"></po-icon>\n        {{ action.label }}\n      </div>\n    </ng-container>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'po-popup', providers: [PoControlPositionService], template: "<div #popupRef class=\"po-popup\" *ngIf=\"showPopup\">\n  <div *ngIf=\"!hideArrow\" class=\"po-popup-arrow po-arrow-{{ arrowDirection }}\"></div>\n\n  <ng-content select=\"[p-popup-header-template]\"></ng-content>\n\n  <div class=\"po-popup-container\">\n    <ng-container *ngFor=\"let action of actions; let actionIndex = index\">\n      <div\n        *ngIf=\"returnBooleanValue(action, 'visible') !== false\"\n        [class.po-popup-item-default]=\"action.type !== 'danger'\"\n        [class.po-popup-item-danger]=\"action.type === 'danger'\"\n        [class.po-popup-item-disabled]=\"returnBooleanValue(action, 'disabled')\"\n        [class.po-popup-item-separator]=\"action.separator && actionIndex !== 0\"\n        [class.po-popup-item-selected]=\"action.selected\"\n        (click)=\"onActionClick(action)\"\n      >\n        <po-icon *ngIf=\"action.icon\" class=\"po-popup-icon-item po-icon\" [p-icon]=\"action.icon\"></po-icon>\n        {{ action.label }}\n      </div>\n    </ng-container>\n  </div>\n</div>\n" }]
         }], function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i2.Router }, { type: PoControlPositionService }, { type: i0.ChangeDetectorRef }]; }, { popupRef: [{
                 type: ViewChild,
                 args: ['popupRef', { read: ElementRef }]
@@ -12053,7 +12058,7 @@ PoDatepickerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDat
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("p-error-pattern", ctx.getErrorPattern());
         }
-    }, directives: [PoFieldContainerComponent, i1.NgClass, i1.NgIf, PoCalendarComponent, i3.NgControlStatus, i3.NgModel, PoFieldContainerBottomComponent, PoCleanComponent], encapsulation: 2, changeDetection: 0 });
+    }, directives: [PoFieldContainerComponent, i1.NgClass, i1.NgIf, PoCleanComponent, PoCalendarComponent, i3.NgControlStatus, i3.NgModel, PoFieldContainerBottomComponent], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDatepickerComponent, [{
             type: Component,
@@ -14634,9 +14639,9 @@ class PoTableColumnManagerComponent {
         }
     }
     stringify(columns) {
-        // não faz o stringify da propriedade icon, pois pode conter objeto complexo e disparar um erro.
+        // não faz o stringify da propriedade icon e searchService, pois pode conter objeto complexo e disparar um erro.
         return JSON.stringify(columns, (key, value) => {
-            if (key !== 'icon') {
+            if (key !== 'icon' && key !== 'searchService') {
                 return value;
             }
         });
@@ -16186,7 +16191,7 @@ PoTableSubtitleFooterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.showSubtitle);
         }
-    }, directives: [i1.NgForOf, i1.NgIf, PoTableSubtitleCircleComponent, PoTableShowSubtitleComponent], encapsulation: 2 });
+    }, directives: [i1.NgForOf, PoTableSubtitleCircleComponent, i1.NgIf, PoTableShowSubtitleComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableSubtitleFooterComponent, [{
             type: Component,
@@ -17236,11 +17241,11 @@ function PoTableComponent_ng_template_4_ng_container_12_tbody_1_Template(rf, ctx
         i0.ɵɵelementStart(1, "tr", 61);
         i0.ɵɵtemplate(2, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_2_Template, 2, 4, "td", 64);
         i0.ɵɵtemplate(3, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_3_Template, 2, 5, "td", 65);
-        i0.ɵɵtemplate(4, PoTableComponent_ng_template_4_ng_container_12_tbody_1_4_Template, 1, 5, undefined, 21);
+        i0.ɵɵtemplate(4, PoTableComponent_ng_template_4_ng_container_12_tbody_1_4_Template, 1, 5, null, 21);
         i0.ɵɵtemplate(5, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_5_Template, 2, 5, "td", 65);
         i0.ɵɵtemplate(6, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_6_Template, 15, 31, "td", 66);
         i0.ɵɵtemplate(7, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_7_Template, 2, 5, "td", 65);
-        i0.ɵɵtemplate(8, PoTableComponent_ng_template_4_ng_container_12_tbody_1_8_Template, 1, 5, undefined, 21);
+        i0.ɵɵtemplate(8, PoTableComponent_ng_template_4_ng_container_12_tbody_1_8_Template, 1, 5, null, 21);
         i0.ɵɵtemplate(9, PoTableComponent_ng_template_4_ng_container_12_tbody_1_ng_container_9_Template, 2, 0, "ng-container", 21);
         i0.ɵɵtemplate(10, PoTableComponent_ng_template_4_ng_container_12_tbody_1_td_10_Template, 1, 0, "td", 67);
         i0.ɵɵelementEnd();
@@ -18083,7 +18088,7 @@ PoTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoTableCom
             i0.ɵɵadvance(16);
             i0.ɵɵproperty("ngIf", !ctx.hideColumnsManager);
         }
-    }, directives: [i1.NgIf, PoPopupComponent, PoContainerComponent, i1.NgTemplateOutlet, PoLoadingComponent, i1.NgForOf, PoTableSubtitleFooterComponent, PoButtonComponent, PoTooltipDirective, i1.NgClass, i1.NgSwitch, i1.NgSwitchCase, i1.NgSwitchDefault, PoTableColumnLinkComponent, PoTableColumnIconComponent, PoTableSubtitleCircleComponent, PoTableColumnLabelComponent, PoTableDetailComponent, PoIconComponent, PoTableColumnManagerComponent], pipes: [i1.CurrencyPipe, i1.DatePipe, PoTimePipe, i1.TitleCasePipe], encapsulation: 2 });
+    }, directives: [i1.NgIf, PoContainerComponent, i1.NgTemplateOutlet, PoLoadingComponent, i1.NgForOf, PoTableSubtitleFooterComponent, PoButtonComponent, PoTooltipDirective, i1.NgClass, i1.NgSwitch, i1.NgSwitchCase, PoTableColumnLinkComponent, PoTableColumnIconComponent, PoTableSubtitleCircleComponent, PoTableColumnLabelComponent, i1.NgSwitchDefault, PoTableDetailComponent, PoPopupComponent, PoIconComponent, PoTableColumnManagerComponent], pipes: [i1.CurrencyPipe, i1.DatePipe, PoTimePipe, i1.TitleCasePipe], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoTableComponent, [{
             type: Component,
@@ -20198,11 +20203,11 @@ PoComboComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoComboCom
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.isServerSearching)("ngIfThen", _r6)("ngIfElse", _r8);
         }
-    }, directives: [PoFieldContainerComponent, i1.NgIf, i1.NgClass, PoFieldContainerBottomComponent, PoIconComponent, PoCleanComponent, PoLoadingComponent, i1.NgForOf, i1.NgTemplateOutlet], encapsulation: 2 });
+    }, directives: [PoFieldContainerComponent, i1.NgIf, PoIconComponent, i1.NgClass, PoCleanComponent, PoFieldContainerBottomComponent, PoLoadingComponent, i1.NgForOf, i1.NgTemplateOutlet], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoComboComponent, [{
             type: Component,
-            args: [{ selector: 'po-combo', providers: [
+            args: [{ selector: 'po-combo', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         PoComboFilterService,
                         PoControlPositionService,
                         {
@@ -21260,7 +21265,7 @@ PoDatepickerRangeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.isCalendarVisible);
         }
-    }, directives: [PoFieldContainerComponent, i1.NgIf, PoFieldContainerBottomComponent, PoCleanComponent, PoCalendarComponent, i3.NgControlStatus, i3.NgModel], encapsulation: 2, changeDetection: 0 });
+    }, directives: [PoFieldContainerComponent, i1.NgIf, PoCleanComponent, PoFieldContainerBottomComponent, PoCalendarComponent, i3.NgControlStatus, i3.NgModel], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDatepickerRangeComponent, [{
             type: Component,
@@ -22310,7 +22315,7 @@ PoDecimalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDecima
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("p-error-pattern", ctx.getErrorPatternMessage());
         }
-    }, directives: [PoFieldContainerComponent, i1.NgIf, PoFieldContainerBottomComponent, PoIconComponent, PoCleanComponent], encapsulation: 2, changeDetection: 0 });
+    }, directives: [PoFieldContainerComponent, i1.NgIf, PoIconComponent, PoCleanComponent, PoFieldContainerBottomComponent], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDecimalComponent, [{
             type: Component,
@@ -22693,7 +22698,7 @@ PoEmailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoEmailCom
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("p-error-pattern", ctx.getErrorPattern());
         }
-    }, directives: [PoFieldContainerComponent, i1.NgIf, PoFieldContainerBottomComponent, PoIconComponent, PoCleanComponent], encapsulation: 2, changeDetection: 0 });
+    }, directives: [PoFieldContainerComponent, i1.NgIf, PoIconComponent, PoCleanComponent, PoFieldContainerBottomComponent], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoEmailComponent, [{
             type: Component,
@@ -22793,7 +22798,7 @@ PoLoginComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLoginCom
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("p-error-pattern", ctx.getErrorPattern());
         }
-    }, directives: [PoFieldContainerComponent, i1.NgIf, PoFieldContainerBottomComponent, PoCleanComponent], encapsulation: 2, changeDetection: 0 });
+    }, directives: [PoFieldContainerComponent, i1.NgIf, PoCleanComponent, PoFieldContainerBottomComponent], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLoginComponent, [{
             type: Component,
@@ -23440,7 +23445,17 @@ class PoLookupModalBaseComponent {
         // eslint-disable-next-line @typescript-eslint/member-ordering
         this.primaryAction = {
             action: () => {
-                const selectedsItems = this.selecteds;
+                let selectedsItems = [];
+                if (!this.multiple) {
+                    this.items.forEach(element => {
+                        if (element['$selected']) {
+                            selectedsItems.push(element);
+                        }
+                    });
+                }
+                else {
+                    selectedsItems = this.selecteds;
+                }
                 this.model.emit(selectedsItems);
                 this.poModal.close();
             },
@@ -24352,7 +24367,7 @@ PoLookupModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLo
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("hidden", !ctx.isAdvancedFilter);
         }
-    }, directives: [PoModalComponent, PoFieldContainerComponent, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i1.NgIf, PoTableComponent, PoDisclaimerGroupComponent], encapsulation: 2 });
+    }, directives: [PoModalComponent, PoFieldContainerComponent, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i1.NgIf, PoDisclaimerGroupComponent, PoTableComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLookupModalComponent, [{
             type: Component,
@@ -24602,10 +24617,11 @@ const providers$2 = [
  * </example>
  */
 class PoLookupComponent extends PoLookupBaseComponent {
-    constructor(renderer, poLookupFilterService, poLookupModalService, injector) {
+    constructor(renderer, poLookupFilterService, poLookupModalService, cd, injector) {
         super(poLookupFilterService, injector);
         this.renderer = renderer;
         this.poLookupModalService = poLookupModalService;
+        this.cd = cd;
         this.initialized = false;
         this.visibleElement = false;
         this.disclaimers = [];
@@ -24631,6 +24647,7 @@ class PoLookupComponent extends PoLookupBaseComponent {
             this.debounceResize();
             this.visibleElement = true;
         }
+        this.cd.markForCheck();
     }
     ngOnDestroy() {
         if (this.modalSubscription) {
@@ -24706,6 +24723,7 @@ class PoLookupComponent extends PoLookupBaseComponent {
     setDisclaimers(selectedOptions) {
         this.disclaimers = selectedOptions.map(selectedOption => (Object.assign({ value: selectedOption[this.fieldValue], label: selectedOption[this.fieldLabel] }, selectedOption)));
         this.visibleDisclaimers = [...this.disclaimers];
+        this.cd.markForCheck();
     }
     setViewValue(value, object) {
         if (this.inputEl && this.fieldFormat) {
@@ -24714,6 +24732,7 @@ class PoLookupComponent extends PoLookupBaseComponent {
         else if (this.inputEl) {
             this.inputEl.nativeElement.value = this.valueToModel || this.valueToModel === 0 ? value : '';
         }
+        this.cd.markForCheck();
     }
     getViewValue() {
         return this.inputEl.nativeElement.value;
@@ -24837,7 +24856,7 @@ 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.Injector)); };
+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$O, 5, ElementRef);
@@ -24860,12 +24879,12 @@ PoLookupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoLookupC
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", !ctx.disclaimers.length)("ngIfElse", _r1);
         }
-    }, directives: [PoFieldContainerComponent, i1.NgIf, PoFieldContainerBottomComponent, i1.NgClass, PoCleanComponent, i1.NgForOf, PoDisclaimerComponent], encapsulation: 2 });
+    }, directives: [PoFieldContainerComponent, i1.NgIf, i1.NgClass, PoCleanComponent, PoFieldContainerBottomComponent, i1.NgForOf, PoDisclaimerComponent], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoLookupComponent, [{
             type: Component,
-            args: [{ selector: 'po-lookup', 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" }]
-        }], function () { return [{ type: i0.Renderer2 }, { type: PoLookupFilterService }, { type: PoLookupModalService }, { type: i0.Injector }]; }, { inputEl: [{
+            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" }]
+        }], function () { return [{ type: i0.Renderer2 }, { type: PoLookupFilterService }, { type: PoLookupModalService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, { inputEl: [{
                 type: ViewChild,
                 args: ['inp', { read: ElementRef, static: false }]
             }] });
@@ -24955,7 +24974,8 @@ function PoMultiselectDropdownComponent_ng_container_7_Template(rf, ctx) {
  * Componente que construíra o dropdown, contendo o campo de pesquisa e os itens para seleção.
  */
 class PoMultiselectDropdownComponent {
-    constructor() {
+    constructor(cd) {
+        this.cd = cd;
         /** Propriedade que indica se deve exibir o loading. */
         this.isServerSearching = false;
         /** Propriedade que indica se o campo de pesquisa deverá ser escondido. */
@@ -24992,6 +25012,7 @@ class PoMultiselectDropdownComponent {
     }
     scrollTo(index) {
         this.scrollTop = index <= 2 ? 0 : index * 44 - 88;
+        this.cd.markForCheck();
     }
     isSelectedItem(option) {
         return this.selectedOptions.some(selectedItem => selectedItem.value === option.value);
@@ -25050,6 +25071,7 @@ class PoMultiselectDropdownComponent {
                 this.searchElement.clean();
             }
         });
+        this.cd.markForCheck();
     }
     uniqueSelectedOptions(selectedValues) {
         const newSelectedOptions = [...this.selectedOptions];
@@ -25061,7 +25083,7 @@ class PoMultiselectDropdownComponent {
         return newSelectedOptions;
     }
 }
-PoMultiselectDropdownComponent.ɵfac = function PoMultiselectDropdownComponent_Factory(t) { return new (t || 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$N, 7, ElementRef);
@@ -25102,12 +25124,12 @@ PoMultiselectDropdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", !ctx.isServerSearching);
         }
-    }, encapsulation: 2 });
+    }, encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectDropdownComponent, [{
             type: Component,
-            args: [{ selector: 'po-multiselect-dropdown', 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" }]
-        }], null, { isServerSearching: [{
+            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" }]
+        }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { isServerSearching: [{
                 type: Input,
                 args: ['p-searching']
             }], hideSearch: [{
@@ -26014,6 +26036,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
                 }
             }
         }
+        this.changeDetector.markForCheck();
     }
     changeItems(changedItems) {
         this.updateSelectedOptions(changedItems);
@@ -26040,6 +26063,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
                 this.calculateVisibleItems();
             }, 200);
         }
+        this.changeDetector.markForCheck();
     }
     onBlur() {
         var _a;
@@ -26080,6 +26104,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
     }
     setVisibleOptionsDropdown(options) {
         this.visibleOptionsDropdown = options;
+        this.changeDetector.markForCheck();
     }
     changeSearch(event) {
         if (event && event.value !== undefined) {
@@ -26177,6 +26202,7 @@ class PoMultiselectComponent extends PoMultiselectBaseComponent {
             this.resizeListener();
         }
         window.removeEventListener('scroll', this.onScroll, true);
+        this.changeDetector.markForCheck();
     }
     setPositionDropdown() {
         this.controlPosition.setElements(this.dropdown.container.nativeElement, poMultiselectContainerOffset, this.inputElement, ['top', 'bottom'], true);
@@ -26234,11 +26260,11 @@ PoMultiselectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoMu
             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);
         }
-    }, encapsulation: 2 });
+    }, encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectComponent, [{
             type: Component,
-            args: [{ selector: 'po-multiselect', 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      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" }]
         }], 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 }]
@@ -26320,7 +26346,8 @@ const _c0$L = ["inputElement"];
  * Componente de pesquisa que será criado dentro do dropdown do `po-multiselect`.
  */
 class PoMultiselectSearchComponent {
-    constructor() {
+    constructor(cd) {
+        this.cd = cd;
         /** Evento que será disparado a cada tecla digitada no campo de busca. */
         this.change = new EventEmitter();
     }
@@ -26352,9 +26379,10 @@ class PoMultiselectSearchComponent {
     }
     clean() {
         this.inputElement.nativeElement.value = '';
+        this.cd.markForCheck();
     }
 }
-PoMultiselectSearchComponent.ɵfac = function PoMultiselectSearchComponent_Factory(t) { return new (t || 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$L, 7, ElementRef);
@@ -26378,12 +26406,12 @@ PoMultiselectSearchComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("placeholder", ctx.placeholder);
         }
-    }, encapsulation: 2 });
+    }, encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMultiselectSearchComponent, [{
             type: Component,
-            args: [{ selector: 'po-multiselect-search', 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" }]
-        }], null, { inputElement: [{
+            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" }]
+        }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { inputElement: [{
                 type: ViewChild,
                 args: ['inputElement', { read: ElementRef, static: true }]
             }], literals: [{
@@ -27917,6 +27945,72 @@ PoUploadDragDropAreaComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
             }] });
 })();
 
+const _c0$I = ["DragDropAreaFixed"];
+class PoUploadDragDropAreaOverlayComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.areaElement = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        if (this.target) {
+            this.setPosition(this.target);
+        }
+        this.areaElement.emit(this.DragDropAreaFixed.nativeElement);
+    }
+    setPosition(targetElement) {
+        const boundingClientRect = targetElement.nativeElement.getBoundingClientRect();
+        const clientRectKeys = ['bottom', 'left', 'height', 'right', 'top', 'width'];
+        clientRectKeys.forEach(clientRectKey => {
+            const clientRectValue = boundingClientRect[clientRectKey];
+            this.renderer.setStyle(this.DragDropAreaFixed.nativeElement, clientRectKey, `${clientRectValue}px`);
+        });
+    }
+}
+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$I, 7, ElementRef);
+        }
+        if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.DragDropAreaFixed = _t.first);
+        }
+    }, inputs: { directoryCompatible: ["p-directory-compatible", "directoryCompatible"], disabled: ["p-disabled", "disabled"], literals: ["p-literals", "literals"], target: ["p-target", "target"] }, outputs: { areaElement: "p-area-element" }, decls: 3, vars: 4, consts: [[1, "po-overlay-fixed"], [1, "po-upload-drag-drop-area-overlay", 3, "p-directory-compatible", "p-disabled", "p-literals", "p-overlay"], ["DragDropAreaFixed", ""]], template: function PoUploadDragDropAreaOverlayComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵelement(1, "po-upload-drag-drop-area", 1, 2);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("p-directory-compatible", ctx.directoryCompatible)("p-disabled", ctx.disabled)("p-literals", ctx.literals)("p-overlay", true);
+        }
+    }, directives: [PoUploadDragDropAreaComponent], encapsulation: 2, changeDetection: 0 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoUploadDragDropAreaOverlayComponent, [{
+            type: Component,
+            args: [{ selector: 'po-upload-drag-drop-area-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-overlay-fixed\">\n  <po-upload-drag-drop-area\n    #DragDropAreaFixed\n    class=\"po-upload-drag-drop-area-overlay\"\n    [p-directory-compatible]=\"directoryCompatible\"\n    [p-disabled]=\"disabled\"\n    [p-literals]=\"literals\"\n    [p-overlay]=\"true\"\n  >\n  </po-upload-drag-drop-area>\n</div>\n" }]
+        }], function () { return [{ type: i0.Renderer2 }]; }, { DragDropAreaFixed: [{
+                type: ViewChild,
+                args: ['DragDropAreaFixed', { read: ElementRef, static: true }]
+            }], directoryCompatible: [{
+                type: Input,
+                args: ['p-directory-compatible']
+            }], disabled: [{
+                type: Input,
+                args: ['p-disabled']
+            }], literals: [{
+                type: Input,
+                args: ['p-literals']
+            }], target: [{
+                type: Input,
+                args: ['p-target']
+            }], areaElement: [{
+                type: Output,
+                args: ['p-area-element']
+            }] });
+})();
+
 /**
  * @description
  *
@@ -28294,72 +28388,6 @@ PoUploadDragDropDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: P
             }] });
 })();
 
-const _c0$I = ["DragDropAreaFixed"];
-class PoUploadDragDropAreaOverlayComponent {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this.areaElement = new EventEmitter();
-    }
-    ngAfterViewInit() {
-        if (this.target) {
-            this.setPosition(this.target);
-        }
-        this.areaElement.emit(this.DragDropAreaFixed.nativeElement);
-    }
-    setPosition(targetElement) {
-        const boundingClientRect = targetElement.nativeElement.getBoundingClientRect();
-        const clientRectKeys = ['bottom', 'left', 'height', 'right', 'top', 'width'];
-        clientRectKeys.forEach(clientRectKey => {
-            const clientRectValue = boundingClientRect[clientRectKey];
-            this.renderer.setStyle(this.DragDropAreaFixed.nativeElement, clientRectKey, `${clientRectValue}px`);
-        });
-    }
-}
-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$I, 7, ElementRef);
-        }
-        if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.DragDropAreaFixed = _t.first);
-        }
-    }, inputs: { directoryCompatible: ["p-directory-compatible", "directoryCompatible"], disabled: ["p-disabled", "disabled"], literals: ["p-literals", "literals"], target: ["p-target", "target"] }, outputs: { areaElement: "p-area-element" }, decls: 3, vars: 4, consts: [[1, "po-overlay-fixed"], [1, "po-upload-drag-drop-area-overlay", 3, "p-directory-compatible", "p-disabled", "p-literals", "p-overlay"], ["DragDropAreaFixed", ""]], template: function PoUploadDragDropAreaOverlayComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelement(1, "po-upload-drag-drop-area", 1, 2);
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("p-directory-compatible", ctx.directoryCompatible)("p-disabled", ctx.disabled)("p-literals", ctx.literals)("p-overlay", true);
-        }
-    }, directives: [PoUploadDragDropAreaComponent], encapsulation: 2, changeDetection: 0 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoUploadDragDropAreaOverlayComponent, [{
-            type: Component,
-            args: [{ selector: 'po-upload-drag-drop-area-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"po-overlay-fixed\">\n  <po-upload-drag-drop-area\n    #DragDropAreaFixed\n    class=\"po-upload-drag-drop-area-overlay\"\n    [p-directory-compatible]=\"directoryCompatible\"\n    [p-disabled]=\"disabled\"\n    [p-literals]=\"literals\"\n    [p-overlay]=\"true\"\n  >\n  </po-upload-drag-drop-area>\n</div>\n" }]
-        }], function () { return [{ type: i0.Renderer2 }]; }, { DragDropAreaFixed: [{
-                type: ViewChild,
-                args: ['DragDropAreaFixed', { read: ElementRef, static: true }]
-            }], directoryCompatible: [{
-                type: Input,
-                args: ['p-directory-compatible']
-            }], disabled: [{
-                type: Input,
-                args: ['p-disabled']
-            }], literals: [{
-                type: Input,
-                args: ['p-literals']
-            }], target: [{
-                type: Input,
-                args: ['p-target']
-            }], areaElement: [{
-                type: Output,
-                args: ['p-area-element']
-            }] });
-})();
-
 const _c0$H = ["dragDropOverlay"];
 function PoUploadDragDropComponent_po_upload_drag_drop_area_overlay_0_Template(rf, ctx) {
     if (rf & 1) {
@@ -28432,7 +28460,7 @@ PoUploadDragDropComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: P
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("p-area-element", ctx.areaElement)("p-directory-compatible", ctx.directoryCompatible)("p-disabled", ctx.disabled)("p-height", ctx.dragDropHeight)("p-literals", ctx.literals)("p-overlay", false);
         }
-    }, directives: [i1.NgIf, PoUploadDragDropAreaComponent, PoUploadDragDropDirective, PoUploadDragDropAreaOverlayComponent], encapsulation: 2, changeDetection: 0 });
+    }, directives: [i1.NgIf, PoUploadDragDropAreaOverlayComponent, PoUploadDragDropAreaComponent, PoUploadDragDropDirective], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoUploadDragDropComponent, [{
             type: Component,
@@ -28736,11 +28764,12 @@ function PoUploadComponent_po_button_8_Template(rf, ctx) {
  * </example>
  */
 class PoUploadComponent extends PoUploadBaseComponent {
-    constructor(uploadService, renderer, i18nPipe, notification, languageService) {
+    constructor(uploadService, renderer, i18nPipe, notification, cd, languageService) {
         super(uploadService, languageService);
         this.renderer = renderer;
         this.i18nPipe = i18nPipe;
         this.notification = notification;
+        this.cd = cd;
         this.infoByUploadStatus = {
             [PoUploadStatus.Uploaded]: {
                 text: () => this.literals.sentWithSuccess,
@@ -28925,6 +28954,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
             else {
                 this.stopUploadHandler(file);
             }
+            this.cd.markForCheck();
         });
     }
     trackByFn(index, file) {
@@ -28954,6 +28984,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
     responseHandler(file, status) {
         file.status = status;
         file.percent = 100;
+        this.cd.markForCheck();
     }
     // método responsável por setar os argumentos do i18nPipe de acordo com a restrição.
     setPipeArguments(literalAttributes, literalArguments) {
@@ -28964,6 +28995,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
     stopUploadHandler(file) {
         file.status = PoUploadStatus.None;
         file.percent = 0;
+        this.cd.markForCheck();
     }
     updateFiles(files) {
         this.currentFiles = this.parseFiles(files);
@@ -28981,6 +29013,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
     uploadingHandler(file, percent) {
         file.status = PoUploadStatus.Uploading;
         file.percent = percent;
+        this.cd.markForCheck();
     }
     // retorna os objetos do array sem as propriedades: percent e displayName
     mapCleanUploadFiles(files) {
@@ -28991,7 +29024,7 @@ class PoUploadComponent extends PoUploadBaseComponent {
         return files.map(mapedByUploadFile);
     }
 }
-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(PoLanguageService)); };
+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$F, 7, ElementRef);
@@ -29048,11 +29081,11 @@ PoUploadComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUploadC
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.displaySendButton);
         }
-    }, directives: [PoFieldContainerComponent, i1.NgIf, PoUploadDragDropComponent, PoButtonComponent, PoUploadFileRestrictionsComponent, i1.NgClass, PoContainerComponent, i1.NgForOf, PoProgressComponent], encapsulation: 2 });
+    }, directives: [PoFieldContainerComponent, i1.NgIf, PoUploadDragDropComponent, PoButtonComponent, PoUploadFileRestrictionsComponent, i1.NgClass, PoContainerComponent, i1.NgForOf, PoProgressComponent], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoUploadComponent, [{
             type: Component,
-            args: [{ selector: 'po-upload', providers: [
+            args: [{ selector: 'po-upload', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         PoI18nPipe,
                         PoUploadService,
                         {
@@ -29066,7 +29099,7 @@ PoUploadComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUploadC
                             multi: true
                         }
                     ], template: "<po-field-container [p-label]=\"label\" [p-help]=\"help\" [p-optional]=\"!required && optional\">\n  <div class=\"po-upload\">\n    <input\n      #inputFile\n      class=\"po-upload-input\"\n      type=\"file\"\n      [accept]=\"allowedExtensions\"\n      [attr.name]=\"name\"\n      [disabled]=\"isDisabled\"\n      [multiple]=\"isMultiple\"\n      [required]=\"required\"\n      (change)=\"onFileChange($event)\"\n    />\n\n    <po-upload-drag-drop\n      *ngIf=\"displayDragDrop\"\n      [p-directory-compatible]=\"canHandleDirectory\"\n      [p-disabled]=\"isDisabled\"\n      [p-drag-drop-height]=\"dragDropHeight\"\n      [p-literals]=\"literals\"\n      (p-file-change)=\"onFileChangeDragDrop($event)\"\n      (p-select-files)=\"selectFiles()\"\n    >\n    </po-upload-drag-drop>\n\n    <po-button\n      *ngIf=\"!hideSelectButton && !displayDragDrop\"\n      #uploadButton\n      class=\"po-upload-button\"\n      for=\"file\"\n      [p-disabled]=\"isDisabled\"\n      [p-label]=\"selectFileButtonLabel\"\n      (p-click)=\"selectFiles()\"\n    >\n    </po-button>\n\n    <po-upload-file-restrictions\n      *ngIf=\"fileRestrictions && !hideRestrictionsInfo\"\n      class=\"po-upload-file-restrictions\"\n      [ngClass]=\"{ 'po-upload-file-restrictions-drag-drop': displayDragDrop }\"\n      [p-allowed-extensions]=\"fileRestrictions?.allowedExtensions\"\n      [p-max-files]=\"maxFiles\"\n      [p-max-file-size]=\"fileRestrictions?.maxFileSize\"\n      [p-min-file-size]=\"fileRestrictions?.minFileSize\"\n    >\n    </po-upload-file-restrictions>\n\n    <div *ngIf=\"currentFiles && currentFiles.length\" class=\"po-upload-progress-container\">\n      <po-container\n        p-no-shadow\n        [p-height]=\"hasMoreThanFourItems ? 280 : 'auto'\"\n        [p-no-border]=\"!hasMoreThanFourItems\"\n        [p-no-padding]=\"!hasMoreThanFourItems\"\n      >\n        <div [ngClass]=\"{ 'po-upload-progress-container-area po-pt-2 po-pl-1': hasMoreThanFourItems }\">\n          <po-progress\n            *ngFor=\"let file of currentFiles; trackBy: trackByFn\"\n            [p-info]=\"infoByUploadStatus[file.status]?.text(file.percent)\"\n            [p-info-icon]=\"infoByUploadStatus[file.status]?.icon\"\n            [p-status]=\"progressStatusByFileStatus[file.status]\"\n            [p-text]=\"file.displayName\"\n            [p-value]=\"file.percent\"\n            (p-cancel)=\"cancel(file)\"\n            (p-retry)=\"uploadFiles([file])\"\n          >\n          </po-progress>\n        </div>\n      </po-container>\n    </div>\n\n    <po-button\n      *ngIf=\"displaySendButton\"\n      class=\"po-upload-send-button\"\n      [class.po-mt-3]=\"hasMoreThanFourItems\"\n      p-type=\"primary\"\n      [p-disabled]=\"hasAnyFileUploading(currentFiles)\"\n      [p-label]=\"literals.startSending\"\n      (p-click)=\"uploadFiles(currentFiles)\"\n    >\n    </po-button>\n  </div>\n</po-field-container>\n" }]
-        }], function () { return [{ type: PoUploadService }, { type: i0.Renderer2 }, { type: PoI18nPipe }, { type: PoNotificationService }, { type: PoLanguageService }]; }, { inputFile: [{
+        }], function () { return [{ type: PoUploadService }, { type: i0.Renderer2 }, { type: PoI18nPipe }, { type: PoNotificationService }, { type: i0.ChangeDetectorRef }, { type: PoLanguageService }]; }, { inputFile: [{
                 type: ViewChild,
                 args: ['inputFile', { read: ElementRef, static: true }]
             }], poUploadDragDropComponent: [{
@@ -29202,7 +29235,7 @@ PoUrlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoUrlCompone
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("p-error-pattern", ctx.getErrorPattern());
         }
-    }, directives: [PoFieldContainerComponent, i1.NgIf, PoFieldContainerBottomComponent, PoIconComponent, PoCleanComponent], encapsulation: 2, changeDetection: 0 });
+    }, directives: [PoFieldContainerComponent, i1.NgIf, PoIconComponent, PoCleanComponent, PoFieldContainerBottomComponent], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoUrlComponent, [{
             type: Component,
@@ -29451,7 +29484,7 @@ PoInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoInputCom
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("p-error-pattern", ctx.getErrorPattern());
         }
-    }, directives: [PoFieldContainerComponent, i1.NgIf, PoFieldContainerBottomComponent, PoIconComponent, PoCleanComponent], encapsulation: 2, changeDetection: 0 });
+    }, directives: [PoFieldContainerComponent, i1.NgIf, PoIconComponent, PoCleanComponent, PoFieldContainerBottomComponent], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoInputComponent, [{
             type: Component,
@@ -29864,7 +29897,7 @@ PoRichTextToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("p-buttons", ctx.mediaButtons);
         }
-    }, directives: [PoButtonGroupComponent, i1.NgIf, PoRichTextImageModalComponent, PoRichTextLinkModalComponent, PoTooltipDirective], encapsulation: 2 });
+    }, directives: [PoButtonGroupComponent, i1.NgIf, PoTooltipDirective, PoRichTextImageModalComponent, PoRichTextLinkModalComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRichTextToolbarComponent, [{
             type: Component,
@@ -30056,11 +30089,11 @@ PoRichTextComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRichT
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("p-error-pattern", ctx.errorMsg);
         }
-    }, directives: [PoFieldContainerComponent, PoRichTextBodyComponent, PoRichTextToolbarComponent, PoFieldContainerBottomComponent], encapsulation: 2 });
+    }, directives: [PoFieldContainerComponent, PoRichTextBodyComponent, PoRichTextToolbarComponent, PoFieldContainerBottomComponent], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRichTextComponent, [{
             type: Component,
-            args: [{ selector: 'po-rich-text', providers: providers, template: "<po-field-container [p-help]=\"help\" [p-label]=\"label\" [p-optional]=\"!required && optional\">\n  <div class=\"po-field-container-content\">\n    <po-rich-text-body\n      #richTextBody\n      [p-height]=\"height\"\n      [p-model-value]=\"value\"\n      [p-placeholder]=\"placeholder\"\n      [p-readonly]=\"readonly\"\n      (p-change)=\"onChangeValue($event)\"\n      (p-commands)=\"richTextToolbar.setButtonsStates($event)\"\n      (p-selected-link)=\"richTextToolbar.selectedLink($event)\"\n      (p-shortcut-command)=\"richTextToolbar.shortcutTrigger()\"\n      (p-value)=\"updateValue($event)\"\n      (p-blur)=\"onBlur()\"\n    >\n    </po-rich-text-body>\n\n    <po-rich-text-toolbar\n      #richTextToolbar\n      [p-readonly]=\"readonly\"\n      (p-link-editing)=\"richTextBody.linkEditing($event)\"\n      (p-command)=\"richTextBody.executeCommand($event)\"\n    >\n    </po-rich-text-toolbar>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"errorMsg\"></po-field-container-bottom>\n</po-field-container>\n" }]
+            args: [{ selector: 'po-rich-text', providers: providers, 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    <po-rich-text-body\n      #richTextBody\n      [p-height]=\"height\"\n      [p-model-value]=\"value\"\n      [p-placeholder]=\"placeholder\"\n      [p-readonly]=\"readonly\"\n      (p-change)=\"onChangeValue($event)\"\n      (p-commands)=\"richTextToolbar.setButtonsStates($event)\"\n      (p-selected-link)=\"richTextToolbar.selectedLink($event)\"\n      (p-shortcut-command)=\"richTextToolbar.shortcutTrigger()\"\n      (p-value)=\"updateValue($event)\"\n      (p-blur)=\"onBlur()\"\n    >\n    </po-rich-text-body>\n\n    <po-rich-text-toolbar\n      #richTextToolbar\n      [p-readonly]=\"readonly\"\n      (p-link-editing)=\"richTextBody.linkEditing($event)\"\n      (p-command)=\"richTextBody.executeCommand($event)\"\n    >\n    </po-rich-text-toolbar>\n  </div>\n\n  <po-field-container-bottom [p-error-pattern]=\"errorMsg\"></po-field-container-bottom>\n</po-field-container>\n" }]
         }], function () { return [{ type: i0.ElementRef }, { type: PoRichTextService }]; }, { bodyElement: [{
                 type: ViewChild,
                 args: [PoRichTextBodyComponent, { static: true }]
@@ -30330,7 +30363,7 @@ PoNumberComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoNumberC
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("p-error-pattern", ctx.getErrorPatternMessage());
         }
-    }, directives: [PoFieldContainerComponent, i1.NgIf, PoFieldContainerBottomComponent, PoIconComponent, PoCleanComponent], encapsulation: 2, changeDetection: 0 });
+    }, directives: [PoFieldContainerComponent, i1.NgIf, PoIconComponent, PoCleanComponent, PoFieldContainerBottomComponent], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoNumberComponent, [{
             type: Component,
@@ -30489,7 +30522,7 @@ PoPasswordComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPassw
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("p-error-pattern", ctx.getErrorPattern());
         }
-    }, directives: [PoFieldContainerComponent, i1.NgIf, PoFieldContainerBottomComponent, PoCleanComponent, i1.NgClass], encapsulation: 2, changeDetection: 0 });
+    }, directives: [PoFieldContainerComponent, i1.NgIf, PoCleanComponent, i1.NgClass, PoFieldContainerBottomComponent], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPasswordComponent, [{
             type: Component,
@@ -30768,8 +30801,9 @@ function PoRadioGroupComponent_div_3_Template(rf, ctx) {
  *
  */
 class PoRadioGroupComponent extends PoRadioGroupBaseComponent {
-    constructor(differs) {
+    constructor(differs, cd) {
         super();
+        this.cd = cd;
         this.differ = differs.find([]).create(null);
     }
     ngAfterViewInit() {
@@ -30782,6 +30816,7 @@ class PoRadioGroupComponent extends PoRadioGroupBaseComponent {
         if (change) {
             removeDuplicatedOptions(this.options);
         }
+        this.cd.markForCheck();
     }
     eventClick(value, disabled) {
         if (!disabled) {
@@ -30826,7 +30861,7 @@ class PoRadioGroupComponent extends PoRadioGroupBaseComponent {
         return key >= 37 && key <= 40;
     }
 }
-PoRadioGroupComponent.ɵfac = function PoRadioGroupComponent_Factory(t) { return new (t || PoRadioGroupComponent)(i0.ɵɵdirectiveInject(i0.IterableDiffers)); };
+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$B, 7, ElementRef);
@@ -30862,11 +30897,11 @@ PoRadioGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRad
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngForOf", ctx.options);
         }
-    }, directives: [PoFieldContainerComponent, i1.NgForOf, PoFieldContainerBottomComponent], encapsulation: 2 });
+    }, directives: [PoFieldContainerComponent, i1.NgForOf, PoFieldContainerBottomComponent], encapsulation: 2, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoRadioGroupComponent, [{
             type: Component,
-            args: [{ selector: 'po-radio-group', providers: [
+            args: [{ selector: 'po-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => PoRadioGroupComponent),
@@ -30878,7 +30913,7 @@ PoRadioGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoRad
                             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" }]
-        }], function () { return [{ type: i0.IterableDiffers }]; }, { label: [{
+        }], function () { return [{ type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }]; }, { label: [{
                 type: Input,
                 args: ['p-label']
             }], help: [{
@@ -31583,7 +31618,7 @@ PoSelectComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSelectC
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngForOf", ctx.options);
         }
-    }, directives: [PoFieldContainerComponent, i1.NgClass, i1.NgIf, i1.NgForOf, PoFieldContainerBottomComponent, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i1.NgTemplateOutlet], encapsulation: 2, changeDetection: 0 });
+    }, directives: [PoFieldContainerComponent, i1.NgClass, i1.NgIf, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i1.NgForOf, i1.NgTemplateOutlet, PoFieldContainerBottomComponent], encapsulation: 2, changeDetection: 0 });
 __decorate([
     InputBoolean()
 ], PoSelectComponent.prototype, "readonly", void 0);
@@ -34147,7 +34182,7 @@ PoDynamicViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoDy
         if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.visibleFields.length);
         }
-    }, directives: [i1.NgIf, i1.NgForOf, i1.NgTemplateOutlet, PoDividerComponent, PoInfoComponent, i1.NgClass, PoTagComponent], encapsulation: 2 });
+    }, directives: [i1.NgIf, i1.NgForOf, PoDividerComponent, i1.NgTemplateOutlet, PoInfoComponent, i1.NgClass, PoTagComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoDynamicViewComponent, [{
             type: Component,
@@ -36904,7 +36939,7 @@ PoListViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoListV
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("p-actions", ctx.actions)("p-target", ctx.popupTarget);
         }
-    }, directives: [i1.NgIf, i1.NgForOf, PoPopupComponent, i1.NgSwitch, i1.NgSwitchCase, i2.RouterLinkWithHref, PoButtonComponent, i1.NgTemplateOutlet], encapsulation: 2, data: { animation: [
+    }, directives: [i1.NgIf, i1.NgForOf, i1.NgSwitch, i1.NgSwitchCase, i2.RouterLinkWithHref, PoButtonComponent, i1.NgTemplateOutlet, PoPopupComponent], encapsulation: 2, data: { animation: [
             trigger('showHideDetail', [
                 state('*', style({ 'overflow-y': 'visible' })),
                 state('void', style({ 'overflow-y': 'hidden' })),
@@ -37660,7 +37695,7 @@ PoMenuFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoMen
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("p-element-ref", ctx.inputFilterElement);
         }
-    }, directives: [i1.NgIf, PoCleanComponent, PoLoadingIconComponent], encapsulation: 2 });
+    }, directives: [i1.NgIf, PoLoadingIconComponent, PoCleanComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMenuFilterComponent, [{
             type: Component,
@@ -38329,7 +38364,7 @@ class PoMenuComponent extends PoMenuBaseComponent {
             return menus.some(menu => {
                 const formattedMenuLink = getFormattedLink(menu.link);
                 const menuLinkPath = `${urlPathWithoutLastFragment}${formattedMenuLink.substr(formattedMenuLink.lastIndexOf('/'))}`;
-                if (menuLinkPath === urlPath) {
+                if (menuLinkPath === urlPath && menuLinkPath === formattedMenuLink) {
                     this.linkActive = formattedMenuLink;
                     this.activateMenuItem(menu);
                     return true;
@@ -38697,7 +38732,7 @@ PoMenuComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoMenuCompo
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.hasFooter);
         }
-    }, directives: [i1.NgIf, i1.NgClass, i1.NgForOf, i1.NgTemplateOutlet, PoMenuFilterComponent, PoIconComponent, PoMenuItemComponent], encapsulation: 2 });
+    }, directives: [i1.NgIf, i1.NgClass, i1.NgTemplateOutlet, PoMenuFilterComponent, PoIconComponent, i1.NgForOf, PoMenuItemComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoMenuComponent, [{
             type: Component,
@@ -39295,7 +39330,7 @@ PoNavbarActionsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Po
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("p-icon-actions", ctx.iconActions);
         }
-    }, directives: [i1.NgForOf, PoNavbarActionPopupComponent, PoNavbarActionComponent], encapsulation: 2 });
+    }, directives: [i1.NgForOf, PoNavbarActionComponent, PoNavbarActionPopupComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoNavbarActionsComponent, [{
             type: Component,
@@ -39998,7 +40033,7 @@ PoNavbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoNavbarC
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", !ctx.applicationMenu);
         }
-    }, directives: [i1.NgClass, PoNavbarLogoComponent, PoNavbarItemsComponent, i1.NgIf, PoNavbarActionsComponent, PoNavbarItemNavigationComponent, PoMenuComponent], encapsulation: 2 });
+    }, directives: [i1.NgClass, PoNavbarLogoComponent, PoNavbarItemsComponent, i1.NgIf, PoNavbarItemNavigationComponent, PoNavbarActionsComponent, PoMenuComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoNavbarComponent, [{
             type: Component,
@@ -40614,7 +40649,7 @@ PoPageDefaultComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPa
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.hasPageHeader());
         }
-    }, directives: [PoPageComponent, i1.NgIf, PoPageContentComponent, PoPageHeaderComponent, PoDropdownComponent, PoButtonComponent], encapsulation: 2 });
+    }, directives: [PoPageComponent, i1.NgIf, PoPageHeaderComponent, PoDropdownComponent, PoButtonComponent, PoPageContentComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageDefaultComponent, [{
             type: Component,
@@ -40916,7 +40951,7 @@ PoPageDetailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPag
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.hasPageHeader());
         }
-    }, directives: [PoPageComponent, i1.NgIf, PoPageContentComponent, PoPageHeaderComponent, PoButtonComponent], encapsulation: 2 });
+    }, directives: [PoPageComponent, i1.NgIf, PoPageHeaderComponent, PoButtonComponent, PoPageContentComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageDetailComponent, [{
             type: Component,
@@ -41228,7 +41263,7 @@ PoPageEditComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageE
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.hasPageHeader());
         }
-    }, directives: [PoPageComponent, i1.NgIf, PoPageContentComponent, PoPageHeaderComponent, PoButtonComponent], encapsulation: 2 });
+    }, directives: [PoPageComponent, i1.NgIf, PoPageHeaderComponent, PoButtonComponent, PoPageContentComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageEditComponent, [{
             type: Component,
@@ -41718,7 +41753,7 @@ PoPageListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoPageL
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.hasPageHeader());
         }
-    }, directives: [PoPageComponent, i1.NgIf, PoPageContentComponent, PoPageHeaderComponent, PoButtonComponent, PoDropdownComponent, i1.NgClass, PoDisclaimerGroupComponent], encapsulation: 2 });
+    }, directives: [PoPageComponent, i1.NgIf, PoPageHeaderComponent, PoButtonComponent, PoDropdownComponent, i1.NgClass, PoDisclaimerGroupComponent, PoPageContentComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoPageListComponent, [{
             type: Component,
@@ -42927,7 +42962,7 @@ PoSlideComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSlideCom
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.hasSlides && ctx.slides.length > 1);
         }
-    }, directives: [i1.NgForOf, i1.NgIf, PoSlideItemComponent, PoSlideControlComponent, PoSlideCirclesComponent], encapsulation: 2 });
+    }, directives: [i1.NgForOf, PoSlideItemComponent, i1.NgIf, PoSlideControlComponent, PoSlideCirclesComponent], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoSlideComponent, [{
             type: Component,
@@ -43814,7 +43849,7 @@ PoStepperComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PoSteppe
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.usePoSteps);
         }
-    }, directives: [i1.NgForOf, i1.NgIf, PoStepperStepComponent], encapsulation: 2 });
+    }, directives: [i1.NgForOf, PoStepperStepComponent, i1.NgIf], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PoStepperComponent, [{
             type: Component,